/* 營地 */
.c-sec { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.c-sec .g-head h3 { font-size: 16px; }
.c-soul { display: inline-flex; align-items: center; gap: 4px; color: var(--soul); font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums; }
.c-soul img { width: 16px; height: 16px; }
.tag { padding: 2px 5px; background: var(--lo); color: var(--muted); line-height: 1; white-space: nowrap; }
.tag.on { background: var(--gold); color: #2a1a05; }
.pi { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pi b { font-weight: normal; }
.pi span { color: var(--muted); line-height: 1.3; }

/* 隊伍格 */
.c-party { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.c-slot { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 22px 4px 8px; margin: var(--px); background: var(--lo); color: var(--text);
  box-shadow: 0 0 0 var(--px) var(--rc, var(--line-dk)); }
.c-slot img { width: 32px; height: 32px; }
.c-slot .nm { max-width: 100%; overflow: hidden; white-space: nowrap; }
.c-slot.empty { color: var(--muted); box-shadow: 0 0 0 var(--px) var(--line-dk); }
.c-plus { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--muted); background: var(--panel); }


/* 選擇清單（隊伍與裝備共用） */
.c-picklist { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; scrollbar-width: none; }
.c-picklist::-webkit-scrollbar { display: none; }
.c-prow { display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin: var(--px); background: var(--lo); color: var(--text); text-align: left; width: calc(100% - 2 * var(--px));
  box-shadow: 0 0 0 var(--px) var(--line-dk), inset 3px 0 0 0 var(--rc); }
.c-prow.on { background: var(--panel2); }
.c-prow img { width: 32px; height: 32px; flex: none; }
.c-remove { width: calc(100% - 2 * var(--px)); margin-top: 6px; }

/* 人物列表 */
.c-group { display: flex; flex-direction: column; gap: 4px; }
.c-job { color: var(--gold); }
.c-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.c-card { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 6px; margin: var(--px); background: var(--panel); color: var(--text); text-align: center;
  box-shadow: 0 0 0 var(--px) var(--rc); }
.c-card img { width: 32px; height: 32px; }
.c-card .nm { max-width: 100%; overflow: hidden; white-space: nowrap; }
.c-card span:not(.nm) { max-width: 100%; overflow: hidden; white-space: nowrap; line-height: 1.3; }
.c-card.off { box-shadow: 0 0 0 var(--px) var(--line-dk); color: var(--muted); }
.c-card.off img { filter: grayscale(1) brightness(.5); }
.c-card.bond, .c-figure.bond { box-shadow: 0 0 0 var(--px) var(--rc), 0 0 0 calc(2 * var(--px)) var(--gold); }

/* 消耗品 */
.c-items { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.c-item { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; margin: var(--px); background: var(--lo); box-shadow: 0 0 0 var(--px) var(--rc); }
.c-item img { width: 32px; height: 32px; }
.c-item .ct { position: absolute; right: 2px; bottom: 0; line-height: 1; color: var(--text); text-shadow: 1px 1px 0 #000; }
.c-item .new { position: absolute; left: 0; top: 0; padding: 0 3px; line-height: 1.2; background: var(--danger); color: #fff; }

/* 人物頁 */
.c-head { display: flex; align-items: center; gap: 8px; }
.c-figure { display: flex; gap: 10px; padding: 10px; margin: var(--px); box-shadow: 0 0 0 var(--px) var(--rc), inset 0 0 0 var(--px) #07061a; }
.c-figure .fig { flex: none; width: 84px; height: 108px; display: flex; align-items: flex-end; justify-content: center; background: var(--panel); }
.c-figure .fig img { width: 72px; height: 96px; }
.c-figure .side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.c-figure .persona { color: var(--muted); line-height: 1.4; }
.c-figure .pv { display: flex; flex-direction: column; gap: 2px; line-height: 1.4; }
.c-figure .pv b { font-weight: normal; color: var(--r4); }
.c-figure .sch { display: flex; align-items: center; gap: 6px; color: var(--gold); }
.c-figure .sch i, .c-school .sh i { width: 12px; height: 12px; flex: none; box-shadow: 0 0 0 2px #07061a; }
.c-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.c-stats .sr { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); }
.c-stats .sr b { font-weight: normal; color: var(--text); font-variant-numeric: tabular-nums; text-align: right; }
.c-stats .sr.pv { grid-column: 1 / -1; flex-direction: column; }
.c-stats .sr.pv b { color: var(--r4); text-align: left; line-height: 1.4; }
.c-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.c-strip .sym { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; margin: var(--px); background: var(--lo); box-shadow: 0 0 0 var(--px) var(--line-dk); }
.c-strip .sym img { width: 24px; height: 24px; }
.c-strip .sym b { font-weight: normal; font-size: 16px; line-height: 1; }
.c-strip .sym span { color: var(--muted); line-height: 1.2; }
.c-strip .sym.zero { opacity: .4; }
.c-equip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.c-eq { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; margin: var(--px); background: var(--panel); color: var(--muted); box-shadow: 0 0 0 var(--px) var(--rc); }
.c-eq img { width: 36px; height: 36px; }
.c-eq .empty { width: 36px; height: 36px; background: var(--lo); }
.c-eq .nm { color: var(--text); max-width: 100%; overflow: hidden; white-space: nowrap; line-height: 1.2; }
.c-eq .nm.dim { color: var(--muted); }
.c-eq .updot { position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; background: var(--ok); box-shadow: 0 0 0 3px var(--panel); animation: blink 900ms steps(1) infinite; }
.c-skills, .c-schools { display: flex; flex-direction: column; gap: 6px; }
.c-skill, .c-school { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; margin: var(--px); background: var(--lo); box-shadow: 0 0 0 var(--px) var(--line-dk), inset 3px 0 0 0 var(--rc); }
.c-skill.locked { opacity: .55; }
.c-school.on { background: var(--panel2); box-shadow: 0 0 0 var(--px) var(--gold-dk), inset 3px 0 0 0 var(--rc); }
.c-skill .sh, .c-school .sh { display: flex; align-items: center; gap: 8px; min-height: 24px; }
.c-skill .sh b, .c-school .sh b { font-weight: normal; color: var(--rc); }
.c-skill .sh b { flex: 1; }
.c-skill .desc, .c-school .desc { color: var(--muted); line-height: 1.4; }
.c-school .ult { line-height: 1.4; }
.c-skill .sf { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.c-skill .dots { display: flex; gap: 3px; }
.c-skill .dots i { width: 8px; height: 8px; background: var(--lo); box-shadow: 0 0 0 2px var(--line-dk); }
.c-skill .dots i.on { background: var(--rc); }
.c-skill .eff { color: var(--muted); }
.c-rel { margin: 4px 0 2px; overflow: visible; }
.c-rel u { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--gold); }
.c-story { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; margin: var(--px); background: var(--lo); box-shadow: 0 0 0 var(--px) var(--line-dk); }
.c-story b { font-weight: normal; color: var(--gold); }
.c-story p { line-height: 1.6; }
.c-story.locked { opacity: .55; }
.c-story.locked p { color: var(--muted); }
.c-squadtabs { margin-bottom: 6px; }
.c-field { position: relative; height: 72px; margin-top: 6px; overflow: hidden; background: linear-gradient(#1a1642 0, #2a2452 60%, #3f9b5a 60%, #3f9b5a 64%, #4a3a2a 64%); box-shadow: 0 0 0 var(--px) var(--line-dk); }
.c-field .mid { position: absolute; left: 50%; top: 0; bottom: 0; border-left: 1px dashed var(--gold); opacity: .5; }
.c-field .hint { position: absolute; top: 3px; right: 6px; font-size: 11px; color: var(--muted); }
.c-field .fig { position: absolute; bottom: 36%; width: 24px; height: 32px; image-rendering: pixelated; }
.c-field .nm { position: absolute; bottom: 4px; transform: translateX(-50%); font-size: 11px; font-weight: normal; color: #fff; white-space: nowrap; text-shadow: 1px 1px 0 #000, -1px 0 0 #000, 0 -1px 0 #000, 1px 0 0 #000, 0 1px 0 #000; }
.c-slot .pos { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); padding: 1px 5px; font-style: normal; font-size: 11px; line-height: 1; color: #2a1a05; background: var(--gold); white-space: nowrap; }