/* NIGHTWATCH — 暗いサバイバル調。全画面を 960x540 の #stage に収めて scale で拡縮する（スクロールなし） */
:root {
  --font: "Yu Gothic UI", "Meiryo", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
body {
  background: #02080b;
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.45;
  user-select: none;
}

#viewport { position: fixed; inset: 0; overflow: hidden; }
#stage {
  position: absolute; left: 50%; top: 50%;
  width: 960px; height: 540px; margin: -270px 0 0 -480px;
  transform-origin: 50% 50%;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% -10%, #12333f 0%, var(--bg2) 45%, var(--bg) 100%);
}
#stage canvas#game { position: absolute; left: 0; top: 0; width: 960px; height: 540px; display: block; }
body[data-mode="select"] #game,
body[data-mode="brief"] #game,
body[data-mode="result"] #game { display: none; }
body[data-mode="night"] #game { cursor: none; }
body[data-mode="night"].wh-open #game,
body[data-mode="night"].is-paused #game { cursor: default; }

.screen { position: absolute; inset: 0; padding: 12px 20px; }
.screen-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.logo { margin: 0; font-size: 20px; letter-spacing: 0.14em; color: var(--amber); font-family: var(--mono); }
.logo-sub { font-size: 13px; color: var(--muted); letter-spacing: 0.1em; margin-left: 6px; }
.screen-title { margin: 4px 0 2px; font-size: 20px; color: var(--amber); letter-spacing: 0.06em; }
.sub-title { margin: 10px 0 5px; font-size: 12px; color: var(--muted); letter-spacing: 0.12em; border-left: 3px solid var(--amber-dark); padding-left: 8px; }
.lead { margin: 0 0 8px; color: var(--muted); }
.note { color: var(--muted); font-size: 12px; }
.muted { color: var(--muted); }
kbd { font-family: var(--mono); font-size: 11px; font-weight: 700; color: #1b1203; background: var(--amber); border-radius: 3px; padding: 0 5px; }

/* ボタン */
.btn {
  appearance: none; font: inherit; color: var(--text); cursor: pointer;
  background: linear-gradient(#1b3f50, #122e3b);
  border: 1px solid var(--line); border-radius: 5px; padding: 6px 14px;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.btn:hover:not(:disabled) { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber) inset; }
.btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { cursor: not-allowed; opacity: .5; }
.btn-primary { background: linear-gradient(#c7821f, #8f5a12); border-color: #e7a747; color: #fff7e6; font-weight: 700; }
.btn-primary:hover:not(:disabled) { background: linear-gradient(#e29a2e, #a56a17); }
.btn-accent { border-color: var(--amber); color: var(--amber); }
.btn-big { padding: 10px 26px; font-size: 16px; }
.btn-small { padding: 2px 9px; font-size: 12px; }
.btn-sound[aria-pressed="true"] { border-color: var(--amber); color: var(--amber); }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

/* 区分タグ */
.tag { display: inline-block; font-size: 10.5px; line-height: 1.45; padding: 0 5px; border-radius: 3px; border: 1px solid; vertical-align: middle; white-space: nowrap; }
.tag-unique { color: #86e0da; border-color: #3b8f8a; background: #0f3a3b; }
.tag-repairable { color: #f7cf7a; border-color: #b8842c; background: #3a2c10; }
.tag-disposable { color: #f7a091; border-color: #b04d3f; background: #3a1a15; }

/* ---------- キャラ選択（5枚横一列） ---------- */
.card-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 6px; }
.card {
  appearance: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
  background: linear-gradient(#112c37, #0b1c24); border: 1px solid var(--line); border-radius: 8px;
  padding: 7px; display: flex; flex-direction: column; gap: 5px; min-width: 0; height: 392px;
  transition: transform .14s, border-color .14s, box-shadow .14s;
}
.card:hover, .card:focus-visible { border-color: var(--amber); transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,.5), 0 0 0 1px var(--amber) inset; outline: none; }
.card canvas { width: 100%; height: 150px; border-radius: 5px; display: block; background: #0a1b22; flex: none; }
.card-name { font-size: 16px; font-weight: 700; color: var(--amber); }
.card-desc { font-size: 12px; color: var(--text); overflow-wrap: anywhere; line-height: 1.4; }
.card-uniq { list-style: none; margin: 0; padding: 5px 0 0; border-top: 1px dashed var(--line); font-size: 11.5px; color: var(--muted); }
.card-uniq li { margin: 2px 0; overflow-wrap: anywhere; }
.card-uniq b { color: var(--text); font-weight: 600; }

/* ---------- 装備確認 ---------- */
.brief-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; margin-top: 4px; }
.brief-who canvas { width: 200px; height: 250px; border-radius: 8px; border: 1px solid var(--line); display: block; background: #0a1b22; }
.brief-name { font-size: 19px; font-weight: 700; color: var(--amber); margin-top: 6px; }
.brief-desc { font-size: 12px; color: var(--muted); }
.brief-extra { margin-top: 6px; font-size: 13px; color: var(--text); }
.slot-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.legend { list-style: none; margin: 0; padding: 0; font-size: 12px; color: var(--muted); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.legend .tag { margin-right: 6px; }
.controls { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr); gap: 3px 14px; margin: 0; font-size: 12.5px; }
.controls dt { color: var(--amber); font-family: var(--mono); }
.controls dd { margin: 0; color: var(--text); }

/* ---------- 武器スロット行（確認・倉庫・昼で共通） ---------- */
.slot-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1px 8px; align-items: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; min-width: 0; min-height: 38px;
}
.slot-row.empty { grid-template-columns: auto 1fr; color: var(--muted); border-style: dashed; background: rgba(15,38,48,.45); }
.slot-row.equipped { border-color: var(--amber); background: linear-gradient(#2b2a1c, #1a2128); box-shadow: 0 0 8px rgba(242,169,59,.3); }
.slot-row.unusable .slot-name { opacity: .7; }
.slot-row.selected { border-color: #7fe0d4; box-shadow: 0 0 0 1px #7fe0d4 inset; }
.slot-key { font-family: var(--mono); font-weight: 700; color: var(--amber); background: #000a; border-radius: 4px; padding: 0 6px; min-width: 20px; text-align: center; }
.slot-body { min-width: 0; }
.slot-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.slot-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot-flag { color: var(--amber); font-size: 11px; font-weight: 700; white-space: nowrap; }
.slot-stats { color: var(--muted); font-family: var(--mono); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot-reason { color: var(--danger); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot-btns { display: flex; gap: 5px; align-items: center; }
.slot-note { color: var(--muted); font-size: 11px; white-space: nowrap; }

/* ---------- 夜 HUD ---------- */
.screen-night { padding: 0; pointer-events: none; }
.screen-night > * { pointer-events: auto; }
.hud-top {
  position: absolute; left: 0; right: 0; top: 0; height: 34px;
  display: flex; align-items: center; gap: 4px 16px; padding: 0 10px;
  background: linear-gradient(rgba(5,14,19,.82), rgba(5,14,19,.6)); border-bottom: 1px solid rgba(42,90,105,.7);
}
.hud-wave { font-family: var(--mono); font-size: 16px; color: var(--amber); font-weight: 700; letter-spacing: .08em; white-space: nowrap; }
.hud-cell { display: flex; align-items: center; gap: 6px; min-width: 0; }
.hud-cell[hidden] { display: none; }
.hud-lookout-lane { margin-right: 8px; white-space: nowrap; }
.hud-lookout-lane > span { margin-right: 3px; }
#hud-lookout { margin-right: 14px; }
.hud-bar-cell { flex: 1 1 200px; }
.hud-label { color: var(--muted); font-size: 12px; white-space: nowrap; }
.hud-num { font-family: var(--mono); font-weight: 700; min-width: 2ch; }
.hud-buttons { margin-left: auto; gap: 6px; }
.bar { flex: 1 1 auto; height: 12px; background: #04090c; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; min-width: 60px; }
.bar-fill { display: block; height: 100%; width: 100%; background: linear-gradient(#e9b24d, #b97a1e); transition: width .15s; }
.bar-fill.low { background: linear-gradient(#ef6b5c, #a8362b); }

.wh-prompt {
  position: absolute; left: 8px; top: 342px; padding: 2px 10px; font-weight: 700;
  background: rgba(10,20,26,.82); border: 1px solid var(--amber); border-radius: 4px; color: #ffe2a8;
  animation: pulse 1.2s ease-in-out infinite; pointer-events: none;
}
@keyframes pulse { 50% { box-shadow: 0 0 10px rgba(242,169,59,.7); } }

.hud-bottom {
  position: absolute; left: 0; right: 0; bottom: 0; height: 38px; padding: 0 8px 2px;
  display: flex; align-items: stretch; justify-content: space-between; gap: 10px;
  background: linear-gradient(rgba(5,14,19,0), var(--band) 30%);
  pointer-events: none;
}
.hud-slots { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; pointer-events: auto; }
.slot {
  position: relative; width: 172px; height: 36px; padding: 2px 7px 3px; overflow: hidden; cursor: pointer; line-height: 1.2;
  background: var(--band); border: 1px solid rgba(42,90,105,.9); border-radius: 5px;
  display: flex; flex-direction: column; justify-content: center; gap: 0; min-width: 0;
}
.slot:hover { border-color: var(--amber); }
.slot.equipped { border-color: var(--amber); background: rgba(52,42,18,.82); box-shadow: 0 0 8px rgba(242,169,59,.4); }
.slot.unusable .slot-name { opacity: .65; }
.slot.empty { flex-direction: row; align-items: center; gap: 8px; cursor: default; color: var(--muted); border-style: dashed; background: rgba(5,14,19,.5); }
.slot-top { display: flex; align-items: center; gap: 5px; min-width: 0; flex: none; }
.slot .tag { line-height: 1.2; }
.slot .slot-stats, .slot .slot-reason { flex: none; line-height: 1.2; }
.slot-top .slot-name { flex: 1 1 auto; min-width: 0; font-size: 12.5px; }
.slot-top .slot-key { font-size: 11px; padding: 0 4px; min-width: 16px; }
.slot-empty { font-size: 12px; }
.slot-reload { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; }
.slot-reload b { display: block; height: 100%; width: 0; background: #fff; }
.slot.reloading { border-color: #ffffff; }

.hud-right { display: flex; align-items: center; gap: 14px; pointer-events: none; padding-right: 2px; }
.hud-grenade { font-family: var(--mono); font-weight: 700; color: var(--amber); font-size: 14px; white-space: nowrap; text-shadow: 0 1px 3px #000; }
.hud-grenade.none { color: var(--muted); }
.hud-ammo { display: flex; align-items: baseline; gap: 8px; text-shadow: 0 1px 4px #000; }
.ammo-main { font-family: var(--mono); font-size: 28px; font-weight: 700; line-height: 1; color: #fff3d6; min-width: 1.4ch; text-align: right; }
.hud-ammo.low .ammo-main { color: var(--danger); }
.ammo-side { display: flex; flex-direction: column; line-height: 1.2; }
.ammo-sub { font-family: var(--mono); font-size: 12px; color: var(--text); white-space: nowrap; }
.ammo-name { font-size: 11px; color: var(--muted); white-space: nowrap; }

/* 倉庫パネル（左寄り。右側の戦況が見える幅） */
.wh-panel {
  position: absolute; left: 8px; top: 40px; width: 480px; max-height: 456px; padding: 6px 10px 8px;
  background: rgba(7, 18, 24, 0.9); border: 1px solid var(--amber); border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,.6);
  display: flex; flex-direction: column; gap: 4px;
}
.wh-head { display: flex; align-items: center; gap: 10px; }
.wh-title { margin: 0; font-size: 17px; color: var(--amber); letter-spacing: .2em; }
.wh-note { flex: 1 1 auto; min-width: 0; white-space: nowrap; color: #ffd9a0; font-weight: 700; font-size: 12px; background: rgba(168,105,26,.28); border: 1px solid var(--amber-dark); border-radius: 3px; padding: 0 8px; }
.wh-close { font-size: 16px; line-height: 1; padding: 2px 9px; }
.wh-hint { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.wh-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* 手持ち／倉庫ウィジェット */
.hs { display: grid; gap: 6px 14px; }
.hs-col { display: grid; gap: 4px; align-content: start; min-width: 0; }
.wh-panel .slot-row { padding: 2px 6px; min-height: 0; line-height: 1.25; gap: 0 6px; }
.wh-panel .hs-col, .wh-panel .hs-list { gap: 3px; }
.hs-title { margin: 2px 0 0; font-size: 12px; color: var(--muted); letter-spacing: .06em; border-left: 3px solid var(--amber-dark); padding-left: 7px; font-weight: 600; }
.hs-list { display: grid; gap: 4px; align-content: start; }
.hs-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.hs-box { min-height: 0; }
/* 行を1行に圧縮（名前・区分・数値を横並び）。多数でもスクロールを避ける */
.hs .slot-row { padding: 2px 8px; min-height: 0; line-height: 1.25; }
.hs .slot-body { display: flex; align-items: center; gap: 0 8px; min-width: 0; }
.hs .slot-head { flex: none; }
.hs .slot-name { max-width: 110px; }
.hs .slot-stats, .hs .slot-reason { flex: 1 1 0; min-width: 0; }
.hs .slot-body:has(.slot-reason) .slot-stats { display: none; }
.hs .slot-row.empty { min-height: 29px; }
.btn-dim { opacity: .55; }

/* ---------- ポーズ・トースト ---------- */
.pause-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(2,8,12,.7); z-index: 30; }
.pause-box { text-align: center; padding: 20px 30px; background: var(--panel); border: 1px solid var(--amber); border-radius: 8px; }
.pause-title { font-size: 26px; color: var(--amber); letter-spacing: .2em; font-weight: 700; }
.pause-sub { color: var(--muted); margin: 4px 0 14px; }
.toast {
  position: absolute; left: 50%; bottom: 46px; transform: translateX(-50%); z-index: 40;
  background: rgba(10,20,26,.94); border: 1px solid var(--amber); color: var(--text);
  padding: 4px 14px; border-radius: 4px; font-size: 13px; max-width: 80%; text-align: center; pointer-events: none;
}

/* Version stamp remains available before daytime styles load. */
.version-label{position:absolute;z-index:40;top:1px;left:50%;transform:translateX(-50%);padding:1px 7px;border-radius:0 0 5px 5px;background:#f9eddfcc;color:#826b96;font-size:9px;pointer-events:none;white-space:nowrap}
body[data-mode="night"] .version-label{top:46px}
@media(max-width:700px),(pointer:coarse){
  body[data-mode="day"] .version-label{position:fixed;top:0;left:auto;right:0;transform:none;font-size:8px}
}
#day-panel.base-css-pending{visibility:hidden}

/* ---------- 昼 ---------- */
#day-panel.screen-day {
  display: flex; flex-direction: column; width: 100%; height: 100%;
  min-width: 0; min-height: 0; padding: 0; overflow: clip; font-size: 13px;
}
#day-panel .day-head {
  position: relative; z-index: 20; flex: 0 0 44px; height: 44px; min-height: 0;
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  align-items: center; gap: 8px; padding: 0 8px;
  background: #152d38; border-bottom: 1px solid #53736a;
}
#day-panel .day-title {
  min-width: 0; max-width: 180px; margin: 0; overflow: hidden; text-overflow: ellipsis;
  font-size: 12px; line-height: 1.2; color: #f0e7d1; white-space: nowrap;
}
#day-panel .hours {
  display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start;
  min-width: 0; gap: 2px;
}
#day-panel .meter { display: flex; gap: 2px; }
#day-panel .meter i {
  display: block; width: 6px; height: 4px; border-radius: 1px;
  background: #a2ccb2; border: 1px solid #d2dfbc;
}
#day-panel .meter i.used { background: #263f48; border-color: #4b6764; }
#day-panel .hours-text {
  font-family: var(--mono); font-size: 10px; line-height: 1.2;
  font-weight: 700; color: #f0e7d1; white-space: nowrap;
}
#day-panel .day-status {
  display: grid; grid-template-columns: repeat(2, max-content); justify-content: end;
  gap: 1px 8px; min-width: 0; margin: 0; color: #b7c9c9;
  font-size: 9px; line-height: 1.2; white-space: nowrap;
}
#day-panel .day-status b { color: #f0e7d1; font-family: var(--mono); }

#day-panel .tabs {
  position: static; display: flex; align-items: center; gap: 3px;
  height: 36px; min-width: 0; margin: 0; padding: 0;
  border: 0; background: none; overflow: clip;
}
#day-panel .tab {
  appearance: none; flex: none; min-width: 0; height: 32px; min-height: 32px;
  font: inherit; font-size: 10px; line-height: 1.2; font-weight: 700;
  cursor: pointer; color: #c1d2c6; white-space: nowrap;
  background: #1b3540; border: 1px solid #496c65; border-radius: 4px; padding: 2px 7px;
}
#day-panel .tab:hover { color: #f0e7d1; border-color: #ebbf72; }
#day-panel .tab.active { color: #253d3d; background: #dbcca8; border-color: #f4dfad; }
#day-panel .tab:focus-visible { outline: 2px solid #ebbf72; outline-offset: -2px; }

#day-panel .day-content {
  position: relative; inset: auto; flex: 1 1 0; height: auto;
  min-width: 0; min-height: 0; margin: 0; padding: 8px;
  background: none; border: 0; border-radius: 0; overflow: clip;
}
.tab-note { margin-bottom: 6px; }
.act-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.act-card { background: #231b11; border: 1px solid #5a4325; border-radius: 6px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; min-height: 108px; }
.act-card.off { background: #1c1610; }
.act-btn { display: flex; justify-content: space-between; align-items: center; width: 100%; font-weight: 700; font-size: 14px; padding: 7px 12px; }
.act-hours { font-family: var(--mono); font-size: 12px; color: #ffd9a0; }
.act-info { color: var(--text); font-size: 12.5px; }
.act-bonus { color: #9fe6b6; font-size: 12px; font-weight: 700; }
.act-why { color: var(--danger); font-size: 12px; }
.repair-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 10px; }
.rep-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: center; background: #231b11; border: 1px solid #5a4325; border-radius: 6px; padding: 4px 8px; min-height: 36px; }
.rep-row.broken { border-color: var(--danger); background: #2a1512; }
.rep-info { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; font-size: 12px; min-width: 0; }
.rep-name { font-weight: 700; font-size: 13px; }
.rep-loc { color: var(--muted); font-size: 11.5px; }
.rep-dur { color: var(--muted); font-family: var(--mono); font-size: 11.5px; }
.rep-why { color: var(--danger); font-size: 11.5px; width: 100%; }
.broken-label { color: var(--danger); font-weight: 700; font-size: 11.5px; }
.empty-msg { padding: 24px; text-align: center; color: var(--muted); }

/* 仲間タブ */
.ally-list { display: grid; gap: 6px; }
.ally-card { background: #231b11; border: 1px solid #5a4325; border-radius: 6px; padding: 5px 9px; display: grid; gap: 3px; }
.ally-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ally-name { font-size: 14px; color: #ffc766; min-width: 54px; }
.chip { display: inline-block; font-size: 11.5px; line-height: 1.5; padding: 0 7px; border-radius: 9px; border: 1px solid; white-space: nowrap; }
.chip-good { color: #9fe6b6; border-color: #3d8f5d; background: #11301f; }
.chip-bad { color: #ffab9f; border-color: #a8483b; background: #38171a; }
.chip-normal { color: var(--text); border-color: #5b6f75; background: #1b2a30; }
.chip-bonus { color: #ffd9a0; border-color: var(--amber-dark); background: #32230d; }
.ally-top .ally-hold { margin-left: auto; }
.ally-hold, .ally-cands { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 7px; font-size: 12.5px; }
.ally-hold-label { color: var(--muted); font-size: 11.5px; min-width: 28px; }
.cand { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; }
.cand-dur { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.cand-rate { font-size: 11px; font-weight: 700; }
.cand-good { border-color: #3d8f5d; } .cand-good .cand-rate { color: #9fe6b6; }
.cand-bad { border-color: #a8483b; } .cand-bad .cand-rate { color: #ffab9f; }
.cand-normal .cand-rate { color: var(--text); }
.cand-broken .cand-name { text-decoration: line-through; text-decoration-color: var(--danger); }

#day-panel .day-foot {
  position: static; display: flex; flex-direction: column; align-items: stretch;
  flex: none; width: 100%; height: auto; min-width: 0; min-height: 0;
  margin: auto 0 0; gap: 3px; overflow: clip;
}
.log-list {
  list-style: none; margin: 0; padding: 6px 10px; flex: 1 1 auto; min-width: 0;
  background: rgba(18, 12, 7, 0.9); border: 1px solid #5a4325; border-radius: 6px; font-size: 12.5px; overflow: hidden;
}
.log-list li { padding: 1px 0; border-bottom: 1px dotted #4a3822; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.log-list li:first-child { color: #ffd9a0; font-weight: 700; }
.log-list li.fail { color: var(--danger); }
#day-panel .day-foot .log-list {
  flex: none; height: auto; max-height: none; padding: 3px 5px;
  font-size: 9px; line-height: 1.2; border-radius: 4px;
}
#day-panel .day-next {
  order: -1; flex: none; width: auto; display: flex; flex-direction: column;
  align-items: stretch; min-width: 0; gap: 3px;
}
#day-panel .day-next .btn-big {
  min-width: 0; min-height: 32px; padding: 4px 6px;
  font-size: 11px; line-height: 1.2;
}
#day-panel .day-next .note {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  max-width: none; gap: 3px; font-size: 9px; line-height: 1.2; text-align: center;
}
#day-panel .plan-return {
  min-width: 0; min-height: 22px; padding: 1px 3px; font-size: 10px;
}

/* ---------- 結果 ---------- */
.result { text-align: center; padding-top: 100px; }
.result-title { font-size: 48px; margin: 0 0 6px; letter-spacing: .3em; }
.result.win .result-title { color: var(--ok); }
.result.lose .result-title { color: var(--danger); }
.result-stats { display: inline-grid; grid-template-columns: max-content max-content; gap: 6px 22px; margin: 14px 0 6px; text-align: left; font-size: 18px; }
.result-stats dt { color: var(--muted); }
.result-stats dd { margin: 0; font-family: var(--mono); color: var(--amber); font-weight: 700; }
.result .btn-row { justify-content: center; margin-top: 24px; }

/* ステージ内のレイアウトは拡縮前提の固定値。親要素のスクロールバーが出ないよう念のため */
#viewport, #stage { scrollbar-width: none; }

/* Pop cel pass: lavender ink, mint/coral accents and soft collectible cards. */
:root {
  --bg: #eee6fa; --bg2: #e2dbf7; --panel: #f7f2ff; --panel2: #e5dcf6;
  --line: #aca0cc; --amber: #795ba9; --amber-dark: #a87caf;
  --text: #483c66; --muted: #74698d; --danger: #b84a69; --ok: #378369;
  --band: rgba(246, 240, 255, .95);
}
body { background: #b8abd5; }
#stage { background: #eee6fa; }
#screen-select, #screen-brief, .result {
  background: radial-gradient(circle at 9% 2%, #ffffffb3 0 12%, transparent 12.3%),
    radial-gradient(circle at 95% 97%, #d0ece59e 0 20%, transparent 20.3%),
    linear-gradient(145deg, #f5eefe, #e1daf6 62%, #dedfee);
}
.screen-head { min-height: 34px; }
.screen-head .logo { margin-right: auto; }
.logo { color: #5b4c83; font-family: var(--font); font-size: 23px; letter-spacing: .06em; font-weight: 900; }
.logo-sub { color: #9383af; font-size: 12px; }
.screen-title { color: #6f5d96; font-size: 19px; margin: 4px 0 1px; }
#select-title::before { content: '★ '; color: #b48761; }
.lead { font-size: 11.5px; }
.btn {
  border: 2px solid #b0a3ce; border-radius: 11px;
  background: #fbf6ff; color: #5a4a78; box-shadow: 0 3px 0 #c4b9da;
  font-weight: 700; transition: transform .13s, box-shadow .13s, background .13s;
}
.btn:hover:not(:disabled) { border-color: #8b77b6; background: #e7dcff; box-shadow: 0 3px 0 #ad9bce; }
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #b2a3cd; }
.btn:focus-visible { outline: 3px solid #7960b0; outline-offset: 3px; }
.btn-primary { background: #a9e4ca; border-color: #69a995; color: #345d55; box-shadow: 0 4px 0 #85b8a8; }
.btn-primary:hover:not(:disabled) { background: #baf0d7; border-color: #518e7b; box-shadow: 0 4px 0 #77a897; }
.btn-small { border-width: 1.5px; padding: 2px 8px; font-size: 11px; border-radius: 8px; }
.btn-sound[aria-pressed="true"], .js-motion[aria-pressed="true"] { background: #e0f5e9; border-color: #70a990; color: #3f7561; }
.card-list { gap: 10px; margin-top: 9px; }
.card {
  position: relative; padding: 5px; gap: 4px; height: 410px;
  border: 2px solid #a698c7; border-radius: 17px;
  background: #faf6ff; box-shadow: 0 5px 0 #c3b8dc;
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.card:hover, .card:focus-visible { transform: translateY(-4px); border-color: #8770b4; box-shadow: 0 9px 0 #c3b8dc, 0 0 0 3px #fff7; }
.card::after { content: '出撃 →'; margin-top: auto; align-self: stretch; text-align: center; padding: 3px 0; background: #e7def6; color: #786399; border-radius: 7px; font-size: 10.5px; font-weight: 800; letter-spacing: .15em; }
.card canvas { height: 207px; border-radius: 11px; background: #8c7bc4; }
.card-text { padding: 1px 4px; }
.card-name { font-size: 15px; color: #665086; margin-bottom: 2px; }
.card-desc { font-size: 10.8px; line-height: 1.4; }
.card-desc, .card-uniq, .card-uniq li { color: #55486c; font-weight: 600; }
.hud-bottom .slot-stats, .hud-bottom .slot-empty, .ammo-sub, .ammo-name { color: #55456f; font-weight: 700; }
.card-uniq { font-size: 10.5px; border-top: 1px solid #d5c9e7; margin-top: 4px; padding-top: 4px; }
.card-uniq li { margin: 1px 0; }
.brief-who canvas { border: 3px solid #b4a2cf; border-radius: 18px; box-shadow: 0 5px 0 #c3b7d9; }
.brief-name { color: #6a5391; }
.tag-unique { color: #3c7a6b; border-color: #8ac4b1; background: #e0f5ec; }
.tag-repairable { color: #876532; border-color: #d6b37d; background: #fff0d5; }
.tag-disposable { color: #9a5970; border-color: #daa1b6; background: #ffe3ee; }
kbd { color: #64517e; background: #e7dbfb; border: 1px solid #c0abd6; }
.slot-row { border-radius: 10px; background: #f9f4ff; border-color: #bfb0d7; }
.slot-row.empty { background: #ece5f4; color: #8b7ca4; }
.slot-row.equipped { background: #fff1d2; border-color: #cda976; box-shadow: 0 0 0 1px #f5d19e inset; }
.slot-key { color: #715b99; background: #e5d8f5; }
.hud-top { background: #f4edffed; border-bottom: 2px solid #b5a6cd; }
.hud-wave { color: #765b9e; }
.bar { background: #dfd4ed; border-color: #b0a2c6; }
.bar-fill { background: #92cbb1; }
.bar-fill.low { background: #ed96ad; }
.hud-bottom { background: #f4edffed; border-top-color: #b5a6cd; }
.hud-slots li, .hud-slot { color: var(--text); background: #f9f3ff; border-color: #b6a4ce; }
.hud-slots li.equipped, .hud-slot.equipped { background: #fff1d2; border-color: #d6ad71; box-shadow: none; }
.hud-grenade, .ammo-main { color: #7b5d9b; }
.hud-grenade, .hud-ammo { text-shadow: none; }
.slot.empty { background: #ebe3f4; color: #8a7aa4; }
.wh-panel { background: #f6eefffa; border: 2px solid #ad9cc9; border-radius: 15px; box-shadow: 0 7px 0 #7d709b66; }
.wh-head { background: #e9def9; border-color: #b3a0cd; }
.wh-title { color: #775b9e; }
.wh-note, .wh-hint { color: #78688f; }
.wh-note { background: #fff0d8; border-color: #d8b799; }
.wh-prompt { background: #f3eaff; color: #72588f; border-color: #b49acb; border-radius: 9px; }
.pause-overlay { background: #5d4b7c55; }
.pause-box { background: #f6efff; border: 3px solid #ac98c8; border-radius: 24px; box-shadow: 0 6px 0 #84729e; }
.pause-title { color: #725397; }
.pause-sub { color: #8d7ba4; }
.toast { background: #fff0ce; color: #73578b; border: 2px solid #bea1cb; border-radius: 12px; }

.day-head .btn-small { flex-shrink: 0; white-space: nowrap; }
.act-card { background: #faf5ff; border-color: #c1aed6; border-radius: 12px; }
.act-card.off { background: #e6ddee; }
.act-hours { color: #906695; }
.act-bonus { color: #427c69; }
.cand-good .cand-rate { color: #467c66; }
.cand-bad .cand-rate { color: #a45b74; }
.work-card, .action-card, .rep-row, .ally-card, .log-list { background: #faf5ff; border-color: #c1aed6; border-radius: 12px; }
.rep-row.broken { background: #ffe9ef; border-color: #d496aa; }
.ally-name, .log-list li:first-child { color: #77589d; }
.log-list li { border-bottom-color: #d8cce7; }
.chip-good { color: #477b67; background: #dcf0e5; border-color: #9dbfaa; }
.chip-bad { color: #a35b75; background: #ffe2ec; border-color: #dba4b8; }
.chip-normal { color: #796090; background: #eadff6; border-color: #b6a1ce; }
.chip-bonus { color: #92704c; background: #fff0d7; border-color: #d4b991; }
.result { padding-top: 76px; }
.result::before { content: '★  ✦  ★'; display: block; color: #b99367; font-size: 31px; letter-spacing: 24px; padding-left: 24px; margin-bottom: 5px; }
.result-title { font-size: 44px; letter-spacing: .12em; }
.result-stats { border: 2px solid #c7b6de; border-radius: 17px; background: #fffbffb3; padding: 18px 25px; font-size: 16px; }
.result-stats dd { color: #8663a3; }
.result-portrait { position: absolute; left: 60px; top: 151px; width: 174px; height: 248px; border: 4px solid #fff; border-radius: 23px; transform: rotate(-5deg); box-shadow: 0 5px 0 #c6b7da; }
body[data-mode="brief"] .screen:not([hidden]), body[data-mode="day"] .screen:not([hidden]), body[data-mode="result"] .screen:not([hidden]) { animation: pop-enter .22s ease-out; }
@keyframes pop-enter { from { opacity: .5; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
body.reduced-motion *, body.reduced-motion *::before, body.reduced-motion *::after { animation: none !important; transition: none !important; }
body.reduced-motion .card:hover, body.reduced-motion .card:focus-visible { transform: none; }
@media (prefers-reduced-motion: reduce) { body:not([data-motion="standard"]) *, body:not([data-motion="standard"]) *::before, body:not([data-motion="standard"]) *::after { animation: none !important; transition: none !important; } }

/* Rarity is always spelled out; hue is a supplementary cue. */
.weapon-rarity{display:inline-block;vertical-align:middle;margin:2px 0 2px 6px;padding:2px 5px;border:1px solid currentColor;border-radius:4px;font:600 10px/1.35 system-ui,sans-serif;letter-spacing:.02em;white-space:nowrap;color:#d5dedb;background:#17201f;max-width:100%;box-sizing:border-box}
.weapon-rarity[data-rarity="U"]{color:#9ce3b0}
.weapon-rarity[data-rarity="R"]{color:#9dcfff}
.weapon-rarity[data-rarity="E"]{color:#dfb5ff}
.weapon-rarity[data-rarity="L"]{color:#ffe098}
.weapon-reference{display:block;color:#bac6c4;font:400 10px/1.45 system-ui,sans-serif;letter-spacing:.01em;overflow-wrap:anywhere;white-space:normal}
.loadout-card>.weapon-rarity{margin:3px 0;justify-self:start}
.weapon-compare-heading>span{min-width:0;overflow-wrap:anywhere}
.exp-weapon-choice .weapon-rarity{font-size:9px;margin-left:0;white-space:normal}
.loadout-card strong .weapon-rarity{font-size:8px;margin:1px 0 0 3px;padding:0 3px}
.exp-rarity-odds{margin-top:8px;border-top:1px solid #607774;padding-top:6px}
.exp-rarity-odds p,.exp-rarity-odds small{display:block;font-size:10px;line-height:1.5;margin:2px 0;color:#cad5cf}
.exp-rarity-odds .weapon-rarity{margin-left:0;margin-right:4px}
/* Model references remain visible in inspection/comparison; compact slots
   retain a title without forcing extra rows into the mobile HUD. */
.slot-name:has(.weapon-rarity){white-space:normal;overflow-wrap:anywhere}
body.mobile-ui #day-panel .base-tab-equip .base-hand-col .slot-name .weapon-reference,
body.mobile-ui #day-panel .base-tab-equip .base-storage-chip .weapon-reference,
body.mobile-ui .slot-top .weapon-reference{display:none}
body.mobile-ui #day-panel .base-tab-equip .base-hand-col .slot-name .weapon-rarity,
body.mobile-ui #day-panel .base-tab-equip .base-storage-chip .weapon-rarity{font-size:8px;line-height:1.2;padding:0 2px;margin:0 0 0 2px}
body.mobile-ui #day-panel .base-tab-equip .base-storage-chip .slot-name:has(.weapon-rarity){white-space:normal;line-height:11px}