/* ==========================================================================
   EmberHold — 焼け跡の拠点  (mobile first)
   ========================================================================== */

:root {
    --bg: #14110f;
    --bg-2: #1a1614;
    --panel: #1e1a17;
    --panel-2: #262019;
    --line: rgba(232, 176, 75, .16);
    --line-soft: rgba(255, 255, 255, .08);
    --text: #ece3d6;
    --muted: #9a8d80;
    --dim: #6b6058;
    --ember: #e0803a;
    --gold: #e8b04b;
    --good: #7fc08a;
    --bad: #e05252;
    --warn: #e8a04b;
    --blue: #7fa8c0;
    --r: 10px;
    --tabs-h: 58px;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
/* ダブルタップ拡大とテキスト選択を止める。誤爆でズームすると片手操作が破綻する */
html { -webkit-text-size-adjust: 100%; touch-action: manipulation; }
body { touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
button, .loc, .pick, .member, .resrow, .brow { touch-action: manipulation; }

body {
    background: radial-gradient(1000px 500px at 50% -8%, rgba(224, 128, 58, .10), transparent 70%), var(--bg);
    color: var(--text);
    font-family: 'Noto Sans JP', system-ui, sans-serif;
    font-size: 13.5px; line-height: 1.55;
    overflow: hidden;
}

.hidden { display: none !important; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
button:disabled, .disabled { opacity: .35; cursor: not-allowed; }
small { font-size: 11px; color: var(--muted); }
.xs { font-size: 10.5px; }
h2 { font-size: 14px; letter-spacing: .03em; margin-bottom: 9px; display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; row-gap: 2px; }
h2 > small { min-width: 0; }
.h2t { white-space: nowrap; }
h3 { font-size: 11.5px; color: var(--gold); letter-spacing: .06em; margin: 13px 0 6px; }
.muted { color: var(--muted); font-size: 12px; }
.warn-text { color: var(--warn); }
.bad-text { color: var(--bad); }
.center { text-align: center; }

/* ---------------------------------------------------------------- shell */

#app { display: flex; flex-direction: column; height: 100dvh; overflow-x: hidden; }
.card, .modal { min-width: 0; overflow-wrap: anywhere; }

#topbar {
    display: flex; align-items: center; gap: 8px;
    padding: calc(env(safe-area-inset-top) + 6px) 10px 6px;
    background: linear-gradient(180deg, #221c18, #1a1614);
    border-bottom: 1px solid var(--line);
}
.clockbox {
    display: flex; align-items: center; gap: 6px; font-size: 11.5px;
    background: rgba(0, 0, 0, .3); border: 1px solid var(--line-soft);
    padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
#clock-time { font-weight: 700; color: var(--gold); }

#speeds { display: flex; gap: 3px; }
.spd {
    min-width: 30px; padding: 4px 6px; font-size: 10.5px; font-weight: 700;
    border: 1px solid var(--line-soft); border-radius: 6px; color: var(--muted);
    background: rgba(0, 0, 0, .25);
}
.spd.on { background: var(--ember); border-color: var(--ember); color: #1a1210; }

#alerts { display: flex; gap: 5px; margin-left: auto; overflow: hidden; }
.alert {
    font-size: 10px; color: var(--bad); border: 1px solid rgba(224, 82, 82, .4);
    border-radius: 999px; padding: 1px 7px; white-space: nowrap; background: rgba(224, 82, 82, .1);
}
.icon-btn { font-size: 18px; color: var(--muted); padding: 2px 4px; }

/* 横には絶対にはみ出さない。少しでも溢れると画面全体がぐらつく */
#panel {
    overflow-x: hidden;
    flex: 1; overflow-y: auto; padding: 10px 10px 14px;
    display: flex; flex-direction: column; gap: 10px;
}
/* 縦並びの flex は既定で縮む。放っておくとカードが中身より低く潰れて文字が切れる */
#panel > * { flex: none; }

#tabs {
    display: flex; border-top: 1px solid var(--line); background: var(--bg-2);
    padding-bottom: env(safe-area-inset-bottom);
}
.tab {
    flex: 1; padding: 7px 2px calc(7px); font-size: 10.5px; color: var(--muted);
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    border-top: 2px solid transparent; margin-top: -1px;
}
.tab .ti { display: flex; align-items: center; justify-content: center; height: 20px; }
.tab.active { color: var(--gold); border-top-color: var(--ember); background: rgba(224, 128, 58, .07); }

/* 遠征ストリップ */
#expstrip { border-bottom: 1px solid var(--line); background: #1b1512; }
/* 状態が変わるたびに文字の幅が変わり、隣の顔やボタンが横に飛んでいた。
   入れ替わる所は先に幅を取っておく。 */
.strip { display: flex; align-items: center; gap: 8px; padding: 6px 10px; flex-wrap: nowrap; }
.strip.danger { background: linear-gradient(90deg, rgba(224, 82, 82, .2), transparent 70%); }
.strip-loc {
    flex: 1; min-width: 0; font-size: 11.5px; font-weight: 700;
    display: flex; align-items: center; gap: 4px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.strip-phase {
    flex: none; min-width: 48px; text-align: center; white-space: nowrap;
    font-size: 10.5px; color: var(--gold);
    display: inline-flex; align-items: center; justify-content: center; gap: 3px;
}
.strip-act { flex: none; min-width: 58px; display: flex; justify-content: flex-end; }
.blink { animation: blink 1.1s infinite; }
@keyframes blink { 50% { opacity: .35; } }
.pips { display: flex; gap: 4px; flex: none; }
.pip { position: relative; width: 26px; height: 26px; border-radius: 50%; overflow: hidden; border: 1px solid var(--line); }
.pip img { width: 100%; height: 100%; object-fit: cover; }
.pip i { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--good); }
.pip.hurt i { background: var(--warn); }
.pip.crit i { background: var(--bad); }
.pip.down { filter: grayscale(1) brightness(.5); }

/* ---------------------------------------------------------------- parts */

.card { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--r); padding: 11px 12px; }

.btn {
    padding: 8px 13px; border-radius: 8px; font-size: 12.5px; font-weight: 700;
    border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
}
.btn.primary { background: linear-gradient(180deg, #e0913a, #c96a26); color: #1a1210; border-color: transparent; }
.btn.danger { background: #7a2c2c; border-color: #a13c3c; }
.btn.boss { background: linear-gradient(180deg, #8a2b2b, #5e1d1d); border-color: #b04545; margin-top: 7px; }
.btn.ghost { background: transparent; }
.btn.sm { padding: 5px 10px; font-size: 11.5px; }
.btn.xs { padding: 4px 8px; font-size: 10.5px; }
.btn.lg { padding: 13px 40px; font-size: 15px; }
.btn.wide { width: 100%; }
.btn.on { outline: 2px solid var(--gold); }

.tag {
    font-size: 10px; padding: 1px 7px; border-radius: 999px; white-space: nowrap;
    border: 1px solid var(--c, var(--line)); color: var(--c, var(--muted));
}
.tag.work { --c: var(--good); }
.tag.idle { --c: var(--dim); }
.tag.away { --c: var(--blue); }
.tag.done { --c: var(--dim); }

.bar { position: relative; height: 13px; border-radius: 4px; overflow: hidden; background: rgba(0, 0, 0, .45); margin-top: 4px; }
.bar i { display: block; height: 100%; transition: width .15s linear; }
.bar span { position: absolute; inset: 0; font-size: 9.5px; line-height: 13px; text-align: center; color: #fff; text-shadow: 0 1px 2px #000; }
.bar.sm { height: 12px; }
.bar.xs { height: 5px; margin-top: 3px; }
.bar.hp i { background: linear-gradient(90deg, #4f9d63, #7fc08a); }
.bar.sta i { background: linear-gradient(90deg, #3d6b8c, #7fa8c0); }
.bar.atb i { background: #6b6058; }
.bar.atb i.ready { background: var(--gold); }
.bar.explore i { background: linear-gradient(90deg, #7a6a3d, var(--gold)); }
.bar.build i, .bar.craft i { background: linear-gradient(90deg, #a3652b, var(--ember)); }
.bar.res i { background: linear-gradient(90deg, #5d6b4a, #8aa06a); }

/* ---------------------------------------------------------------- colony tab */

.flows { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.flow {
    display: flex; align-items: baseline; gap: 4px; font-size: 12px;
    background: rgba(0, 0, 0, .28); border: 1px solid var(--line-soft);
    border-radius: 8px; padding: 3px 8px;
}
.flow small { font-size: 10px; }
.flow.up small { color: var(--good); }
.flow.down small { color: var(--bad); }

.works { display: flex; flex-direction: column; gap: 4px; }
.workrow { background: rgba(0, 0, 0, .2); border: 1px solid var(--line-soft); border-radius: 8px; padding: 5px 8px; }
.workrow.idle { padding: 3px 8px; opacity: .8; }
.workrow.active { border-color: rgba(232, 176, 75, .28); background: rgba(232, 176, 75, .05); }
.wtop { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.wname { font-weight: 700; white-space: nowrap; }
.wout { color: var(--gold); font-size: 10.5px; }
.wslot { font-size: 10px; color: var(--muted); margin-left: auto; }
.wreason { font-size: 10px; color: var(--dim); margin-top: 2px; }
.wfaces { display: flex; gap: 3px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.wface { width: 24px; height: 24px; border-radius: 5px; overflow: hidden; border: 1px solid var(--line-soft); }
.wface img { width: 100%; height: 100%; object-fit: cover; }
.wface.plain { border: none; display: flex; align-items: center; justify-content: center; }
.prios { display: flex; gap: 2px; }
.pbtn {
    width: 26px; padding: 3px 0; font-size: 10px; border-radius: 5px;
    border: 1px solid var(--line-soft); background: rgba(0, 0, 0, .3); color: var(--muted);
}
.pbtn.on { color: #1a1210; font-weight: 700; }
.pbtn.on.p0 { background: #6b6058; }
.pbtn.on.p1 { background: #7a8a6a; }
.pbtn.on.p2 { background: var(--gold); }
.pbtn.on.p3 { background: var(--ember); }

.blist { display: flex; flex-direction: column; }
.brow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); }
.brow:last-child { border-bottom: none; }
.binfo b { display: block; font-size: 12.5px; }
.lvtag { font-size: 10px; color: var(--gold); }

.progress-row { margin-bottom: 9px; }
.pr-top { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.pr-top small { margin-left: auto; }
.pr-top .x { color: var(--dim); font-size: 12px; }

.recipes { display: flex; flex-direction: column; gap: 4px; }
/* 縦積み。名前つきの材料を右端に押し込むと、行が詰まって折り返しが暴れる */
.recipe {
    text-align: left; padding: 7px 8px; border-radius: 8px;
    border: 1px solid var(--line-soft); background: rgba(0, 0, 0, .2);
}
.rtop { display: flex; align-items: baseline; gap: 6px; }
.rname { font-size: 12.5px; font-weight: 700; min-width: 0; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
.rout { flex: none; font-size: 10.5px; color: var(--good); display: inline-flex; align-items: center; gap: 2px; }
.rsub { color: var(--muted); font-size: 10.5px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
.have { font-size: 10px; color: var(--muted); }
.dura { font-size: 11px; color: var(--muted); }
.dura.low { color: var(--warn); }
.dura.broken { color: var(--bad); }

/* ---------------------------------------------------------------- squad tab */

.squad { display: flex; flex-direction: column; gap: 8px; }
.member {
    display: flex; gap: 9px; padding: 8px; cursor: pointer;
    background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: var(--r);
}
.member.away { opacity: .6; }
.mface { position: relative; width: 54px; height: 54px; flex: none; }
.mface img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.mface .lv {
    position: absolute; right: -3px; bottom: -4px; font-size: 9.5px; font-weight: 700;
    background: #1a1210; border: 1px solid var(--line); border-radius: 5px; padding: 0 4px; color: var(--gold);
}
.mbody { flex: 1; min-width: 0; }
.mtop { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gear { font-size: 10.5px; color: var(--muted); margin-top: 4px; }
.gear i { font-style: normal; color: var(--dim); }

.needs { display: flex; gap: 5px; margin-top: 5px; }
.need {
    position: relative; flex: 1; height: 13px; border-radius: 3px; overflow: hidden;
    background: rgba(0, 0, 0, .45); font-size: 9px; display: flex; align-items: center;
    gap: 2px; padding: 0 3px;
}
.nk { flex: none; display: flex; opacity: .9; }
.nv { flex: 1; text-align: right; font-weight: 700; font-size: 9.5px;
      color: #efe6da; text-shadow: 0 1px 2px rgba(0, 0, 0, .9); }
.need i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--dim); opacity: .8; }
.need.n0 i { background: #4f7a58; }
.need.n1 i { background: #7a8a4f; }
.need.n2 i { background: var(--warn); }
.need.n3 i { background: var(--bad); }
.need > * { position: relative; }

.notes { list-style: none; font-size: 12px; display: flex; flex-direction: column; gap: 3px; color: var(--warn); }
.notes li::before { content: '— '; color: var(--dim); }

/* ---------------------------------------------------------------- field tab */

.locs { display: flex; flex-direction: column; gap: 8px; }
.loc { padding: 9px; border-radius: var(--r); border: 1px solid var(--line-soft); background: var(--panel-2); }
.loc.sel { border-color: var(--ember); box-shadow: 0 0 0 1px var(--ember) inset; }
.loc-top { display: flex; justify-content: space-between; align-items: center; }
.loc p { font-size: 11px; margin: 3px 0 5px; }
.loc-meta { display: flex; gap: 10px; font-size: 10.5px; color: var(--muted); }
.danger { font-size: 10px; letter-spacing: 1px; }
.danger.d1 { color: var(--good); } .danger.d2 { color: #b7c07f; } .danger.d3 { color: var(--gold); }
.danger.d4 { color: var(--warn); } .danger.d5 { color: var(--bad); }
.hint { margin-top: 6px; font-size: 11px; color: var(--gold); font-weight: 700; }
.scout { margin-top: 4px; font-size: 10.5px; color: var(--blue); }
.unlockhint { margin-top: 4px; font-size: 10.5px; color: #a0c0d8; }
.freshhint { margin-top: 4px; font-size: 10.5px; color: var(--gold); font-weight: 700; }

.picks { display: flex; flex-direction: column; gap: 5px; }
.pick {
    display: flex; align-items: center; gap: 8px; text-align: left; padding: 6px;
    border: 1px solid var(--line-soft); border-radius: 8px; background: rgba(0, 0, 0, .2); position: relative;
}
.pick.sel { border-color: var(--ember); background: rgba(224, 128, 58, .1); }
.pick img { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; flex: none; }
.pick-info { display: flex; flex-direction: column; min-width: 0; }
.rowtag { position: absolute; right: 7px; top: 7px; font-size: 9.5px; color: var(--gold); }

.supplies { display: flex; flex-direction: column; gap: 5px; }
.supply { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; }
.stepper { display: flex; align-items: center; gap: 7px; }
.stepper button { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--line-soft); background: rgba(0, 0, 0, .3); font-weight: 700; }
.warnbox { margin-top: 8px; font-size: 11.5px; color: var(--warn); border: 1px dashed rgba(232, 160, 75, .4); border-radius: 8px; padding: 6px 9px; }
.launch-box { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.launch-info { display: flex; flex-direction: column; font-size: 12.5px; }

.run-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.run-top h2 { margin-bottom: 2px; }

/* 旅程 */
.journey { position: relative; height: 34px; margin-top: 12px; }
.jline { position: absolute; left: 18px; right: 18px; top: 16px; height: 3px; background: rgba(0, 0, 0, .5); border-radius: 2px; }
.jline i { display: block; height: 100%; background: linear-gradient(90deg, var(--ember), var(--gold)); border-radius: 2px; transition: width .3s linear; }
.jend { position: absolute; top: 6px; font-size: 15px; }
.jend.left { left: 0; } .jend.right { right: 0; }
.legrow { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.pips-dot { display: flex; gap: 4px; }
.pipdot { width: 7px; height: 7px; border-radius: 50%; background: rgba(0, 0, 0, .5); border: 1px solid var(--line); }
.pipdot.done { background: var(--gold); border-color: var(--gold); }
.pipdot.now { background: var(--ember); border-color: var(--ember); box-shadow: 0 0 6px var(--ember); }
.stop {
    position: absolute; top: 12px; width: 9px; height: 9px; margin-left: 12px;
    border-radius: 50%; background: #2c2521; border: 1px solid var(--line);
}
.stop.done { background: var(--gold); }
.stop.now { background: var(--ember); box-shadow: 0 0 8px var(--ember); }
/* 目印は線の内側に収める。はみ出すと横スクロールが生まれて画面が揺れる */
.journey { overflow: hidden; }
.jline { left: 22px; right: 22px; }
.jmark {
    position: absolute; top: 0; font-size: 16px; transition: left .3s linear;
    left: calc(22px + (100% - 44px) * var(--p, 0));
    transform: translateX(-50%);
}
.jmark.back { transform: translateX(-50%) scaleX(-1); }

.units { display: flex; flex-direction: column; gap: 7px; }
.ubox { display: flex; gap: 8px; padding: 7px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--line-soft); }
.ubox.critical { border-color: rgba(224, 82, 82, .5); }
.uface { width: 42px; height: 42px; flex: none; }
.uface img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.ubody { flex: 1; min-width: 0; }
.uname { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }

/* 戦場 */
/* 戦場。敵が現れた瞬間や倒れた瞬間に画面が飛ばないよう、高さを先に取っておく */
.battlefield { padding: 10px 8px; min-height: 356px; display: flex; flex-direction: column; }
.bf-label { font-size: 10.5px; color: var(--muted); }
.bf-label.allies-label { margin-top: 5px; text-align: right; }
.bf-side { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; }
.bf-side.foes { justify-content: flex-end; }

.clash { display: flex; align-items: center; gap: 8px; margin: 9px 0; }
.clash-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(224, 128, 58, .5), transparent); }
.clash-mark { flex: none; color: var(--ember); display: flex; opacity: .8; }

.brow-group { display: flex; align-items: center; gap: 6px; min-height: 74px; }
/* 誰も居ない列。枠は残すが、詰めて場所を空けすぎないようにする */
.brow-group.vacant { min-height: 22px; }
.brow-group.vacant .rowlabel { opacity: .4; }
.rowlabel { font-size: 9px; color: var(--dim); writing-mode: vertical-rl; letter-spacing: .1em; flex: none; }
.bunits { display: flex; gap: 5px; flex: 1; flex-wrap: wrap; align-items: stretch; }
.bempty { flex: 1; text-align: center; color: var(--dim); font-size: 11px; align-self: center; }
.brow-group.back { padding-left: 14px; opacity: .96; }

.bunit {
    position: relative; flex: 1 1 88px; max-width: 120px; min-width: 84px;
    padding: 5px 6px; border-radius: 8px;
    background: rgba(0, 0, 0, .3); border: 1px solid var(--line-soft);
}
.bunit.acting { border-color: var(--gold); background: rgba(232, 176, 75, .1); }
.bunit.big { flex: 1 1 140px; max-width: 100%; }
.bunit.boss { flex: 1 1 100%; max-width: 100%; background: linear-gradient(180deg, rgba(224, 82, 82, .18), rgba(0, 0, 0, .3)); border-color: rgba(224, 82, 82, .5); }
.bunit.boss .bface { height: 46px; }
.bunit.boss .foe-mark { font-size: 34px; }
.bunit.boss .bname { font-size: 13px; font-weight: 700; color: var(--gold); }
.bunit.boss .bar.hp { height: 12px; }
.bunit.critical { border-color: rgba(224, 82, 82, .55); }
.bunit.down { opacity: .35; filter: grayscale(1); }

/* 殴った/殴られた。何が起きているのか目で追えないと、ただ数字が動くだけになる */
.bunit.striking { animation: lunge .3s ease-out; }
.bunit.hit { animation: struck .42s ease-out; }
.foes .bunit.striking { animation: lungeDown .3s ease-out; }
@keyframes lunge { 0% { transform: translateY(0); } 40% { transform: translateY(-7px); } 100% { transform: translateY(0); } }
@keyframes lungeDown { 0% { transform: translateY(0); } 40% { transform: translateY(7px); } 100% { transform: translateY(0); } }
@keyframes struck {
    0% { transform: translateX(0); background: rgba(224, 82, 82, .5); }
    20% { transform: translateX(-4px); }
    45% { transform: translateX(4px); }
    70% { transform: translateX(-2px); }
    100% { transform: translateX(0); background: rgba(0, 0, 0, .3); }
}
.bface { position: relative; }
.slash {
    position: absolute; inset: -4px; pointer-events: none;
    background: linear-gradient(112deg, transparent 42%, rgba(255, 236, 200, .95) 50%, transparent 58%);
    animation: slashWipe .42s ease-out forwards;
}
@keyframes slashWipe { from { opacity: 1; transform: scale(.9); } to { opacity: 0; transform: scale(1.25); } }
.bface { height: 34px; display: flex; align-items: center; justify-content: center; }
.bface img { width: 34px; height: 34px; object-fit: cover; border-radius: 5px; }
.foe-mark { font-size: 20px; color: var(--bad); }
.foe-mark.big { font-size: 26px; }
.bname { font-size: 10.5px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bstatus { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; min-height: 12px; margin-top: 3px; }
.st { font-size: 10px; }
.eff { font-size: 8.5px; padding: 0 3px; border-radius: 3px; border: 1px solid; }
.eff.up { color: var(--good); border-color: rgba(127, 192, 138, .4); }
.eff.down { color: var(--bad); border-color: rgba(224, 82, 82, .4); }
.aim {
    font-size: 9.5px; color: var(--gold); text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    min-height: 13px; display: flex; align-items: center; justify-content: center; gap: 2px;
}

.pops { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.pop {
    position: absolute; left: 50%; top: 6px; transform: translateX(-50%);
    font-size: 15px; font-weight: 700; text-shadow: 0 2px 4px #000; white-space: nowrap;
}
.pop.dmg { color: #ffd9a0; }
.pop.dmg-foe { color: #ff9a9a; }
.pop.crit { color: var(--gold); font-size: 19px; }
.pop.heal { color: var(--good); }
.pop.bleed { color: #e05252; font-size: 12px; }
.pop.poison { color: #a06fc0; font-size: 12px; }
.pop.cover { color: var(--blue); font-size: 12px; }

/* ログ */
.field-log, .loglist {
    list-style: none; max-height: 240px; overflow-y: auto; font-size: 12px;
    display: flex; flex-direction: column; gap: 2px;
    background: rgba(0, 0, 0, .3); border-radius: 8px; padding: 7px;
}
.field-log.tall, .loglist.tall { max-height: 58dvh; }
.fl, .bl, .log { padding: 1px 3px; border-radius: 3px; }
.fl .t, .log .t { color: var(--dim); font-size: 9.5px; margin-right: 6px; }
.fl.voice, .log.voice { color: #d8c9a0; }
.fl.scene { color: #a89a88; font-style: italic; }
.fl.gain, .log.gain { color: var(--gold); }
.fl.rescue { color: var(--good); font-weight: 700; }
.fl.battle, .fl.bad, .fl.lose, .log.bad { color: var(--bad); }
.fl.win, .log.good { color: var(--good); }
.fl.event { color: #d8c9a0; }
.fl.arrive, .fl.start, .fl.flee { color: var(--blue); }
.fl.life { color: #9fb98c; }
.bl.ally, .fl.battle-ally { color: #c9dced; }
.bl.foe, .fl.battle-foe { color: #efc0c0; }
.bl.telegraph, .fl.battle-telegraph { color: var(--gold); opacity: .85; }
.bl.heal { color: var(--good); }
.bl.synergy { color: #d9a0e8; font-weight: 700; }
.bl.debuff { color: #c9a0d8; }
.bl.kill { color: var(--gold); }
.bl.down, .bl.lose, .bl.bad { color: var(--bad); font-weight: 700; }
.bl.break { color: var(--warn); }
.bl.win, .bl.flee { color: var(--good); font-weight: 700; }
.bl.encounter, .bl.boss { color: var(--ember); font-weight: 700; }
.crit { color: var(--gold); font-weight: 700; }

/* ---------------------------------------------------------------- stock tab */

/* 物資は詰めて並べ、詳しい話はタップした時だけ出す */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 5px; }
.tile {
    position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center;
    gap: 2px 6px; padding: 6px 8px 9px; border-radius: 8px; text-align: left;
    background: rgba(0, 0, 0, .22); border: 1px solid var(--line-soft);
}
.tile.empty { opacity: .45; }
.tile.low { border-color: rgba(224, 82, 82, .45); }
.ticon { font-size: 15px; }
.tname { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tnum { font-size: 13px; font-weight: 700; }
.tnet { grid-column: 2 / -1; font-size: 9.5px; color: var(--dim); text-align: right; }
.tnet.up { color: var(--good); } .tnet.down { color: var(--bad); } .tnet.cap { color: var(--warn); }
.tile.full { border-color: rgba(232, 160, 75, .45); }
.tile .bar.tiny { position: absolute; left: 8px; right: 8px; bottom: 4px; height: 3px; }

.discardrow { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.discardrow .btn { flex: 1; min-width: 0; }

.itemnums { display: flex; gap: 8px; margin: 10px 0; }
.itemnums > div { flex: 1; background: rgba(0, 0, 0, .25); border-radius: 8px; padding: 6px 10px; display: flex; flex-direction: column; }
.itemnums b { font-size: 17px; color: var(--gold); }
.itemnums b span { font-size: 10px; color: var(--dim); font-weight: 400; }
.factline { display: flex; gap: 10px; padding: 5px 0; border-top: 1px solid var(--line-soft); font-size: 12px; }
.factline small { flex: none; width: 68px; color: var(--muted); }
.good-text { color: var(--good); }

.reslist { display: flex; flex-direction: column; gap: 8px; }
.resrow { background: rgba(0, 0, 0, .2); border-radius: 8px; padding: 7px 9px; }
.resrow.low { border: 1px solid rgba(224, 82, 82, .4); }
.rtop { display: flex; align-items: baseline; gap: 8px; }
.rnum { margin-left: auto; font-weight: 700; }
.rnum small { color: var(--dim); }
.rnet { font-size: 10.5px; color: var(--muted); min-width: 52px; text-align: right; }
.rnet.up { color: var(--good); } .rnet.down { color: var(--bad); }

.eqlist { display: flex; flex-direction: column; gap: 5px; }
.eqrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 8px; background: rgba(0, 0, 0, .2); }
.eqinfo { display: flex; flex-direction: column; min-width: 0; }
.eqright { display: flex; align-items: center; gap: 8px; }

/* ---------------------------------------------------------------- modals */

#modal-root.hidden { display: none; }
/*
 * スマホの上端(ノッチ/ステータスバー)に潜り込まないよう、安全域ぶん空ける。
 * 閉じるボタンは親指の届く右下に大きく置く ── 右上の小さな×は片手では押せない。
 */
.modal-back {
    /* タイトル画面(z-index:100)より必ず上。確認ダイアログがその下に埋もれて
       押せなくなる不具合があったため、モーダルは常に最前面に固定する。 */
    position: fixed; inset: 0; background: rgba(8, 6, 5, .82); backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center; z-index: 200;
    padding: calc(env(safe-area-inset-top) + 14px) 12px calc(env(safe-area-inset-bottom) + 14px);
}
.modal {
    position: relative; width: min(640px, 100%);
    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 28px);
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    background: linear-gradient(180deg, #241d18, var(--panel));
    border: 1px solid var(--line); border-radius: 14px; padding: 16px 16px 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
}
/* 右下に浮かせる閉じるボタン。中身をスクロールしても付いてくる */
.modal-close {
    position: sticky; bottom: 0; z-index: 3;
    display: flex; justify-content: flex-end;
    margin-top: 12px; pointer-events: none;
}
.modal-x {
    pointer-events: auto;
    width: 48px; height: 48px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 19px; line-height: 1; color: var(--gold);
    background: rgba(36, 30, 26, .97); border: 1px solid var(--line);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .55);
}
.modal-x:active { background: var(--ember); color: #1a1210; }
/* 決めてもらうモーダルには選択肢しかない。誤タップで閉じられない */
.choice-modal, .rescue-modal, .trait-modal, .digest-modal { padding-bottom: 16px; }
.modal-foot {
    display: flex; justify-content: flex-start; align-items: center; gap: 8px;
    margin-top: 14px; padding-right: 58px; /* 右下の×の下に潜り込ませない */
}
.event-text { font-size: 13.5px; line-height: 1.85; margin: 8px 0; }
.choices { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }
.btn.choice { display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 10px 13px; }
.btn.choice small { color: var(--gold); }
.menu-list { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }

/* 遭遇 */
.meet { display: flex; gap: 12px; }
.meet-art { flex: none; width: 38%; max-width: 180px; border-radius: 10px; overflow: hidden;
    background: radial-gradient(circle at 50% 30%, rgba(224, 128, 58, .18), transparent 70%); }
.meet-art img { width: 100%; height: 100%; object-fit: contain; }
.meet-name { display: block; }
.meet-name small { display: block; font-weight: 400; }

/* 特性選択 */
.trait-head { display: flex; align-items: center; gap: 10px; }
.trait-head img { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; }
.trait-head h2 { margin-bottom: 0; font-size: 14px; }
.traitgrid { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.traitcard {
    text-align: left; padding: 10px 12px; border-radius: 10px; position: relative;
    border: 1px solid var(--line); background: rgba(0, 0, 0, .25);
}
.traitcard:hover { border-color: var(--ember); }
.traitcard b { display: block; font-size: 14px; color: var(--gold); }
.traitcard small { display: block; margin-top: 3px; }
.traitcard em { display: block; margin-top: 5px; font-size: 10.5px; color: var(--blue); font-style: normal; }
.tt { position: absolute; right: 10px; top: 9px; font-size: 9.5px; color: var(--muted); border: 1px solid var(--line-soft); border-radius: 999px; padding: 0 6px; }

/* ダイジェスト */
.digest-title { font-family: Cinzel, serif; font-size: 22px; letter-spacing: .06em; }
.digest-title.good { color: var(--gold); }
.digest-title.warn { color: var(--warn); }
.digest-title.bad { color: var(--bad); }
.digest-block { margin-top: 13px; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip { font-size: 11.5px; padding: 3px 9px; border-radius: 999px; background: rgba(0, 0, 0, .3); border: 1px solid var(--line-soft); }
.chip.gain { color: var(--gold); border-color: rgba(232, 176, 75, .3); }
.crew { display: flex; flex-direction: column; gap: 4px; }
.crewline { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.crewline img { width: 26px; height: 26px; border-radius: 5px; object-fit: cover; }
.crewline small { margin-left: auto; color: var(--muted); }
.rescued { display: flex; gap: 10px; align-items: center; padding: 9px; border-radius: 10px; background: rgba(224, 176, 75, .08); border: 1px solid var(--line); }
.rescued img { width: 50px; height: 50px; border-radius: 8px; object-fit: cover; }
.digest-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; gap: 8px; }

/* キャラシート */
.sheet-head { display: flex; align-items: baseline; gap: 8px; padding-right: 26px; }
.sheet-head b { font-size: 17px; }
.sheet-main { display: flex; gap: 10px; margin-top: 10px; }
.sheet-art {
    position: relative; flex: none; width: 34%; max-width: 150px; aspect-ratio: 2/3;
    border-radius: 10px; overflow: hidden; cursor: zoom-in;
    background: radial-gradient(circle at 50% 30%, rgba(224, 128, 58, .2), transparent 70%);
}
.sheet-art img { width: 100%; height: 100%; object-fit: contain; }
.zoomhint { position: absolute; right: 4px; bottom: 4px; font-size: 9px; color: var(--muted); background: rgba(0, 0, 0, .5); border-radius: 4px; padding: 0 4px; }
.sheet-info { flex: 1; min-width: 0; }
.cond { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 7px; }
.needbars { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.needline { display: flex; align-items: center; gap: 6px; font-size: 10.5px; }
.needline small { width: 52px; flex: none; display: flex; align-items: center; gap: 4px; }
/* 「満たされている」が2行に折れると行の高さが揺れる。1行に収める */
.needline b { flex: none; width: 76px; text-align: right; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; font-weight: 400; }
.needline .bar { flex: 1; margin-top: 0; height: 10px; }
.needline b { font-size: 10px; width: 62px; text-align: right; color: var(--muted); }
.needline .need.n2 b, .needline .need.n3 b { color: var(--warn); }
.bar.need.n0 i { background: #4f7a58; } .bar.need.n1 i { background: #7a8a4f; }
.bar.need.n2 i { background: var(--warn); } .bar.need.n3 i { background: var(--bad); }

.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.stats-grid.small { grid-template-columns: repeat(4, 1fr); }
.stats-grid > div {
    background: rgba(0, 0, 0, .25); border-radius: 6px; padding: 3px 6px;
    display: flex; flex-direction: column; min-width: 0;
}
/* 折り返させない。「スタミナ」が「スタミ/ナ」になると急に安っぽく見える */
.stats-grid > div > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stats-grid b { color: var(--gold); font-size: 12px; }
.stats-grid.small { margin-top: 9px; }
.stats-grid small { font-size: 9.5px; }

.save-btn {
    display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 10px;
}
.save-btn .savedat { margin-left: 4px; font-weight: 400; color: var(--muted); }
.save-btn.saved { background: linear-gradient(180deg, #4f8a5a, #386a42); border-color: transparent; color: #eafaee; }
.save-btn.saved .savedat { color: rgba(234, 250, 238, .8); }

.profile { font-size: 11.5px; color: var(--muted); margin: 9px 0 0; }
/* 装備は6枠(武器+5部位)。守りは合計されるが、傷みは部位ごとに出る */
.eqslots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.eqslot {
    display: flex; flex-direction: column; gap: 2px; min-width: 0;
    text-align: left; padding: 7px 9px; border-radius: 8px;
    border: 1px solid var(--line-soft); background: rgba(0, 0, 0, .22);
}
.eq-part { font-size: 9.5px; letter-spacing: .1em; color: var(--dim); }
.eqslot b {
    display: block; font-size: 12px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.eq-mods {
    font-size: 10px; color: var(--muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dura-bar {
    position: relative; height: 9px; margin-top: 2px; border-radius: 3px;
    background: rgba(0, 0, 0, .5); overflow: hidden;
}
.dura-bar i { display: block; height: 100%; background: var(--good); }
.dura-bar.low i { background: var(--bad); }
.dura-bar span {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 8px; color: #efe6da; text-shadow: 0 1px 2px rgba(0, 0, 0, .9);
}
.dura.none { font-size: 9.5px; color: var(--dim); margin-top: 3px; }
.traitlist { display: flex; flex-direction: column; gap: 4px; }
.traitchip { background: rgba(0, 0, 0, .25); border-radius: 7px; padding: 5px 9px; }
.traitchip b { color: var(--gold); font-size: 12px; }
.traitchip small { display: block; }
.skills { display: flex; flex-direction: column; gap: 4px; }
.skill { background: rgba(0, 0, 0, .25); border-radius: 7px; padding: 5px 9px; font-size: 12.5px; }
.skill small { display: block; }
.apts { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 10px; }
.apt { display: flex; align-items: center; gap: 5px; font-size: 10px; }
.apt small { flex: none; width: 66px; }
.apt-bar { flex: 1; height: 5px; background: rgba(0, 0, 0, .4); border-radius: 3px; overflow: hidden; }
.apt-bar i { display: block; height: 100%; background: var(--muted); }
.apt-bar i.good { background: var(--good); } .apt-bar i.poor { background: var(--dim); }

.eqpick { display: flex; flex-direction: column; gap: 5px; }
.eq { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line-soft); background: rgba(0, 0, 0, .2); }
.eq-body { flex: 1; min-width: 0; }
.eq-dura { flex: none; width: 62px; text-align: center; }
.eq-dura small { display: block; font-size: 9px; color: var(--warn); margin-top: 2px; }
.eqright .dbar { width: 56px; }
.eq.on { border-color: var(--ember); background: rgba(224, 128, 58, .12); }
.eq small { display: block; }

.zoomwrap { display: flex; justify-content: center; }
.zoomwrap img { max-height: 74dvh; max-width: 100%; object-fit: contain; }

.objectives { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.obj { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; }
.obj .check { color: var(--dim); }
.obj.done .check { color: var(--good); }
.obj.done b { color: var(--muted); text-decoration: line-through; }
.obj small { display: block; }

.intro-hero { display: flex; gap: 12px; align-items: center; margin: 12px 0 4px; padding: 10px; border-radius: 10px;
    background: radial-gradient(circle at 20% 30%, rgba(224, 128, 58, .16), transparent 70%); border: 1px solid var(--line-soft); }
.intro-hero img { width: 78px; height: 104px; object-fit: cover; object-position: top; border-radius: 8px; flex: none; }
.intro-hero b { font-size: 15px; margin-right: 6px; }
.intro-hero p { font-size: 11.5px; color: var(--muted); margin-top: 5px; line-height: 1.7; }
/* 村人は英雄と見た目からして違う、というのを最初の画面から示す */
.intro-hero.intro-second { background: radial-gradient(circle at 20% 30%, rgba(154, 141, 128, .14), transparent 70%); }
.intro-hero.intro-second .vface { flex: none; }
.intro-title { font-family: Cinzel, serif; font-size: 26px; letter-spacing: .12em; color: var(--gold); text-align: center; }
.end-roster { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; }
.end-face { text-align: center; width: 56px; }
.end-face img { width: 50px; height: 50px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.end-face small { display: block; font-size: 9.5px; }

/* ---------------------------------------------------------------- v3 additions */

.planrow { border: 1px dashed rgba(232, 176, 75, .35); border-radius: 8px; padding: 7px 9px; }
.planshort { display: block; color: var(--gold); margin-top: 2px; }
.tag.plan { --c: var(--gold); }
.packnote { margin: 6px 0 9px; line-height: 1.6; }
.pick-info b .tag { margin-left: 4px; }
.rescuehint { font-size: 11.5px; color: #d8c9a0; border: 1px dashed rgba(232, 176, 75, .35); border-radius: 8px; padding: 6px 9px; margin-bottom: 10px; }



/* 次にやること(導線) */
.nextstep { border-color: rgba(232, 176, 75, .3); background: linear-gradient(180deg, rgba(232, 176, 75, .09), var(--panel)); }
.ns-label { font-size: 10px; letter-spacing: .12em; color: var(--gold); }
.ns-name { display: block; font-size: 15px; margin-top: 3px; }
.ns-desc { font-size: 12px; color: var(--muted); margin-top: 3px; }
.ns-hint { font-size: 11.5px; color: #d8c9a0; margin-top: 6px; border-left: 2px solid var(--ember); padding-left: 8px; }
.hintline { color: var(--gold); }

/* 拠点の実況ログ */
.feed {
    list-style: none; display: flex; flex-direction: column; gap: 2px;
    height: 148px; overflow-y: auto; font-size: 12px;
    background: rgba(0, 0, 0, .3); border-radius: 8px; padding: 7px;
}
/* つぶやきは帳簿の外。ポツリと1行だけ */
.chatter { display: flex; align-items: center; gap: 7px; margin-top: 7px; font-size: 11.5px; color: #d8c9a0; min-height: 24px; }
.chatter img { width: 22px; height: 22px; border-radius: 5px; object-fit: cover; flex: none; opacity: .85; }
.chatter span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 仕事の進捗 */
.wprog.waiting .wrate { color: var(--warn); }
.wq { flex: none; font-size: 10px; color: var(--dim); }
.wprog { display: flex; align-items: center; gap: 7px; margin-top: 4px; }
.wrate { font-size: 10px; color: var(--muted); white-space: nowrap; flex: none; min-width: 96px; }
.bar.tiny { height: 4px; margin-top: 0; flex: 1; }
.bar.tiny i { background: linear-gradient(90deg, #7a6a3d, var(--gold)); }
.wface.pinned { border-color: var(--ember); box-shadow: 0 0 0 1px var(--ember); }

/* 個人への仕事指定 */
.assign { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.assign.wide { margin-top: 8px; }
/* 仕事の札。絵柄だけでは何の仕事か分からないので名前を添える */
.abtn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 9px; border-radius: 999px; font-size: 11px; line-height: 1;
    color: var(--muted); white-space: nowrap;
    border: 1px solid var(--line-soft); background: rgba(0, 0, 0, .3);
}
.abtn.on { color: var(--gold); font-weight: 700; }
.abtn.on { border-color: var(--ember); background: rgba(224, 128, 58, .22); }

/* 作業台の産物 */
.rout { color: var(--gold); font-size: 11px; }
.wtag { font-size: 10px; color: var(--blue); }

/* 遠征先の距離帯 */
.band {
    font-size: 10.5px; letter-spacing: .1em; color: var(--gold);
    margin: 14px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--line-soft);
}
.band:first-child { margin-top: 0; }
.card > .band:first-of-type { margin-top: 2px; }


/* 物資の付加情報 */
.spoil { color: var(--warn); }
.nut { color: var(--good); }

/* キャラシート */
.sheet { display: flex; flex-direction: column; gap: 10px; }
.meet-body { flex: 1; min-width: 0; }


/* ---------------------------------------------------------------- 村人 */

/* 顔絵の代わりの丸バッジ。英雄の肖像とは明確に別物に見せる */
.vface {
    display: inline-flex; align-items: flex-end; justify-content: center; flex: none;
    border-radius: 50%; overflow: hidden; background: var(--tint, #6b6058);
    border: 1px solid var(--line);
}
.vface svg { width: 86%; height: 86%; }
.vface svg path { fill: rgba(0, 0, 0, .45); }

.vlist { display: flex; flex-direction: column; gap: 5px; }
.vrow {
    display: flex; gap: 9px; align-items: center; padding: 7px 8px; border-radius: 9px;
    background: rgba(0, 0, 0, .2); border: 1px solid var(--line-soft); text-align: left; width: 100%;
}
.vbody { flex: 1; min-width: 0; }
.vtop { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.vtop b { font-size: 13px; }
.vtier { font-size: 9.5px; color: var(--c); border: 1px solid var(--c); border-radius: 999px; padding: 0 6px; }
.vskills { display: flex; gap: 8px; margin: 3px 0 2px; }
.vskill { font-size: 10px; color: var(--muted); }
.vskill b { color: var(--gold); font-size: 12px; margin: 0 1px 0 3px; }
.vskill em { font-style: normal; color: var(--dim); }

/* 立て札 */
.boardbox { border: 1px dashed rgba(232, 176, 75, .35); border-radius: 10px; padding: 9px; margin-bottom: 10px; }
.boardtop { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.cand { display: flex; gap: 10px; align-items: flex-start; }
.candbody { flex: 1; min-width: 0; }
.candtop { display: flex; align-items: center; gap: 7px; }
.candtop b { font-size: 15px; }
.vtrait { display: block; color: #d8c9a0; margin: 2px 0 6px; }
.candfoot { display: flex; gap: 7px; margin-top: 9px; }
.candfoot .btn { flex: 1; }

/* 伸びしろの帯。枠が天井、塗りが今の腕前 */
.pots { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; }
.pot { display: flex; align-items: center; gap: 5px; font-size: 9.5px; }
.pot small { flex: none; width: 40px; color: var(--muted); }
.pot em { font-style: normal; color: var(--dim); width: 34px; text-align: right; }
.pot.mid small { color: var(--blue); }
.pot.hi small { color: var(--gold); font-weight: 700; }
.potbar { position: relative; flex: 1; height: 6px; border-radius: 3px; background: rgba(0, 0, 0, .45); overflow: hidden; }
.potbar i { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(232, 176, 75, .25); }
.potbar b { position: absolute; left: 0; top: 0; bottom: 0; background: var(--gold); }
.potbar.big { height: 9px; }

.vhead { display: flex; align-items: center; gap: 12px; padding-right: 26px; }
.vhead h2 { margin-bottom: 2px; }
.vaxes { display: flex; flex-direction: column; gap: 5px; }
.vaxis { display: flex; align-items: center; gap: 7px; font-size: 11px; }
.vaxis small { flex: none; width: 44px; color: var(--muted); }
.vaxis em { font-style: normal; width: 62px; text-align: right; color: var(--gold); font-size: 11px; }
.vaxis.capped em { color: var(--dim); }
.vaxis .btn { flex: none; padding: 2px 6px; }

/* 覚えた技のしるし */
.stags { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.stag { font-size: 9.5px; color: var(--blue); border: 1px solid rgba(127, 168, 192, .35); border-radius: 999px; padding: 1px 7px; }
.restbonus { color: var(--good); margin-left: 5px; }
.stag.open { color: var(--gold); border-color: rgba(232, 176, 75, .5); }
.skill.open { color: var(--gold); border: 1px dashed rgba(232, 176, 75, .4); background: transparent; }


/* ---------------------------------------------------------------- アイコン */

/* 自前のSVG。currentColor を拾うので、置いた場所の文字色で描かれる */
.ic { display: inline-block; vertical-align: -0.15em; fill: currentColor; flex: none; }

/* ---------------------------------------------------------------- ミッション */

.mission { border-color: rgba(232, 176, 75, .3); background: linear-gradient(180deg, rgba(232, 176, 75, .09), var(--panel)); }
/* 見出しは畳むボタンを兼ねる。カード全体を押させると誤爆するので見出しだけ */
.ms-label {
    display: flex; align-items: center; gap: 5px; width: 100%;
    background: none; border: 0; padding: 5px 0 6px; text-align: left;
    font-size: 10px; letter-spacing: .12em; color: var(--gold); font-weight: 700;
}
.ms-l { display: flex; align-items: center; gap: 5px; }
.ms-count { margin-left: auto; font-size: 10px; letter-spacing: 0; color: var(--muted); font-weight: 400; }
.ms-arrow { margin-left: auto; display: flex; color: var(--dim); transition: transform .15s; }
.ms-count + .ms-arrow { margin-left: 6px; }
.mission.ms-shut .ms-name { font-size: 13.5px; }
.mission.ms-shut .ms-desc { display: none; }
.ms-arrow.up { transform: rotate(180deg); }
.ms-name { display: block; font-size: 15px; margin-top: 4px; }
.ms-desc { font-size: 12px; color: var(--muted); margin-top: 3px; }
.ms-hint { font-size: 11.5px; color: #d8c9a0; margin-top: 6px; border-left: 2px solid var(--ember); padding-left: 8px; line-height: 1.7; }
/* 気になることは1行ずつ、枠は常に2行ぶん。
   折り返したり増減したりするたびに、下の仕事欄が飛んでいた */
.ms-notes {
    list-style: none; margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--line-soft);
    display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--warn);
    min-height: 50px; /* 常に2行ぶん。増減のたびに下の仕事欄が飛ばないように */
}
.ms-notes li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-notes li.calm, .ms-notes li.calm::before { color: var(--dim); }
.ms-notes li::before { content: '— '; color: var(--dim); }

/* ---------------------------------------------------------------- 仕事 */

h2 .auto { margin-left: auto; }
.workrow { background: rgba(0, 0, 0, .2); border: 1px solid var(--line-soft); border-radius: 8px; padding: 6px 8px; }
.workrow.active { border-color: rgba(232, 176, 75, .28); background: rgba(232, 176, 75, .05); }
.wtop { display: flex; align-items: center; gap: 7px; font-size: 12.5px; }
.wname { display: flex; align-items: center; gap: 5px; font-weight: 700; white-space: nowrap; }
.wslot { flex: none; font-size: 10.5px; color: var(--muted); }
/* 仕事の名前の右がずっと空いていた。そこに今の様子を流す。
   長くなっても折り返さず、はみ出す分は省く(行の高さを揺らさない) */
.wdoing {
    flex: 1; min-width: 0; font-size: 10.5px; color: var(--dim);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wtop > .wname + .wslot { margin-left: auto; }
.workrow.pinned { border-color: rgba(160, 180, 210, .3); }
/* 固定された者。動かないことが分かるよう錠前を添える */
.wpick.ispin .wface { box-shadow: 0 0 0 1px #9fb6d4; }
.wlk {
    position: absolute; left: -3px; bottom: -3px; width: 12px; height: 12px; border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    background: #232a33; border: 1px solid var(--line); color: #9fb6d4;
}
.wbtn {
    width: 26px; height: 26px; border-radius: 7px; flex: none;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--line-soft); background: rgba(0, 0, 0, .3); color: var(--gold);
}
.wbtn.disabled { opacity: .3; }
/* 固定の錠前。掛かっていない時は主張させない ── 押す物が3つ並ぶと、
   どれが「人を足す」なのか分からなくなる */
/* その仕事の中身(作る物・建てる物)を決めに行く */
.wbtn.gotab { color: var(--ember); }
.wbtn.pinbtn { color: var(--dim); }
.wbtn.pinbtn.on { color: #9fb6d4; border-color: rgba(160, 180, 210, .45); background: rgba(160, 180, 210, .12); }
/* 就いている人。押すと外れる。× を出しておかないと押せると気づけない */
.wpick { position: relative; display: inline-flex; background: none; border: 0; padding: 0; }
.wx {
    position: absolute; right: -3px; top: -3px; width: 13px; height: 13px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #7a2c2c; border: 1px solid #1e1a17; color: #f4dcdc;
}
.wpick:active .wx { background: var(--bad); }
.woff {
    position: absolute; right: -3px; bottom: -3px; font-style: normal; font-size: 8px;
    background: var(--panel-2); border: 1px solid var(--line); border-radius: 4px; padding: 0 2px; color: var(--muted);
}
.idlebar { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.idlebar small { flex: none; }

/* 就ける人を選ぶ */
.pickhint { font-size: 11.5px; color: #d8c9a0; border-left: 2px solid var(--ember); padding-left: 8px; margin: 6px 0; line-height: 1.6; }
.picklist { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.pickrow {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    padding: 7px 9px; border-radius: 9px; background: rgba(0, 0, 0, .22); border: 1px solid var(--line-soft);
}
.pickinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pickinfo b { font-size: 13px; }
.pickapt { flex: none; text-align: right; font-size: 11px; color: var(--muted); }
.pickapt i { display: block; font-style: normal; font-size: 10px; color: var(--dim); }
.pickapt.mid { color: var(--blue); }
.pickapt.hi { color: var(--gold); font-weight: 700; }

/* ---------------------------------------------------------------- 記録(畳める) */

.feedcard { padding: 0; overflow: hidden; }
.feedhead {
    display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
    padding: 10px 12px; font-size: 12px;
}
.fh-label { display: flex; align-items: center; gap: 5px; color: var(--gold); flex: none; letter-spacing: .06em; }
.fh-peek { flex: 1; min-width: 0; color: var(--muted); font-size: 11px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fh-arrow { margin-left: auto; color: var(--muted); display: flex; transition: transform .15s; }
.fh-arrow.up { transform: rotate(180deg); }
.feedcard .feed { height: auto; max-height: none; overflow: visible; border-radius: 0; margin: 0 12px 6px; }
.feedmore { margin: 0 12px 10px; width: calc(100% - 24px); }
.feedcard .chatter { margin: 0 12px 10px; min-height: 22px; }

/* ---------------------------------------------------------------- 建設タブ */

.brow { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.brow:last-child { border-bottom: none; }
.bicon { flex: none; color: var(--muted); display: flex; }
.binfo { flex: 1; min-width: 0; }
/* 材料。アイコンだけでは分からないので名前と「持ち数/要る数」を添える */
.ci {
    display: inline-flex; align-items: center; gap: 3px; color: var(--muted);
    background: rgba(255, 255, 255, .04); border-radius: 5px; padding: 2px 6px;
    font-size: 10.5px; white-space: nowrap;
}
.ci b { font-weight: 400; }
.ci .cn { color: var(--text); font-weight: 700; }
.ci .cn i { font-style: normal; color: var(--dim); font-weight: 400; }
.ci.short { color: var(--bad); background: rgba(224, 82, 82, .12); }
.ci.short .cn { color: var(--bad); }
.rcost { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 2px; }
.bcost { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }

/* ---------------------------------------------------------------- title */

#title-screen {
    position: fixed; inset: 0; z-index: 100;
    display: flex; justify-content: center;
    overflow: hidden; background: var(--bg);
}

/* 立ち絵を背景に大きく置く。顔は上のほうに残し、下半分だけを沈めて文字の下地にする */
.title-bg { position: absolute; inset: 0; }
.title-bg img {
    position: absolute; left: 50%; bottom: 0; height: 100%; width: auto; max-width: none;
    transform: translateX(-50%); object-fit: cover; object-position: top center;
    transform-origin: 50% 12%;
    opacity: .92; filter: saturate(.92) brightness(.88);
    animation: titleDrift 16s ease-in-out infinite alternate;
}
@keyframes titleDrift { from { transform: translateX(-50%) scale(1); } to { transform: translateX(-50%) scale(1.05); } }

.title-vignette {
    position: absolute; inset: 0;
    background:
        radial-gradient(620px 380px at 50% 6%, rgba(224, 128, 58, .18), transparent 66%),
        linear-gradient(180deg,
            rgba(20, 17, 15, .34) 0%, rgba(20, 17, 15, .20) 24%,
            rgba(16, 13, 11, .72) 50%, rgba(15, 12, 10, .94) 66%, var(--bg) 80%);
}

/* 画面の外で焚き火が燃えている、という体の光。火の粉の出どころになる */
.title-hearth {
    position: absolute; left: 50%; bottom: -16%; width: 140%; height: 46%;
    transform: translateX(-50%); pointer-events: none;
    background: radial-gradient(ellipse at 50% 100%,
        rgba(224, 128, 58, .30), rgba(224, 128, 58, .07) 44%, transparent 72%);
    animation: hearthBreathe 6.5s ease-in-out infinite alternate;
}
@keyframes hearthBreathe { from { opacity: .75; } to { opacity: 1; } }

/* 立ちのぼる火の粉。JS が個数と位置をランダムに振る */
.title-embers { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.title-embers span {
    position: absolute; bottom: -6%; border-radius: 50%;
    background: radial-gradient(circle, #ffd9a0 0%, var(--ember) 60%, transparent 100%);
    opacity: 0; animation: emberRise linear infinite;
    box-shadow: 0 0 6px 1px rgba(224, 128, 58, .55);
}
@keyframes emberRise {
    0% { transform: translate(0, 0); opacity: 0; }
    8% { opacity: .85; }
    85% { opacity: .35; }
    100% { transform: translate(var(--drift, 12px), -112vh); opacity: 0; }
}

/**
 * 縦の置き方。auto マージンを二つ入れて、余った高さを
 * 「上 : 題字と下段のあいだ」で半分ずつに割る。
 * どの画面の高さでも、題字が中ほど・操作が最下段に落ち着く。
 */
/**
 * 縦の置き方。空きを「題字の上 : 題字と下段のあいだ」で 1.7 : 1 に割る。
 * 題字が絵の腰のあたり ── ちょうど絵が闇に溶けはじめる高さ ── に落ち、
 * 下段はどの画面の高さでも底に貼り付く。
 */
.title-inner {
    position: relative; z-index: 1; width: 100%; height: 100%;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: calc(env(safe-area-inset-top) + 22px) 20px calc(env(safe-area-inset-bottom) + 22px);
}
.title-inner::before { content: ''; flex: 1.7 1 0; min-height: 0; }

/**
 * 題字。上下の細い罫で挟み、後ろを楕円状に沈める。
 * 罫だけだと鎧や外套の上で文字が埋もれるので、下地ごと暗くしてやる。
 * 沈める層だけは画面いっぱいに広げる。box の幅で切ると角が四角く出るため。
 */
.title-band {
    flex: none; width: 100vw; max-width: 780px; padding: 26px 20px;
    background: radial-gradient(50% 62% at 50% 50%,
        rgba(9, 7, 6, .88) 0%, rgba(9, 7, 6, .58) 55%, transparent 100%);
}
.title-mark { width: 100%; max-width: 430px; margin: 0 auto; }
.title-mark::before, .title-mark::after {
    content: ''; display: block; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(232, 176, 75, .5) 22%, rgba(232, 176, 75, .5) 78%, transparent);
}
.title-mark::before { margin-bottom: 14px; }
.title-mark::after { margin-top: 13px; }

/* 幅は画面に合わせて詰める。どんな端末でも一行に収まりきること */
.title-logo {
    font-family: Cinzel, serif; font-weight: 700;
    font-size: clamp(26px, 11.4vw, 58px);
    letter-spacing: .12em; text-indent: .12em; line-height: 1.04; white-space: nowrap;
    background: linear-gradient(180deg, #f8e2b0 0%, var(--gold) 46%, var(--ember) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 0 26px rgba(224, 128, 58, .45)) drop-shadow(0 2px 8px rgba(0, 0, 0, .75));
}
.title-logo span { color: transparent; } /* 二色に割らない。ひと続きの一語に見せる */
.title-tagline {
    color: #cbb894; font-size: 11.5px; margin-top: 9px;
    letter-spacing: .16em; text-indent: .16em;
    text-shadow: 0 1px 5px rgba(0, 0, 0, .9);
}

/* 下段。拠点カードと操作をひとまとめにして、画面の底に貼る */
.title-foot {
    flex: 1 1 0; min-height: 0; width: 100%; max-width: 330px;
    display: flex; flex-direction: column; justify-content: flex-end;
}

/* 続きから、の時だけ出す拠点の様子。左の熾火色の縁は「まだ火は消えていない」 */
.title-card {
    text-align: left;
    background: linear-gradient(180deg, rgba(36, 30, 24, .88), rgba(21, 18, 16, .92));
    border: 1px solid var(--line); border-left: 2px solid var(--ember);
    border-radius: 12px; padding: 11px 13px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .55); backdrop-filter: blur(3px);
}
/* 日数を左、顔を右。人が1人でも欠けて見えないよう、顔は右端に寄せる */
.title-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.title-head { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.title-day { font-family: Cinzel, serif; color: var(--gold); font-weight: 700; font-size: 22px; line-height: 1; }
.title-day i { font-style: normal; font-size: 10.5px; color: var(--muted); margin-left: 4px; letter-spacing: .04em; }
.title-pop { color: var(--muted); font-size: 10.5px; }
.title-faces { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.title-faces img {
    width: 30px; height: 30px; object-fit: cover; border-radius: 7px;
    border: 1px solid var(--line); box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}
.title-faces .tf-more {
    width: 30px; height: 30px; border-radius: 7px; border: 1px dashed var(--line-soft);
    display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--muted);
}
.title-flavor {
    margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--line-soft);
    font-size: 11px; color: var(--muted); line-height: 1.6;
}

.title-actions { display: flex; flex-direction: column; align-items: stretch; gap: 4px; margin-top: 16px; }
.title-actions .btn.primary.lg {
    width: 100%; padding: 16px 0; font-size: 16px; letter-spacing: .1em; text-indent: .1em;
    border-radius: 12px;
    background: linear-gradient(180deg, #f0a04a, #cf7429);
    box-shadow: 0 10px 28px rgba(224, 128, 58, .42), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.title-actions .btn.primary.lg:active { transform: translateY(1px); box-shadow: 0 5px 16px rgba(224, 128, 58, .35); }
/* やり直しは押し間違えたくない操作なので、ボタンには見せず控えめな一行にする */
.title-actions .btn.ghost.sm {
    border: 0; background: none; color: var(--dim); font-weight: 400; font-size: 11.5px;
    padding: 10px 0 2px; text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}
.title-actions .btn.ghost.sm:active { color: var(--gold); }

/* 画面の隅の道具。下に置くと「はじめる」と場所を取り合うので上に逃がす */
#update-btn {
    position: absolute; right: 12px; top: calc(env(safe-area-inset-top) + 12px); z-index: 2;
    display: flex; align-items: center; gap: 5px; padding: 7px 11px; border-radius: 999px;
    background: rgba(24, 20, 18, .7); border: 1px solid var(--line-soft);
    color: var(--muted); font-size: 11px; font-weight: 700; backdrop-filter: blur(4px);
}
#update-btn:active { color: var(--gold); }
#update-btn.busy { color: var(--muted); pointer-events: none; }
#update-btn.busy .update-icon { animation: spin .8s linear infinite; }
#update-btn.busy .update-label::after { content: '中…'; }
@keyframes spin { to { transform: rotate(360deg); } }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: #3a312b; border-radius: 3px; }

/* 広い画面では2列に */
@media (min-width: 820px) {
    #panel { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
    #panel > section:first-child { grid-column: 1 / -1; }
    .battlefield, .run-head { grid-column: 1 / -1; }
    .title-mark { max-width: 490px; }
    .title-bg img { height: 112%; }
}

/* 縦の短い画面(横持ち・小型端末)では題字を詰めて、操作を画面内に残す */
@media (max-height: 620px) {
    .title-logo { font-size: clamp(22px, 8vw, 38px); }
    .title-band { padding: 14px 20px; }
    .title-mark::before { margin-bottom: 9px; }
    .title-mark::after { margin-top: 9px; }
    .title-tagline { margin-top: 6px; }
    .title-actions .btn.primary.lg { padding: 13px 0; }
}

/* ---------------------------------------------------------------- 遠征の支度
   段ごとに開く。閉じた段は一行だけになり、そこに今の選択が出る。 */
.plansteps { display: flex; flex-direction: column; gap: 8px; }
.pstep { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--r); overflow: hidden; }
.pstep.open { border-color: rgba(224, 128, 58, .45); }
.ps-head {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 10px 11px; background: none; border: 0; text-align: left; color: var(--text);
}
.ps-num {
    flex: none; width: 19px; height: 19px; border-radius: 50%; display: flex;
    align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
    background: rgba(255, 255, 255, .07); color: var(--muted);
}
.pstep.done .ps-num { background: rgba(224, 128, 58, .22); color: var(--ember); }
.pstep.open .ps-num { background: var(--ember); color: #16100b; }
.ps-label { flex: none; font-size: 13px; font-weight: 700; }
.ps-sum {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 3px; justify-content: flex-end;
    font-size: 11.5px; color: var(--muted); overflow: hidden; white-space: nowrap;
}
.ps-sum .chipface { width: 20px; height: 20px; border-radius: 4px; object-fit: cover; }
.ps-arrow { flex: none; color: var(--dim); display: flex; transition: transform .15s; }
.ps-arrow.up { transform: rotate(180deg); }
.ps-body { padding: 0 11px 11px; }

/* 行き先 */
.loc { padding: 0; overflow: hidden; }
/* 一行だけ、のはずが「採れる物」を足したので2段に。
   名前と道のりの行 → 採れる物の行、の順に折り返す */
.loc-head {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; width: 100%; position: relative;
    padding: 8px 9px 10px; background: none; border: 0; color: var(--text); text-align: left;
}
.lh-icon { flex: none; display: flex; color: var(--muted); }
.lh-name { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lh-new { font-style: normal; font-size: 9.5px; color: var(--gold); border: 1px solid rgba(232, 176, 75, .5); border-radius: 4px; padding: 0 3px; margin-left: 5px; }
.lh-meta { flex: none; display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--muted); }
.lh-meta em { font-style: normal; }
.lh-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255, 255, 255, .06); }
.lh-prog i { display: block; height: 100%; background: var(--blue); }
.loc-open { padding: 0 9px 9px; border-top: 1px solid var(--line-soft); padding-top: 8px; }
.loc-open p { font-size: 11px; margin: 0 0 6px; }

/* 部隊 */
.pcards { display: flex; flex-direction: column; gap: 5px; }
.pcard {
    display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 8px;
    border: 1px solid var(--line-soft); border-radius: var(--r); background: var(--panel-2);
    color: var(--text); text-align: left;
}
.pcard.sel { border-color: var(--ember); background: rgba(224, 128, 58, .1); }
.pcard.disabled { opacity: .4; }
.pcard img { width: 38px; height: 38px; border-radius: 6px; object-fit: cover; flex: none; }
.pc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pc-body b { font-size: 12.5px; }
.pc-body b small { font-size: 10px; color: var(--muted); margin-left: 4px; }
.pc-stat, .pc-gear, .pc-cond { font-size: 10.5px; color: var(--muted); }
.pc-tags { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }

/* 荷 */
.pmeters { display: flex; flex-direction: column; gap: 4px; margin: 9px 0; }
.pmeter { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--muted); }
.pmeter > span:first-child { flex: none; width: 52px; display: flex; align-items: center; gap: 4px; }
.pmeter .bar { flex: 1; }
.pmeter b { flex: none; font-size: 12px; color: var(--warn); }
.pmeter b small { color: var(--dim); font-weight: 400; }
.pmeter.ok b { color: var(--good, #7fc08a); }
.packlist { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; }
.packrow {
    display: flex; align-items: center; gap: 8px; font-size: 12px;
    padding: 4px 6px; border-radius: 7px; background: rgba(0, 0, 0, .16);
}
.packrow.on { background: rgba(224, 128, 58, .12); }
.pk-name { flex: 1; min-width: 0; display: flex; align-items: center; gap: 5px; }
.pk-have { flex: none; font-size: 10.5px; color: var(--dim); }
.stepper button:disabled { opacity: .3; }

/* 控え */
.presetbar { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-bottom: 9px; }
.preset { display: inline-flex; align-items: center; }
.pchip {
    display: inline-flex; align-items: center; gap: 4px; font-size: 11px; max-width: 168px;
    padding: 4px 8px; border-radius: 999px; border: 1px solid var(--line-soft);
    background: rgba(255, 255, 255, .05); color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.preset .pchip { border-radius: 999px 0 0 999px; border-right: 0; }
.pdel {
    display: inline-flex; align-items: center; padding: 4px 6px; color: var(--dim);
    border: 1px solid var(--line-soft); border-left: 0; border-radius: 0 999px 999px 0;
    background: rgba(255, 255, 255, .05);
}
.pchip.add { color: var(--muted); border-style: dashed; }
.pchip.disabled { opacity: .35; }

/* 出発の帯は下に貼り付けておく。長い一覧を見ている間も押せる */
/* 出発の帯は画面の底に貼り付く。長い一覧を見ている間もいつでも押せる */
.launchbar {
    position: sticky; bottom: 0; z-index: 5; margin-top: 10px;
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    padding: 9px 11px; border-radius: var(--r);
    background: rgba(20, 16, 13, .96); border: 1px solid var(--line-soft);
    backdrop-filter: blur(6px); box-shadow: 0 -6px 18px rgba(0, 0, 0, .35);
}
.lb-info { display: flex; flex-direction: column; min-width: 0; }
.lb-info b { font-size: 12.5px; display: flex; align-items: center; gap: 5px; }
.lb-info small { font-size: 10.5px; color: var(--muted); }

/* ---------------------------------------------------------------- 物の札
   アイコンだけでは何の素材か分からない。名前を必ず添える。 */
.rchip {
    display: inline-flex; align-items: center; gap: 3px;
    background: rgba(255, 255, 255, .05); border-radius: 5px; padding: 2px 6px;
    font-size: 10.5px; color: var(--muted); white-space: nowrap;
}
.rchip b { font-weight: 400; color: var(--text); }
.rchip i { font-style: normal; font-weight: 700; color: var(--gold); }
.lgathers { display: flex; flex-wrap: wrap; gap: 3px; }

.haul { display: flex; flex-direction: column; gap: 5px; margin-top: 9px; }
.haulrow { display: flex; align-items: flex-start; gap: 8px; font-size: 11px; }
.hl { flex: none; width: 62px; color: var(--dim); padding-top: 3px; }
.hv { flex: 1; display: flex; flex-wrap: wrap; gap: 3px; min-width: 0; }

/* ---------------------------------------------------------------- 糧食
   出発前に食べていく物。腹の足しではなく、隊の底上げ。 */
.effbox {
    display: flex; flex-direction: column; gap: 2px; margin: 9px 0;
    padding: 8px 10px; border-radius: 9px;
    border: 1px dashed var(--line-soft); background: rgba(0, 0, 0, .2);
}
.effbox.on { border-style: solid; border-color: rgba(232, 176, 75, .45); background: rgba(232, 176, 75, .08); }
.eb-label { font-size: 10px; letter-spacing: .1em; color: var(--dim); }
.eb-val { font-size: 12.5px; color: var(--muted); }
.effbox.on .eb-val { color: var(--gold); }

.rationrow {
    display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
    padding: 6px 8px; border-radius: 8px; color: var(--text);
    border: 1px solid var(--line-soft); background: rgba(0, 0, 0, .2);
}
.rationrow.on { border-color: var(--ember); background: rgba(224, 128, 58, .12); }
.rationrow.disabled { opacity: .38; }
.rr-pick {
    flex: none; width: 16px; height: 16px; border-radius: 4px;
    border: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: center;
    color: #16100b;
}
.rationrow.on .rr-pick { background: var(--ember); border-color: var(--ember); }
.rr-icon { flex: none; display: flex; color: var(--muted); }
.rr-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rr-body b { font-size: 12px; }
.rr-eff { font-size: 10.5px; color: var(--gold); }
.rr-have { flex: none; font-size: 11px; font-weight: 700; color: var(--text); }
.rr-have i { font-style: normal; font-weight: 400; color: var(--dim); }
.rr-have.short { color: var(--bad); }
.packh { margin-top: 12px; }
.fedeff { font-size: 10.5px; color: var(--gold); align-self: center; }

/* 出発の帯。注意は数ではなく中身を出す */
.lb-warns { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 7px; }
.wtagchip {
    font-size: 10px; padding: 2px 7px; border-radius: 999px;
    color: var(--warn); border: 1px solid rgba(232, 160, 75, .45); background: rgba(232, 160, 75, .1);
}
.lb-main { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.warnlist { display: flex; flex-direction: column; gap: 5px; margin-top: 9px; }
.warnbox b {
    display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: 4px;
    background: rgba(232, 160, 75, .18); color: var(--warn); font-size: 10px;
}
.gohere { margin-top: 8px; }

/* ---------------------------------------------------------------- 隊列 */
.formbox {
    margin-top: 10px; padding: 10px; border-radius: var(--r);
    border: 1px solid var(--line-soft); background: rgba(0, 0, 0, .22);
}
.fm-head { display: flex; align-items: center; justify-content: space-between; }
.fm-label { display: flex; align-items: center; gap: 5px; font-size: 10px; letter-spacing: .12em; color: var(--gold); }
.fm-sub { font-size: 10.5px; color: var(--muted); }
.fmtabs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.fmtab {
    font-size: 11px; padding: 4px 10px; border-radius: 999px; color: var(--muted);
    border: 1px solid var(--line-soft); background: rgba(255, 255, 255, .04);
}
.fmtab.on { color: #16100b; background: var(--ember); border-color: var(--ember); font-weight: 700; }
.fm-desc { font-size: 11px; color: var(--muted); margin-top: 7px; line-height: 1.6; }

.fslots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 9px; }
.fslot {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 6px 3px; border-radius: 8px; color: var(--text);
    border: 1px solid var(--line-soft); background: rgba(0, 0, 0, .3);
}
.fslot.front { border-color: rgba(224, 128, 58, .4); background: rgba(224, 128, 58, .09); }
.fslot.picked { outline: 2px solid var(--gold); }
.fslot.empty { opacity: .35; min-height: 62px; justify-content: center; }
.fs-row { font-size: 9px; letter-spacing: .1em; color: var(--dim); }
.fslot.front .fs-row { color: var(--ember); }
.fslot img { width: 30px; height: 30px; border-radius: 6px; object-fit: cover; }
.fs-name { font-size: 9.5px; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fmods { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; }
.fmod { font-size: 10.5px; color: var(--muted); }
.fmod b {
    display: inline-block; min-width: 34px; margin-right: 6px;
    color: var(--gold); font-size: 10px;
}

/* 遠征中の部隊。セリフは記録に混ぜず、本人の名前の右にポツリと出す */
.uface { position: relative; }
.urow {
    position: absolute; left: -3px; bottom: -3px;
    font-size: 8.5px; padding: 0 3px; border-radius: 3px;
    background: rgba(0, 0, 0, .8); color: var(--dim); border: 1px solid var(--line-soft);
}
.urow.front { color: var(--ember); border-color: rgba(224, 128, 58, .5); }
.uname { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.usay {
    flex: 1; min-width: 0; font-size: 10.5px; color: #cbbb9a;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------------------------------------------------------------- 常備
   減ったら勝手に作り直す数。作り終えて手が空いたままにさせないための仕掛け。 */
.craftopts { margin: 8px 0 12px; }
.optrow {
    display: flex; align-items: flex-start; gap: 8px; width: 100%; text-align: left;
    padding: 8px 9px; border-radius: 8px; color: var(--text);
    border: 1px solid var(--line-soft); background: rgba(0, 0, 0, .2);
}
.opt-box {
    flex: none; width: 16px; height: 16px; border-radius: 4px; margin-top: 1px;
    display: flex; align-items: center; justify-content: center; color: #16100b;
    border: 1px solid var(--line-soft);
}
.opt-box.on { background: var(--ember); border-color: var(--ember); }
.opt-body { display: flex; flex-direction: column; min-width: 0; }
.opt-body b { font-size: 12px; }
.opt-body small { font-size: 10.5px; color: var(--muted); }

/* ---------------------------------------------------------------- 空模様と守り */
.clock-weather { font-size: 10.5px; color: var(--muted); letter-spacing: .04em; }
.raidalert { color: var(--bad) !important; animation: raidPulse 1.4s ease-in-out infinite; }
.raidomen { color: var(--warn) !important; }
.raidcard.omen { border-color: rgba(211, 179, 69, .5);
    background: linear-gradient(180deg, rgba(211, 179, 69, .08), transparent 60%); }
.raidcard.omen h2 .h2t { color: var(--warn); }
@keyframes raidPulse { 0%, 100% { opacity: 1 } 50% { opacity: .45 } }
/* 空模様の一行。数字より先に、今日がどんな日かを伝える */
.skyrow {
    display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--muted);
    padding: 6px 9px; border-radius: 8px; margin-bottom: 7px;
    border: 1px solid var(--line-soft); background: rgba(0, 0, 0, .2);
}
.skyrow b { flex: none; color: var(--text); }
.skyrow small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; color: var(--dim); }
.skyrow.bad { border-color: rgba(211, 179, 69, .3); }
.skyrow.bad b { color: var(--warn); }
.skyrow.wet b { color: #8fb4cc; }
.clock-weather.bad { color: var(--warn); }
.clock-weather.wet { color: #8fb4cc; }

/* 襲撃の予告。何をしていても目に入る所に置く */
.raidcard { border-color: rgba(224, 82, 82, .45); background: linear-gradient(180deg, rgba(224, 82, 82, .1), transparent 60%); }
.raidcard.live { border-color: var(--bad); }
.raidcard h2 .h2t { color: #ef9a9a; display: inline-flex; align-items: center; gap: 5px; }
.bar.raid { height: 6px; margin: 6px 0; }
.bar.raid i { background: linear-gradient(90deg, #7a2c2c, var(--bad)); }
.raid-foes { font-size: 11.5px; color: #e0c0c0; display: flex; align-items: center; gap: 5px; margin: 4px 0; }
.raid-ready { display: flex; flex-wrap: wrap; gap: 8px; font-size: 10.5px; color: var(--muted); }
.raid-ready span { display: inline-flex; align-items: center; gap: 4px; }

/* 目をつけられ度 */
.guardcard .gstate { margin-left: auto; font-size: 10.5px; color: var(--c); font-weight: 700; }
.threatbar { height: 4px; border-radius: 3px; background: rgba(0, 0, 0, .4); overflow: hidden; margin: 2px 0 4px; }
.threatbar i { display: block; height: 100%; border-radius: 3px; transition: width .4s; }
.gline { font-size: 11.5px; color: var(--muted); margin: 6px 0; }
.gdefs { display: flex; flex-direction: column; gap: 3px; font-size: 10.5px; color: var(--dim); margin-bottom: 8px; }
.gdefs span { display: inline-flex; align-items: center; gap: 5px; }
.gdefs span.has { color: #9fb6d4; }
.gfaces { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 6px; }
.gpick {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
    width: 56px; padding: 4px 2px; border-radius: 8px; font-size: 9.5px; color: var(--muted);
    border: 1px solid var(--line-soft); background: rgba(0, 0, 0, .25);
}
.gpick img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.gpick.on { border-color: var(--gold); background: rgba(232, 176, 75, .12); color: var(--gold); }
.gpick.out { opacity: .4; }
.gp-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-on {
    position: absolute; right: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--gold); color: #16100b;
}

/* ---------------------------------------------------------------- 拠点の固定割り
   上(ミッション/貯蓄)と下(守り/記録)は動かさない。真ん中の「仕事」だけを送る。
   一枚の長い巻物にすると、人を配るたびに端まで探しに行くことになる。
   いちばん使うのは仕事欄なので、そこに残り全部の高さを渡す。 */
#panel.fixed { overflow: hidden; padding-bottom: 10px; }
.colonyfix { display: flex; flex-direction: column; gap: 8px; height: 100%; min-height: 0; }
.cf-top, .cf-bot { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cf-mid { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.cf-mid > .card { margin: 0; min-height: 100%; display: flex; flex-direction: column; }
.cf-mid .works { flex: 1; }

/* 帯の中の一枚。押せば詳しい話が開く */
.cchip {
    display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left;
    padding: 7px 9px; border-radius: 10px; color: var(--text);
    border: 1px solid var(--line-soft); background: var(--panel);
}
.cc-label {
    display: flex; align-items: center; gap: 4px; font-size: 9.5px; color: var(--dim);
    letter-spacing: .06em;
}
.cc-cap { margin-left: auto; font-style: normal; font-size: 9px; color: var(--dim); }
.cc-cap.low { color: var(--bad); }
.cc-main {
    font-size: 12.5px; color: var(--gold); overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}
.cc-sub, .cc-line, .cc-chat {
    font-size: 10px; color: var(--muted); overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}
/* ---------------------------------------------------------------- 流れる一行
   狭い枠で「…」に切ると、押して開くまで中身が分からない。
   入りきらない時だけ左へ流し、黙って見ていても最後まで読めるようにする。
   二つ並べて半分ぶん送るので、切れ目なく繋がって見える。 */
.tick { display: block; overflow: hidden; white-space: nowrap; min-width: 0; }
.tick-in { display: inline-flex; gap: 28px; will-change: transform; }
.tick.run .tick-in { animation: tickrun var(--dur, 12s) linear infinite; }
@keyframes tickrun {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-50% - 14px)); }
}
/* 動きが苦手な人の設定を尊重する。止めて「…」で切る */
@media (prefers-reduced-motion: reduce) {
    .tick.run .tick-in { animation: none; }
    .tick.run .tick-in b:last-child { display: none; }
    .tick.run { text-overflow: ellipsis; }
}
.cc-chat { color: var(--dim); display: flex; align-items: center; gap: 4px; }
.cc-chat img { width: 14px; height: 14px; border-radius: 50%; object-fit: cover; flex: none; }
.cc-chat span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-row { display: flex; align-items: center; gap: 5px; font-size: 11px; }
.cc-row b { font-weight: 700; color: var(--text); }
.cc-row small { color: var(--dim); font-size: 9.5px; }
.cc-row.mid b { color: var(--warn); }
.cc-row.low b { color: var(--bad); }
.cchip.guard.alert { border-color: rgba(224, 82, 82, .55); background: rgba(224, 82, 82, .08); }
.cchip.guard .threatbar { margin: 1px 0 2px; }
.cchip:active { background: var(--panel-2); }
.gstate-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.gstate-row .threatbar { flex: 1; margin: 0; }
.guardbody h3 { margin-top: 10px; }
.ms-name.big { font-size: 15px; color: var(--gold); font-weight: 700; }
.ms-notes.open { min-height: 0; }

/* ---------------------------------------------------------------- 隊列の入口
   支度の段に埋めると見つけられない。今の型と並びだけ出し、押せば組む画面へ。 */
.formopen {
    display: flex; flex-direction: column; gap: 5px; width: 100%; text-align: left;
    padding: 8px 9px; border-radius: 9px; color: var(--text);
    border: 1px solid var(--line-soft); background: rgba(0, 0, 0, .25);
}
.fo-head { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.fo-head b { color: var(--gold); }
.fo-head small { color: var(--muted); font-size: 10.5px; }
.fo-go { margin-left: auto; color: var(--ember); font-size: 11px;
    display: inline-flex; align-items: center; gap: 2px; }
.fo-faces { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.fmini { position: relative; display: inline-flex; }
.fmini img { width: 26px; height: 26px; border-radius: 5px; object-fit: cover; }
.fmini i {
    position: absolute; right: -2px; bottom: -2px; font-style: normal; font-size: 8px;
    padding: 0 2px; border-radius: 3px; background: var(--panel-2); border: 1px solid var(--line);
    color: var(--muted);
}
.fmini.front i { color: var(--warn); }
.fs-aggro { font-size: 8.5px; color: var(--dim); }
/* 控え(隊列・部隊・荷) */
.presetbar { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 6px 0; }
.preset { display: inline-flex; align-items: stretch; max-width: 100%; }
.preset .pbtn { border-radius: 999px 0 0 999px; }
.pbtn {
    flex: none; padding: 5px 10px; min-height: 28px; border-radius: 999px; font-size: 10.5px;
    border: 1px solid var(--line-soft); background: rgba(0, 0, 0, .25); color: var(--muted);
    display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
    max-width: 210px; overflow: hidden; text-overflow: ellipsis;
}
.pbtn.add { color: var(--gold); border-color: rgba(232, 176, 75, .4); }
.pdel {
    flex: none; width: 26px; border-radius: 0 999px 999px 0; border: 1px solid var(--line-soft);
    border-left: 0; background: rgba(0, 0, 0, .25); color: var(--dim);
    display: inline-flex; align-items: center; justify-content: center;
}
/* 行き先の一覧に、開かなくても採れる物を出す */
.lh-loot { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 3px; margin-top: 2px; }
.lootchip {
    display: inline-flex; align-items: center; gap: 2px; font-size: 9px; color: var(--dim);
    padding: 1px 5px; border-radius: 999px; background: rgba(255, 255, 255, .04);
}

/* ---------------------------------------------------------------- 探す帯
   品数は増える一方。名前で絞る・種別で絞る・並べ替える、の三つを常設する。 */
.fbar { margin: 6px 0 12px; display: flex; flex-direction: column; gap: 7px; }
.fsearch {
    display: flex; align-items: center; gap: 7px; padding: 0 10px; height: 38px;
    border-radius: 9px; border: 1px solid var(--line-soft); background: rgba(0, 0, 0, .3);
    color: var(--dim);
}
.fsearch input {
    flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: none;
    color: var(--text); font-size: 13px; font-family: inherit;
    -webkit-appearance: none; appearance: none;
}
.fsearch input::placeholder { color: var(--dim); }
.fsearch input::-webkit-search-cancel-button { display: none; }
.fclear {
    flex: none; width: 26px; height: 26px; border-radius: 50%; border: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .07); color: var(--muted);
}
.fchips { display: flex; flex-wrap: wrap; gap: 4px; }
.fchip {
    padding: 5px 10px; min-height: 30px; border-radius: 999px; font-size: 11.5px;
    border: 1px solid var(--line-soft); background: rgba(0, 0, 0, .25); color: var(--muted);
    display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
}
.fchip.on { border-color: var(--ember); background: rgba(224, 128, 58, .16); color: var(--gold); }
.frow { display: flex; align-items: center; gap: 6px; }
.fchip.tog { flex: none; }
/* 並び替えは端末の選択UIに任せる。ボタンを4つ並べるより場所を食わない */
.fsel {
    flex: none; margin-left: auto; height: 30px; padding: 0 24px 0 10px; font-size: 11.5px;
    border-radius: 999px; border: 1px solid var(--line-soft); background: rgba(0, 0, 0, .25);
    color: var(--muted); font-family: inherit; -webkit-appearance: none; appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--dim) 50%),
        linear-gradient(135deg, var(--dim) 50%, transparent 50%);
    background-position: calc(100% - 13px) 13px, calc(100% - 9px) 13px;
    background-size: 4px 4px, 4px 4px; background-repeat: no-repeat;
}
.fsel option { background: var(--bg-2); color: var(--text); }
.fcount { flex: none; font-size: 10.5px; color: var(--dim); }

/* 種別・部位の札。どこに着ける物かは名前だけでは分からない */
.rtags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.slottag, .tiertag, .besttag {
    font-size: 9.5px; padding: 1px 6px; border-radius: 4px; letter-spacing: .04em;
    border: 1px solid var(--line-soft); color: var(--muted); background: rgba(0, 0, 0, .3);
}
.slottag { color: #b9c6d6; border-color: rgba(160, 180, 210, .35); }
.usetag { color: var(--dim); }
.usetag.none { color: var(--bad); border-color: rgba(224, 82, 82, .35); }
/* 「今の最上」は目印であって飾りではない。数が並ぶので、
   塗りつぶさず輪郭だけにして、視線を奪いすぎないようにする */
.besttag {
    color: var(--gold); border-color: rgba(232, 176, 75, .55); background: rgba(232, 176, 75, .1);
    font-weight: 700; display: inline-flex; align-items: center; gap: 3px;
}
.recipe.best { border-color: rgba(232, 176, 75, .45); }
.rnote { font-size: 10.5px; color: var(--dim); }
.rdura { margin-left: 7px; color: var(--dim); }
.rwork { margin-left: auto; color: var(--dim); font-size: 10px;
    display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.rcost { align-items: center; gap: 4px; }
.bcost { align-items: center; }
.brow.ready { border-left: 2px solid rgba(232, 176, 75, .5); }
.nextlv { font-size: 10px; color: var(--dim); font-weight: 400; }

/* ---------------------------------------------------------------- 作れる物の行
   押した瞬間に注文が入らないよう、注文は右のボタンだけが持つ。
   行そのものは詳しい話へ。高さは3行ぶんに詰めてある。 */
.recipe { display: flex; align-items: stretch; gap: 6px; }
.rbody {
    flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;
    text-align: left; background: none; border: 0; padding: 0; color: inherit;
}
.rgo {
    flex: none; width: 100%; min-height: 40px; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 2px; border-radius: 8px; font-size: 10px; font-weight: 700;
    border: 1px solid var(--ember); background: rgba(224, 128, 58, .16); color: var(--gold);
}
.rgo.off { border-color: var(--line-soft); background: rgba(0, 0, 0, .25); color: var(--dim); opacity: .55; }
.rgo:active { background: rgba(224, 128, 58, .3); }
.rhave { flex: none; font-size: 9.5px; color: var(--dim); }
.keeptag {
    font-size: 9.5px; padding: 1px 6px; border-radius: 4px;
    color: var(--gold); border: 1px solid rgba(232, 176, 75, .45); background: rgba(232, 176, 75, .1);
}
.rcost.big { margin: 4px 0 2px; }
.factlines { display: flex; flex-direction: column; gap: 2px; margin: 8px 0; }

/* ---------------------------------------------------------------- 常備
   放っておいても回る仕組みの中心。決めた数・今ある数・止まっている理由を
   一枚で見せる。ここを探させると、自動化そのものが使われなくなる。 */
.keeplist { display: flex; flex-direction: column; gap: 5px; }
.keeprow2 {
    display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px;
    border: 1px solid var(--line-soft); background: rgba(0, 0, 0, .22);
}
.keeprow2.ok { border-color: rgba(127, 192, 138, .3); }
.keeprow2.stop { border-color: rgba(224, 82, 82, .4); background: rgba(224, 82, 82, .06); }
.kr-name {
    flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px;
    background: none; border: 0; padding: 0; text-align: left; color: var(--text);
}
.kr-name b { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kr-state { font-size: 9.5px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.keeprow2.ok .kr-state { color: var(--good); }
.keeprow2.stop .kr-state { color: var(--bad); }
.keeprow2.work .kr-state { color: var(--warn); }
.kr-mid { flex: none; width: 62px; display: flex; flex-direction: column; gap: 3px; }
/* 縦並びの中では flex:1 が高さを潰すので、ここだけ高さを固定する */
.kr-mid .bar.tiny { flex: none; height: 4px; }
.kr-num { font-size: 11px; text-align: center; white-space: nowrap; }
.kr-num b { font-weight: 700; color: var(--gold); }
.kr-num i { font-style: normal; color: var(--dim); }
.kr-num em { font-style: normal; font-size: 9px; color: var(--warn); margin-left: 2px; }
.keeprow2 .stepper { flex: none; }
.keeprow2 .stepper button { width: 28px; height: 28px; }
.keeprow2 .stepper b { min-width: 18px; text-align: center; }

/* 一覧の行に付く小さいステッパー。ここで決められないと結局詳細を開くことになる */
.rside { flex: none; display: flex; flex-direction: column; gap: 4px; width: 64px; }
.stepper.mini { display: flex; align-items: stretch; justify-content: center; }
.stepper.mini button { width: 21px; min-height: 30px; font-size: 13px; padding: 0; }
.stepper.mini b { min-width: 22px; display: flex; align-items: center; justify-content: center;
    font-size: 9.5px; color: var(--dim); }
.stepper.mini b.on { color: var(--gold); font-size: 12.5px; font-weight: 700; }

.recipe.kept { border-color: rgba(232, 176, 75, .4); }
/* 作れない時に薄くするのは「作る」側だけ。常備は今作れなくても決められる ──
   むしろ材料が足りない物ほど、先に決めておきたい */
.recipe.disabled { opacity: 1; }
.recipe.disabled .rbody { opacity: .5; }
.keeprow {
    display: flex; align-items: center; gap: 8px; margin-top: 6px;
    padding-top: 6px; border-top: 1px solid var(--line-soft); font-size: 10.5px;
}
.kp-label { flex: none; color: var(--dim); letter-spacing: .08em; }
.keeprow .stepper { flex: none; }
.keeprow .stepper button { width: 30px; height: 28px; }
.keeprow .stepper b { min-width: 18px; text-align: center; color: var(--dim); }
.keeprow .stepper b.on { color: var(--gold); }
.kp-have { flex: none; color: var(--muted); }
.kp-note { flex: 1; text-align: right; color: var(--dim); overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }

/* 仕事の配り方。自律が入っていれば手待ちは勝手に埋まるので、
   ここに残るのは「全部配り直す」と「全部外す」だけになる */
.jobbtns { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 4px; }
.jobbtns .btn { flex: 1; min-width: 0; white-space: nowrap; }

/* 仕事欄から、作る物・建てる物を決めに行く道 */
.worklinks { display: flex; gap: 5px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line-soft); }
.worklinks .btn { flex: 1; min-width: 0; display: flex; align-items: center;
    justify-content: center; gap: 5px; white-space: nowrap; overflow: hidden; }

/* 誰も就いていない注文・工事。並べただけでは1分も進まない */
.deadq {
    display: flex; align-items: center; gap: 8px; margin-top: 8px;
    padding: 7px 9px; border-radius: 8px; font-size: 11px; color: var(--warn);
    border: 1px solid rgba(211, 179, 69, .3); background: rgba(211, 179, 69, .07);
}
.deadq span { flex: 1; min-width: 0; display: flex; align-items: center; gap: 5px; }
.deadq .btn { flex: none; }

/* ---------------------------------------------------------------- 手元にある物
   人を配る画面に物差しを置く。いくつ有って、いくつ要るのか。 */
.stockstrip .sfood {
    display: flex; align-items: center; gap: 7px; font-size: 12px;
    padding: 7px 9px; border-radius: 8px; margin-bottom: 7px;
    border: 1px solid var(--line-soft); background: rgba(0, 0, 0, .2);
}
.stockstrip .sfood b { font-weight: 700; flex: none; }
.stockstrip .sfood .sn { font-weight: 700; color: var(--gold); flex: none; }
.stockstrip .sfood small { flex: none; color: var(--muted); font-size: 10.5px; }
.stockstrip .sfood .bar.tiny { flex: 1; min-width: 40px; }
.sfood.mid { border-color: rgba(211, 179, 69, .35); }
.sfood.mid .sn { color: var(--warn); }
.sfood.low { border-color: rgba(224, 82, 82, .4); background: rgba(224, 82, 82, .07); }
.sfood.low .sn, .sfood.low small { color: var(--bad); }

.sreslist { display: flex; flex-wrap: wrap; gap: 4px; }
.sres {
    display: inline-flex; align-items: center; gap: 4px; font-size: 11px;
    padding: 4px 7px; min-height: 26px; border-radius: 999px; color: var(--text);
    border: 1px solid var(--line-soft); background: rgba(0, 0, 0, .25);
}
.sres b { font-weight: 400; color: var(--muted); }
.sres .sn { font-weight: 700; color: var(--text); }
.sres .sn i { font-style: normal; font-weight: 400; color: var(--dim); }
.sres.mid .sn { color: var(--warn); }
.sres.low { border-color: rgba(224, 82, 82, .35); }
.sres.low .sn { color: var(--bad); }
/* 今それを待っている物(工事の材料・目標の品)は金で囲う */
.sres.focus { border-color: rgba(232, 176, 75, .55); background: rgba(232, 176, 75, .08); }

/* ---------------------------------------------------------------- 装備一覧
   10人いるとひとりずつ開いてはいられない。全員×全部位を一枚で。 */
.subtabs { display: flex; gap: 5px; }
.subtab {
    flex: 1; padding: 8px 0; border-radius: 8px; font-size: 12.5px; font-weight: 700;
    color: var(--muted); border: 1px solid var(--line-soft); background: rgba(0, 0, 0, .22);
}
.subtab.on { color: #16100b; background: var(--ember); border-color: var(--ember); }
.gearbtns { display: flex; gap: 5px; margin: 8px 0; }
.gearbtns .btn { flex: 1; }

/* ---------------------------------------------------------------- 耐久
   数字とゲージは必ず一組。どの画面でも同じ形・同じ位置に出す。 */
.dbar {
    position: relative; display: block; height: 11px; border-radius: 3px;
    background: rgba(255, 255, 255, .08); overflow: hidden;
}
.dbar i { position: absolute; inset: 0 auto 0 0; background: rgba(127, 192, 138, .5); }
.dbar b {
    position: relative; display: block; text-align: center; line-height: 11px;
    font-size: 8.5px; font-weight: 700; color: #cfe0d2; letter-spacing: .02em;
}
.dbar.low i { background: rgba(211, 179, 69, .55); }
.dbar.low b { color: #efe0b4; }
.dbar.crit i { background: rgba(224, 82, 82, .55); }
.dbar.crit b { color: #f2c9c9; }
.dbar.none { background: none; }
.dbar.none b { color: var(--dim); }
.dbar.sm { height: 10px; }
.dbar.sm b { line-height: 10px; font-size: 8px; }

/* 得手不得手の印。塞がないが、合わない型だと分かるようにはしておく */
.fitmark { font-style: normal; font-size: 8px; padding: 0 2px; border-radius: 3px; margin-left: 2px; }
.fitmark.good { color: #9fd4a8; background: rgba(127, 192, 138, .16); }
.fitmark.poor { color: #d4a89f; background: rgba(224, 122, 75, .16); }
.fitmark.two { color: #b9c6d6; background: rgba(160, 180, 210, .16); }
/* 選ぶと反対の手がどうなるか。押す前に分かるようにしておく */
.swapnote { display: block; font-style: normal; font-size: 9.5px; color: var(--warn); margin-top: 2px; }
/* 置き場のゲージ。説明は2行ぶん取っておく ──
   数字が伸びて折り返すたびに下のタイルが飛ぶのを防ぐ */
.capcard p { min-height: 32px; }
.bar.cap { height: 8px; }
.bar.cap i { background: linear-gradient(90deg, #6a7a4d, #a8c06a); }
.bar.cap.tight i { background: linear-gradient(90deg, #7a3c2c, var(--bad)); }

/* ひとり一枚の札。枠は3列に折り返す ──
   横一列に7枠を詰めると名前が3文字で切れて、一覧の意味を成さない */
.gcard {
    border: 1px solid var(--line-soft); border-radius: 10px; padding: 8px;
    background: rgba(0, 0, 0, .2); margin-bottom: 8px;
}
.gcard.away { opacity: .65; }
.gc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.gc-who { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1;
    background: none; border: 0; padding: 0; color: var(--text); text-align: left; }
.gc-who img { width: 30px; height: 30px; border-radius: 6px; object-fit: cover; flex: none; }
.gc-txt { display: flex; flex-direction: column; min-width: 0; }
.gc-txt b { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-txt small { font-size: 9.5px; color: var(--dim); }
.gc-stats { display: flex; gap: 8px; flex: none; }
.gsum { font-size: 11.5px; font-weight: 700; color: var(--gold); white-space: nowrap; }
.gsum.atk { color: #e08a6a; }
.gsum i { font-style: normal; font-size: 8px; margin-left: 1px; opacity: .7; }

.gslots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.gcell {
    display: flex; flex-direction: column; gap: 2px; min-width: 0;
    padding: 5px 6px; border-radius: 7px; color: var(--text); text-align: left;
    background: rgba(0, 0, 0, .3); border: 1px solid var(--line-soft);
}
.gc-slot {
    display: flex; align-items: center; gap: 2px;
    font-size: 8.5px; color: var(--dim); letter-spacing: .06em;
}
.gc-name {
    font-size: 10.5px; line-height: 1.3; color: var(--text); min-height: 27px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.gcell.empty { border-style: dashed; border-color: rgba(232, 160, 75, .3); }
.gcell.empty .gc-name { color: var(--warn); display: flex; align-items: center; }
.gcell.low { border-color: rgba(224, 82, 82, .5); }
/* 両手が塞がっている左手の枠。押せないことが見て分かるように */
.gcell.blocked { border-style: dashed; opacity: .45; }
.gcell.blocked .gc-name { font-size: 9px; color: var(--dim); }

/* 今ほかで働いている者。引き抜く相手だと分かるようにする */
.pickrow.busy { border-style: dashed; opacity: .9; }
.pulltag { color: var(--warn); }

/* ---------------------------------------------------------------- 取得の速報
   記録(帳簿)とは別の、演出だけの小さな通知。何を手に入れたかその場で分かる。
   邪魔にならないよう、ヘッダーの下・右端に控えめに浮かべる。 */
.toasts {
    /* タブバーのすぐ上、右端。ヘッダーやミッションの角のボタンと被らない場所 */
    position: fixed; right: 8px; z-index: 60;
    bottom: calc(env(safe-area-inset-bottom) + var(--tabs-h) + 8px);
    display: flex; flex-direction: column-reverse; gap: 4px; align-items: flex-end;
    pointer-events: none; max-width: 60vw;
}
.toast {
    display: flex; align-items: center; gap: 5px; max-width: 100%;
    padding: 4px 10px 4px 7px; border-radius: 999px;
    background: rgba(20, 16, 13, .74); border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .3); backdrop-filter: blur(3px);
    font-size: 11px; color: var(--text); white-space: nowrap;
    opacity: 0; transform: translateX(8px);
    animation: toastIn .2s ease-out forwards;
}
.toast.leaving { animation: toastOut .35s ease-in forwards; }
.toast .tic { flex: none; display: flex; opacity: .9; }
.toast .tx { overflow: hidden; text-overflow: ellipsis; }
.toast .tn { color: var(--gold); font-weight: 700; flex: none; }
@keyframes toastIn { to { opacity: .94; transform: translateX(0); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(10px); } }