:root { --bg: #14100a; --gold: #d9b45b; --up: #d9534f; --down: #4f9dd9; --fg: #f2e9d8; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg);
  font-family: system-ui, "Hiragino Sans", sans-serif; }
.screen { position: fixed; inset: 0; display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) 12px env(safe-area-inset-bottom); }
.screen[hidden] { display: none; }
#screen-title { background-color: var(--bg);
  background-image: linear-gradient(rgba(20,16,10,.55), rgba(20,16,10,.9)), url('../img/title-bg.png');
  background-size: cover; background-position: center; }
.scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.logo { color: var(--gold); text-align: center; font-size: 2rem; margin-top: 18vh; }
.menu { display: flex; flex-direction: column; gap: 12px; margin-top: auto; margin-bottom: 8vh; }
button { font: inherit; padding: 14px; border: 1px solid var(--gold); border-radius: 10px;
  background: transparent; color: var(--fg); }
.up { color: var(--up); } .down { color: var(--down); }

/* ===== ラン画面 HUD ===== */
#run-hud { flex: 0 0 auto; padding: 6px 2px 8px; border-bottom: 1px solid rgba(217,180,91,.25); }
.hud-row { display: flex; justify-content: space-between; align-items: baseline; }
.hud-top { margin-bottom: 4px; }
.hud-market { color: var(--gold); font-weight: 600; font-size: 1.05rem; }
.hud-day { font-size: .85rem; opacity: .85; }
.hud-bottom { gap: 8px; font-variant-numeric: tabular-nums; }
.hud-net { font-size: 1.05rem; font-weight: 600; }
.hud-rank, .hud-ap { font-size: .85rem; opacity: .9; }

/* ===== セクション見出し ===== */
.sec-title { font-size: .78rem; letter-spacing: .1em; color: var(--gold);
  opacity: .8; margin: 10px 2px 4px; font-weight: 600; }

/* ===== 保有サマリ ===== */
.holdings { margin-bottom: 4px; }
.pos-line { display: flex; align-items: center; gap: 8px; padding: 4px 4px;
  font-size: .85rem; border-bottom: 1px solid rgba(242,233,216,.06); }
.pos-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos-sh { flex: 0 0 auto; opacity: .8; font-variant-numeric: tabular-nums; }
.pos-pnl { flex: 0 0 auto; font-variant-numeric: tabular-nums; min-width: 84px; text-align: right; }
.short-tag { font-size: .65rem; margin-left: 4px; padding: 0 4px; border-radius: 4px;
  background: rgba(79,157,217,.2); color: var(--down); }

/* ===== 銘柄リスト ===== */
.stock-row { display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 6px; margin: 0 0 6px; border: 1px solid rgba(217,180,91,.18);
  border-radius: 10px; background: rgba(255,255,255,.02); text-align: left; }
.st-thumb { width: 32px; height: 32px; border-radius: 6px; object-fit: cover;
  vertical-align: middle; margin-right: 8px; flex: 0 0 auto; }
