@import url("avatar_offsets.css");

body {text-align: center;background-position: 50% 50%; background-image: url("../img/bru.gif"); background-attachment: fixed; background-repeat: no-repeat; font: 13px Verdana;cursor: default; margin: 0;  background-color: #000; color: #ccc;}
a {font: bold 10pt "微软雅黑" serif;text-decoration: none;color: #CC6666;}
a:hover {color: #ffff99;}
table {border: 1px;}
tr {font-size: 9pt}td {font-size: 9pt}th {font-size: 9pt}
input {font-family: "微软雅黑";}
select {font-family: "微软雅黑";font-size: 10.5pt;}
.title {font-family: "微软雅黑";margin: 15px;color: #ccc; font-size:30px;font-weight:bold}
.subtitle {font-family: "微软雅黑";margin: 6px;color: #CDBB01;font-size: 20px; font-weight:bold}
.headerlink{font-family: "微软雅黑";font-size: 15px;font-weight:bold; }
.small {font-size: 9pt}
.b1 {border-right: #966 1px solid; border-top: #fcc 1px solid; background: #300; border-left: #fcc 1px solid; color: #fff; border-bottom: #966 1px solid; text-align: center; filter:alpha(opacity=80); -moz-opacity:0.8; opacity:0.8;font-family: "微软雅黑";font-size: 11pt}
.b2, .admin td {border-right: #966 1px solid; border-top: #fcc 1px solid; background: #500; border-left: #fcc 1px solid; color: #fff; border-bottom: #966 1px solid; text-align: center; filter:alpha(opacity=90); -moz-opacity:0.9; opacity:0.9;font-family: "微软雅黑";font-size: 10pt}
.b3 {border-right: #966 1px solid; border-top: #fcc 1px solid; border-left: #fcc 1px solid; color: #fff; border-bottom: #966 1px solid; text-align: center; font-family: "微软雅黑";font-size: 10.5pt}
.b3 div{position:relative;}
.t1 {text-align:center; font-weight: bold; color: black; border-left-style: none; border-right: 1.5pt solid black; border-top-style: none; border-bottom: 1.5pt solid black}
.t2 {text-align:center; font-weight: bold; color: black; border-left-style: none; border-right-style: none; border-top-style: none; border-bottom: 1.5pt solid black}
.t3 {text-align:center; font-weight: bold; color: black; border-left-style: none; border-right: 1.5pt solid black; border-top-style: none; border-bottom-style: none}
.t4 {text-align:center; font-weight: normal; color: black; border-style: none; background-color: #808080}
.t5 {text-align:center; font-weight: normal; color: black; border-style: none; background-color: #333333}
.t6 {text-align:center; font-family: "微软雅黑";}
.v1 {background-color:#ffff00; filter:alpha(opacity=90); -moz-opacity:0.9; opacity:0.9; text-align: center; font-family: "微软雅黑"; color: #000000; font-weight:bold;}
.clit {color: #feea23; font: 900 18px "微软雅黑"; }
.yellow{color:#CDBB01; font: 900 serif;}
.clan{color: #CDBB01;font: 900 serif;}
.blue{color: #0000ff;font: 900 serif;}
.red{color: #CC6666;font: 900 serif;}
.green{color: #669900;font: 900 serif;}
.lime{color: #33FF33;font: 900 serif;}
.purple{color: #C490D5;font: 900 serif;}
.orange{color: #ffc000;font: 900 serif;}
.cyan{color: #00FFFF;font: 900 serif;}
.gray{color: #C0C0C0;font: 900 serif;}
.marine{color: #70DB93;font: 900 serif;}
.dmg {font-size: 900 12pt; color: #ff0000}

/* =========================================================
   排行榜名次整行颜色
   第1名：红色
   第2-5名：青色
   第6-10名：黄色
   第11名起：保持默认颜色
   ========================================================= */

.rank-table tr.red > td {
    color: #d1606b !important;
}

.rank-table tr.cyan > td {
    color: #86bdc6 !important;
}

.rank-table tr.yellow > td {
    color: #d9c584 !important;
}

#main {
white-space:nowrap;
vertical-align:middle;
}
#chatlist {
    margin: 0;
    width: 100%;
    height: 220px;

    box-sizing: border-box;

    overflow-y: auto;
    overflow-x: hidden;

    word-break: break-all;

    text-align: left;

    padding: 4px 6px;
}
#sendchat{
MARGIN: 0px;
padding:0px;
border:0px; 
height:30px;
width:100%;
}
#chatmsg{
width:530px;
border-right: #ddc 2px solid;
border-top: #666 2px solid;
border-left: #666 2px solid;
border-bottom: #ddc 2px solid;
}

#gamecmd input.cmdbutton{
	width:85px;height:25px;margin:2;font-family: "微软雅黑";font-size:11pt
}

.footerline {
height: 1px;
background-image: url("../../img/footer_line.gif");
}
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } 
.clearfix {display: inline-table;} /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */ 

/* ========================================================================
   Responsive game UI patch
   Desktop: profile/chat left + command panel right
   Tablet:  flexible two-column layout
   Mobile:  profile -> command -> chat single-column layout
   ======================================================================== */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	min-width: 0;
	background-size: auto;
}
img { max-width: 100%; }

.site-header {
	width: min(1220px, calc(100% - 24px));
	margin: 0 auto;
}
.site-content {
	width: 100%;
	min-height: 520px;
	padding: 0 12px;
}
.title {
	margin: 12px 0 8px;
	font-size: clamp(22px, 3vw, 30px);
}
.headerlink {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 3px 8px;
	line-height: 1.5;
	margin-bottom: 8px;
}
.headerlink a { white-space: nowrap; }

.game-shell {
	width: min(1220px, 100%);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	grid-template-areas:
		"main command"
		"chat command";
	gap: 6px;
	align-items: stretch;
}
.game-main-panel { grid-area: main; min-width: 0; min-height: var(--main-panel-height); }
.game-command-panel {
	grid-area: command;
	min-width: 0;
	border: 1px solid #966;
	background: rgba(0, 0, 0, .42);
	height: 100%;

	display: flex;
	flex-direction: column;
}
.game-chat-panel { grid-area: chat; min-width: 0; }
.panel-title {
	min-height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3px 8px;
}
.command-panel-body {
	flex: 1;
	min-height: 0;
	padding: 0;
	text-align: left;
}
#log {
	min-height: 40px;
	padding: 4px 6px;
	overflow-wrap: anywhere;
}

#log:empty {
	display: none;
}
.gamecmd-form { margin: 0; }
#cmd { padding: 4px 6px 10px; }

#main {
	white-space: normal;
	vertical-align: middle;
	min-width: 0;
}
.profile-wrap { width: 100%; min-width: 0; }
.profile-status-scroll {
	width: 100%;
	overflow-x: auto;
	overflow-y: visible;
	-webkit-overflow-scrolling: touch;
	box-sizing: border-box;
}
.profile-table {
	width: 100%;
	min-width: 650px;
	border-collapse: collapse;
	table-layout: fixed;
}
.profile-col-avatar { width: 96px; }
.profile-col-main-label { width: 96px; }
.profile-col-main-value-a { width: 90px; }
.profile-col-main-value-b { width: auto; }
.profile-col-status-label { width: 66px; }
.profile-col-status-value { width: 185px; }
.profile-col-qba-label { width: 66px; }
.profile-col-qba-value { width: 165px; }
.profile-table td { padding: 1px 4px; }
.profile-lv { min-width: 70px; }
.profile-label { min-width: 58px; white-space: nowrap; }
.profile-value { min-width: 88px; white-space: nowrap; }
.profile-name { min-width: 120px; }
.profile-avatar {
    width: 96px;
    min-width: 96px;
    padding: 2px !important;
    vertical-align: middle;
}

.profile-avatar-composite {
    position: relative;
    width: 90px;
    height: 90px;
    margin: 0 auto;

    overflow: hidden;
    box-sizing: border-box;
}

.profile-avatar-bg {
    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    z-index: 1;
}

.profile-avatar-front {
    position: absolute;

    left: 50%;
    top: 10%;

    width: 100%;
    height: 100%;

    object-fit: contain;

    transform: translate(calc(-50% + var(--avatar-profile-x, 0px)), calc(-15% + var(--avatar-profile-y, 0px))) scale(var(--avatar-profile-scale, 2.88));
    transform-origin: center top;

    z-index: 2;
}

/* =========================================================
   死亡界面人物
   ========================================================= */

.death-avatar-composite {
    position: relative;

    width: 180px;
    height: 220px;

    margin: 12px auto;

    overflow: hidden;
    box-sizing: border-box;
}

.death-avatar-bg {
    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    z-index: 1;
}

.battle-player-img,
.death-avatar-front {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center center;

    transform:
        translate(
            calc(-50% + var(--avatar-battle-x, 0px)),
            calc(-40% + var(--avatar-battle-y, 0px))
        )
        scale(var(--avatar-battle-scale, 1.5));

    transform-origin: center center;

    max-width: none;

    z-index: 2;
}

.battle-player-img {
}

.death-avatar-front {
    filter: grayscale(100%);
    opacity: 0.85;
}

.profile-state { min-width: 220px; }

/* 姿态、策略下拉框文字居中 */
#pose,
#tactic {
	text-align: center;
	text-align-last: center;
}

#pose option,
#tactic option {
	text-align: center;
}

.state-figure {
	--state-color: #55e9bd;
	--state-glow: rgba(85,233,189,.7);
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 194px;
	min-height: 82px;
	color: var(--state-color);
}
.state-figure.state-caution { --state-color: #ffd34d; --state-glow: rgba(255,184,38,.82); }
.state-figure.state-danger { --state-color: #ff3b3b; --state-glow: rgba(255,28,28,.92); }
.state-figure.state-dead { --state-color: #9babb5; --state-glow: rgba(255,42,42,.62); }
.body-monitor {
	position: relative;
	flex: 0 0 62px;
	width: 62px;
	height: 82px;
	overflow: hidden;
	border: 1px solid color-mix(in srgb, var(--state-color) 72%, transparent);
	border-radius: 4px;
	background:
		linear-gradient(90deg, transparent 49%, color-mix(in srgb, var(--state-color) 18%, transparent) 50%, transparent 51%),
		linear-gradient(0deg, rgba(0,0,0,.35), rgba(7,24,31,.2));
	box-shadow: inset 0 0 12px rgba(0,0,0,.75), 0 0 7px var(--state-glow);
}
.body-status-img {
	position: absolute;
	z-index: 2;
	left: 50%;
	top: 5px;
	width: 25px;
	height: 72px;
	max-width: none;
	transform: translateX(-50%);
	image-rendering: pixelated;
	filter: saturate(1.1) drop-shadow(0 0 3px var(--state-glow));
}
.body-grid {
	position: absolute;
	z-index: 1;
	inset: 0;
	background:
		repeating-linear-gradient(0deg, transparent 0px, transparent 7px, color-mix(in srgb, var(--state-color) 13%, transparent) 8px),
		repeating-linear-gradient(90deg, transparent 0, transparent 9px, color-mix(in srgb, var(--state-color) 9%, transparent) 10px);
	opacity: .7;
}
.body-scan,
.body-effect {
	position: absolute;
	z-index: 4;
	left: 18px;
	top: 5px;
	width: 26px;
	height: 72px;
	pointer-events: none;
	-webkit-mask-image: var(--body-mask);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: 25px 72px;
	mask-image: var(--body-mask);
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: 25px 72px;
}
.body-scan {
	background: linear-gradient(
		to bottom,
		transparent 0%,
		transparent 42%,
		var(--state-color) 47%,
		#ffffff 50%,
		var(--state-color) 53%,
		transparent 58%,
		transparent 100%
	);
	background-size: 100% 300%;
	background-position: center -150%;
	filter: drop-shadow(0 0 5px var(--state-color));
	animation: vital-scan 2.8s linear infinite;
}
.state-caution .body-scan { animation-duration: 1.8s; }
.state-danger .body-scan { animation-duration: .9s; }
.state-danger .body-monitor { animation: danger-pulse .72s ease-in-out infinite alternate; }
.state-dead .body-status-img { filter: grayscale(1) brightness(.45); opacity: .7; }
.state-dead .body-scan {
	-webkit-mask-image: none;
	mask-image: none;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(0deg, transparent 0 8px, rgba(255,35,35,.62) 9px 10px, transparent 11px 17px);
	animation: dead-glitch 1.1s steps(2,end) infinite;
}
.body-effect { z-index: 5; }
.effect-poison {
	background: radial-gradient(circle at 30% 82%, rgba(210,67,255,.9), transparent 34%), radial-gradient(circle at 72% 45%, rgba(150,31,220,.84), transparent 29%);
	animation: poison-rise 2.2s ease-in-out infinite;
}
.effect-shock {
	background: repeating-linear-gradient(118deg, transparent 0 7px, rgba(255,241,67,.95) 8px 9px, transparent 10px 16px);
	animation: shock-flash .43s steps(2,end) infinite;
}
.effect-burn {
	background: repeating-linear-gradient(0deg, rgba(255,58,8,.08) 0 5px, rgba(255,181,36,.82) 7px, transparent 11px 17px);
	animation: burn-rise 1.25s linear infinite;
}
.effect-frozen {
	background: linear-gradient(to bottom, rgba(205,250,255,.95), rgba(54,151,255,.5) 48%, transparent 72%);
	animation: frost-sweep 2.4s ease-in-out infinite alternate;
}
.injury-layer { position: absolute !important; z-index: 8; inset: 0; pointer-events: none; }
.hurt { position: absolute; width: 15px; height: 15px; max-width: none; pointer-events: auto; cursor: pointer; filter: drop-shadow(0 0 2px #ff2020); }
.hurt-h { top: 1px; left: 24px; }
.hurt-b { top: 22px; left: 24px; }
.hurt-a { top: 34px; left: 13px; }
.hurt-f { top: 63px; left: 24px; }
.state-readout {
	width: 82px;
	text-align: left;
	font-family: Consolas, "Courier New", monospace;
	line-height: 1.1;
	text-shadow: 0 0 6px var(--state-glow);
}
.state-word { display: none; font-size: 15px; font-weight: 700; letter-spacing: .08em; }
.state-fine .state-word-fine,
.state-caution .state-word-caution,
.state-danger .state-word-danger,
.state-dead .state-word-dead { display: block; }
.state-readout small { display: block; margin-top: 5px; font-size: 8px; line-height: 1.25; opacity: .78; }
.status-poison .state-readout::after,
.status-shock .state-readout::after,
.status-burn .state-readout::after,
.status-frozen .state-readout::after { display: block; margin-top: 4px; font-size: 9px; font-weight: 700; }
.status-poison .state-readout::after { content: "TOXIN"; color: #dc73ff; }
.status-shock .state-readout::after { content: "SHOCK"; color: #fff04a; }
.status-burn .state-readout::after { content: "BURN"; color: #ff7138; }
.status-frozen .state-readout::after { content: "FROZEN"; color: #74dfff; }
.status-poison.status-shock .state-readout::after,
.status-poison.status-burn .state-readout::after,
.status-poison.status-frozen .state-readout::after,
.status-shock.status-burn .state-readout::after,
.status-shock.status-frozen .state-readout::after,
.status-burn.status-frozen .state-readout::after { content: "MULTI ERROR"; color: #ff3b3b; }
@keyframes vital-scan {
	0% { background-position: center -150%; opacity: .35; }
	15% { opacity: 1; }
	85% { opacity: 1; }
	100% { background-position: center 150%; opacity: .35; }
}
@keyframes danger-pulse { from { box-shadow: inset 0 0 10px rgba(0,0,0,.8), 0 0 4px var(--state-glow); } to { box-shadow: inset 0 0 8px rgba(255,0,0,.16), 0 0 13px var(--state-glow); } }
@keyframes dead-glitch { 0%,100% { transform: translate(0,0); opacity: .28; } 35% { transform: translate(3px,-2px); opacity: .75; } 70% { transform: translate(-2px,2px); opacity: .42; } }
@keyframes poison-rise { 0%,100% { transform: translateY(10px) scale(.9); opacity: .38; } 50% { transform: translateY(-8px) scale(1.12); opacity: .88; } }
@keyframes shock-flash { 0%,55% { opacity: .12; transform: translateX(-2px); } 56%,100% { opacity: .92; transform: translateX(2px); } }
@keyframes burn-rise { from { background-position: 0 18px; opacity: .45; } to { background-position: 0 -18px; opacity: .92; } }
@keyframes frost-sweep { from { transform: translateY(-58%); opacity: .38; } to { transform: translateY(38%); opacity: .9; } }
.status-animation-toggle {
	flex: 0 0 38px;
	width: 38px;
	height: 54px;
	padding: 4px 2px;
	border: 1px solid rgba(85,233,189,.62);
	border-radius: 4px;
	background: linear-gradient(180deg, rgba(13,42,48,.92), rgba(3,13,17,.96));
	color: #7fffd4;
	font: 9px/1.15 Consolas, "Microsoft YaHei", sans-serif;
	cursor: pointer;
	box-shadow: inset 0 0 7px rgba(85,233,189,.13), 0 0 4px rgba(85,233,189,.25);
	appearance: none;
}
.status-animation-toggle:hover { border-color: #b8ffeb; color: #fff; }
.status-animation-toggle:focus-visible { outline: 1px solid #fff; outline-offset: 2px; }
.status-animation-toggle .toggle-light {
	display: block;
	width: 7px;
	height: 7px;
	margin: 0 auto 4px;
	border-radius: 50%;
	background: #55e9bd;
	box-shadow: 0 0 7px #55e9bd;
}
.status-animation-toggle .toggle-label { display: block; }
.status-animation-toggle b { display: block; margin-top: 2px; font-size: 10px; }
.status-animation-toggle b::after { content: "开"; }
html.status-animation-off .status-animation-toggle {
	border-color: rgba(155,171,181,.55);
	color: #aab7bf;
	box-shadow: inset 0 0 6px rgba(155,171,181,.1);
}
html.status-animation-off .status-animation-toggle .toggle-light {
	background: #66747d;
	box-shadow: none;
}
html.status-animation-off .status-animation-toggle b::after { content: "关"; }
html.status-animation-off .body-scan,
html.status-animation-off .body-effect,
html.status-animation-off .state-danger .body-monitor {
	animation: none !important;
}
html.status-animation-off .body-scan {
	background-position: center center;
	opacity: .5;
}
html.status-animation-off .body-effect { transform: none !important; opacity: .58; }
.meter-cell { min-width: 210px; }
.meter-cell img {
    max-width: 100%;
    height: 10px !important;
    display: block;
}
.skill-line, .money-line { white-space: nowrap; }
.profile-table select { max-width: 100%; }

.inventory-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
	gap: 10px;
	align-items: stretch;
	width: 100%;
	padding-top: 6px;
}
.inventory-card {
	min-width: 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.equip-table,
.pack-table {
	width: 100%;
	min-width: 390px;
	border-collapse: collapse;
	table-layout: auto;
	height: 186px;
}
.equip-table td,
.pack-table td {	padding: 2px 4px;}
.equip-table tr {	height: 28px;}
.equip-table td {
	height: 28px;
	vertical-align: middle;
}
.pack-table tr {	height: 28px;}
.pack-table td {
	height: 28px;
	vertical-align: middle;
}
.nowrap-col { white-space: nowrap !important; word-break: keep-all; }
.type-col { min-width: 74px; }
.usage-col { min-width: 74px; }
.name-col { min-width: 110px; }
.stat-col { width: 38px; min-width: 38px; white-space: nowrap; }
.section-caption {
	width: 42px;
	min-width: 42px;
	white-space: nowrap;
	writing-mode: horizontal-tb;
}
.item-name-cell { min-width: 120px; }
.item-name-cell input {
	margin-right: 4px;
	height: 22px;
	line-height: 20px;
	box-sizing: border-box;
	vertical-align: middle;
}

.command-ui { width: 100%; }
.command-question { margin: 0 0 12px; }
.command-primary-row {
	display: grid;
	grid-template-columns: 90px minmax(0, 1fr);
	gap: 7px;
	align-items: center;
	margin-bottom: 10px;
}
.move-select { width: 100%; min-width: 0; height: 29px; }
.command-items {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 10px;
}
.command-item-row {
	display: grid;
	grid-template-columns: 90px minmax(0, 1fr);
	gap: 6px;
	align-items: center;
	min-width: 0;
}
.command-item-text {
	min-width: 0;
	overflow-wrap: anywhere;
	line-height: 1.35;
}
.command-button-group {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 5px;
	margin: 6px 0;
}
.command-enchant-title {
	margin: 10px 0 2px;
	font-weight: bold;
	color: #ffdd66;
}
.command-enchant-group { margin-top: 3px; }
#gamecmd input.cmdbutton {
	width: 100%;
	min-width: 0;
	height: 30px;
	margin: 0;
	padding: 1px 4px;
	font-family: "微软雅黑";
	font-size: 10.5pt;
	white-space: nowrap;
}
.command-primary-row > .cmdbutton,
.command-item-row > .cmdbutton { width: 90px !important; }

.chat-panel-body { padding: 0; }
#sendchat {
	margin: 0;
	padding: 4px;
	border: 0;
	height: auto;
	width: 100%;
	display: grid;
	grid-template-columns: auto minmax(80px, 1fr) auto auto;
	gap: 4px;
	align-items: center;
}
#chatmsg {
	width: 100%;
	min-width: 0;
	border-right: #ddc 2px solid;
	border-top: #666 2px solid;
	border-left: #666 2px solid;
	border-bottom: #ddc 2px solid;
}

@media (prefers-reduced-motion: reduce) {
	.body-scan, .body-effect, .state-danger .body-monitor { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

@media screen and (max-width: 1050px) {
	.site-content { padding: 0 8px; }
	.game-shell { grid-template-columns: minmax(0, 1fr) 285px; }
	.command-button-group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.b1 { font-size: 10.5pt; }
	.b2, .admin td { font-size: 9.5pt; }
	.b3 { font-size: 10pt; }
	.inventory-grid { gap: 6px; }
}

@media screen and (max-width: 760px) {
	body {
		background-attachment: scroll;
		background-position: center top;
	}
	.site-header { width: calc(100% - 12px); }
	.site-content { padding: 0 6px; min-height: 0; }
	.title { margin: 8px 0 5px; font-size: 22px; }
	.headerlink { font-size: 13px; gap: 2px 7px; margin-bottom: 6px; }

	.game-shell {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"main"
			"command"
			"chat";
		gap: 8px;
	}
	.game-command-panel { width: 100%; }
	.command-panel-body { min-height: 0; }
	#cmd { padding: 8px; }

	.inventory-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.inventory-card { width: 100%; }
	.equip-table, .pack-table { min-width: 430px; }

	.command-primary-row,
	.command-item-row { grid-template-columns: 92px minmax(0, 1fr); }
	.command-primary-row > .cmdbutton,
	.command-item-row > .cmdbutton { width: 92px !important; }
	.command-button-group { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	#gamecmd input.cmdbutton { min-height: 34px; font-size: 11pt; }
	.move-select { min-height: 34px; }

	#sendchat { grid-template-columns: auto minmax(0, 1fr) auto auto; }
}

@media screen and (max-width: 480px) {
	.headerlink { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 3px; }
	.headerlink a { flex: 0 0 auto; }
	.profile-table { min-width: 620px; }
	.inventory-card { border: 1px solid rgba(153, 102, 102, .55); }
	.command-button-group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.command-question { margin-bottom: 8px; }
	#sendchat {
		grid-template-columns: auto minmax(0, 1fr) auto;
	}
	#sendchat #ref { grid-column: 3; }
}


/* 2026-09-05 layout hotfix: keep the legacy profile table on a valid 8-column grid. */
.game-main-panel,
.game-command-panel,
.game-chat-panel {
	align-self: start;
}

.game-main-panel {
	min-height: 0;
	overflow: visible;
}

.profile-wrap {
	height: auto;
}

.profile-table {
	height: auto !important;
}

.profile-table tr {
	height: auto;
}

.profile-state {
	overflow: hidden;
}

.state-figure {
	vertical-align: middle;
}

.inventory-grid {
	align-items: start;
}

.inventory-card table {
	height: auto !important;
}

/* 战斗界面与普通人物界面统一宽度 */
.battle-panel {
    width: 100%;
    min-height: var(--main-panel-height);
    height: var(--main-panel-height);
    border-collapse: collapse;
    table-layout: fixed;
}

.battle-panel > tbody > tr > td {
    width: 100%;
    box-sizing: border-box;
    vertical-align: top;
    padding-top: 15px;
}

.battle {
    width: auto;
    min-width: 520px;
    max-width: 620px;
    margin: 0 auto;
    border-collapse: collapse;
    table-layout: auto;
}

.battle td {
    padding: 2px 10px;
    text-align: center;
    white-space: nowrap;
    line-height: 1.35;
}

.battle-side {
    width: 42%;
}

.battle img {
    display: block;
    margin: 0 auto 4px;
}

.battle-vs {
    width: 16%;
    text-align: center;
}

.battle-spacer td {
    height: 12px;
    padding: 0 !important;
    line-height: 12px;
}

.command-text-input {
    width: 100%;
    box-sizing: border-box;
}

:root {
    --main-panel-height: 420px;
}

@media screen and (max-width: 768px) {
    .game-main-panel,
    .battle-panel {
        min-height: 0;
        height: auto;
    }
}

/* =========================
   战斗头像
   ========================= */

.battle-character-cell {
    text-align: center;
    vertical-align: middle;
}

.battle-portrait {
    position: relative;

    width: 180px;
    height: 220px;

    margin: 0 auto;

    overflow: hidden;
    box-sizing: border-box;
}

.battle-side-stack {
    display: inline-flex;
    align-items: flex-end;
    gap: 12px;
}

.battle-side-stack-left {
    flex-direction: row;
}

.battle-side-stack-right {
    flex-direction: row;
}

.battle-np-shell {
    position: relative;

    width: 14px;
    height: 220px;

    box-sizing: border-box;
    overflow: hidden;

    border: 1px solid rgba(255,170,70,.88);
    background: rgba(0,0,0,.58);

    box-shadow:
        inset 0 0 5px rgba(0,0,0,.85),
        0 0 4px rgba(255,130,0,.18);

    /* NP 填充永远贴着槽底部 */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    padding: 1px;
}

.battle-np-fill {
    position: relative;

    width: 100%;
    height: 0;

    flex: 0 0 auto;

    background: linear-gradient(
        to top,
        #9a4700 0%,
        #7a3200 55%,
        #4d1e00 100%
    );

    box-shadow:
        inset 0 0 4px rgba(255,210,150,.16);
}

.battle-np-shell-full {
    border-color: #ffb14a;
    box-shadow:
        inset 0 0 6px rgba(255,180,90,.18),
        0 0 10px rgba(255,140,20,.55);
}

.battle-np-fill-full {
    background: linear-gradient(
        to top,
        #b64a00 0%,
        #ff8600 55%,
        #ffd79a 100%
    );
    box-shadow:
        0 0 12px rgba(255,152,31,.85),
        inset 0 0 5px rgba(255,240,205,.55);
}

.battle-np-shell-unknown {
    border-color: rgba(215,170,118,.72);
    box-shadow: inset 0 0 5px rgba(0,0,0,.85);
}

/* 玩家战斗大图 */
.player-battle-portrait {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}


/* NPC：地图背景 */
.npc-battle-portrait {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}


/* NPC透明立绘 */
.battle-npc-img {
    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(calc(-50% + var(--avatar-battle-x, 0px)), calc(-50% + var(--avatar-battle-y, 0px))) scale(var(--avatar-battle-scale, 1.5));
    transform-origin: center center;

    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center bottom;
}


/* 死亡状态 */
.battle-dead {
    filter: grayscale(100%);
    opacity: 0.75;
}

/* =========================================================
   注册界面头像选择器
   ========================================================= */

.avatar-selector {
    display: flex;
    justify-content: center;
    align-items: flex-start;

    gap: 24px;

    width: 100%;
    margin: 20px auto 28px;

    box-sizing: border-box;
}


/* 每一个UI */
.avatar-select-box {
    width: 220px;

    text-align: center;

    box-sizing: border-box;
}


/* 标题 */
.avatar-select-title {
    margin-bottom: 8px;

    font-size: 16px;
    font-weight: bold;

    color: #ffffff;
}


/* 人物、背景单独预览 */
.avatar-single-preview {
    position: relative;
    width: 220px;
    height: 220px;
    overflow: hidden;
    box-sizing: border-box;

    border: 1px solid rgba(255,255,255,0.35);

    background:
        linear-gradient(
            45deg,
            #444 25%,
            transparent 25%
        ),
        linear-gradient(
            -45deg,
            #444 25%,
            transparent 25%
        ),
        linear-gradient(
            45deg,
            transparent 75%,
            #444 75%
        ),
        linear-gradient(
            -45deg,
            transparent 75%,
            #444 75%
        ),
        #333;

    background-size: 20px 20px;

    background-position:
        0 0,
        0 10px,
        10px -10px,
        -10px 0;
}


/* 单独预览图片 */
.avatar-single-preview img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* 背景图片单独看时要铺满 */
#backgroundOnlyImg {
    object-fit: cover;
}


/* =========================
   最终头像组合
   ========================= */

.avatar-composite-preview {
    position: relative;

    width: 220px;
    height: 220px;

    overflow: hidden;

    box-sizing: border-box;

    border: 1px solid rgba(255,255,255,0.55);

    background: #000;
}


/* 最终头像背景 */
.avatar-composite-bg {
    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    z-index: 1;
}


/* 最终头像人物 */
.avatar-composite-front {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 100%;
    height: 100%;

    object-fit: contain;

    transform:
        translate(-50%, -50%)
        scale(1.15);

    transform-origin: center center;

    z-index: 2;
}


/* =========================
   左右箭头
   ========================= */

.avatar-arrow-row {
    display: flex;

    justify-content: center;
    align-items: center;

    gap: 16px;

    margin-top: 9px;
}


.avatar-arrow {
    width: 42px;
    height: 30px;

    cursor: pointer;

    font-size: 17px;
    line-height: 26px;
}


#avatarNumber,
#backgroundNumber {
    display: inline-block;

    min-width: 30px;

    font-size: 14px;

    text-align: center;
}


.avatar-final-label {
    margin-top: 12px;

    font-size: 14px;

    color: #cccccc;
}


/* =========================
   窄屏
   ========================= */

@media screen and (max-width: 760px) {

    .avatar-selector {
        flex-direction: column;
        align-items: center;

        gap: 22px;
    }
}
/* ========================================================================
   2026-09-06 Admin UI redesign
   ======================================================================== */
.admin-shell {
    width: min(1480px, calc(100% - 24px));
    margin: 12px auto 28px;
    text-align: left;
    color: #e8e8e8;
}
.admin-topbar,
.admin-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}
.admin-topbar { margin-bottom: 12px; }
.admin-topbar h1,
.admin-panel-head h2 { margin: 0; color: #ead85d; font-family: "微软雅黑"; }
.admin-topbar h1 { font-size: 25px; }
.admin-panel-head h2 { font-size: 20px; }
.admin-muted { color: #aaa; font-size: 12px; line-height: 1.5; }
.admin-breadcrumb {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 8px 0 12px;
    color: #999;
}
.admin-panel {
    border: 1px solid rgba(205, 187, 1, .35);
    background: rgba(8, 8, 12, .9);
    border-radius: 8px;
    padding: 16px;
    margin: 10px 0;
    box-shadow: 0 6px 22px rgba(0,0,0,.28);
}
.admin-panel h3 {
    color: #d8ca58;
    font-size: 15px;
    margin: 20px 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(205,187,1,.24);
}
.admin-menu-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    gap: 12px;
    margin: 14px 0;
}
.admin-menu-grid.compact { grid-template-columns: repeat(2, minmax(260px, 1fr)); }
.admin-menu-card {
    display: block;
    min-height: 94px;
    padding: 16px;
    border: 1px solid rgba(204,102,102,.5);
    border-radius: 8px;
    background: linear-gradient(145deg, rgba(80,0,0,.8), rgba(30,0,0,.88));
    color: #f5f5f5;
    transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.admin-menu-card:hover {
    transform: translateY(-2px);
    border-color: #e6d75e;
    background: linear-gradient(145deg, rgba(105,15,15,.92), rgba(45,4,4,.95));
}
.admin-menu-card strong { display: block; margin-bottom: 7px; font-size: 17px; color: #ffe97a; }
.admin-menu-card span { display: block; color: #cfcfcf; font-weight: normal; font-size: 12px; line-height: 1.55; }
.admin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 12px;
    border: 1px solid #876;
    border-radius: 5px;
    cursor: pointer;
    font: 13px "微软雅黑";
    text-decoration: none;
    white-space: nowrap;
    color: #fff;
    background: #4a3232;
}
.admin-btn:hover { color: #fff; filter: brightness(1.12); }
.admin-btn.primary { background: #725f08; border-color: #c6aa20; }
.admin-btn.secondary { background: #343434; border-color: #686868; }
.admin-btn.success { background: #275b37; border-color: #4b9d63; }
.admin-btn.danger { background: #772f35; border-color: #b65760; }
.admin-btn.warning { background: #714914; border-color: #bd8130; }
.admin-btn.tiny { min-height: 26px; padding: 3px 9px; font-size: 12px; }
.admin-filterbar,
.admin-actions,
.admin-pagination,
.admin-dual-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.admin-filterbar { margin: 12px 0; }
.admin-dual-filter { justify-content: space-between; align-items: flex-start; }
.admin-actions { margin-top: 14px; }
.admin-actions.bulk { padding: 10px 0 2px; }
.admin-pagination { justify-content: center; margin-top: 14px; color: #aaa; }
.admin-input,
.admin-select,
.admin-textarea {
    width: 100%;
    min-height: 32px;
    border: 1px solid #666;
    border-radius: 4px;
    background: #171717;
    color: #f1f1f1;
    padding: 5px 7px;
    font: 13px "微软雅黑";
}
.admin-filterbar .admin-input { width: min(300px, 100%); }
.admin-filterbar .admin-select { width: auto; max-width: 360px; }
.admin-input:focus,
.admin-select:focus,
.admin-textarea:focus { border-color: #d2bc35; outline: none; box-shadow: 0 0 0 2px rgba(210,188,53,.12); }
.admin-textarea { min-height: 86px; resize: vertical; }
.admin-readonly {
    min-height: 32px;
    display: flex;
    align-items: center;
    padding: 5px 8px;
    background: #101010;
    border: 1px dashed #555;
    border-radius: 4px;
    color: #ccc;
}
.admin-field-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 10px 12px;
}
.admin-field-grid.user-fields { grid-template-columns: repeat(3, minmax(220px, 1fr)); }
.admin-textarea-grid { display: grid; grid-template-columns: repeat(3, minmax(220px, 1fr)); gap: 12px; margin-top: 12px; }
.admin-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.admin-field > span { color: #d8d8d8; font-weight: bold; font-size: 12px; }
.admin-check-grid { display: flex; min-height: 32px; flex-wrap: wrap; gap: 5px 10px; align-items: center; padding: 4px 7px; border: 1px solid #555; border-radius: 4px; background: #151515; }
.admin-check-grid label { white-space: nowrap; }
.admin-info-box,
.admin-notice {
    margin: 12px 0;
    padding: 10px 12px;
    border-left: 4px solid #b99e28;
    background: rgba(91,73,11,.26);
    line-height: 1.6;
}
.admin-notice.success { border-color: #49a56a; background: rgba(28,92,50,.28); }
.admin-notice.error { border-color: #b84d56; background: rgba(105,25,31,.3); }
.admin-table-wrap { width: 100%; overflow-x: auto; margin-top: 10px; }
.admin-shell table.admin {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #593b3b;
    background: rgba(0,0,0,.35);
}
.admin-shell table.admin th {
    padding: 8px 7px;
    background: #3b2020;
    color: #ffe977;
    border: 1px solid #684747;
    text-align: center;
    font: bold 12px "微软雅黑";
    white-space: nowrap;
}
.admin-shell table.admin td {
    padding: 6px 7px;
    border: 1px solid #503838;
    background: rgba(55,12,12,.72);
    color: #eee;
    font: 12px "微软雅黑";
    opacity: 1;
    filter: none;
    vertical-align: middle;
}
.admin-shell table.admin tbody tr:nth-child(even) td { background: rgba(42,10,10,.72); }
.admin-shell table.admin tbody tr:hover td { background: rgba(92,28,28,.85); }
.admin-shell table.admin .admin-row-danger td,
.admin-shell table.admin tr.admin-row-danger td { background: rgba(100,20,28,.72); }
.admin-list-table td { white-space: nowrap; }
.admin-edit-table { min-width: 980px; }
.admin-edit-table td:nth-child(2) { min-width: 200px; }
.admin-edit-table td:nth-child(3), .admin-edit-table td:nth-child(6) { min-width: 190px; }
.admin-edit-table .admin-number { min-width: 75px; }
.admin-slot { color: #ffe977 !important; font-weight: bold !important; white-space: nowrap; }

@media screen and (max-width: 1050px) {
    .admin-menu-grid { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
    .admin-field-grid { grid-template-columns: repeat(3, minmax(180px, 1fr)); }
    .admin-field-grid.user-fields, .admin-textarea-grid { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}
@media screen and (max-width: 720px) {
    .admin-shell { width: calc(100% - 12px); }
    .admin-menu-grid, .admin-menu-grid.compact { grid-template-columns: 1fr; }
    .admin-panel { padding: 10px; }
    .admin-field-grid, .admin-field-grid.user-fields, .admin-textarea-grid { grid-template-columns: 1fr; }
    .admin-dual-filter { display: block; }
    .admin-filterbar { align-items: stretch; }
    .admin-filterbar .admin-input, .admin-filterbar .admin-select { width: 100%; max-width: none; }
    .admin-btn { min-height: 36px; }
}

/* ========================================================================
   Inventory item description tooltip
   ======================================================================== */
.item-tooltip-row[data-item-tip="1"] .item-tooltip-text { cursor: help; }
.item-hover-tip {
    position: fixed;
    z-index: 99999;
    width: min(360px, calc(100vw - 20px));
    max-height: min(280px, calc(100vh - 20px));
    overflow: auto;
    padding: 10px 12px;
    border: 1px solid #b69b46;
    border-radius: 8px;
    background: rgba(10, 12, 16, .96);
    color: #e8edf4;
    text-align: left;
    font: 13px/1.55 "Microsoft YaHei", "Segoe UI", sans-serif;
    box-shadow: 0 8px 24px rgba(0,0,0,.55);
    pointer-events: none;
    white-space: normal;
}

/* 指令卡历史记录专用弹窗宽度 */
.item-hover-tip.qba-hover-tip {
	width: min(220px, calc(100vw - 20px));
}

.item-hover-tip-head {
    color: #f0d96c;
    font-weight: 700;
    padding-bottom: 5px;
    margin-bottom: 5px;
    border-bottom: 1px solid #454d59;
}
.item-hover-tip-body { white-space: pre-line; }

/* Leaderboard */
.rank-toolbar{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:12px auto}.rank-btn{display:inline-block;padding:7px 12px;border:1px solid #745d2a;border-radius:6px;background:#24190f;color:#ead787!important}.rank-btn.active,.rank-btn:hover{background:#5b4018;color:#fff!important}.rank-pageinfo{margin:8px 0 12px}.rank-table-wrap{width:min(1100px,100%);margin:0 auto;overflow-x:auto}.rank-table{width:100%;min-width:820px;border-collapse:collapse}.rank-table td{padding:5px 7px;font-size:10.5pt;}.rank-motto{max-width:260px;white-space:normal;word-break:break-word}
.rank-avatar-title,
.rank-avatar-cell {
	width: 118px;
	min-width: 118px;
	max-width: 118px;
}
.rank-avatar-cell {
	padding: 3px !important;
}
.rank-avatar-composite{position:relative;width:112px;height:84px;margin:0 auto;overflow:hidden}.rank-avatar-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}.rank-avatar-front{position:absolute;left:50%;top:6%;width:100%;height:100%;object-fit:contain;transform:translate(calc(-50% + var(--avatar-rank-x, 0px)),calc(-10% + var(--avatar-rank-y, 0px))) scale(var(--avatar-rank-scale, 2.3));transform-origin:center top;z-index:2;max-width:none}

/* Problem report */
.report-panel{width:min(760px,100%);margin:14px auto;text-align:left;padding:18px;border:1px solid #684d34;border-radius:9px;background:rgba(20,13,10,.72)}.report-panel textarea{width:100%;min-height:150px;padding:9px;background:#090b0e;color:#eee;border:1px solid #66513c;border-radius:6px;resize:vertical}.report-panel button{margin-top:10px;padding:7px 15px}.report-notice{padding:9px 11px;margin:10px 0;border-radius:5px}.report-notice.success{background:#173820;border:1px solid #3d7c4b}.report-notice.error{background:#451c1c;border:1px solid #8a4545}


/* 幸存者列表：复用状态栏的背景+人物前景逻辑 */
.alive-avatar-composite{position:relative;width:88px;height:88px;margin:0 auto;overflow:hidden;box-sizing:border-box;}
.alive-avatar-bg{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;z-index:1;}
.alive-avatar-front{
    position:absolute;
    left:50%;
    top:10%;
    width:100%;
    height:100%;
    object-fit:contain;

    transform:
        translate(
            calc(-50% + var(--avatar-profile-x, 0px)),
            calc(-15% + var(--avatar-profile-y, 0px))
        )
        scale(var(--avatar-profile-scale, 2.88));

    transform-origin:center top;
    max-width:none;
    z-index:2;
}

/* ========================================================================
   Avatar composition test page
   ======================================================================== */
.avatar-test-page{width:min(1380px,calc(100% - 24px));margin:0 auto 28px;text-align:left}
.avatar-test-note{width:min(1000px,100%);margin:0 auto 14px;padding:9px 12px;border:1px solid rgba(205,187,1,.35);background:rgba(20,20,10,.55);line-height:1.6}
.avatar-test-grid{display:grid;grid-template-columns:250px 250px minmax(520px,1fr);gap:18px;align-items:start}
.avatar-test-panel{border:1px solid rgba(204,102,102,.45);background:rgba(0,0,0,.48);padding:12px;border-radius:7px;min-width:0}
.avatar-test-panel-title{text-align:center;font:bold 16px "微软雅黑";color:#fff;margin-bottom:10px}
.avatar-test-type-row{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:0 0 10px}
.avatar-test-type-row label{cursor:pointer}
.avatar-test-preview-box{position:relative;width:220px;height:220px;margin:0 auto;overflow:hidden;border:1px solid rgba(255,255,255,.35);background:#222}
.avatar-test-preview-box.checker{background:linear-gradient(45deg,#444 25%,transparent 25%),linear-gradient(-45deg,#444 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#444 75%),linear-gradient(-45deg,transparent 75%,#444 75%),#333;background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}
.avatar-test-preview-box img{width:100%;height:100%;object-fit:contain;display:block}
.avatar-test-preview-box .bg-only{object-fit:cover}
.avatar-test-arrow-row{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:9px}
.avatar-test-arrow-row button{width:42px;height:30px;cursor:pointer;font-size:17px}
.avatar-test-number{display:inline-block;min-width:42px;text-align:center;font-size:14px;color:#fff}
.avatar-test-path{margin-top:8px;text-align:center;color:#999;font-size:11px;word-break:break-all}
.avatar-test-results{display:grid;grid-template-columns:repeat(3,minmax(150px,1fr));gap:12px;align-items:start}
.avatar-test-result-card{text-align:center;border:1px solid rgba(255,255,255,.18);padding:10px;background:rgba(10,10,10,.52);min-width:0}
.avatar-test-result-title{font-weight:bold;color:#ead85d;margin-bottom:8px}
.avatar-test-frame-wrap{min-height:238px;display:flex;align-items:center;justify-content:center}
.avatar-test-controls{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:10px}
.avatar-test-controls label{display:flex;flex-direction:column;gap:3px;color:#bbb;font-size:11px}
.avatar-test-controls input{width:100%;min-width:0;background:#111;color:#fff;border:1px solid #666;padding:4px;text-align:center}
.avatar-test-code{margin-top:14px}
.avatar-test-code textarea{width:100%;min-height:210px;background:#090b0e;color:#d9e6f2;border:1px solid #66513c;padding:10px;font:12px/1.5 Consolas,monospace;resize:vertical}
.avatar-test-code-actions{text-align:right;margin-top:6px}
.avatar-test-code-actions button{padding:6px 12px;cursor:pointer}
.avatar-test-status-frame{position:relative;width:90px;height:90px;overflow:hidden;box-sizing:border-box}
.avatar-test-battle-frame{position:relative;width:180px;height:220px;overflow:hidden;box-sizing:border-box;background-position:center center;background-repeat:no-repeat;background-size:cover}
.avatar-test-rank-frame{position:relative;width:112px;height:84px;overflow:hidden;box-sizing:border-box}
.avatar-test-status-frame .profile-avatar-bg,.avatar-test-rank-frame .rank-avatar-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* 注册登记、参战信息与密码找回 */
.account-page{width:min(1180px,calc(100% - 24px));margin:12px auto 24px;text-align:left}.account-page.narrow{width:min(620px,calc(100% - 24px))}
.account-panel{margin:12px 0;padding:16px;border:1px solid #684d34;border-radius:9px;background:rgba(20,13,10,.78)}
.account-panel h2{margin:0 0 12px;color:#ead787;font:700 18px "微软雅黑"}.account-grid{display:grid;grid-template-columns:repeat(2,minmax(220px,1fr));gap:10px 16px}.account-grid-wide{grid-template-columns:repeat(3,minmax(190px,1fr));margin:14px 0}
.account-panel label,.account-single-field{display:flex;flex-direction:column;gap:5px}.account-panel label span{color:#e9d8b5;font-weight:700}.account-panel input[type=text],.account-panel input[type=password],.account-panel select{width:100%;min-height:34px;padding:5px 8px;background:#090b0e;color:#eee;border:1px solid #6b5948;border-radius:4px}.account-panel input[readonly]{color:#aaa;background:#191919}.account-panel button,.account-panel input[type=button]{margin-top:10px;padding:7px 15px}.account-help{color:#bfb6a8;line-height:1.7}
.account-profile-panel{text-align:center}.account-profile-identity{max-width:720px;margin:0 auto}.account-lock-notice{max-width:760px;margin:12px auto;color:#ffd45b;line-height:1.7}
.avatar-gender-select{text-align:center;margin:14px 0 0}.avatar-gender-select label{display:inline-block!important;margin:0 12px}.avatar-gender-select input:disabled,.avatar-arrow:disabled{cursor:not-allowed;opacity:.48}
.account-avatar-selector{align-items:flex-start;flex-wrap:nowrap;gap:24px;margin-top:20px}.account-avatar-selector .avatar-select-box{width:220px;flex:0 0 220px}.account-avatar-selector .avatar-single-preview{width:220px;height:220px}
.account-avatar-effects {
	width: 332px;
	min-width: 332px;
	text-align: center;
}

.account-avatar-effects-row {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 18px;
	height: 248px;
}

.account-effect-preview {
	position: relative;
	text-align: center;
}

.account-effect-label {
	margin-top: 6px;
	color: #fff;
	font-size: 14px;
	line-height: 20px;
	text-align: center;
	white-space: nowrap;
}

.account-avatar-small-column {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	width: 112px;
	height: 248px;
}

.account-battle-preview {
	margin: 0;
	border: 1px solid rgba(255,255,255,0.35);
}

.account-effect-status {
	align-self: flex-start;
}

.account-effect-status .profile-avatar-composite {
	border: 1px solid rgba(255,255,255,0.35);
}

.account-effect-rank {
	align-self: flex-end;
}

.account-effect-rank .rank-avatar-composite {
	border: 1px solid rgba(255,255,255,0.35);
}
.avatar-arrow{display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:1;text-indent:0}.avatar-arrow-row{height:34px}.avatar-arrow-row button{margin:0!important}
.account-message-fields{margin:18px auto 0}.account-message-fields label{margin:7px auto}.account-profile-panel .account-message-fields label{flex-direction:row}
.valid-registration-page{width:min(1040px,calc(100% - 24px));margin:10px auto 28px;text-align:center}.valid-guide-avatar{display:block;margin:42px auto 10px}.valid-guide-text{line-height:1.55}.valid-registration-form{margin-top:18px}.valid-nickname-field{display:flex;justify-content:center;align-items:center;gap:6px}.valid-nickname-field input,.valid-profile-fields input{box-sizing:border-box;width:278px;min-height:28px;padding:3px 7px}.valid-profile-fields{width:min(620px,100%);margin:24px auto 0;text-align:center;line-height:1.55}.valid-profile-fields label{display:flex;align-items:center;justify-content:center;margin-top:5px}.valid-profile-fields label span{display:inline-block;width:88px;text-align:right}.valid-profile-fields>div{margin-bottom:3px}.valid-rules{margin:24px auto 0;color:#ffff00;line-height:1.5}.valid-action-row{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:24px}.valid-action-button{box-sizing:border-box!important;width:74px!important;height:34px!important;margin:0!important;padding:0!important;text-align:center!important}.valid-registration-page .account-avatar-selector{justify-content:center}.account-profile-panel .account-avatar-selector{justify-content:center}
@media screen and (max-width:920px){.account-avatar-selector{flex-wrap:wrap}.account-avatar-effects{margin:0 auto}}
@media screen and (max-width:720px){.account-grid,.account-grid-wide{grid-template-columns:1fr}.account-avatar-selector{flex-direction:column;align-items:center}.account-avatar-effects{min-width:0;width:332px;max-width:100%}.valid-profile-fields label,.account-profile-panel .account-message-fields label{flex-direction:column}.valid-profile-fields label span{width:auto;text-align:center}.valid-profile-fields input{max-width:100%}}
@media screen and (max-width:1100px){.avatar-test-grid{grid-template-columns:230px 230px minmax(0,1fr)}.avatar-test-results{grid-template-columns:1fr}.avatar-test-frame-wrap{min-height:110px}}
@media screen and (max-width:760px){.avatar-test-page{width:calc(100% - 12px)}.avatar-test-grid{grid-template-columns:1fr}.avatar-test-panel{width:100%}.avatar-test-results{grid-template-columns:1fr}.avatar-test-preview-box{width:220px;height:220px}}

/* 指令卡：颜色只表达机制，名称从配置实时读取。 */
.qba-card {
	border: 1px solid #7994a8;
	border-radius: 5px;
	text-align: center;
	font-weight: bold;
	color: #f4faff;
	box-sizing: border-box;
}
.qba-q { background: #145c43; }
.qba-a { background: #19496f; }
.qba-b { background: #782d36; }
.qba-n { background: #786022; }
.qba-c { background: #394858; }
input.qba-card:disabled {
	opacity: .35;
	cursor: not-allowed;
	filter: grayscale(.8);
}

/* “状态”列：按钮放在文字下方，底色继续由表格的 b2 类提供。 */
.profile-status-label {
	padding: 4px !important;
	text-align: center;
	border-left: #966 1px solid !important;
}
.profile-status-label-inner {
	display: flex;
	min-height: 90px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
}
.profile-status-label .status-animation-toggle {
	margin: 0;
	width: 40px;
	height: 50px;
	flex: none;
}

/* “指令卡记录”是与天气列对齐的独立 b2 表格列。 */
.qba-label-cell {
	min-width: 66px;
	width: 66px;
	padding: 4px !important;
	text-align: center;
}
.qba-label-inner {
	display: flex;
	min-height: 90px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.qba-record-title {
	text-align: center;
	font-weight: bold;
	line-height: 1.35;
	white-space: nowrap;
}

.qba-record-control {
	width: 100%;
}
.qba-default-select {
	display: block;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	margin: 0;
	padding: 2px 1px;
	box-sizing: border-box;
	font-size: 11px;
	text-align: center;
	text-align-last: center;
}

/* 右列显示三张历史卡和下一张可享受的奖励。 */
.qba-history-cell {
	vertical-align: middle;
	padding: 0 !important;
	min-width: 0;
}
.qba-record-right {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 90px;
	min-width: 0;
	padding: 4px 5px;
	box-sizing: border-box;
}

.qba-record-cards {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	gap: 1px;
	width: 100%;
	min-height: 0;
}
.qba-record-card {
	width: 88%;
	max-width: 122px;
	margin: -1px auto;
	padding: 2px 3px;
	font-size: 12px;
	line-height: 1.15;
	opacity: var(--qba-card-opacity, 1);
	transform: scale(var(--qba-card-scale, 1));
	transform-origin: center;
	box-sizing: border-box;
}
.qba-next-bonus {
	margin-top: 3px;
	padding: 3px 3px 1px;
	border-top: 1px solid rgba(255,255,255,.2);
	text-align: left;
	font-size: 10px;
	line-height: 1.3;
}
.qba-next-bonus-title {
	margin-bottom: 1px;
	text-align: center;
	font-weight: bold;
	color: #ffe38b;
}
.qba-next-bonus-content {
	overflow-wrap: anywhere;
}
.qba-empty-record,
.qba-no-bonus {
	display: block;
	text-align: center;
	opacity: .55;
}

/* 历史指令卡存在悬停说明 */
.qba-record-card[data-qba-tip="1"] {
	cursor: help;
}

/* 状态图压缩到自己的表格列内；动画按钮已经移到左侧标题列。 */
.profile-state {
	min-width: 0;
}

.profile-state .state-figure {
	width: 100%;
	min-width: 0;
	flex-wrap: nowrap;
	justify-content: center;
	padding: 5px 0;
}

.profile-state .body-monitor {
	margin: 0;
	flex: 0 0 62px;
}

.profile-state .state-readout {
	flex: 0 1 auto;
	min-width: 90px;
	text-align: center;
}

/* 历届战局记录：角色详情页独立双栏布局 */
.winner-detail-layout {
	width: calc(100% - 24px);
	max-width: 1120px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 250px;
	gap: 8px;
	align-items: start;
}

/* 限制角色资料栏，避免profile表格无限向外扩张 */
.winner-profile-column {
	min-width: 0;
	overflow: hidden;
}

.winner-profile-column #main,
.winner-profile-column .profile-wrap {
	display: block;
	width: 100%;
	min-width: 0;
}

/* 必要时只在角色资料栏内部出现横向滚动 */
.winner-profile-column .profile-status-scroll {
	width: 100%;
	overflow-x: auto;
}

/* 右侧终局记录固定为250px */
.winner-summary-column {
	width: 250px;
	min-width: 250px;
}

.winner-summary-table {
	width: 250px;
	height: 393px;
	border-collapse: collapse;
}

/* 页面宽度不足时改为上下排列 */
@media screen and (max-width: 1000px) {
	.winner-detail-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.winner-summary-column {
		margin: 0 auto;
	}
}

/* ========================================================================
   能力参数 / 武装适性双显示
   ======================================================================== */
   
/*
 * 武装适性、击破数两行单独重新分配宽度。
 * 外层仍然是真正的 table td，因此边框继续与整个状态栏连成一体。
 */
.profile-affinity-block-cell,
.profile-battle-summary-cell {
    padding: 0 !important;
    overflow: hidden;
}

/* 武装适性：左侧标签向右扩宽，右侧全部留给数值 */
.profile-affinity-local-row {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    width: 100%;
    min-height: 25px;
}

/* 击破数这一行采用相同的112px起始宽度 */
.profile-battle-summary-row {
    display: grid;
    grid-template-columns: 112px minmax(0, 139px) 66px minmax(0, 1fr);
    width: 100%;
    min-height: 25px;
}

/* 内部元素只负责布局，不再自行画一整圈边框 */
.profile-affinity-local-row > div,
.profile-battle-summary-row > div {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;
    height: 100%;
    box-sizing: border-box;
}

/* “武装适性 / 能力参数”以及“击破数 / QP”保持原 b2 的深红底色 */
.affinity-local-label,
.profile-summary-label {
    background: #500;
    color: #fff;
    font-family: "微软雅黑";
    font-size: 10pt;
    font-weight: normal;
}

/* 只画内部竖分隔线，不再重复画外框 */
.affinity-local-label,
.profile-summary-kill-label,
.profile-summary-kill-value,
.profile-summary-money-label {
    border-right: #966 1px solid;
}

/* 数据区域保持透明，沿用状态栏背景 */
.affinity-display-cell,
.profile-summary-value {
    color: #fff;
    text-align: center;
    font-family: "微软雅黑";
    font-size: 10.5pt;
}
   
.affinity-label-cell {
    padding: 3px 4px !important;
    white-space: nowrap;
    vertical-align: middle;
}

.affinity-label-inner {
    display: flex;
    width: 100%;
    min-height: 24px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.affinity-label-inner > b {
    display: inline-block;
    flex: 0 0 auto;
    width: auto;
    text-align: center;
    white-space: nowrap;
}

.affinity-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;

    width: 36px;
    height: 20px;

    margin: 0;
    padding: 0;

    box-sizing: border-box;

    border: 1px solid #8c7440;
    border-radius: 3px;

    background: #24190f;
    color: #ead787;

    font: 11px/18px "微软雅黑";
    text-align: center;

    cursor: pointer;
}

.affinity-toggle:hover {
    border-color: #d0ad4e;
    color: #fff3a8;
    background: #4a3214;
}

.affinity-display-cell {
    overflow: hidden;
}

.affinity-view {
    white-space: nowrap;
    text-align: center;
}

.affinity-entry {
    display: inline-block;
    white-space: nowrap;
}

/* 当前装备所使用的能力参数高亮。 */
.affinity-entry.affinity-current {
    color: #ffff66;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(255, 220, 70, .65);
}

.affinity-separator {
    display: inline-block;
    margin: 0 3px;
    color: #8e8e8e;
}

@media screen and (max-width: 760px) {
    .affinity-view {
        font-size: 9.5pt;
    }
    .affinity-separator {
        margin: 0 1px;
    }
}

/* ========================================================================
   Shared sub-command UI (2026-09-11 cleanup)
   Consolidated from duplicated inline CSS in itemmerge/itemdrop/team/etc.
   Page-specific differences are kept by modifier classes below.
   ======================================================================== */
.subcmd-panel.subcmd-standard,
.subcmd-panel.subcmd-form,
.subcmd-panel.subcmd-drop {
	max-width:700px;
	margin:8px auto;
	padding:14px 16px;
	box-sizing:border-box;
	border:1px solid #5b4728;
	border-radius:10px;
	background:linear-gradient(180deg,rgba(28,23,18,.96),rgba(11,13,19,.96));
	box-shadow:0 8px 20px rgba(0,0,0,.25), inset 0 0 14px rgba(219,181,90,.05);
	text-align:left;
}
.subcmd-standard .subcmd-title,
.subcmd-form .subcmd-title,
.subcmd-drop .subcmd-title {
	margin:0 0 6px;
	color:#f1dc81;
	font-size:17px;
	font-weight:bold;
	letter-spacing:1px;
	text-align:center;
}
.subcmd-standard .subcmd-desc,
.subcmd-form .subcmd-desc,
.subcmd-drop .subcmd-desc {
	margin:0 0 12px;
	color:#b7c0cb;
	line-height:1.7;
	font-size:12px;
	text-align:center;
}
.subcmd-standard .subcmd-list,
.subcmd-form .subcmd-list,
.subcmd-drop .subcmd-list {
	display:flex;
	flex-direction:column;
	gap:8px;
}
.subcmd-standard .subcmd-option,
.subcmd-form .subcmd-option,
.subcmd-drop .subcmd-option {
	display:flex;
	align-items:center;
	gap:8px;
	padding:8px 10px;
	border:1px solid #36414d;
	border-radius:8px;
	background:rgba(13,18,26,.88);
	color:#f0f3f7;
	text-decoration:none;
	box-sizing:border-box;
}
.subcmd-standard .subcmd-option:hover,
.subcmd-form .subcmd-option:hover,
.subcmd-drop .subcmd-option:hover {
	border-color:#816532;
	background:rgba(24,30,40,.94);
}
.subcmd-standard .subcmd-option input[type="radio"],
.subcmd-form .subcmd-option input[type="radio"],
.subcmd-drop .subcmd-option input[type="radio"] {
	flex:0 0 auto;
	margin:0;
}
.subcmd-standard .subcmd-option-text,
.subcmd-form .subcmd-option-text,
.subcmd-drop .subcmd-option-text {
	flex:1 1 auto;
	line-height:1.6;
}
.subcmd-standard .subcmd-highlight,
.subcmd-form .subcmd-highlight,
.subcmd-drop .subcmd-highlight {
	padding:10px 12px;
	border-left:3px solid #a88a3e;
	border-radius:4px;
	background:rgba(168,138,62,.08);
	color:#d5dcea;
	font-size:12px;
	line-height:1.7;
	margin-bottom:12px;
}
.subcmd-standard .subcmd-grid,
.subcmd-form .subcmd-grid,
.subcmd-drop .subcmd-grid {
	display:flex;
	flex-direction:column;
	gap:10px;
}
.subcmd-standard .subcmd-row,
.subcmd-form .subcmd-row,
.subcmd-drop .subcmd-row {
	display:grid;
	grid-template-columns:120px minmax(0,1fr);
	gap:10px;
	align-items:center;
}
.subcmd-standard .subcmd-label,
.subcmd-form .subcmd-label,
.subcmd-drop .subcmd-label {
	color:#d8c878;
	font-size:12px;
	line-height:1.4;
}
.subcmd-standard .subcmd-input,
.subcmd-form .subcmd-input,
.subcmd-drop .subcmd-input,
.subcmd-standard .subcmd-select,
.subcmd-form .subcmd-select,
.subcmd-drop .subcmd-select {
	width:100%;
	min-height:34px;
	box-sizing:border-box;
	padding:6px 8px;
	border:1px solid #4a5968;
	border-radius:6px;
	background:#0a0f15;
	color:#eef2f7;
	font:12px "Microsoft YaHei","微软雅黑",sans-serif;
}
.subcmd-standard .subcmd-select:focus,
.subcmd-form .subcmd-select:focus,
.subcmd-drop .subcmd-select:focus,
.subcmd-standard .subcmd-input:focus,
.subcmd-form .subcmd-input:focus,
.subcmd-drop .subcmd-input:focus {
	outline:none;
	border-color:#b99b3f;
	box-shadow:0 0 0 2px rgba(185,155,63,.15);
}
.subcmd-standard .subcmd-note,
.subcmd-form .subcmd-note,
.subcmd-drop .subcmd-note {
	color:#8f9aab;
	font-size:11px;
	line-height:1.6;
	margin-top:4px;
}
.subcmd-standard .subcmd-actions,
.subcmd-form .subcmd-actions,
.subcmd-drop .subcmd-actions {
	display:flex;
	justify-content:center;
	gap:10px;
	margin-top:14px;
	flex-wrap:wrap;
}
.subcmd-standard .subcmd-actions .cmdbutton,
.subcmd-form .subcmd-actions .cmdbutton,
.subcmd-drop .subcmd-actions .cmdbutton {
	min-width:108px;
	min-height:34px;
}
.subcmd-standard .subcmd-button-list,
.subcmd-form .subcmd-button-list,
.subcmd-drop .subcmd-button-list {
	display:flex;
	flex-direction:column;
	gap:8px;
}
.subcmd-standard .subcmd-itembtn,
.subcmd-form .subcmd-itembtn,
.subcmd-drop .subcmd-itembtn {
	width:100%;
	text-align:left;
	padding:9px 12px;
	box-sizing:border-box;
	border:1px solid #36414d;
	border-radius:8px;
	background:rgba(13,18,26,.88);
	color:#eef2f7;
	font:12px "Microsoft YaHei","微软雅黑",sans-serif;
	cursor:pointer;
}
.subcmd-standard .subcmd-itembtn:hover,
.subcmd-form .subcmd-itembtn:hover,
.subcmd-drop .subcmd-itembtn:hover {
	border-color:#816532;
	background:rgba(24,30,40,.94);
}
.subcmd-standard .subcmd-split,
.subcmd-form .subcmd-split,
.subcmd-drop .subcmd-split {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:12px;
}
.subcmd-standard .subcmd-box,
.subcmd-form .subcmd-box,
.subcmd-drop .subcmd-box {
	padding:10px 12px;
	border:1px solid #36414d;
	border-radius:8px;
	background:rgba(13,18,26,.88);
}
.subcmd-standard .subcmd-box-title,
.subcmd-form .subcmd-box-title,
.subcmd-drop .subcmd-box-title {
	color:#d8c878;
	font-size:12px;
	font-weight:bold;
	margin-bottom:6px;
}
@media(max-width:720px){
	.subcmd-standard .subcmd-row,
.subcmd-form .subcmd-row,
.subcmd-drop .subcmd-row {
		grid-template-columns:1fr;
		gap:6px;
	}
	.subcmd-standard .subcmd-split,
.subcmd-form .subcmd-split,
.subcmd-drop .subcmd-split {
		grid-template-columns:1fr;
	}
	.subcmd-standard .subcmd-actions,
.subcmd-form .subcmd-actions,
.subcmd-drop .subcmd-actions {
		flex-direction:column;
	}
	.subcmd-standard .subcmd-actions .cmdbutton,
.subcmd-form .subcmd-actions .cmdbutton,
.subcmd-drop .subcmd-actions .cmdbutton {
		width:100%;
	}
}

/* 表单型页面：保留 team.htm / sp_word.htm 原有的自适应标签宽度。 */
.subcmd-form .subcmd-row{
	display:grid;
	grid-template-columns:max-content minmax(0,1fr);
	gap:10px;
	align-items:center;
}
.subcmd-form .subcmd-input,
.subcmd-form .subcmd-select{
	width:100%;
	min-width:0;
	max-width:100%;
	min-height:34px;
	box-sizing:border-box;
	padding:5px 8px;
	border:1px solid #4b5868;
	border-radius:6px;
	background:#080d13;
	color:#eef2f7;
	font:12px "Microsoft YaHei","微软雅黑",sans-serif;
}


/* 丢弃页面：保留用户特意设置的无边框、紧凑列表。 */
.subcmd-drop .subcmd-option{
	display:flex;
	align-items:center;
	gap:8px;
	padding:4px 2px;
	border:0;
	border-radius:0;
	background:transparent;
	color:#f0f3f7;
	text-decoration:none;
	box-sizing:border-box;
}
.subcmd-drop .subcmd-option:hover{
	background:transparent;
	color:#f1dc81;
}



/* ========================================================================
   Fate/Last Archive · Moonlit Record UI
   2026-09-12
   视觉方向：月夜、薄雾、旧金、冷青与极少量血色警示。
   本区只覆盖视觉，不改变头像偏移、战斗计算或布局数据结构。
   ======================================================================== */

:root {
	--la-bg: #070a10;
	--la-bg-deep: #030509;
	--la-panel: rgba(11, 16, 24, .88);
	--la-panel-soft: rgba(16, 23, 33, .74);
	--la-panel-strong: rgba(7, 11, 18, .94);
	--la-line: rgba(199, 178, 124, .32);
	--la-line-bright: rgba(218, 199, 145, .64);
	--la-gold: #d2bd82;
	--la-gold-soft: #aa9869;
	--la-ivory: #e9e4d7;
	--la-text: #c9ced6;
	--la-muted: #818997;
	--la-cyan: #83aeb6;
	--la-crimson: #9a3341;
	--la-crimson-bright: #c5535f;
	--la-shadow: 0 18px 48px rgba(0,0,0,.44);
	--la-radius: 3px;
}

html {
	background: var(--la-bg-deep);
	scrollbar-color: #5b5360 #070a10;
}

body.la-body,
body {
	min-height: 100vh;
	margin: 0;
	color: var(--la-text);
	background:
		radial-gradient(circle at 78% 11%, rgba(196, 211, 215, .10) 0, rgba(129, 154, 164, .045) 15%, transparent 31%),
		radial-gradient(ellipse at 42% 0%, rgba(37, 53, 73, .32) 0, transparent 47%),
		linear-gradient(180deg, #0b1018 0%, #070a10 52%, #040609 100%) !important;
	background-attachment: fixed !important;
	background-image:
		radial-gradient(circle at 78% 11%, rgba(196, 211, 215, .10) 0, rgba(129, 154, 164, .045) 15%, transparent 31%),
		radial-gradient(ellipse at 42% 0%, rgba(37, 53, 73, .32) 0, transparent 47%),
		linear-gradient(180deg, #0b1018 0%, #070a10 52%, #040609 100%) !important;
	font-family: "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
	font-size: 13px;
	line-height: 1.65;
	letter-spacing: .01em;
	position: relative;
	isolation: isolate;
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -4;
	pointer-events: none;
	background:
		linear-gradient(112deg, transparent 0 46%, rgba(255,255,255,.016) 46.1% 46.3%, transparent 46.4%),
		linear-gradient(68deg, transparent 0 63%, rgba(194,174,124,.018) 63.1% 63.25%, transparent 63.4%);
	opacity: .8;
}

body::after {
	content: "";
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: 44vh;
	z-index: -3;
	pointer-events: none;
	background:
		linear-gradient(to top, rgba(2,4,8,.86), transparent),
		radial-gradient(ellipse at 18% 100%, rgba(91,107,119,.12), transparent 57%),
		radial-gradient(ellipse at 78% 100%, rgba(97,82,88,.10), transparent 59%);
}

.la-atmosphere {
	position: fixed;
	inset: 0;
	z-index: -2;
	pointer-events: none;
	overflow: hidden;
}

.la-moon {
	position: absolute;
	right: clamp(5vw, 10vw, 150px);
	top: 54px;
	width: clamp(112px, 14vw, 190px);
	aspect-ratio: 1;
	border-radius: 50%;
	background:
		radial-gradient(circle at 42% 38%, rgba(238,239,226,.90) 0 5%, rgba(205,213,207,.76) 18%, rgba(148,166,169,.38) 57%, rgba(92,110,119,.12) 73%, transparent 74%);
	filter: blur(.15px);
	box-shadow: 0 0 50px rgba(177,197,200,.08), 0 0 120px rgba(112,142,151,.06);
	opacity: .68;
}

.la-moon::before,
.la-moon::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	background: rgba(64,80,86,.15);
}
.la-moon::before { width: 22%; height: 13%; left: 22%; top: 30%; transform: rotate(-18deg); }
.la-moon::after { width: 15%; height: 19%; right: 24%; bottom: 23%; }

.la-mist {
	position: absolute;
	left: -20vw;
	width: 140vw;
	height: 22vh;
	filter: blur(26px);
	opacity: .16;
	background: radial-gradient(ellipse at center, rgba(156,173,178,.38), rgba(86,101,111,.10) 42%, transparent 70%);
}
.la-mist-a { bottom: 15vh; transform: rotate(-3deg); }
.la-mist-b { bottom: 1vh; transform: rotate(4deg); opacity: .11; }

/* ----- typography / links ----- */
a {
	color: var(--la-gold);
	text-decoration: none;
	transition: color .18s ease, text-shadow .18s ease, border-color .18s ease, background .18s ease;
}
a:hover {
	color: #f0dfab;
	text-shadow: 0 0 14px rgba(213,194,139,.18);
}
.yellow { color: #d9c584 !important; }
.red { color: #d1606b !important; }
.green { color: #89b6a0 !important; }
.lime { color: #a7c995 !important; }
.cyan { color: #86bdc6 !important; }
.gray { color: #a2a8b0 !important; }
.orange { color: #c99566 !important; }
.purple { color: #b39ac8 !important; }
.blue { color: #8caac9 !important; }
.clit {
	color: var(--la-ivory);
	font: 600 15px/1.4 "Noto Serif SC", "Source Han Serif SC", "Songti SC", SimSun, serif;
	letter-spacing: .08em;
}

/* ----- header ----- */
.site-header {
	width: 100%;
	margin: 0;
	padding: 18px 14px 0;
	position: relative;
	z-index: 30;
}
.site-header-frame {
	width: min(1240px, 100%);
	margin: 0 auto;
	padding: 0 18px 13px;
	border-bottom: 1px solid var(--la-line);
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	position: relative;
}
.site-header-frame::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 118px;
	height: 1px;
	background: linear-gradient(90deg, var(--la-gold), transparent);
}
.site-brand {
	display: grid;
	grid-template-columns: auto auto;
	grid-template-areas: "kicker mark" "title mark";
	align-items: center;
	gap: 0 10px;
	color: inherit !important;
	text-align: left;
	min-width: 250px;
}
.site-brand-kicker {
	grid-area: kicker;
	color: var(--la-muted);
	font: 500 9px/1.2 "Segoe UI", sans-serif;
	letter-spacing: .26em;
}
.site-brand-title {
	grid-area: title;
	margin-top: 3px;
	color: var(--la-ivory);
	font: 500 clamp(20px, 2.2vw, 29px)/1.25 "Noto Serif SC", "Source Han Serif SC", "Songti SC", SimSun, serif;
	letter-spacing: .07em;
	text-shadow: 0 3px 18px rgba(0,0,0,.72);
}
.site-brand-mark {
	grid-area: mark;
	color: var(--la-crimson-bright);
	font-size: 13px;
	opacity: .72;
}
.headerlink {
	margin: 0;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	flex-wrap: wrap;
	gap: 0;
	font-size: 12px;
	line-height: 1.3;
}
.headerlink a {
	color: #aeb5c0;
	padding: 6px 9px;
	border-bottom: 1px solid transparent;
	white-space: nowrap;
	font-weight: 400;
	letter-spacing: .04em;
}
.headerlink a + a::before {
	content: "·";
	color: #4f5661;
	margin-right: 17px;
}
.headerlink a:hover {
	color: var(--la-ivory);
	border-bottom-color: rgba(210,189,130,.52);
}

/* ----- main / footer ----- */
.site-content {
	width: 100%;
	min-height: calc(100vh - 170px);
	padding: 28px 14px 0;
	position: relative;
	z-index: 2;
}
.site-footer {
	width: min(1240px, calc(100% - 28px));
	margin: 34px auto 0;
	padding: 0 0 24px;
	color: #69717e;
	font-size: 11px;
	letter-spacing: .04em;
	position: relative;
	z-index: 2;
}
.site-footer-rule {
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--la-line), transparent);
}
.site-footer-inner {
	padding-top: 12px;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 18px;
}
.site-footer-left { text-align: left; }
.site-footer-center {
	text-align: center;
	font: 500 9px "Segoe UI", sans-serif;
	letter-spacing: .24em;
	color: #525a65;
}
.site-footer-right { text-align: right; }
.site-footer a { color: #8d8268; }
.site-footer-sep { opacity: .45; }

/* ----- common panels / legacy classes ----- */
.b1,
.b2,
.admin td {
	filter: none !important;
	opacity: 1 !important;
	font-family: inherit;
	border-color: rgba(198,177,119,.24) !important;
}
.b1 {
	background: linear-gradient(180deg, rgba(35,42,53,.88), rgba(16,22,31,.92)) !important;
	color: var(--la-ivory) !important;
	border: 1px solid rgba(202,181,124,.34) !important;
}
.b2,
.admin td {
	background: rgba(18,24,34,.88) !important;
	color: #bec4cd !important;
	border: 1px solid rgba(151,157,167,.17) !important;
}
.b3 {
	background: rgba(7,11,18,.66);
	color: var(--la-text) !important;
	border: 1px solid rgba(151,157,167,.14) !important;
	font-family: inherit;
}
.v1 {
	background: linear-gradient(180deg, rgba(72,64,47,.95), rgba(34,31,25,.96)) !important;
	color: #ece1bd !important;
	border-color: rgba(212,190,129,.38) !important;
	filter: none !important;
	opacity: 1 !important;
}
table {
	border-color: rgba(164,167,172,.18);
}
td, th { border-color: rgba(164,167,172,.16); }

.subtitle,
.subtitle2 {
	font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", SimSun, serif;
}
.subtitle {
	width: min(1120px, 100%);
	margin: 4px auto 22px;
	color: var(--la-ivory);
	font-size: clamp(22px, 3vw, 32px);
	font-weight: 500;
	letter-spacing: .12em;
	text-shadow: 0 6px 24px rgba(0,0,0,.6);
}
.subtitle2 {
	display: inline-block;
	margin: 30px 0 10px;
	padding: 0 0 7px 18px;
	color: #e4d6ad;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: .06em;
	border-left: 2px solid var(--la-crimson);
	border-bottom: 1px solid rgba(210,189,130,.18);
}
.subtitle2 a { color: inherit; }

/* ----- form controls ----- */
input,
select,
textarea,
button {
	font-family: "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
}
input[type="text"],
input[type="password"],
input[type="number"],
select,
textarea,
.admin-input,
.admin-select,
.admin-textarea {
	color: #e3e6eb !important;
	background: rgba(5,9,15,.86) !important;
	border: 1px solid rgba(174,161,123,.34) !important;
	border-radius: var(--la-radius) !important;
	outline: none;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
	border-color: rgba(218,195,132,.68) !important;
	box-shadow: 0 0 0 2px rgba(192,169,106,.09), inset 0 1px 0 rgba(255,255,255,.03) !important;
}
input[type="button"],
input[type="submit"],
button,
.admin-btn,
#gamecmd input.cmdbutton {
	color: #d5d9df !important;
	background:
		linear-gradient(180deg, rgba(42,49,60,.94), rgba(17,22,30,.98)) !important;
	border: 1px solid rgba(190,174,129,.38) !important;
	border-radius: 2px !important;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 4px 13px rgba(0,0,0,.18);
	cursor: pointer;
	transition: border-color .16s ease, color .16s ease, background .16s ease, transform .12s ease, box-shadow .16s ease;
}
input[type="button"]:hover,
input[type="submit"]:hover,
button:hover,
.admin-btn:hover,
#gamecmd input.cmdbutton:hover {
	color: #f3e8c8 !important;
	border-color: rgba(221,199,139,.72) !important;
	background: linear-gradient(180deg, rgba(56,61,68,.98), rgba(24,27,33,.98)) !important;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 6px 18px rgba(0,0,0,.28);
}
input[type="button"]:active,
input[type="submit"]:active,
button:active { transform: translateY(1px); }
input:disabled,
button:disabled {
	opacity: .36 !important;
	cursor: not-allowed !important;
	filter: grayscale(.4);
}
.la-primary,
.admin-btn.primary {
	color: #f1e4bd !important;
	background: linear-gradient(180deg, #54343a, #2a1a20) !important;
	border-color: rgba(193,112,121,.66) !important;
}

/* ----- landing page ----- */
.landing-shell {
	width: min(1180px, 100%);
	margin: 0 auto;
	text-align: left;
}
.landing-hero {
	min-height: 250px;
	padding: clamp(28px, 5vw, 62px) clamp(20px, 4vw, 52px);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	position: relative;
	overflow: hidden;
	border: 1px solid rgba(198,178,124,.23);
	background:
		linear-gradient(90deg, rgba(6,10,16,.95) 0%, rgba(10,16,24,.82) 50%, rgba(10,15,22,.42) 100%),
		radial-gradient(circle at 87% 19%, rgba(198,210,207,.14), transparent 22%);
	box-shadow: var(--la-shadow);
}
.landing-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(118deg, transparent 0 71%, rgba(205,183,124,.09) 71.1% 71.25%, transparent 71.4%),
		linear-gradient(63deg, transparent 0 82%, rgba(151,54,66,.10) 82.1% 82.3%, transparent 82.4%);
}
.landing-hero::after {
	content: "CHALDEAS";
	position: absolute;
	right: 28px;
	bottom: -16px;
	color: rgba(216,218,212,.035);
	font: 700 clamp(54px, 10vw, 132px)/1 "Times New Roman", serif;
	letter-spacing: -.04em;
	white-space: nowrap;
}
.landing-eyebrow {
	color: #9b927c;
	font: 500 10px/1.4 "Segoe UI", sans-serif;
	letter-spacing: .28em;
	margin-bottom: 12px;
	position: relative;
	z-index: 1;
}
.landing-hero h1 {
	max-width: 760px;
	margin: 0;
	color: #eee9dd;
	font: 500 clamp(28px, 4.2vw, 50px)/1.25 "Noto Serif SC", "Source Han Serif SC", "Songti SC", SimSun, serif;
	letter-spacing: .08em;
	position: relative;
	z-index: 1;
}
.landing-lead {
	max-width: 760px;
	margin: 18px 0 0;
	color: #aeb6bf;
	font-size: 14px;
	line-height: 1.9;
	position: relative;
	z-index: 1;
}
.landing-hero-meta {
	margin-top: 22px;
	color: #b5a77d;
	font-size: 11px;
	letter-spacing: .08em;
	position: relative;
	z-index: 1;
}
.landing-dot { margin: 0 12px; color: var(--la-crimson-bright); }
.landing-grid {
	display: grid;
	grid-template-columns: repeat(2,minmax(0,1fr));
	gap: 12px;
	margin-top: 12px;
}
.landing-card {
	min-width: 0;
	padding: 20px 22px;
	border: 1px solid rgba(185,168,121,.22);
	background: linear-gradient(145deg, rgba(13,19,28,.90), rgba(7,11,18,.86));
	box-shadow: 0 10px 28px rgba(0,0,0,.22);
	position: relative;
	overflow: hidden;
}
.landing-card::after {
	content: "◆";
	position: absolute;
	right: 10px;
	top: 8px;
	color: rgba(172,150,93,.16);
	font-size: 9px;
}
.landing-card-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 10px;
	margin-bottom: 13px;
	border-bottom: 1px solid rgba(185,168,121,.16);
}
.landing-card-head span {
	color: #626d7b;
	font: 600 9px "Segoe UI", sans-serif;
	letter-spacing: .22em;
}
.landing-card-head b {
	color: #ddcfaa;
	font: 500 15px "Noto Serif SC","Songti SC",serif;
	letter-spacing: .08em;
}
.landing-data-list { margin: 0; }
.landing-data-list > div {
	display: grid;
	grid-template-columns: 88px 1fr;
	gap: 12px;
	padding: 7px 0;
	border-bottom: 1px dotted rgba(137,143,151,.13);
}
.landing-data-list dt { color: #747d88; }
.landing-data-list dd { margin: 0; color: #cbd0d6; }
.landing-duration,
.landing-record-line,
.landing-seal-status {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 9px;
	margin-top: 13px;
	padding-top: 12px;
	border-top: 1px solid rgba(185,168,121,.13);
}
.landing-duration strong,
.landing-record-line strong { color: #e1d3aa; font-weight: 500; }
.landing-record-line em { color: #7f8893; font-style: normal; margin-left: auto; }
.landing-stat-grid {
	display: grid;
	grid-template-columns: repeat(4,1fr);
	border: 1px solid rgba(161,151,119,.16);
}
.landing-stat-grid > div {
	padding: 12px 8px;
	text-align: center;
	border-right: 1px solid rgba(161,151,119,.13);
	background: rgba(0,0,0,.10);
}
.landing-stat-grid > div:last-child { border-right: 0; }
.landing-stat-grid span,
.landing-stat-grid small {
	display: block;
	color: #737d88;
	font-size: 10px;
}
.landing-stat-grid strong {
	display: block;
	color: #dfd7c1;
	font: 500 23px "Times New Roman", serif;
	margin: 2px 0;
}
.status-open { color: #92b9a5; }
.status-closed { color: #c05b66; }
.landing-warning {
	margin: 12px 0 0;
	color: #928a83;
	font-size: 11px;
}
.landing-participant-row {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 8px;
}
.landing-participant-row > div {
	text-align: center;
	padding: 15px 8px;
	background: rgba(0,0,0,.16);
	border: 1px solid rgba(149,153,159,.11);
}
.landing-participant-row strong {
	display: block;
	color: #e6dcc0;
	font: 500 28px "Times New Roman",serif;
}
.landing-participant-row span { color: #7d8692; font-size: 11px; }
.landing-card-participants p { color: #7f8791; font-size: 11px; line-height: 1.8; margin: 13px 0 0; }
.landing-form {
	display: grid;
	gap: 10px;
}
.landing-form label {
	display: grid;
	grid-template-columns: 66px 1fr;
	align-items: center;
	gap: 10px;
	color: #7d8793;
}
.landing-form input[type="text"],
.landing-form input[type="password"] {
	width: 100%;
	height: 34px;
	padding: 5px 9px;
}
.landing-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 7px;
	margin-top: 4px;
}
.landing-actions input { min-height: 33px; padding: 5px 14px; }
.landing-text-link { margin-left: auto; font-size: 11px; }
.landing-welcome { color: #a6afb9; margin-bottom: 4px; }
.landing-welcome strong { color: #e0d5b5; }
.landing-guide {
	margin-top: 13px;
	padding-top: 10px;
	border-top: 1px solid rgba(180,164,118,.13);
	color: #777f89;
	font-size: 11px;
}

/* ----- game layout ----- */
.game-shell {
	width: min(1240px, 100%);
	gap: 9px;
}
.game-main-panel,
.game-command-panel,
.game-chat-panel {
	border: 1px solid rgba(190,172,122,.21);
	background: linear-gradient(145deg, rgba(11,16,24,.91), rgba(6,10,16,.88));
	box-shadow: 0 12px 34px rgba(0,0,0,.26);
}
.game-command-panel {
	border-color: rgba(192,172,117,.29);
}
.panel-title.b1 {
	min-height: 32px;
	background: linear-gradient(90deg, rgba(43,47,53,.82), rgba(17,23,31,.92)) !important;
	border: 0 !important;
	border-bottom: 1px solid rgba(204,184,128,.27) !important;
	color: #ddd5c0 !important;
	font: 500 12px "Noto Serif SC","Songti SC",serif;
	letter-spacing: .06em;
}
.command-panel-body.b3,
.chat-panel-body.b3 {
	background: rgba(5,9,15,.48) !important;
	border: 0 !important;
}
.command-question {
	color: #8f98a4;
	font-family: "Noto Serif SC","Songti SC",serif;
	letter-spacing: .08em;
	text-align: center;
	padding: 4px 0 8px;
}
.command-enchant-title {
	color: #cbb77d !important;
	border-top: 1px solid rgba(191,171,116,.15);
	padding-top: 9px;
	font-weight: 500 !important;
}
.command-item-text .yellow { color: #d9c68e !important; }
#chatlist {
	background: rgba(2,5,9,.26);
	color: #aeb5be;
}
#sendchat {
	border-top: 1px solid rgba(177,164,126,.14);
}

/* status / inventory */
.profile-wrap { background: transparent; }
.profile-table,
.equip-table,
.pack-table {
	border-collapse: collapse;
	background: rgba(5,9,15,.34);
}
.profile-table {
	border: 0;
}
.profile-table .b1,
.equip-table .b1,
.pack-table .b1 {
	color: #d8cfb8 !important;
}
.profile-avatar-composite {
	border: 1px solid rgba(205,185,128,.34);
	box-shadow: 0 6px 19px rgba(0,0,0,.34), inset 0 0 20px rgba(0,0,0,.16);
}
.inventory-grid {
	border-top: 1px solid rgba(183,166,118,.12);
	padding-top: 9px;
}
.inventory-card {
	background: rgba(3,7,12,.20);
}
.affinity-toggle {
	color: #aa9870 !important;
	background: rgba(0,0,0,.24) !important;
	border-color: rgba(185,165,111,.28) !important;
}
.affinity-current { color: #e2d2a4; text-shadow: 0 0 12px rgba(209,185,116,.13); }

/* ----- registration / spiritron authentication ----- */
.valid-registration-page {
    width: min(1040px, calc(100% - 24px));
    margin: 0 auto 30px;
}
.valid-guide-text {
    width: min(760px, 100%);
    margin: 0 auto 22px;
    padding: 20px 24px;
    color: #aeb6c1;
    line-height: 1.9;
    text-align: left;
    border: 1px solid rgba(198,178,124,.22);
    border-left: 2px solid rgba(154,51,65,.78);
    background:
        linear-gradient(105deg, rgba(9,14,22,.94), rgba(15,22,31,.74)),
        radial-gradient(circle at 88% 18%, rgba(132,171,180,.08), transparent 28%);
    box-shadow: var(--la-shadow);
    position: relative;
}
.valid-guide-text::after {
    content: "AUTHENTICATION";
    position: absolute;
    right: 18px;
    bottom: 5px;
    color: rgba(220,224,223,.035);
    font: 600 28px/1 "Times New Roman", serif;
    letter-spacing: .08em;
}
.valid-guide-kicker {
    color: #8f8670;
    font: 500 9px/1.3 "Segoe UI", sans-serif;
    letter-spacing: .24em;
}
.valid-registration-form {
    padding: 22px clamp(12px,3vw,30px) 28px;
    border: 1px solid rgba(198,178,124,.18);
    background: rgba(7,11,18,.58);
    box-shadow: 0 14px 38px rgba(0,0,0,.26);
}
.valid-rules {
    color: #c8b783 !important;
    font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", SimSun, serif;
    letter-spacing: .035em;
}

/* ----- battle ----- */
.battle-panel {
	border: 0 !important;
	background: transparent;
}
.battle-panel > tbody > tr > td.b3 {
	border: 0 !important;
	background:
		radial-gradient(ellipse at 50% 15%, rgba(78,91,106,.12), transparent 52%),
		linear-gradient(180deg, rgba(5,9,15,.28), rgba(3,6,10,.54)) !important;
}
.battle {
	min-width: 560px;
	background: rgba(5,9,15,.34);
	border: 1px solid rgba(188,170,120,.17);
	box-shadow: 0 15px 38px rgba(0,0,0,.30);
}
.battle td { border: 0; }
.battle tr:not(.battle-spacer) td {
	border-bottom: 1px solid rgba(143,149,158,.08);
}
.battle-scene-title {
	margin: 4px 0 14px;
	color: #d8c48b;
	font: 500 22px/1.3 "Noto Serif SC","Source Han Serif SC","Songti SC",serif;
	letter-spacing: .13em;
	text-shadow: 0 4px 20px rgba(0,0,0,.74);
}
.battle-portrait {
	border: 1px solid rgba(199,179,123,.34);
	box-shadow:
		0 13px 30px rgba(0,0,0,.34),
		inset 0 0 45px rgba(0,0,0,.34);
	background-color: #070b11;
}
.battle-portrait::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
	box-shadow: inset 0 -46px 65px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.018);
}
.battle-vs {
	color: #8d3440;
	font: italic 500 18px "Times New Roman",serif;
	letter-spacing: .12em;
}
.battle-np-shell {
	background: rgba(4,8,14,.84) !important;
	border-color: rgba(178,165,126,.27) !important;
	box-shadow: inset 0 0 12px rgba(0,0,0,.45);
}
.battle-np-fill {
	background: linear-gradient(to top, #3e6771, #83b2b8) !important;
	box-shadow: 0 0 10px rgba(111,173,184,.20);
}
.battle-np-shell-full .battle-np-fill,
.battle-np-fill-full {
	background: linear-gradient(to top, #8b6a25, #e2c86d) !important;
	box-shadow: 0 0 14px rgba(221,190,91,.24);
}
.battle-dead { opacity: .52 !important; }

/* command cards */
.qba-card {
	border-radius: 2px !important;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 5px 15px rgba(0,0,0,.24) !important;
	font-family: "Times New Roman","Microsoft YaHei",sans-serif;
	letter-spacing: .03em;
}
.qba-q { background: linear-gradient(145deg,#304f3d,#17291f) !important; }
.qba-a { background: linear-gradient(145deg,#274961,#142736) !important; }
.qba-b { background: linear-gradient(145deg,#66323a,#34181e) !important; }
.qba-n { background: linear-gradient(145deg,#695326,#2f2615) !important; }

/* ----- help / content pages ----- */
.help-shell,
.prolog,
.box {
	border: 1px solid rgba(189,170,119,.20);
	background: linear-gradient(145deg, rgba(13,19,27,.82), rgba(7,11,17,.76));
	box-shadow: 0 12px 34px rgba(0,0,0,.20);
}
.help-shell {
	width: min(1060px, 100%);
	margin: 0 auto;
	padding: clamp(16px,3vw,34px);
	text-align: left;
}
.prolog,
.box {
	margin: 18px 0;
	padding: 20px 22px;
	line-height: 1.95;
}
.prolog {
	border-left: 2px solid rgba(151,55,66,.72);
}
.menutbl {
	width: min(820px, 100%);
	margin: 0 auto 22px;
	border: 1px solid rgba(186,168,118,.25) !important;
	background: rgba(6,10,16,.62);
}
.menutbl td {
	border: 1px solid rgba(155,158,164,.12) !important;
	padding: 6px 8px;
}
.menutbl a { color: #aaa995; }
.FAQ dt {
	color: #d8c99d;
	margin-top: 13px;
	font-weight: 500;
}
.FAQ dd {
	margin: 5px 0 14px 20px;
	color: #aeb5bd;
}
.weapon,
.help-shell table:not(.menutbl) {
	max-width: 100%;
	background: rgba(3,7,12,.35);
}
.help-shell th {
	color: #dacb9f;
	background: rgba(57,53,44,.55);
}

/* ----- list / history / rank / generic content ----- */
.rank-table-wrap,
.report-panel,
.admin-panel {
	border-color: rgba(189,170,119,.24) !important;
	background: linear-gradient(145deg, rgba(12,18,26,.88), rgba(6,10,16,.86)) !important;
	box-shadow: 0 12px 34px rgba(0,0,0,.22);
}
.rank-btn {
	background: rgba(14,19,27,.88) !important;
	border-color: rgba(180,163,116,.32) !important;
	color: #b5ab8d !important;
}
.rank-btn.active,
.rank-btn:hover {
	background: rgba(70,53,42,.74) !important;
	color: #eee2bd !important;
}
.admin-shell { color: var(--la-text); }
.admin-panel { border-radius: 3px !important; }
.admin-topbar h1,
.admin-panel-head h2,
.admin-panel h3 { color: #d8c78f !important; }
.admin-menu-card {
	border-radius: 2px !important;
	background: linear-gradient(145deg, rgba(35,40,49,.90), rgba(12,17,24,.94)) !important;
	border-color: rgba(192,173,119,.27) !important;
}
.admin-menu-card:hover {
	border-color: rgba(217,194,130,.62) !important;
	background: linear-gradient(145deg, rgba(48,51,57,.96), rgba(17,21,27,.96)) !important;
}
.admin-menu-card strong { color: #e0cf9e !important; }
.admin-shell table.admin th {
	background: rgba(52,49,41,.92) !important;
	color: #dfcf9e !important;
	border-color: rgba(194,174,120,.27) !important;
}
.admin-shell table.admin td,
.admin-shell table.admin tbody tr:nth-child(even) td {
	background: rgba(12,17,24,.86) !important;
	border-color: rgba(146,151,159,.12) !important;
}

.admin-shell table.admin tbody tr:hover td {
	background: rgba(31,34,39,.92) !important;
}

/* 已退场角色：无论奇数行、偶数行或鼠标悬停，都保持红色 */
.admin-shell table.admin tbody tr.admin-row-danger td,
.admin-shell table.admin tbody tr.admin-row-danger:nth-child(even) td,
.admin-shell table.admin tbody tr.admin-row-danger:hover td {
	background: rgba(100,20,28,.78) !important;
}

/* item tooltips */
.item-hover-tip {
	border-color: rgba(206,183,121,.48) !important;
	background: rgba(6,10,16,.97) !important;
	color: #cbd1d8 !important;
	border-radius: 2px !important;
	box-shadow: 0 16px 40px rgba(0,0,0,.55) !important;
}
.item-hover-tip-head { color: #dccb99 !important; border-bottom-color: rgba(183,163,108,.22) !important; }

/* runtime generated charge/enchant/reinforce panels get a unified shell even if they carry inline styles */
.charge-panel,
.enchant-panel,
.reinforce-panel {
	background: linear-gradient(145deg, rgba(11,17,25,.96), rgba(5,9,15,.97)) !important;
	border-color: rgba(199,180,126,.34) !important;
	border-radius: 3px !important;
	box-shadow: 0 14px 36px rgba(0,0,0,.32);
}
.charge-title,
.enchant-title,
.reinforce-title { color: #d8c68f !important; }
.charge-option,
.enchant-option,
.reinforce-option {
	background: rgba(5,9,15,.72) !important;
	border-color: rgba(161,156,137,.20) !important;
	border-radius: 2px !important;
}

/* ----- responsive ----- */
@media screen and (max-width: 980px) {
	.site-header-frame {
		align-items: flex-start;
		flex-direction: column;
		gap: 9px;
	}
	.headerlink { justify-content: flex-start; }
	.headerlink a + a::before { margin-right: 12px; }
	.landing-grid { grid-template-columns: 1fr; }
}

@media screen and (max-width: 760px) {
	.site-header { padding: 10px 7px 0; }
	.site-header-frame { padding: 0 8px 9px; }
	.site-brand-title { font-size: 21px; }
	.site-content { padding: 18px 7px 0; }
	.headerlink {
		width: 100%;
		flex-wrap: nowrap;
		overflow-x: auto;
		justify-content: flex-start;
		padding-bottom: 4px;
		scrollbar-width: thin;
	}
	.headerlink a { padding: 6px 7px; flex: 0 0 auto; }
	.headerlink a + a::before { display: none; }
	.landing-hero {
		min-height: 220px;
		padding: 30px 20px;
	}
	.landing-hero h1 { font-size: 29px; }
	.landing-stat-grid { grid-template-columns: repeat(2,1fr); }
	.landing-stat-grid > div:nth-child(2) { border-right: 0; }
	.landing-stat-grid > div:nth-child(-n+2) { border-bottom: 1px solid rgba(161,151,119,.13); }
	.site-footer-inner { grid-template-columns: 1fr; text-align: center; }
	.site-footer-left,
	.site-footer-right { text-align: center; }
	.site-footer-center { order: -1; }
	.help-shell { padding: 15px 12px; overflow-x: auto; }
	.menutbl { min-width: 620px; }
	.battle { min-width: 520px; }
	.game-main-panel { overflow-x: auto; }
}

@media screen and (max-width: 480px) {
	.la-moon { right: -20px; top: 42px; opacity: .46; }
	.landing-hero h1 { font-size: 25px; letter-spacing: .05em; }
	.landing-participant-row { gap: 4px; }
	.landing-card { padding: 17px 14px; }
	.landing-form label { grid-template-columns: 1fr; gap: 3px; }
}

@media (prefers-reduced-motion: reduce) {
	* { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; }
}


/* ========================================================================
   Observation log terminal
   ======================================================================== */
.la-news-page{width:min(1040px,100%);margin:0 auto;text-align:left}
.la-observation-terminal{position:relative;display:grid;grid-template-columns:112px minmax(0,1fr);gap:22px;align-items:center;margin:14px 0 18px;padding:22px 26px;overflow:hidden;border:1px solid rgba(190,168,103,.34);background:linear-gradient(135deg,rgba(8,16,27,.92),rgba(12,22,34,.72));box-shadow:0 18px 44px rgba(0,0,0,.28),inset 0 0 38px rgba(77,119,146,.05)}
.la-observation-terminal:after{content:"";position:absolute;inset:auto -8% -60% 30%;height:130px;background:radial-gradient(ellipse,rgba(134,162,176,.12),transparent 68%);pointer-events:none}
.la-observation-sigil{position:relative;width:92px;height:92px;margin:auto;border:1px solid rgba(210,190,125,.46);border-radius:50%;box-shadow:0 0 32px rgba(145,179,198,.11),inset 0 0 18px rgba(210,190,125,.08)}
.la-observation-sigil:before,.la-observation-sigil:after,.la-observation-sigil span:before,.la-observation-sigil span:after{content:"";position:absolute;left:50%;top:50%;background:rgba(210,190,125,.42);transform-origin:center}
.la-observation-sigil:before{width:72%;height:1px;transform:translate(-50%,-50%) rotate(45deg)}
.la-observation-sigil:after{width:72%;height:1px;transform:translate(-50%,-50%) rotate(-45deg)}
.la-observation-sigil span:before{width:1px;height:72%;transform:translate(-50%,-50%)}
.la-observation-sigil span:after{width:58%;height:58%;border:1px solid rgba(145,179,198,.34);border-radius:50%;background:transparent;transform:translate(-50%,-50%)}
.la-observation-kicker{margin-bottom:3px;color:#8ea7b8;font:10px/1.4 Georgia,"Times New Roman",serif;letter-spacing:.22em}
.la-observation-title{color:#e8d9a4;font:600 24px/1.35 "Noto Serif SC","Songti SC","SimSun",serif;letter-spacing:.16em;text-shadow:0 0 18px rgba(231,216,164,.1)}
.la-observation-text{margin-top:8px;color:#bdc9d2;line-height:1.8}
@media(max-width:600px){.la-observation-terminal{grid-template-columns:72px minmax(0,1fr);gap:14px;padding:17px 15px}.la-observation-sigil{width:64px;height:64px}.la-observation-title{font-size:20px}}

/* ========================================================================
   2026-09-13 Visual Comfort Pass
   保留 Fate/Last Archive 的月夜基调，但增加局部明暗、冷暖和层级差，
   避免长时间游玩时整屏“同一种深蓝黑”造成视觉疲劳。
   ======================================================================== */

:root {
    --la-bg: #0a0e16;
    --la-bg-deep: #05070c;
    --la-panel: rgba(14, 20, 29, .91);
    --la-panel-soft: rgba(20, 27, 38, .80);
    --la-panel-strong: rgba(8, 12, 19, .95);
    --la-line: rgba(199, 178, 124, .36);
    --la-line-bright: rgba(222, 201, 145, .68);
    --la-gold: #d6c083;
    --la-gold-soft: #ad9b70;
    --la-ivory: #ece7da;
    --la-text: #d1d5dc;
    --la-muted: #8d95a1;
    --la-cyan: #8ab5bd;
    --la-crimson: #8f3945;
    --la-crimson-bright: #c25561;
}

body.la-body,
body {
    color: var(--la-text);
    background:
        radial-gradient(circle at 78% 10%, rgba(196,211,215,.105) 0, rgba(129,154,164,.045) 15%, transparent 31%),
        radial-gradient(ellipse at 16% 78%, rgba(123,82,47,.055) 0, transparent 32%),
        radial-gradient(ellipse at 91% 66%, rgba(116,48,61,.040) 0, transparent 30%),
        radial-gradient(ellipse at 42% 0%, rgba(42,59,80,.34) 0, transparent 47%),
        linear-gradient(180deg, #0d131d 0%, #090d14 50%, #05070b 100%) !important;
    background-image:
        radial-gradient(circle at 78% 10%, rgba(196,211,215,.105) 0, rgba(129,154,164,.045) 15%, transparent 31%),
        radial-gradient(ellipse at 16% 78%, rgba(123,82,47,.055) 0, transparent 32%),
        radial-gradient(ellipse at 91% 66%, rgba(116,48,61,.040) 0, transparent 30%),
        radial-gradient(ellipse at 42% 0%, rgba(42,59,80,.34) 0, transparent 47%),
        linear-gradient(180deg, #0d131d 0%, #090d14 50%, #05070b 100%) !important;
}

/* 背景装饰降低存在感，把注意力交还给游戏信息。 */
body::before { opacity: .52; }
.la-moon { opacity: .56; }
.la-mist-a { opacity: .13; }
.la-mist-b { opacity: .085; }

/* 整体稍微收紧，减少大面积空黑区域。 */
.site-content { padding-top: 20px; }
:root { --main-panel-height: 443px; }
#chatlist { height: 190px; }

/* ----- 信息层级：不要让所有格子都成为同一种黑色 ----- */
.b1 {
    background: linear-gradient(180deg, rgba(49,50,52,.94), rgba(27,29,34,.97)) !important;
    color: #e5dcc4 !important;
    border-color: rgba(207,184,124,.40) !important;
}

.b2,
.admin td {
    background: linear-gradient(180deg, rgba(29,37,49,.94), rgba(19,26,36,.96)) !important;
    color: #d3d7de !important;
    border-color: rgba(159,166,176,.20) !important;
}

.b3 {
    background: rgba(10,15,23,.78) !important;
    color: #d0d4db !important;
    border-color: rgba(155,162,172,.13) !important;
}

/* 内部网格线减少“铁丝网感”，但保留横向阅读锚点。 */
.profile-table td,
.equip-table td,
.pack-table td {
    border-color: rgba(157,164,174,.13) !important;
}
.profile-table tr:nth-child(even) > .b3,
.equip-table tr:nth-child(even) > td:not(.b1):not(.b2),
.pack-table tr:nth-child(even) > td:not(.b1):not(.b2) {
    background-color: rgba(19,25,34,.46) !important;
}

.section-caption {
    color: #ded2b2 !important;
    background: linear-gradient(180deg, rgba(49,46,40,.93), rgba(28,29,32,.97)) !important;
}

/* 主面板之间做轻微冷暖分区，避免三块区域融成一整片黑。 */
.game-main-panel {
    background:
        radial-gradient(circle at 12% 16%, rgba(121,87,50,.045), transparent 36%),
        linear-gradient(145deg, rgba(15,22,32,.94), rgba(8,13,20,.92)) !important;
}
.game-command-panel {
    background:
        radial-gradient(circle at 86% 10%, rgba(117,58,68,.040), transparent 34%),
        linear-gradient(145deg, rgba(14,21,31,.95), rgba(7,12,19,.94)) !important;
}
.game-chat-panel {
    background:
        linear-gradient(160deg, rgba(13,19,28,.93), rgba(6,10,16,.94)) !important;
}

.panel-title.b1 {
    background: linear-gradient(90deg, rgba(54,53,50,.94), rgba(28,32,39,.95)) !important;
    border-bottom-color: rgba(211,188,128,.36) !important;
    box-shadow: inset 3px 0 0 rgba(148,55,66,.62);
}

#chatlist {
    color: #bcc2ca;
    background:
        linear-gradient(180deg, rgba(10,15,23,.64), rgba(5,9,15,.78)),
        radial-gradient(ellipse at 15% 100%, rgba(122,86,50,.035), transparent 40%) !important;
}

/* 普通操作按钮略微提亮，避免和面板背景粘在一起。 */
input[type="button"],
input[type="submit"],
button,
.admin-btn,
#gamecmd input.cmdbutton {
    background: linear-gradient(180deg, rgba(49,57,69,.98), rgba(24,30,39,.99)) !important;
    border-color: rgba(194,176,128,.44) !important;
    color: #dce0e5 !important;
}
input[type="button"]:hover,
input[type="submit"]:hover,
button:hover,
.admin-btn:hover,
#gamecmd input.cmdbutton:hover {
    background: linear-gradient(180deg, rgba(65,68,72,.99), rgba(30,34,40,.99)) !important;
    border-color: rgba(224,200,137,.76) !important;
}

/*
 * 状态栏底部这几个 div 不是 b2 单元格，旧规则仍写死 #500，
 * 因此此前会残留 BRA 时代的深红底色。这里统一回月夜主题。
 */
.affinity-local-label,
.profile-summary-label {
    background: linear-gradient(180deg, rgba(37,46,59,.97), rgba(21,28,38,.98)) !important;
    color: #e0d7bd !important;
    border-right: 1px solid rgba(199,178,124,.28) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.profile-summary-money-label {
    color: #e3ca82 !important;
}
.profile-summary-value,
.affinity-display-cell {
    background: rgba(7,12,19,.38);
}

/*
 * 战斗用 Q / A / B 按钮恢复明确底色。
 * 必须带 #gamecmd 提高优先级，否则会被通用 cmdbutton 的 !important 灰底覆盖。
 */
#gamecmd input.cmdbutton.qba-card.qba-q {
    background: linear-gradient(180deg, #237754, #12432f) !important;
    border-color: rgba(91,180,132,.78) !important;
    color: #f0fff7 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 4px 13px rgba(8,42,27,.26) !important;
}
#gamecmd input.cmdbutton.qba-card.qba-a {
    background: linear-gradient(180deg, #2a6289, #173a55) !important;
    border-color: rgba(103,164,205,.80) !important;
    color: #f1f8ff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 4px 13px rgba(9,35,58,.28) !important;
}
#gamecmd input.cmdbutton.qba-card.qba-b {
    background: linear-gradient(180deg, #8a3e49, #4d2029) !important;
    border-color: rgba(201,99,111,.82) !important;
    color: #fff3f4 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 4px 13px rgba(62,15,24,.30) !important;
}
#gamecmd input.cmdbutton.qba-card.qba-n {
    background: linear-gradient(180deg, #81682d, #473817) !important;
    border-color: rgba(205,175,96,.78) !important;
    color: #fff9e8 !important;
}

#gamecmd input.cmdbutton.qba-card.qba-q:hover { background: linear-gradient(180deg,#2b8a62,#17543b) !important; }
#gamecmd input.cmdbutton.qba-card.qba-a:hover { background: linear-gradient(180deg,#3377a5,#1c4a6b) !important; }
#gamecmd input.cmdbutton.qba-card.qba-b:hover { background: linear-gradient(180deg,#a44a57,#622832) !important; }
#gamecmd input.cmdbutton.qba-card.qba-n:hover { background: linear-gradient(180deg,#987a34,#58461c) !important; }

#gamecmd input.cmdbutton.qba-card:disabled {
    opacity: .34 !important;
    filter: grayscale(.72) saturate(.55) !important;
}

/* 指令卡记录仍保持较暗，避免它与真正可点击的战斗卡争夺注意力。 */
.qba-record-card.qba-q { background: linear-gradient(145deg,#304f3d,#17291f) !important; }
.qba-record-card.qba-a { background: linear-gradient(145deg,#274961,#142736) !important; }
.qba-record-card.qba-b { background: linear-gradient(145deg,#66323a,#34181e) !important; }

@media screen and (max-width: 760px) {
    #chatlist { height: 180px; }
    :root { --main-panel-height: 0px; }
}

/* ========================================================================
   2026-09-13 Header / landing readability / character illustration pass
   ======================================================================== */

/* 页眉：左侧作品名保持一行并放大，右侧固定为两排导航。 */
.site-header {
    padding: 14px 18px 0;
}
.site-header-frame {
    width: min(1540px, 100%);
    padding: 0 14px 14px;
    display: grid;
    grid-template-columns: minmax(500px, .92fr) minmax(690px, 1.38fr);
    align-items: end;
    gap: 28px;
}
.site-brand {
    min-width: 0;
    grid-template-columns: auto auto;
    grid-template-areas: "kicker kicker" "title mark";
    align-self: end;
}
.site-brand-kicker {
    font-size: 10px;
    letter-spacing: .28em;
    margin-bottom: 5px;
}
.site-brand-title {
    margin-top: 0;
    white-space: nowrap;
    font-size: clamp(31px, 2.45vw, 40px);
    line-height: 1.12;
    letter-spacing: .055em;
}
.site-brand-mark {
    align-self: center;
    margin-left: 4px;
    font-size: 11px;
}
.headerlink {
    width: 100%;
    display: grid;
    grid-template-rows: repeat(2, auto);
    gap: 7px;
    margin: 0;
    font-size: 14px;
    line-height: 1.25;
}
.header-nav-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.header-nav-row a {
    flex: 0 1 136px;
    min-width: 104px;
    padding: 5px 8px;
    text-align: center;
    color: #b9c0ca;
    border: 1px solid transparent;
    border-bottom-color: rgba(196,178,128,.10);
    font-size: 14px;
    line-height: 1.35;
    letter-spacing: .035em;

    position: relative;
    overflow: hidden;
    transform: scale(1);
    transition:
        color .35s ease,
        border-color .35s ease,
        background .35s ease,
        transform .35s ease,
        text-shadow .35s ease;
}
.header-nav-row a + a::before {
    display: none !important;
    content: none !important;
}
.header-nav-row a:hover {
    color: #eee2bd;
    border-color: rgba(203,183,128,.28);
    border-bottom-color: rgba(229,205,139,.82);
    background: rgba(202,214,222,.025);

    transform: scale(1.04);

    text-shadow:
        0 0 8px rgba(221,205,160,.18),
        0 0 16px rgba(137,174,186,.10);
}
.header-nav-row a::after {
    content: "";
    position: absolute;

    top: -20%;
    left: -45%;

    width: 28%;
    height: 140%;

    pointer-events: none;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(210,225,229,.13),
        rgba(238,232,205,.18),
        transparent
    );

    transform: skewX(-18deg);
    opacity: 0;
}

.header-nav-row a:hover::after {
    animation: header-moon-sweep .65s ease-out 1;
}

@keyframes header-moon-sweep {
    0% {
        left: -45%;
        opacity: 0;
    }

    18% {
        opacity: .8;
    }

    100% {
        left: 120%;
        opacity: 0;
    }
}
.header-nav-row-secondary a {
    color: #9fa8b4;
}

/* 首页：提高所有次级信息字号，重点强化战局状态与计时。 */
.landing-eyebrow {
    font-size: 12px;
}
.landing-lead {
    font-size: 15px;
    line-height: 1.95;
}
.landing-hero-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 24px;
    font-size: 14px;
    line-height: 1.5;
}
.landing-war-number {
    color: #d4c28f;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .06em;
}
.landing-game-state {
    color: #ead69a;
    font: 600 18px/1.4 "Noto Serif SC","Source Han Serif SC","Songti SC",SimSun,serif;
    letter-spacing: .06em;
    text-shadow: 0 0 18px rgba(214,192,131,.13);
}
.landing-card-head span {
    font-size: 11.5px;
}
.landing-card-head b {
    font-size: 16px;
}
.landing-data-list > div {
    grid-template-columns: 96px 1fr;
    gap: 14px;
    padding: 9px 0;
}
.landing-data-list dt,
.landing-data-list dd {
    font-size: 13px;
    line-height: 1.7;
}
.landing-duration {
    margin-top: 15px;
    padding: 13px 12px 2px;
    border-top-color: rgba(209,187,127,.24);
    color: #c7cbd1;
    font-size: 14px;
    background: linear-gradient(90deg, rgba(213,190,128,.045), transparent 72%);
}
.landing-duration strong {
    color: #f0d58b;
    font: 600 24px/1.1 "Times New Roman","Microsoft YaHei",sans-serif;
    letter-spacing: .055em;
    text-shadow: 0 0 18px rgba(231,199,111,.16);
}
/* =========================================================
   首页战局计时器：数字纵向滚动切换
   ========================================================= */

#timing.rolling-time {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    vertical-align: middle;
	position: relative;
	top: 8px;
}

.rolling-time-digit {
    position: relative;
    display: inline-block;

    width: .62em;
    height: 1.12em;

    overflow: hidden;

    text-align: center;
    line-height: 1.12em;

    vertical-align: middle;

    font-variant-numeric: tabular-nums;
}

.rolling-time-colon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: .42em;
    height: 1.12em;

    line-height: 1.12em;

    vertical-align: middle;

    font-variant-numeric: tabular-nums;
}

.rolling-time-current,
.rolling-time-old,
.rolling-time-new {
    position: absolute;
    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    line-height: 1.12em;

    transform: translateY(0);
    opacity: 1;
}

/* 新数字初始藏在下方 */
.rolling-time-new {
    transform: translateY(105%);
    opacity: .35;
}

/* 旧数字向上离开 */
.rolling-time-old-run {
    transform: translateY(-105%);
    opacity: .15;

    transition:
        transform .46s cubic-bezier(.22,.61,.36,1),
        opacity .38s ease;
}

/* 新数字从下方滑入 */
.rolling-time-new-run {
    transform: translateY(0);
    opacity: 1;

    transition:
        transform .46s cubic-bezier(.22,.61,.36,1),
        opacity .38s ease;
}

@media (prefers-reduced-motion: reduce) {
    .rolling-time-old-run,
    .rolling-time-new-run {
        transition-duration: .001ms !important;
    }
}
.landing-record-line,
.landing-seal-status {
    font-size: 13px;
}
.landing-stat-grid span,
.landing-stat-grid small {
    font-size: 11.5px;
}
.landing-warning,
.landing-card-participants p,
.landing-guide {
    font-size: 12.5px;
    line-height: 1.8;
}
.landing-participant-row span {
    font-size: 12px;
}
.landing-form label,
.landing-welcome {
    font-size: 13px;
}
.landing-text-link {
    font-size: 12px;
}

/* 参战登记：左侧使用 img/npc/1.png，文本保持清晰的终端说明层。 */
.valid-guide-text {
    width: min(900px, 100%);
    min-height: 170px;
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 24px;
    align-items: center;
    padding: 18px 28px 18px 16px;
}
.valid-guide-npc {
    display: block;
    width: 160px;
    height: 166px;
    margin: 0 auto;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 12px 20px rgba(0,0,0,.40));
    position: relative;
    z-index: 1;
}
.valid-guide-copy {
    position: relative;
    z-index: 1;
    font-size: 14px;
    line-height: 2;
}
.valid-guide-kicker {
    display: inline-block;
    margin-bottom: 7px;
    font-size: 10px;
}

/* 观测记录：img/npc/2.png 左、正文中、几何观测纹章右。 */
.la-observation-terminal {
    grid-template-columns: 160px minmax(0,1fr) 116px;
    gap: 25px;
    min-height: 180px;
    padding: 18px 28px 18px 18px;
}
.la-observation-npc {
    display: block;
    width: 150px;
    height: 166px;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 12px 22px rgba(0,0,0,.42));
    position: relative;
    z-index: 1;
}
.la-observation-copy {
    position: relative;
    z-index: 1;
}
.la-observation-sigil {
    width: 96px;
    height: 96px;
    justify-self: center;
    opacity: .88;
    position: relative;
    z-index: 1;
}
.la-observation-text {
    font-size: 14px;
    line-height: 1.9;
}

/* Q/A/B 卡片的字族与其它操作按钮统一，避免英文卡名突然变成 Times New Roman。 */
.qba-card,
#gamecmd input.cmdbutton.qba-card {
    font-family: "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: .02em !important;
}

@media screen and (max-width: 1280px) {
    .site-header-frame {
        grid-template-columns: minmax(430px, .85fr) minmax(620px, 1.25fr);
        gap: 18px;
    }
    .site-brand-title { font-size: clamp(28px, 2.45vw, 34px); }
    .header-nav-row { gap: 5px; }
    .header-nav-row a {
        flex-basis: 122px;
        min-width: 96px;
        padding-left: 5px;
        padding-right: 5px;
        font-size: 13px;
    }
}

@media screen and (max-width: 1080px) {
    .site-header-frame {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 10px;
    }
    .site-brand-title {
        font-size: 31px;
    }
    .headerlink {
        width: 100%;
    }
    .header-nav-row {
        justify-content: flex-end;
    }
    .header-nav-row a {
        flex: 0 1 132px;
    }
}

@media screen and (max-width: 760px) {
    .site-header {
        padding: 9px 6px 0;
    }
    .site-header-frame {
        padding: 0 6px 9px;
    }
    .site-brand-title {
        font-size: 25px;
        white-space: normal;
    }
    .headerlink {
        overflow-x: auto;
        padding-bottom: 3px;
    }
    .header-nav-row {
        width: max-content;
        min-width: 100%;
        justify-content: flex-end;
    }
    .header-nav-row a {
        flex: 0 0 108px;
        min-width: 108px;
        font-size: 12px;
        padding: 5px 4px;
    }
    .valid-guide-text {
        grid-template-columns: 110px minmax(0,1fr);
        gap: 12px;
        padding: 14px;
    }
    .valid-guide-npc {
        width: 104px;
        height: 140px;
    }
    .valid-guide-copy {
        font-size: 12.5px;
        line-height: 1.8;
    }
    .la-observation-terminal {
        grid-template-columns: 105px minmax(0,1fr) 72px;
        gap: 12px;
        padding: 15px 12px;
    }
    .la-observation-npc {
        width: 100px;
        height: 135px;
    }
    .la-observation-sigil {
        width: 64px;
        height: 64px;
    }
}

@media screen and (max-width: 520px) {
    .valid-guide-text {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .valid-guide-npc {
        height: 126px;
    }
    .la-observation-terminal {
        grid-template-columns: 86px minmax(0,1fr);
    }
    .la-observation-npc {
        width: 82px;
        height: 118px;
    }
    .la-observation-sigil {
        position: absolute;
        right: 12px;
        bottom: 10px;
        width: 54px;
        height: 54px;
        opacity: .26;
    }
}

/* ========================================================================
   2026-09-13 Header navigation slot alignment fix
   - 导航永远按 5 个等宽槽位排布
   - 一行只有 4 项时，占第 2~5 槽，左侧正好空出 1 个按钮位
   - 导航组不再贴网页最右侧，而是紧接作品标题之后
   ======================================================================== */
@media screen and (min-width: 1081px) {
.site-header-frame {
    --header-nav-width: clamp(540px, 43.4vw, 690px);
    width: min(1540px, 100%);
    grid-template-columns: max-content var(--header-nav-width);

    /* 标题 + 导航整体仍然居中 */
    justify-content: center;

    column-gap: 12px;
    row-gap: 0;
}

    .site-brand {
        width: max-content;
        max-width: none;
    }

    .site-brand-title {
        white-space: nowrap;
    }

    .headerlink {
        width: var(--header-nav-width);
        min-width: 0;
        justify-self: start;
    }

    .header-nav-row {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 8px;
        justify-content: initial;
        align-items: center;
    }

    .header-nav-row a {
        width: auto;
        min-width: 0;
        max-width: none;
        padding-left: 6px;
        padding-right: 6px;
        text-align: center;
        justify-self: stretch;
    }

    /* 4 个入口：固定使用第 2~5 个槽位，左侧空出一个完整入口位。 */
    .header-nav-row:has(> a:nth-child(4):last-child) > a:first-child {
        grid-column: 2;
    }

    /* 预留：若未来某种状态只剩 3 个入口，仍按同样规则向右对齐。 */
    .header-nav-row:has(> a:nth-child(3):last-child) > a:first-child {
        grid-column: 3;
    }

    /* 5 个入口时从第 1 格开始，与标题右缘形成紧凑衔接。 */
    .header-nav-row:has(> a:nth-child(5):last-child) > a:first-child {
        grid-column: 1;
    }
}

/* ========================================================================
   2026-09-13 User requested visual fixes
   1) 战斗 Q/A/B 按钮文字与普通“逃跑”等 cmdbutton 保持一致
   2) 页眉作品名加粗，并修复标题右半部分被导航透明区域遮挡点击的问题
   3) 页眉 ◆ 放大
   4) 首页卡片标题悬停时短暂放大后复原
   5) 能力参数 / 击破数 / QP 的内部竖线统一为月夜主题边框色
   ======================================================================== */

/* 0. 战斗 Q / A / B：只统一文字效果，保留各自绿/蓝/红按钮底色。 */
#gamecmd input.cmdbutton.qba-card {
    font-family: "微软雅黑", "Microsoft YaHei", sans-serif !important;
    font-size: 10.5pt !important;
    font-weight: normal !important;
    font-style: normal !important;
    letter-spacing: normal !important;
    line-height: normal !important;
    color: #dce0e5 !important;
    text-shadow: none !important;
}

/* 1 + 2. 页眉作品名：加粗；提高层级，保证整个作品名都属于首页链接点击区域。 */
.site-brand {
    position: relative;
    z-index: 3;
}

.site-brand-title {
    font-weight: 700 !important;
}

.site-brand-mark {
    font-size: 16px !important;
}

/*
 * 桌面端导航自身可能覆盖到作品名右侧的透明区域。
 * nav 容器不拦截鼠标，真正的导航链接仍可正常点击。
 * 这样“终末记录”整段都能点击返回首页。
 */
@media screen and (min-width: 1081px) {
    .site-header-frame {
        justify-content: center;
        column-gap: 12px;
    }

    /* 左侧作品名和右侧导航等量向中央靠拢 */
    .site-brand {
        transform: translateX(70px) !important;
    }

    .headerlink {
        transform: translateX(-70px) !important;

        position: relative;
        z-index: 2;
        pointer-events: none;
    }

    .headerlink a {
        pointer-events: auto;
    }
}

/* 3. 首页“战局观测 / 灵子封锁 / 参战记录 / 观测接入”悬停动效。 */
.landing-card-head b {
    display: inline-block;

    transform: scale(1);
    transform-origin: center center;

    transition: transform .7s ease;

    will-change: transform;
}

.landing-card-head b:hover {
    transform: scale(1.14);
}

/* 4. 状态栏底部内部竖线：清除旧版 #966 红褐色残留，统一到当前主题。 */
.affinity-local-label,
.profile-summary-kill-label,
.profile-summary-kill-value,
.profile-summary-money-label {
    border-right: 1px solid rgba(159, 166, 176, .20) !important;
}


/* ========================================================================
   2026-09-13 首页交互跳转
   ======================================================================== */
.landing-state-link {
    text-decoration: none;
    cursor: pointer;
}

/* 顶部“开放参战登记 / 记录已终止”保持原 landing-game-state 的字体与尺寸不变。 */
.landing-game-state.landing-state-link {
    color: #ead69a !important;
    font: 600 18px/1.4 "Noto Serif SC","Source Han Serif SC","Songti SC",SimSun,serif !important;
    letter-spacing: .06em !important;
    text-shadow: 0 0 18px rgba(214,192,131,.13);
}

/* “当前记录”中的同名状态继续沿用 clit 原有样式。 */
.clit.landing-state-link {
    color: var(--la-ivory) !important;
    font: 600 15px/1.4 "Noto Serif SC", "Source Han Serif SC", "Songti SC", SimSun, serif !important;
    letter-spacing: .08em !important;
}

.landing-state-link:hover {
    color: #f1dda2 !important;
    text-shadow: 0 0 14px rgba(220,197,132,.22);
}
.landing-record-result,
.landing-record-player {
    font: inherit !important;
    color: #e1d3aa !important;
    font-weight: 500 !important;
    text-decoration: none;
    white-space: nowrap;
}
.landing-record-result:hover,
.landing-record-player:hover {
    color: #f0d58b !important;
    text-shadow: 0 0 12px rgba(231,199,111,.18);
}
.landing-record-line-damage {
    justify-content: flex-start;
}
.landing-record-line-damage .landing-record-damage {
    margin-left: 1px !important;
    color: #7f8893;
    white-space: nowrap;
}
.landing-block-link {
    color: inherit !important;
    font: inherit !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.landing-block-link:hover {
    color: inherit !important;
    text-shadow: none !important;
}
.landing-stat-grid.landing-block-link:hover {
    border-color: rgba(210,189,130,.34);
    background: rgba(210,189,130,.025);
    box-shadow: inset 0 0 18px rgba(210,189,130,.025);
}
.landing-participant-row.landing-block-link:hover > div {
    border-color: rgba(205,185,128,.24);
    background: rgba(210,189,130,.035);
}
.landing-stat-grid.landing-block-link:focus-visible,
.landing-participant-row.landing-block-link:focus-visible,
.landing-state-link:focus-visible,
.landing-record-result:focus-visible,
.landing-record-player:focus-visible {
    outline: 1px solid rgba(222,199,139,.72);
    outline-offset: 3px;
}

/* “上回观测结果”右侧记录者不再顶到最右边，紧跟结果文字。 */
.landing-record-line:not(.landing-record-line-damage) > em {
    margin-left: 2px;
}