.st-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.st-name { font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-sector { font-size: .7rem; opacity: .6; }
.st-spark { flex: 0 0 auto; line-height: 0; }
.st-nums { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end;
  gap: 2px; font-variant-numeric: tabular-nums; min-width: 74px; }
.st-price { font-size: .95rem; }
.st-chg { font-size: .8rem; }
.row-hold { font-size: .62rem; margin-left: 6px; padding: 0 5px; border-radius: 6px;
  background: rgba(217,180,91,.18); color: var(--gold); vertical-align: middle; }
.spark { display: block; }

/* ===== レガリア欄 ===== */
#run-regalia { flex: 0 0 auto; padding: 6px 0; border-top: 1px solid rgba(217,180,91,.25); }
.regalia-strip { display: flex; gap: 6px; overflow-x: auto; padding: 2px; -webkit-overflow-scrolling: touch; }
.regalia-empty { font-size: .8rem; opacity: .5; padding: 6px; }
.regalia-chip { flex: 0 0 auto; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 6px 10px; border-radius: 999px; font-size: .78rem;
  border: 1px solid rgba(217,180,91,.4); background: rgba(255,255,255,.03); }
.regalia-chip.is-disabled { opacity: .45; }
.chip-name { white-space: nowrap; }
.chip-desc { display: block; font-size: .7rem; opacity: .75; white-space: normal; line-height: 1.2; }
.chip-cd { color: var(--down); font-size: .68rem; }
.chip-ap { opacity: .7; font-size: .68rem; }
.chip-passive { font-size: .62rem; opacity: .7; padding: 0 4px; border-radius: 4px;
  background: rgba(217,180,91,.15); }

/* レア度の縁色 */
.r-common { border-color: rgba(242,233,216,.35); }
.r-rare { border-color: #4f9dd9; }
.r-epic { border-color: #b06fd9; }
.r-legend { border-color: var(--gold); box-shadow: 0 0 6px rgba(217,180,91,.4); }

/* ===== 行動ボタン ===== */
#run-actions { flex: 0 0 auto; padding: 8px 0 4px; }
.btn-endday { width: 100%; background: var(--gold); color: #1a1509; font-weight: 700; border: none; }
.btn-endday:disabled { opacity: .5; }

/* ===== シート(モーダル) ===== */
#sheet-root:empty { display: none; }
.sheet-overlay { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.6);
  display: flex; align-items: flex-end; justify-content: center;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
.sheet-card { width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto;
  background: var(--bg); border-top: 2px solid var(--gold);
  border-radius: 16px 16px 0 0; padding: 12px 14px calc(16px + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.sheet-title { margin: 0; font-size: 1.1rem; color: var(--gold); }
.sheet-close { border: none; background: transparent; font-size: 1.4rem; padding: 2px 8px; line-height: 1; }

/* 売買シート */
.trade-thumb { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; align-self: center; }
.trade-info { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.trade-price { font-size: 1.2rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.trade-chg { font-size: .85rem; margin-left: 6px; }
.trade-cash { font-size: .78rem; opacity: .8; text-align: right; }
.trade-chart { margin: 6px 0; line-height: 0; }
.trade-hold { font-size: .82rem; opacity: .85; margin-bottom: 8px; }
.stepper { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.stepper .step-dn, .stepper .step-up { width: 44px; padding: 10px 0; font-size: 1.1rem; }
.step-val { flex: 1; min-width: 0; text-align: center; padding: 10px; font-size: 1.1rem;
  background: rgba(255,255,255,.05); border: 1px solid var(--gold); border-radius: 10px;
  color: var(--fg); font-variant-numeric: tabular-nums; }
.step-quick { display: flex; gap: 6px; }
.step-quick button { padding: 8px 10px; font-size: .8rem; }
.qty-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.qty-chips .chip { padding: 6px 10px; font-size: .82rem; border-radius: 8px;
  border: 1px solid var(--gold); background: transparent; color: var(--fg); }
.qty-chips .chip[hidden] { display: none; }
.trade-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.t-buy { background: var(--up); color: #fff; border: none; }
.t-sell { background: var(--down); color: #fff; border: none; }
.t-short { border-color: var(--down); }
.t-cover { border-color: var(--up); }
.trade-btns button:disabled { opacity: .4; }

/* レガリアカード(選択シート/ドラフト共通・効果説明の常時表示+背景展開) */
.rg-card { border: 1px solid var(--gold); border-radius: 10px; padding: 10px; margin: 6px 0; overflow: hidden; }
.rg-icon { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; float: left; margin-right: 8px; }
.rg-name { font-weight: 700; color: var(--gold); }
.rg-meta { font-size: .75rem; color: var(--fg); opacity: .7; }
.rg-desc { font-size: .85rem; margin-top: 4px; }
.rg-flavor { font-size: .8rem; opacity: .8; margin-top: 6px; font-style: italic; }
.rg-flavor[hidden] { display: none; }

/* 対象選択シート */
.target-desc { font-size: .85rem; opacity: .85; margin: 2px 0 8px; }
.target-list { display: flex; flex-direction: column; gap: 8px; }
.target-item { display: flex; justify-content: space-between; align-items: center;
  padding: 12px; text-align: left; }
.tg-price { opacity: .8; font-variant-numeric: tabular-nums; }

/* 闇市ドラフト */
.draft-lead, .draft-replace .replace-lead { font-size: .85rem; opacity: .85; margin: 2px 0 8px; }
.draft-offers { display: flex; flex-direction: column; gap: 8px; }
.draft-card { display: flex; flex-direction: column; gap: 4px; padding: 12px; text-align: left; }
.draft-card.is-selected { background: rgba(217,180,91,.15); }
.dc-head { display: flex; align-items: center; gap: 10px; }
.dc-rarity { flex: 0 0 auto; font-size: .72rem; padding: 2px 8px; border-radius: 6px;
  background: rgba(217,180,91,.15); color: var(--gold); }
.dc-name { flex: 1; font-size: 1rem; }
.dc-meta { flex: 0 0 auto; font-size: .75rem; opacity: .7; }
.dc-take { align-self: flex-end; margin-top: 6px; padding: 6px 14px; font-size: .85rem; }
.draft-replace { margin-top: 12px; }
.replace-list { display: flex; flex-wrap: wrap; gap: 8px; }
.replace-chip { padding: 8px 12px; font-size: .82rem; }
.draft-skip { width: 100%; margin-top: 12px; opacity: .8; }

/* ===== 補助画面 共通 ===== */
.sc-title { color: var(--gold); font-size: 1.3rem; margin: 8px 2px 12px; }
.back { flex: 0 0 auto; margin: 8px 0 4px; opacity: .85; }

/* ===== 遊び方 ===== */
.howto-sec { margin: 0 2px 16px; }
.howto-sec h2 { color: var(--gold); font-size: 1rem; margin: 0 0 6px; }
.howto-sec p, .howto-sec li { font-size: .9rem; line-height: 1.65; opacity: .92; }
.howto-sec ol { margin: 4px 0; padding-left: 1.3em; }
.howto-sec strong { color: var(--gold); font-weight: 600; }
.howto-terms { margin: 4px 0; }
.howto-terms dt { color: var(--gold); font-size: .9rem; font-weight: 600; margin-top: 8px; }
.howto-terms dd { margin: 2px 0 0; font-size: .88rem; line-height: 1.6; opacity: .9; }

/* ===== 商会 ===== */
.shop-head { display: flex; justify-content: space-between; align-items: baseline; margin: 8px 2px 10px; }
.shop-fame { color: var(--gold); font-weight: 600; font-variant-numeric: tabular-nums; }
.shop-sec { margin-bottom: 16px; }
.shop-grid { display: flex; flex-direction: column; gap: 8px; }
.shop-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 10px 12px; border: 1px solid rgba(217,180,91,.28); border-radius: 10px;
  background: rgba(255,255,255,.02); }
.shop-item.is-owned { border-color: rgba(217,180,91,.5); opacity: .8; }
.shop-item.is-locked:not(.is-owned) { opacity: .55; }
.item-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.item-name { font-size: .95rem; }
.item-sub { font-size: .72rem; opacity: .6; }
.item-side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.item-cost { color: var(--gold); font-variant-numeric: tabular-nums; font-size: .95rem; }
.item-state { font-size: .68rem; opacity: .75; }
.info-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.info-row { display: flex; flex-direction: column; gap: 1px; padding: 6px 4px;
  border-bottom: 1px solid rgba(242,233,216,.06); font-size: .85rem; opacity: .6; }
.info-row.is-on { opacity: 1; }
.info-name { color: var(--fg); }
.info-desc { font-size: .74rem; opacity: .7; }
.badge-on { font-size: .62rem; padding: 0 5px; border-radius: 5px;
  background: rgba(217,180,91,.2); color: var(--gold); }
.badge-off { font-size: .62rem; padding: 0 5px; border-radius: 5px;
  background: rgba(242,233,216,.08); }

/* ===== デイリー ===== */
.daily-date { font-variant-numeric: tabular-nums; opacity: .8; margin: 0 2px 12px; }
.daily-card { display: flex; flex-direction: column; gap: 6px; padding: 16px;
  border: 1px solid var(--gold); border-radius: 12px; background: rgba(217,180,91,.06); }
.daily-label { font-size: .74rem; letter-spacing: .1em; opacity: .7; }
.daily-name { color: var(--gold); font-size: 1.15rem; font-weight: 600; }
.daily-id { font-size: .72rem; opacity: .5; }
.daily-note { font-size: .82rem; opacity: .8; line-height: 1.6; margin: 14px 2px; }
.daily-play { width: 100%; background: var(--gold); color: #1a1509; font-weight: 700; border: none; }

/* ===== 設定 ===== */
.set-sec { margin-bottom: 18px; }
.set-row { display: flex; justify-content: space-between; align-items: center; }
.set-label { font-size: .95rem; }
.set-hint { font-size: .78rem; opacity: .7; margin: 4px 2px 6px; line-height: 1.5; }
.set-io { width: 100%; resize: vertical; font-family: ui-monospace, monospace; font-size: .78rem;
  padding: 8px; border: 1px solid rgba(217,180,91,.35); border-radius: 8px;
  background: rgba(0,0,0,.25); color: var(--fg); }
.set-btn { width: 100%; margin-top: 8px; font-size: .88rem; }
.set-danger { border-color: var(--up); color: var(--up); }
.set-msg { font-size: .78rem; min-height: 1.2em; margin: 6px 2px 0; opacity: .85; color: var(--gold); }
.set-msg.is-err { color: var(--up); }
.toggle { width: 52px; height: 30px; padding: 0; border-radius: 999px; position: relative;
  border: 1px solid var(--gold); background: rgba(255,255,255,.05); }
.toggle .toggle-knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
  border-radius: 50%; background: var(--fg); transition: left .15s, background .15s; }
.toggle.is-on { background: rgba(217,180,91,.3); }
.toggle.is-on .toggle-knob { left: 27px; background: var(--gold); }

/* ===== トースト/バナー ===== */
#toast-root { position: fixed; inset: 0; pointer-events: none; z-index: 50;
  display: flex; flex-direction: column; align-items: center; }
.toast { margin-top: auto; margin-bottom: 12px; max-width: 88vw; padding: 10px 16px;
  border-radius: 999px; background: rgba(20,16,10,.92); color: var(--fg);
  border: 1px solid var(--gold); font-size: .9rem; opacity: 0; transform: translateY(12px);
  transition: opacity .3s, transform .3s; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast-up { border-color: var(--up); } .toast-down { border-color: var(--down); }
.banner { margin-top: 10vh; max-width: 92vw; padding: 14px 20px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(217,180,91,.18), rgba(20,16,10,.95));
  color: var(--gold); border: 1px solid var(--gold); font-weight: 700; text-align: center;
  opacity: 0; transform: scale(.96); transition: opacity .3s, transform .3s; }
.banner.show { opacity: 1; transform: scale(1); }

/* ===== ライバル情報パネル(ラン画面) ===== */
.rivals-panel { border-top: 1px solid var(--gold); margin-top: 6px; }
.rivals-toggle { width: 100%; background: transparent; border: none; color: var(--gold);
  text-align: left; padding: 6px 4px; }
.rivals-panel.collapsed #rivals-body { display: none; }
.rival-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: .85rem; }
.rival-face { width: 28px; height: 28px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--gold); }
.rival-name { flex: 1; } .rival-rank { color: var(--gold); }
.rival-holds .masked { opacity: .5; }