/* あるけみすと風 — フラット・表組み・水色テーマ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0 0 8px;
  font-family: "MS PGothic", "Hiragino Kaku Gothic Pro", "Meiryo", sans-serif;
  font-size: 12px;
  line-height: 1.4;
  color: #000;
  background-color: #dceef8;
  min-height: 100vh;
  position: relative;
}

/* あるけみすと風 — 背景画像を薄く透かす */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background: url("/static/images/34494575_m.jpg") center bottom / cover no-repeat;
  opacity: 0.28;
  pointer-events: none;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(220, 238, 248, 0.62);
  pointer-events: none;
}

.page {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
}

body.page-home .page {
  display: block;
  width: 100%;
}

.app-top {
  width: 100%;
}

.app-shell {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 0 8px;
  box-sizing: border-box;
}

body.page-home .app-shell {
  padding-left: 0;
  padding-right: 0;
}

.avg-dock {
  width: 100%;
  max-width: 220px;
  margin-top: 8px;
  border: 1px solid #333;
  background: #0a0a0a;
  overflow: hidden;
}

.avg-dock:not(:has(.avg-index)) {
  display: none;
}

/* --- サイトヘッダー --- */

.site-header {
  background: rgba(42, 106, 154, 0.9);
  color: #fff;
  border: 1px solid #333;
  border-left: none;
  border-right: none;
  border-top: none;
  padding: 6px 10px;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.site-header-main {
  min-width: 0;
}

.site-title {
  margin: 0;
  font-size: 14px;
  font-weight: bold;
}

.site-subtitle {
  margin: 2px 0 0;
  font-size: 11px;
}

.site-header-user {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  font-size: 11px;
}

.site-user-name {
  font-weight: bold;
}

.logout-form {
  margin: 0;
}

.logout-btn {
  font-family: inherit;
  font-size: 11px;
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.9);
  color: #1a4a6a;
  border: 1px solid #333;
  cursor: pointer;
}

.logout-btn:hover {
  background: #fff;
}

.login-page {
  max-width: 420px;
  margin: 40px auto;
}

.login-page .site-header {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 8px 10px;
}

.login-page .site-title {
  font-size: 0;
  line-height: 0;
}

.login-page .site-title-logo {
  display: block;
  width: 100%;
  height: auto;
}

.login-page .site-subtitle {
  text-align: center;
}

.site-legal-footer {
  margin-top: 16px;
  padding: 12px 8px 4px;
  text-align: center;
  font-size: 11px;
  color: #555;
}

.site-legal-copy {
  margin: 0 0 6px;
}

.site-legal-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 12px;
}

.site-legal-nav a {
  color: #1a4a6a;
  text-decoration: underline;
}

.legal-page .legal-body {
  font-size: 12px;
  line-height: 1.55;
}

.legal-page .legal-body h2 {
  margin: 14px 0 6px;
  font-size: 13px;
}

.legal-page .legal-body p {
  margin: 0 0 8px;
}

.legal-back {
  margin: 10px 0 0;
  text-align: center;
  font-size: 12px;
}

.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.legal-table th,
.legal-table td {
  border: 1px solid #999;
  padding: 6px 8px;
  vertical-align: top;
  text-align: left;
}

.legal-table th {
  width: 8em;
  background: #f3f3f3;
  white-space: nowrap;
}

.login-panel .panel-body {
  min-height: 0;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.login-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
  font-weight: bold;
}

.login-label input {
  font-family: inherit;
  font-size: 12px;
  padding: 4px 6px;
  border: 1px solid #999;
}

.login-submit {
  font-family: inherit;
  font-size: 12px;
  font-weight: bold;
  padding: 5px 10px;
  background: rgba(42, 106, 154, 0.95);
  color: #fff;
  border: 1px solid #333;
  cursor: pointer;
}

.avatar-setup-lead {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.45;
  color: #444;
}

.avatar-setup-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.avatar-setup-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.avatar-setup-option {
  cursor: pointer;
}

.avatar-setup-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.avatar-setup-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 8px 10px;
  border: 2px solid #5a7a9a;
  background:
    linear-gradient(180deg, #f4f8fc 0%, #e6eef6 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 1px 3px rgba(30, 60, 90, 0.12);
}

.avatar-setup-option input:checked + .avatar-setup-card {
  border-color: #1e5a8a;
  background: linear-gradient(180deg, #eef5fb 0%, #d8e8f4 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 0 1px #1e5a8a,
    0 0 10px rgba(42, 106, 154, 0.35);
}

.avatar-setup-option input:focus-visible + .avatar-setup-card {
  outline: 2px solid #2a6a9a;
  outline-offset: 2px;
}

.avatar-setup-art {
  display: block;
  width: 140px;
  height: 175px;
  overflow: hidden;
  border: 1px solid #8aa0b4;
  background: #dce8f2;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

.avatar-setup-art img {
  display: block;
  width: 140px;
  height: 175px;
  object-fit: cover;
  object-position: center top;
}

.avatar-setup-label {
  font-size: 12px;
  font-weight: bold;
  color: #1a3a54;
}

.avatar-setup-submit {
  width: 100%;
  padding: 8px 10px;
}

.login-submit:hover {
  background: #2a6a9a;
}

.login-error {
  margin: 0 0 8px;
  color: #c00;
  font-size: 12px;
}

.login-error-list {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
}

.login-error-list .login-error {
  margin: 0 0 4px;
}

.login-switch {
  margin: 14px 0 0;
  font-size: 12px;
  text-align: center;
}

.login-switch a {
  color: #1a5a8a;
  font-weight: bold;
}

.login-hint {
  margin: 0 0 10px;
  font-size: 11px;
  line-height: 1.5;
  color: #333;
}

.login-messages {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}

.login-message {
  margin: 0 0 6px;
  padding: 6px 8px;
  font-size: 12px;
  background: #fff8c8;
  border: 1px solid #ccb;
}

.login-divider {
  margin: 16px 0;
  border: none;
  border-top: 1px solid #99a;
}

.email-verified {
  color: #060;
  font-weight: bold;
}

.email-unverified {
  color: #a60;
  font-weight: bold;
}

/* --- 上部ランキング枠 --- */

.ranking-row {
  margin-bottom: 0;
  padding: 6px 0 8px;
}

.ranking-placeholder {
  background: rgba(250, 250, 250, 0.7);
  border: 1px solid #999;
  padding: 6px 8px;
  text-align: center;
  color: #666;
}

/* --- ニュースティッカー（テレビ速報帯） --- */

.news-ticker {
  display: flex;
  align-items: stretch;
  border: 1px solid #333;
  margin-bottom: 6px;
  background: rgba(255, 255, 255, 0.85);
  overflow: hidden;
  font-family: "MS Mincho", "Yu Mincho", "Hiragino Mincho ProN", "HG明朝E", serif;
  letter-spacing: 0.06em;
}

.news-ticker-label {
  flex-shrink: 0;
  background: #2a6a9a;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  padding: 3px 10px;
  border-right: 1px solid #333;
  display: flex;
  align-items: center;
  letter-spacing: 0.1em;
}

.news-ticker-viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.news-ticker-track {
  display: inline-flex;
  width: max-content;
  animation: news-ticker-scroll 12s linear infinite;
}

.news-ticker-group {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.news-ticker-item {
  font-size: 11px;
  color: #222;
  padding: 3px 0;
}

.news-ticker-new {
  display: inline-block;
  margin-right: 6px;
  font-family: "MS PGothic", "Hiragino Kaku Gothic Pro", "Meiryo", sans-serif;
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 0.08em;
  color: #fff;
  background: #c45c4a;
  padding: 0 5px;
  line-height: 1.4;
  vertical-align: 1px;
}

.news-ticker-sep {
  font-size: 10px;
  color: #2a6a9a;
  padding: 0 14px;
}

@keyframes news-ticker-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* --- 上場銘柄チッカー（電子掲示板風） --- */

.stock-ticker {
  display: flex;
  align-items: stretch;
  border: 1px solid #222;
  margin-bottom: 6px;
  background: #0a0f0a;
  overflow: hidden;
  font-family: "Consolas", "Courier New", "MS Gothic", monospace;
  letter-spacing: 0.08em;
}

.stock-ticker-label {
  flex-shrink: 0;
  background: #2a6a9a;
  color: #fff;
  font-family: "MS PGothic", "Hiragino Kaku Gothic Pro", "Meiryo", sans-serif;
  font-size: 11px;
  font-weight: bold;
  padding: 4px 10px;
  border-right: 1px solid #333;
  display: flex;
  align-items: center;
  letter-spacing: 0.1em;
}

.stock-ticker-viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 1px,
      rgba(0, 0, 0, 0.18) 1px,
      rgba(0, 0, 0, 0.18) 2px
    );
}

.stock-ticker-track {
  display: inline-flex;
  width: max-content;
  animation: stock-ticker-scroll 35s linear infinite;
}

.stock-ticker-group {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.stock-ticker-item {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  padding: 4px 22px 4px 0;
  text-shadow: 0 0 3px currentColor;
}

.stock-code {
  color: #7cff7c;
  opacity: 0.85;
}

.stock-name {
  color: #c8ffc8;
}

.stock-price {
  font-weight: bold;
  min-width: 4.5em;
}

.stock-change,
.stock-pct {
  font-weight: bold;
}

.stock-up .stock-price,
.stock-up .stock-change,
.stock-up .stock-pct {
  color: #39ff14;
}

.stock-down .stock-price,
.stock-down .stock-change,
.stock-down .stock-pct {
  color: #ff4d4d;
}

.stock-flat .stock-price,
.stock-flat .stock-change,
.stock-flat .stock-pct {
  color: #bbbbbb;
  text-shadow: none;
}

.stock-pending {
  color: #c8ffc8;
  opacity: 0.85;
  text-shadow: none;
}

.stock-ticker-sep {
  color: #4a7a4a;
  opacity: 0.7;
  padding-right: 22px;
  font-size: 11px;
}

@keyframes stock-ticker-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* --- メイン2列（PC: 左ステータス / 右育成） --- */

.main-grid {
  width: 100%;
}

.panel-left,
.panel-right {
  display: block;
  width: 100%;
}

.panel {
  border: 1px solid #999;
  background: rgba(250, 250, 250, 0.68);
}

.panel-right {
  margin-top: 8px;
}

@media (min-width: 901px) {
  .ranking-cards {
    overflow-x: hidden;
  }

  .rank-box {
    flex: 1 1 0;
    min-width: 0;
  }

  .main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 8px;
    width: 100%;
    align-items: start;
  }

  .panel-left,
  .panel-right {
    display: block;
    width: auto;
    min-width: 0;
    margin-top: 0;
  }
}

.page-home .main-grid,
.main-grid-home {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr);
  gap: 8px;
  width: 100%;
  padding: 0 8px;
  box-sizing: border-box;
  align-items: start;
}

.page-home .panel-left,
.page-home .panel-mid,
.page-home .panel-right,
.main-grid-home .panel-left,
.main-grid-home .panel-mid,
.main-grid-home .panel-right {
  display: block;
  width: auto;
  min-width: 0;
  max-width: none;
  margin-top: 0;
  box-sizing: border-box;
}

.page-home .panel-body {
  min-height: 0;
}

.page-home .panel-decks {
  margin: 8px 8px 0;
}

.page-home .panel-decks .deck-block {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* --- すたつっぷ平均株価（ページ右外・ジャストフィット） --- */

.avg-index {
  font-family: "Meiryo", "Hiragino Kaku Gothic Pro", "MS PGothic", sans-serif;
}

.avg-index-header {
  background: #111;
  color: #fff;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
}

.avg-index-title {
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 0.03em;
}

.avg-index-en {
  font-size: 10px;
  opacity: 0.85;
}

.avg-index-body {
  background: #0066ff;
  color: #fff;
  padding: 8px;
}

.avg-index-row {
  display: grid;
  grid-template-columns: 52px 1fr;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.avg-index-row:last-child {
  margin-bottom: 0;
}

.avg-index-label {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.avg-index-label-ja {
  font-size: 12px;
  font-weight: bold;
}

.avg-index-label-en {
  font-size: 9px;
  opacity: 0.85;
}

.avg-index-row-current .avg-index-label-ja {
  font-size: 13px;
}

.avg-index-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: "Consolas", "Courier New", "Meiryo", monospace;
  font-weight: bold;
}

.avg-index-value-current {
  background: #fff;
  color: #0066ff;
  padding: 4px 6px;
  font-size: 15px;
  line-height: 1.25;
  border: 1px solid #003399;
}

.avg-index-value-change {
  padding: 3px 6px;
  font-size: 13px;
  border: 1px solid #333;
}

.avg-index-value-change.up {
  background: #e60012;
  color: #fff;
}

.avg-index-value-change.down {
  background: #00a060;
  color: #fff;
}

.avg-index-ohl {
  background: rgba(0, 40, 120, 0.35);
  border: 1px solid rgba(0, 30, 90, 0.45);
  padding: 6px 7px;
  margin-top: 2px;
}

.avg-index-ohl .avg-index-row {
  margin-bottom: 4px;
}

.avg-index-ohl .avg-index-label-ja {
  font-size: 11px;
}

.avg-index-value-ohl {
  font-size: 12px;
  color: #fff;
}

.panel-header {
  background: rgba(74, 128, 153, 0.88);
  color: #fff;
  padding: 3px 8px;
  font-weight: bold;
  font-size: 12px;
  border-bottom: 1px solid #333;
}

.panel-body {
  padding: 8px;
  min-height: 200px;
}

.panel-body-status {
  padding: 6px;
}

.placeholder-text {
  margin: 0;
  color: #666;
  text-align: center;
  padding: 40px 0;
}

/* --- 会社ヘッダー（擬人キャラ + 名前/Lv） --- */

.company-header {
  border: 1px solid #999;
  background: rgba(255, 255, 255, 0.72);
  padding: 6px;
  margin-bottom: 6px;
}

.company-chara-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.company-chara {
  flex-shrink: 0;
  width: 64px;
  height: 80px;
  border: 2px solid #4a6a88;
  background: rgba(232, 244, 250, 0.95);
  text-align: center;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 0 0 1px rgba(200, 170, 90, 0.45),
    0 1px 3px rgba(30, 50, 80, 0.18);
}

.company-chara-form {
  flex-shrink: 0;
  margin: 0;
}

.company-chara-editable {
  position: relative;
  display: block;
  cursor: pointer;
}

.company-chara-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2px 0;
  background: rgba(20, 40, 60, 0.72);
  color: #fff;
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.company-chara-editable:hover .company-chara-hint,
.company-chara-editable:focus-within .company-chara-hint {
  opacity: 1;
}

.company-chara-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.company-chara img {
  display: block;
  width: 64px;
  height: 80px;
  object-fit: cover;
  object-position: center top;
}

.company-chara-info {
  flex: 1;
  min-width: 0;
}

.company-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}

.company-name {
  font-weight: bold;
  font-size: 12px;
}

.company-security-code {
  font-size: 12px;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: #1a5a8a;
}

.company-level {
  font-size: 12px;
  font-weight: bold;
  color: #1a5a8a;
  border: 1px solid #2a6a9a;
  background: rgba(220, 238, 248, 0.9);
  padding: 0 5px;
  line-height: 1.4;
}

.company-grade {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 1px 8px 2px;
  border: 1px solid #c9a227;
  background: linear-gradient(180deg, rgba(255, 252, 240, 0.98), rgba(255, 244, 214, 0.95));
  line-height: 1.2;
}

.company-grade-label {
  font-size: 10px;
  font-weight: bold;
  color: #6a4a12;
  letter-spacing: 0.02em;
}

.company-grade-name {
  font-family:
    "Bickham Script Pro",
    "Bickham Script Pro Semibold",
    "Bickham Script",
    "Great Vibes",
    "Allura",
    cursive;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #8a6a1a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}

.company-grade-bronze .company-grade-name {
  color: #8a5a2b;
}

.company-grade-sapphire .company-grade-name {
  color: #1a4a8a;
}

.company-grade-platinum .company-grade-name {
  color: #5a6570;
}

.company-grade-gold {
  border-color: #c9a227;
  background: linear-gradient(180deg, #fff8e8, #f3e0a8);
}

.company-grade-gold .company-grade-name {
  color: #9a6f0a;
}

.company-grade-diamond {
  border-color: #8ab0d0;
  background: linear-gradient(180deg, #f7fbff, #e4eef8);
}

.company-grade-diamond .company-grade-name {
  color: #3a5a7a;
  text-shadow:
    0 0 8px rgba(180, 220, 255, 0.7),
    0 1px 0 rgba(255, 255, 255, 0.85);
}

.company-funds {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 3px;
}

.company-fund {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 3px 10px 4px;
  border: 1px solid #2a6a9a;
  background: rgba(232, 244, 250, 0.95);
  line-height: 1.2;
}

.company-fund-label {
  font-size: 10px;
  font-weight: bold;
  color: #1a4a6a;
  letter-spacing: 0.04em;
}

.company-fund-value {
  font-size: 16px;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
  color: #123;
}

.company-fund-cash.is-plus .company-fund-value {
  color: #1a6a2a;
}

.company-fund-lux {
  border-color: #8a5a12;
  background: rgba(255, 246, 230, 0.95);
}

.company-fund-lux .company-fund-label {
  color: #6a3a08;
}

.company-fund-lux .company-fund-value {
  color: #8a4a08;
}

.company-fund-treasury {
  border-color: #3a6a9a;
  background: rgba(236, 244, 255, 0.96);
  align-items: flex-start;
}

.company-fund-treasury .company-fund-label {
  color: #1a3a6a;
}

.company-fund-treasury.is-plus .company-fund-pnl {
  color: #1a6a2a;
  font-weight: bold;
}

.company-fund-treasury.is-loss .company-fund-pnl {
  color: #8a3030;
  font-weight: bold;
}

.company-fund-treasury.is-empty .company-fund-value {
  color: #888;
  font-size: 14px;
}

.company-fund-stack {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.15;
}

.company-fund-pnl {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.company-shop-link {
  margin: 4px 0 6px;
}

.shop-link-btn {
  display: inline-block;
  font-size: 11px;
  font-weight: bold;
  color: #fff;
  background: #6a3a9a;
  border: 1px solid #4a2a7a;
  padding: 2px 10px;
  text-decoration: none;
}

.shop-link-btn:hover {
  background: #5a2a8a;
}

.shop-body {
  padding: 8px;
}

.shop-lead {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: bold;
}

.shop-note {
  margin: 0 0 8px;
  font-size: 11px;
  color: #555;
  line-height: 1.5;
}

.shop-note-warn {
  color: #8a2f2f;
}

.shop-setup-hint {
  margin: 0 0 8px;
  font-size: 11px;
  color: #8a3030;
}

.shop-packs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.shop-pack {
  border: 1px solid #999;
  background: rgba(255, 255, 255, 0.75);
  padding: 8px;
}

.shop-pack-name {
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 2px;
}

.shop-pack-price {
  font-size: 14px;
  font-weight: bold;
  color: #1a5a8a;
  margin-bottom: 4px;
}

.shop-pack-detail {
  font-size: 10px;
  color: #555;
  margin-bottom: 6px;
  line-height: 1.4;
}

.shop-pack-form {
  margin: 0;
}

.shop-pack-btn {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  touch-action: manipulation;
  box-sizing: border-box;
}

.shop-pack-unavailable {
  margin: 4px 0 0;
  font-size: 10px;
  color: #888;
}

.shop-balance {
  margin: 0 0 8px;
  font-size: 12px;
}

.shop-session-id {
  margin: 0 0 8px;
  font-size: 10px;
  color: #888;
  word-break: break-all;
}

.shop-first-bonus {
  margin: 0 0 10px;
  padding: 6px 8px;
  border: 1px solid #2a6a9a;
  background: rgba(232, 244, 255, 0.95);
  color: #123a5a;
  font-size: 12px;
}

.shop-pack-recommended {
  border-color: #2a6a9a;
  box-shadow: inset 0 0 0 1px rgba(42, 106, 154, 0.25);
}

.shop-pack-badge {
  display: inline-block;
  margin: 0 0 4px;
  padding: 1px 6px;
  background: #2a6a9a;
  color: #fff;
  font-size: 10px;
  letter-spacing: 0.06em;
}

.lux-shortfall-cta {
  margin: 0 0 10px;
  padding: 8px;
  border: 1px solid #c09040;
  background: rgba(255, 248, 230, 0.95);
}

.lux-shortfall-copy {
  margin: 0 0 8px;
  font-size: 12px;
  color: #5a4010;
  line-height: 1.4;
}

.lux-shortfall-btn {
  display: inline-block;
  text-decoration: none;
}

.relief-exp-cta {
  margin: 6px 0 0;
  padding: 6px 8px;
  border: 1px solid #b05050;
  background: rgba(255, 236, 236, 0.95);
}

.relief-exp-cta-copy {
  margin: 0 0 6px;
  font-size: 11px;
  color: #6a2020;
}

.relief-exp-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.item-card-benefit {
  margin: 0 0 8px;
  font-size: 11px;
  line-height: 1.45;
  color: #345;
}

.ad-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  margin: 0 0 10px;
  border: 1px dashed #8aa0b4;
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(232, 240, 248, 0.95),
      rgba(232, 240, 248, 0.95) 8px,
      rgba(220, 230, 240, 0.95) 8px,
      rgba(220, 230, 240, 0.95) 16px
    );
  color: #5a7088;
  text-align: center;
}

.ad-slot-label {
  font-size: 13px;
  letter-spacing: 0.12em;
}

.ad-slot-offer {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 10px;
  border-style: solid;
  border-color: #2a6a9a;
  background: linear-gradient(180deg, rgba(232, 244, 255, 0.98), rgba(220, 234, 248, 0.95));
  color: #123a5a;
  text-align: left;
}

.ad-slot-offer-kicker {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #2a6a9a;
}

.ad-slot-offer-title {
  font-size: 15px;
  font-weight: bold;
}

.ad-slot-offer-price {
  font-size: 18px;
  font-weight: bold;
}

.ad-slot-offer-copy {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
}

.ad-slot-offer-form {
  margin: 4px 0 0;
}

.ad-slot-offer-form .menu-btn {
  width: 100%;
  box-sizing: border-box;
}

.ad-panel-guide {
  margin-top: 8px;
}

.ad-slot-banner {
  min-height: 90px;
  width: 100%;
  box-sizing: border-box;
}

.home-ad-row {
  margin: 0 0 10px;
}

.ranking-ad-wrap {
  margin: 12px 0;
}

.company-funds-debt {
  font-size: 11px;
  color: #6a3a08;
  margin-bottom: 3px;
}

.company-chara-name {
  font-size: 11px;
  color: #333;
  margin-bottom: 2px;
}

.company-power {
  font-size: 11px;
  font-weight: bold;
  background: #555;
  color: #fff;
  padding: 1px 6px;
  margin-bottom: 2px;
  display: inline-block;
}

.company-exp {
  font-size: 10px;
  color: #444;
  margin-bottom: 3px;
}

.company-actions {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
  padding: 3px 8px;
  border: 1px solid #1a4a6a;
  background: #1a5a8a;
  color: #fff;
  font-weight: bold;
  line-height: 1.3;
}

.company-actions-label {
  font-size: 11px;
  letter-spacing: 0.04em;
}

.company-actions-value {
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.company-actions-max {
  font-size: 12px;
  opacity: 0.9;
  font-variant-numeric: tabular-nums;
}

.company-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #333;
}

.badge {
  display: inline-block;
  padding: 0 5px;
  border: 1px solid #333;
  font-size: 10px;
  line-height: 1.5;
}

.badge-listed {
  background: #2a6a9a;
  color: #fff;
  border-color: #1a4a6a;
}

.badge-unlisted {
  background: #eee;
  color: #666;
  border-color: #999;
}

/* --- ステータス表 --- */

.stat-section {
  margin-bottom: 6px;
}

.stat-section-title {
  background: rgba(90, 158, 196, 0.88);
  color: #fff;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: bold;
  border: 1px solid #333;
  border-bottom: none;
}

.chart-avg-split {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 6px 0;
  margin-top: 8px;
}

.chart-avg-cell {
  display: table-cell;
  width: 50%;
  vertical-align: top;
}

.chart-avg-split .stock-chart-panel {
  margin-top: 0;
}

.chart-avg-split .avg-index {
  height: 100%;
}

.market-tabs {
  margin-top: 0;
}

.market-tab-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 4px;
  border-top: 2px solid #2a6a9a;
  margin-bottom: 6px;
}

.market-tab {
  font-family: inherit;
  font-size: 11px;
  padding: 4px 10px;
  border: 1px solid #2a6a9a;
  border-top: none;
  background: #fff;
  color: #2a6a9a;
  cursor: pointer;
  border-radius: 0 0 4px 4px;
}

.market-tab.is-active {
  background: #1a5a8a;
  color: #fff;
  border-color: #14486e;
  font-weight: bold;
}

.market-tab-pane .stock-chart-panel,
.market-tab-pane .avg-index {
  margin-top: 0;
}

.stock-chart-panel {
  margin-top: 8px;
  border: 2px solid #1a1a1a;
  background: #fff;
}

.stock-chart-header {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 6px 8px;
  border-bottom: 1px solid #cbd5e1;
  font-size: 11px;
  font-weight: 700;
  color: #1a2a3a;
}

.stock-chart-header-period {
  font-weight: 800;
  margin-right: 4px;
}

.stock-chart-high {
  color: #c03030;
}

.stock-chart-low {
  color: #1a8a3a;
}

.stock-chart-ma-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 4px 8px;
  border-bottom: 1px solid #e2e8f0;
  font-size: 10px;
  font-weight: 700;
}

.stock-chart-ma--5 {
  color: #1a8a3a;
}

.stock-chart-ma--25 {
  color: #c03030;
}

.stock-chart-ma--75 {
  color: #3050a8;
}

.stock-chart-canvas {
  width: 100%;
  height: 220px;
}

.settle-form {
  margin: 8px 0 4px;
}

.settle-btn {
  width: 100%;
  border: 1px solid #2a6a9a;
  background: #1a5a8a;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 10px;
  cursor: pointer;
}

.settle-btn:hover {
  background: #14486e;
}

.settle-hint {
  margin: 0 0 4px;
  font-size: 11px;
  color: #666;
  line-height: 1.4;
}

.hint-fold {
  margin: 0 0 4px;
}

.hint-fold summary {
  font-size: 11px;
  color: #4a6a80;
  cursor: pointer;
  user-select: none;
}

.hint-fold .settle-hint,
.hint-fold .deck-hint {
  margin-top: 4px;
}

.market-phase-banner {
  margin-top: 6px;
  padding: 6px 8px;
  border: 1px solid #333;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  line-height: 1.35;
}

.market-phase-tag {
  font-size: 10px;
  font-weight: 700;
  opacity: 0.85;
}

.market-phase-name {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.market-phase-blurb {
  flex: 1 1 100%;
  font-size: 11px;
}

.market-phase-boom {
  background: #fff4d6;
  border-color: #c48a1a;
  color: #7a4e00;
}

.market-phase-normal {
  background: #eef3f7;
  border-color: #5a7a94;
  color: #2f4a5e;
}

.market-phase-bust {
  background: #ede4f2;
  border-color: #6b3d7a;
  color: #4a2560;
}

.market-phase-inline {
  display: inline-block;
  font-weight: 800;
  padding: 1px 6px;
  border: 1px solid currentColor;
  margin-right: 4px;
}

.market-phase-inline.market-phase-boom {
  background: #fff4d6;
  color: #7a4e00;
}

.market-phase-inline.market-phase-normal {
  background: #eef3f7;
  color: #2f4a5e;
}

.market-phase-inline.market-phase-bust {
  background: #ede4f2;
  color: #4a2560;
}

.market-phase-inline-blurb {
  font-size: 11px;
  color: #555;
}

.company-ability-line {
  font-size: 11px;
  color: #333;
  margin-bottom: 2px;
  font-variant-numeric: tabular-nums;
}

.stat-table {
  width: 100%;
  border-collapse: collapse;
}

.stat-table.stat-table-split {
  table-layout: fixed;
}

.stat-table.stat-table-split th {
  width: 18%;
}

.stat-table.stat-table-split td {
  width: 32%;
}

.stat-table.stat-table-split th,
.stat-table.stat-table-split td {
  padding: 6px 8px;
  vertical-align: middle;
}

.stat-table th,
.stat-table td {
  border: 1px solid #ccc;
  padding: 2px 6px;
  font-size: 11px;
}

.stat-table th {
  background: rgba(238, 238, 238, 0.75);
  text-align: left;
  font-weight: normal;
}

.stat-table:not(.stat-table-split) th {
  width: 42%;
}

.stat-table td {
  text-align: right;
  background: rgba(255, 255, 255, 0.7);
}

.stat-table tr:nth-child(even) td {
  background: rgba(245, 245, 245, 0.7);
}

.stat-table tr:nth-child(even) th {
  background: rgba(232, 232, 232, 0.75);
}

.listing-provisional {
  margin: 4px 0;
  font-size: 11px;
  color: #333;
}

.listing-apply-form {
  margin: 4px 0;
}

.listing-apply-btn:disabled {
  background: #bbb;
  border-color: #999;
  color: #eee;
  cursor: not-allowed;
}

.listing-apply-btn:disabled:hover {
  background: #bbb;
}

.listing-panel {
  border: 1px solid #ccc;
  background: rgba(255, 255, 255, 0.7);
}

.listing-summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 6px;
  font-size: 11px;
  background: rgba(238, 238, 238, 0.75);
}

.listing-summary::-webkit-details-marker {
  display: none;
}

.listing-summary-label::before {
  content: "▶";
  font-size: 10px;
  color: #888;
  margin-right: 4px;
}

.listing-panel[open] .listing-summary-label::before {
  content: "▼";
}

.listing-summary-hint {
  margin-left: 4px;
  font-weight: normal;
  color: #777;
}

.listing-panel[open] .listing-summary-hint {
  display: none;
}

.listing-summary-status {
  text-align: right;
}

.listing-criteria-table {
  border-top: none;
}

.num-plus {
  color: #1a5a8a;
  font-weight: bold;
}

.num-muted {
  color: #999;
}

/* --- 行動メニュー grid（Step 4 以降で使用） --- */

.menu-grid {
  width: 100%;
  border-collapse: collapse;
}

.menu-grid td {
  border: 1px solid #999;
  padding: 0;
  vertical-align: middle;
}

.menu-label {
  background: rgba(90, 158, 196, 0.85);
  color: #fff;
  padding: 4px 8px;
  width: 72px;
  white-space: nowrap;
  font-weight: bold;
}

.menu-row-train .menu-label {
  background: rgba(42, 125, 79, 0.92);
}

.menu-row-train .menu-btn-cell {
  background: rgba(232, 246, 236, 0.88);
}

.menu-row-train a.menu-btn {
  background: rgba(255, 255, 255, 0.95);
  border-color: #2a7d4f;
  color: #1a4a32;
  font-weight: bold;
}

.menu-row-train a.menu-btn:hover {
  background: rgba(210, 240, 218, 0.98);
}

.menu-row-train .skip-period-form .menu-btn {
  background: rgba(255, 255, 255, 0.8);
  border-color: #888;
  color: #555;
  font-weight: normal;
}

.menu-row-train .skip-period-form .menu-btn:hover:not(:disabled) {
  background: rgba(255, 255, 220, 0.9);
}

.menu-row-shop .menu-btn-cell .menu-btn {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  touch-action: manipulation;
  box-sizing: border-box;
}

.menu-row-trading .menu-btn-cell .menu-btn {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  touch-action: manipulation;
  box-sizing: border-box;
}

.menu-btn-cell {
  background: rgba(255, 255, 255, 0.65);
  padding: 2px 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: stretch;
}

.menu-btn-cell .skip-period-form,
.menu-btn-cell .item-form {
  margin: 0;
  flex: 1 1 auto;
  width: auto;
}

.menu-btn {
  display: block;
  width: 100%;
  padding: 3px 8px;
  font-family: inherit;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #333;
  color: #000;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
}

a.menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
}

.menu-btn-cell > .menu-btn {
  flex: 1 1 auto;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.panel-body-action-menu {
  padding: 6px;
}

.action-menu-meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: bold;
  color: #1a4a6a;
}

.action-menu-meta strong {
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  color: #0d3a5a;
  line-height: 1;
}

.train-cooldown-inline {
  margin: 0;
  padding: 2px 6px;
  font-weight: normal;
}

.panel-body-deck .deck-block {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.menu-btn:hover {
  background: rgba(255, 255, 204, 0.9);
}

.menu-btn.disabled,
.menu-btn:disabled {
  background: rgba(238, 238, 238, 0.75);
  color: #999;
  border-color: #ccc;
  cursor: default;
}

.menu-btn.disabled:hover,
.menu-btn:disabled:hover {
  background: rgba(238, 238, 238, 0.75);
}

/* --- 育成 / ガチャ --- */

.panel-body-train {
  padding: 10px;
}

.action-top-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: start;
}

.action-col {
  min-width: 0;
  border: 1px solid #ccc;
  background: rgba(255, 255, 255, 0.55);
  padding: 8px;
}

.action-col-title {
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 6px;
  background: rgba(90, 158, 196, 0.85);
  padding: 2px 6px;
}

.actions-remaining-banner {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 8px;
  padding: 6px 8px;
  border: 1px solid #1a4a6a;
  background: #eef6fb;
  color: #1a4a6a;
  font-size: 12px;
  font-weight: bold;
}

.actions-remaining-banner strong {
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  color: #0d3a5a;
  line-height: 1;
}

.train-cards,
.gacha-cards,
.trading-cards {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gacha-form {
  margin: 0;
  width: 100%;
}

.gacha-messages {
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
}

.gacha-message {
  margin: 0 0 4px;
  padding: 4px 6px;
  border: 1px solid #bbb;
  background: rgba(255, 255, 255, 0.85);
  font-size: 11px;
  color: #555;
}

.gacha-message-error {
  border-color: #c88;
  color: #a33;
}

.gacha-message-success {
  border-color: #8a8;
  color: #363;
}

.gacha-result {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 6px;
}

.gacha-result-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border: 1px solid #999;
  background: rgba(255, 255, 255, 0.9);
  font-size: 11px;
}

.gacha-result-rarity {
  font-weight: bold;
  color: #2a6a9a;
}

.gacha-result-name {
  color: #444;
}

.train-form {
  margin: 0;
  width: 100%;
}

.train-cooldown {
  margin: 0 0 6px;
  padding: 4px 6px;
  border: 1px solid #bbb;
  background: rgba(255, 255, 255, 0.8);
  color: #666;
  font-size: 11px;
  text-align: center;
}

.panel-body-train-action {
  position: relative;
}

.panel-body-train-action > .train-cooldown:not([hidden]) {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 8px;
  z-index: 4;
  margin: 0;
}

.train-card,
.gacha-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #999;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.85);
  color: #555;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.train-card:hover:not(:disabled) {
  background: rgba(255, 255, 220, 0.95);
}

.gacha-card:hover:not(:disabled) {
  background: rgba(255, 255, 220, 0.95);
}

.skip-period-form {
  margin: 0;
  width: 100%;
}

.skip-period-btn {
  width: 100%;
}

.train-card-title,
.gacha-card-title {
  font-size: 13px;
  font-weight: normal;
  color: #555;
}

.train-card-go,
.gacha-card-go {
  padding: 3px 7px;
  border: 1px solid #bbb;
  background: rgba(238, 238, 238, 0.9);
  color: #888;
  font-size: 10px;
  font-weight: normal;
  white-space: nowrap;
}

.train-card:disabled,
.gacha-card:disabled {
  opacity: 1;
  color: #555;
  cursor: default;
}

.gacha-balance {
  margin: 0 0 6px;
  font-size: 11px;
  color: #666;
}

.gacha-balance-value {
  font-weight: bold;
  color: #444;
  margin-left: 4px;
}

.gacha-setup-hint {
  margin: 0 0 6px;
  font-size: 11px;
  color: #a33;
}

.gacha-page-result {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin: 0 0 10px;
}

.gacha-page-result-pending {
  opacity: 0;
  pointer-events: none;
}

.gacha-page-result-shown {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.25s ease;
}

.gacha-result-item-rare {
  position: relative;
  overflow: hidden;
  border-width: 2px;
}

.gacha-result-item[data-rarity="S+"] {
  border: 2px solid transparent;
  background:
    linear-gradient(#fff4d4, #ffe9a8) padding-box,
    linear-gradient(160deg, #6b5208, #f5d76e, #fff8d0, #d4af37, #6b5208) border-box;
  box-shadow:
    0 0 0 1px rgba(255, 230, 140, 0.85),
    0 2px 8px rgba(160, 120, 20, 0.4);
}

.gacha-result-item[data-rarity="S+"]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 40%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 60%
  );
  background-size: 200% 100%;
  animation: rarity-sheen 2.4s ease-in-out infinite;
  z-index: 1;
}

.gacha-result-item[data-rarity="S++"] {
  border: 2px solid transparent;
  background:
    linear-gradient(#1f1808, #1f1808) padding-box,
    linear-gradient(120deg, #5a4200, #ffe9a0, #fffbe8, #c9a227, #5a4200) border-box;
  background-size: auto, 250% 250%;
  animation: rarity-shine-shift 3.5s ease-in-out infinite;
  box-shadow:
    0 0 0 1px #ffe9a0,
    0 0 10px rgba(255, 200, 60, 0.55);
  color: #fff8e0;
}

.gacha-result-item[data-rarity="S++"] .gacha-result-name,
.gacha-result-item[data-rarity="S++"] .gacha-result-rarity {
  color: #ffe9a0;
  position: relative;
  z-index: 2;
}

.gacha-result-item[data-rarity="S++"]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.65) 48%,
    transparent 65%
  );
  background-size: 220% 100%;
  animation: rarity-sheen 2s ease-in-out infinite;
}

.gacha-result-item[data-rarity="S+++"] {
  border: 2px solid transparent;
  background:
    linear-gradient(#120f1a, #120f1a) padding-box,
    conic-gradient(
      from var(--holo-angle, 0deg),
      #ff5e9a,
      #ffd24d,
      #5ad1ff,
      #8d6bff,
      #7dffb3,
      #ff5e9a
    ) border-box;
  animation: rarity-holo-angle 2.8s linear infinite;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.5),
    0 0 12px rgba(120, 200, 255, 0.5);
  color: #f5f0ff;
}

.gacha-result-item[data-rarity="S+++"] .gacha-result-name,
.gacha-result-item[data-rarity="S+++"] .gacha-result-rarity {
  color: #fff;
  position: relative;
  z-index: 2;
  text-shadow: 0 0 4px rgba(120, 200, 255, 0.8);
}

.gacha-result-item[data-rarity="S+++"]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    90deg,
    transparent 20%,
    rgba(255, 255, 255, 0.45) 50%,
    transparent 80%
  );
  background-size: 200% 100%;
  animation: rarity-sheen 1.8s ease-in-out infinite;
}

.gacha-result-rarity[data-rarity="S+"] {
  color: #a07810;
  text-shadow: 0 0 4px rgba(255, 220, 100, 0.75);
  position: relative;
  z-index: 2;
}

.gacha-result-rarity[data-rarity="S++"] {
  color: #ffe9a0;
  position: relative;
  z-index: 2;
}

.gacha-result-rarity[data-rarity="S+++"] {
  color: #fff;
  position: relative;
  z-index: 2;
}

.gacha-result-item-rare .gacha-result-name {
  position: relative;
  z-index: 2;
}

.gacha-result-item-pop {
  animation: gacha-result-pop 0.45s ease-out both;
}

@keyframes gacha-result-pop {
  0% {
    opacity: 0;
    transform: scale(0.92) translateY(4px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.gacha-reveal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 10, 18, 0.72);
  pointer-events: none;
}

.gacha-reveal[hidden] {
  display: none;
}

.gacha-reveal-flash {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.gacha-reveal.is-active .gacha-reveal-flash {
  animation: gacha-reveal-flash 1.1s ease-out both;
}

.gacha-reveal[data-rarity="S+"] .gacha-reveal-flash {
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 230, 140, 0.85) 0%, transparent 55%),
    linear-gradient(180deg, rgba(255, 220, 100, 0.35), transparent 70%);
}

.gacha-reveal[data-rarity="S++"] .gacha-reveal-flash {
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 248, 210, 0.95) 0%, transparent 50%),
    linear-gradient(160deg, rgba(255, 200, 60, 0.5), rgba(80, 50, 0, 0.2) 70%);
}

.gacha-reveal[data-rarity="S+++"] .gacha-reveal-flash {
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.9) 0%, transparent 45%),
    conic-gradient(
      from 0deg,
      rgba(255, 94, 154, 0.55),
      rgba(255, 210, 77, 0.55),
      rgba(90, 209, 255, 0.55),
      rgba(141, 107, 255, 0.55),
      rgba(125, 255, 179, 0.55),
      rgba(255, 94, 154, 0.55)
    );
}

.gacha-reveal-label {
  position: relative;
  z-index: 1;
  font-size: clamp(48px, 12vw, 96px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  opacity: 0;
  transform: scale(0.7);
}

.gacha-reveal.is-active .gacha-reveal-label {
  animation: gacha-reveal-label 1.1s ease-out both;
}

.gacha-reveal[data-rarity="S+"] .gacha-reveal-label {
  color: #ffe08a;
  text-shadow:
    0 0 12px rgba(255, 220, 100, 0.95),
    0 0 36px rgba(200, 150, 20, 0.7);
}

.gacha-reveal[data-rarity="S++"] .gacha-reveal-label {
  color: #fff8d0;
  text-shadow:
    0 0 14px rgba(255, 230, 140, 1),
    0 0 40px rgba(255, 180, 40, 0.85);
}

.gacha-reveal[data-rarity="S+++"] .gacha-reveal-label {
  color: #fff;
  background: linear-gradient(
    110deg,
    #ff8ec8,
    #ffe28a,
    #7ad7ff,
    #b59bff,
    #ff8ec8
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation:
    gacha-reveal-label 1.1s ease-out both,
    rarity-holo-text 1.1s linear both;
  text-shadow: none;
  filter: drop-shadow(0 0 18px rgba(160, 140, 255, 0.9));
}

@keyframes gacha-reveal-flash {
  0% {
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes gacha-reveal-label {
  0% {
    opacity: 0;
    transform: scale(0.55);
  }
  22% {
    opacity: 1;
    transform: scale(1.08);
  }
  55% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.15);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gacha-page-result-pending {
    opacity: 1;
    pointer-events: auto;
  }

  .gacha-result-item[data-rarity="S+"]::after,
  .gacha-result-item[data-rarity="S++"],
  .gacha-result-item[data-rarity="S++"]::after,
  .gacha-result-item[data-rarity="S+++"],
  .gacha-result-item[data-rarity="S+++"]::after,
  .gacha-result-item-pop,
  .gacha-reveal.is-active .gacha-reveal-flash,
  .gacha-reveal.is-active .gacha-reveal-label {
    animation: none;
  }

  .gacha-reveal {
    display: none !important;
  }
}

.gacha-confirm {
  border: 1px solid #1a4a6a;
  background: #eef6fb;
  padding: 16px 14px;
}

.gacha-confirm-q {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: bold;
  color: #0d3a5a;
}

.gacha-confirm-offer {
  margin: 0 0 12px;
  font-size: 13px;
  color: #444;
}

.gacha-confirm-meta {
  margin: 0 0 12px;
  display: grid;
  gap: 6px;
}

.gacha-confirm-meta div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  border-bottom: 1px dashed #c5d6e4;
  font-size: 13px;
}

.gacha-confirm-meta dt {
  color: #666;
}

.gacha-confirm-meta dd {
  margin: 0;
  font-weight: bold;
  color: #222;
}

.gacha-confirm-actions {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.gacha-confirm-form {
  margin: 0;
  flex: 1;
}

.gacha-confirm-go,
.gacha-confirm-cancel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  border-radius: 2px;
  box-sizing: border-box;
}

.gacha-confirm-go {
  width: 100%;
  border: 1px solid #1a4a6a;
  background: #2a6a9a;
  color: #fff;
  cursor: pointer;
}

.gacha-confirm-go:hover:not(:disabled) {
  background: #1a5a8a;
}

.gacha-confirm-go:disabled {
  background: #9bb;
  border-color: #8aa;
  cursor: default;
}

.gacha-confirm-cancel {
  flex: 1;
  border: 1px solid #999;
  background: rgba(255, 255, 255, 0.9);
  color: #555;
}

.gacha-confirm-cancel:hover {
  background: #fff;
}

.gacha-confirm-overflow {
  margin: 0 0 12px;
  padding: 8px 8px;
  border: 1px solid #c88;
  background: #fff6f6;
  color: #a33;
  font-size: 12px;
  line-height: 1.5;
}

.gacha-overflow-hint {
  margin: 0 0 10px;
  font-size: 12px;
  color: #555;
}

.gacha-overflow-form {
  margin: 0;
}

.gacha-overflow-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 10px;
}

.gacha-overflow-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid #999;
  background: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  font-size: 13px;
}

.gacha-overflow-card.is-new {
  border-color: #2a6a9a;
  background: #eef6fb;
}

.gacha-overflow-rarity {
  font-weight: bold;
  color: #2a6a9a;
}

.gacha-overflow-name {
  flex: 1;
  color: #333;
}

.gacha-overflow-new {
  font-size: 10px;
  padding: 2px 6px;
  border: 1px solid #2a6a9a;
  color: #1a5a8a;
  background: #fff;
}

.gacha-overflow-count {
  margin: 0 0 10px;
  font-size: 13px;
  color: #444;
}

.item-block {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed #ccc;
}

.item-block-title {
  font-size: 11px;
  font-weight: bold;
  color: #555;
  margin-bottom: 6px;
}

.item-card {
  border: 1px solid #999;
  background: rgba(255, 255, 255, 0.85);
  padding: 8px;
}

.item-card-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}

.item-card-name {
  font-size: 13px;
  font-weight: bold;
  color: #333;
}

.item-card-stock {
  margin-left: auto;
  font-size: 11px;
  color: #666;
}

.item-card-desc {
  margin: 0 0 6px;
  font-size: 11px;
  color: #666;
  line-height: 1.4;
}

.item-card-active {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: bold;
  color: #1a5a8a;
}

.item-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.item-form {
  margin: 0;
}

.item-btn {
  font-family: inherit;
  font-size: 11px;
  padding: 4px 8px;
  border: 1px solid #888;
  background: rgba(232, 244, 250, 0.95);
  color: #333;
  cursor: pointer;
}

.item-btn:hover:not(:disabled) {
  border-color: #2a6a9a;
  background: rgba(210, 232, 245, 0.95);
}

.item-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.item-card-train {
  margin: 0 0 10px;
}

.item-btn-use {
  font-weight: bold;
}

.item-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

.item-modal[hidden] {
  display: none;
}

.item-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 24, 28, 0.55);
}

.item-modal-panel {
  position: relative;
  z-index: 1;
  width: min(320px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: #f7f4ef;
  border: 1px solid #333;
  padding: 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

.item-modal-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 28px;
  height: 28px;
  border: 1px solid #666;
  background: rgba(255, 255, 255, 0.9);
  font-family: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: #333;
}

.item-modal-close:hover {
  background: #fff;
}

.item-modal-panel .item-card {
  margin: 0;
  border: none;
  background: transparent;
  padding: 0 24px 0 0;
}

.item-modal-lux {
  margin: 0 0 6px;
  font-size: 11px;
  color: #444;
}

.item-modal-panel-skin {
  max-width: 440px;
}

.item-skin-shop .item-card-head {
  align-items: center;
  gap: 8px;
}

.item-skin-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 2px;
  color: #1a1020;
  background: linear-gradient(120deg, #ffd24d, #ff9ad4, #7dffb3, #5ad1ff, #ffd24d);
  background-size: 220% 100%;
  animation: rarity-sheen 2s ease-in-out infinite;
}

.item-skin-diamond-note {
  margin: 0 0 10px;
  font-size: 11px;
  color: #6a4a10;
  font-weight: 700;
}

.item-skin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}

.item-skin-card {
  position: relative;
  isolation: isolate;
  padding: 10px 8px 8px;
  border: 2px solid transparent;
  background:
    linear-gradient(#120f1a, #1a1424) padding-box,
    conic-gradient(
      from var(--holo-angle, 0deg),
      #ff5e9a,
      #ffd24d,
      #5ad1ff,
      #8d6bff,
      #7dffb3,
      #ff5e9a
    ) border-box;
  animation: rarity-holo-angle 2.8s linear infinite;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.45),
    0 0 14px rgba(120, 200, 255, 0.4),
    0 0 18px rgba(255, 180, 80, 0.35);
  color: #f5f0ff;
}

.item-skin-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(255, 255, 255, 0.45) 50%,
    transparent 65%
  );
  background-size: 220% 100%;
  animation: rarity-sheen 1.8s ease-in-out infinite;
}

.item-skin-art {
  position: relative;
  z-index: 1;
  width: 120px;
  height: 150px;
  margin: 0 auto 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 220, 140, 0.7);
  background: #0c0a12;
}

.item-skin-art img {
  display: block;
  width: 120px;
  height: 150px;
  object-fit: cover;
  object-position: center top;
}

.item-skin-card[data-owned="0"] .item-skin-art img {
  filter: brightness(0.45) saturate(0.7);
}

.item-skin-lock {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #ffe7a0;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
  background: rgba(10, 8, 16, 0.25);
}

.item-skin-meta {
  position: relative;
  z-index: 3;
  text-align: center;
  margin-bottom: 8px;
}

.item-skin-rarity {
  display: block;
  font-size: 10px;
  font-weight: 800;
  background: linear-gradient(90deg, #ff9ad4, #ffd24d, #7dffb3, #5ad1ff, #ff9ad4);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rarity-sheen 2s linear infinite;
}

.item-skin-name {
  margin: 2px 0 0;
  font-size: 12px;
  font-weight: 700;
  color: #fff6d8;
}

.item-skin-actions {
  position: relative;
  z-index: 3;
}

.item-skin-actions .item-form,
.item-skin-actions .item-btn {
  width: 100%;
}

.item-btn-equipped {
  display: block;
  text-align: center;
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #1a1020;
  background: linear-gradient(180deg, #ffe08a, #d4af37);
  border: 1px solid #8a6a10;
}

.item-btn-skin-buy,
.item-btn-skin-free {
  font-weight: 700;
}

.item-skin-basic {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 220, 150, 0.25);
}

.item-skin-basic-label {
  margin: 0 0 8px;
  font-size: 11px;
  color: #ccc;
}

.item-skin-basic-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.item-btn-preset {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 8px 7px;
  font-size: 11px;
  border: 2px solid #4a6a88;
  background: linear-gradient(180deg, #f4f8fc 0%, #e6eef6 100%);
  color: #1a3a54;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 0 0 1px rgba(200, 170, 90, 0.4);
}

.item-btn-preset:hover {
  border-color: #1e5a8a;
  background: linear-gradient(180deg, #eef5fb 0%, #d8e8f4 100%);
}

.item-preset-thumb {
  display: block;
  width: 56px;
  height: 70px;
  object-fit: cover;
  object-position: center top;
  border: 1px solid #8aa0b4;
  background: #dce8f2;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.item-preset-label {
  font-weight: bold;
  line-height: 1.2;
}

.company-chara[data-skin="premium"],
.rank-chara[data-skin="premium"] {
  border: 2px solid transparent;
  background:
    linear-gradient(#e8f4fa, #e8f4fa) padding-box,
    conic-gradient(
      from var(--holo-angle, 0deg),
      #ff5e9a,
      #ffd24d,
      #5ad1ff,
      #8d6bff,
      #7dffb3,
      #ff5e9a
    ) border-box;
  animation: rarity-holo-angle 2.8s linear infinite;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.5),
    0 0 10px rgba(255, 180, 80, 0.45);
}

.company-chara[data-skin="premium"]::after,
.rank-chara[data-skin="premium"]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 65%
  );
  background-size: 220% 100%;
  animation: rarity-sheen 2s ease-in-out infinite;
}

.company-chara[data-skin="premium"] {
  position: relative;
}

.rank-chara[data-skin="premium"] {
  position: relative;
}

@media (prefers-reduced-motion: reduce) {
  .item-skin-badge,
  .item-skin-card,
  .item-skin-card::after,
  .item-skin-rarity,
  .company-chara[data-skin="premium"],
  .company-chara[data-skin="premium"]::after,
  .rank-chara[data-skin="premium"],
  .rank-chara[data-skin="premium"]::after {
    animation: none;
  }
}

body.item-modal-open {
  overflow: hidden;
}

/* --- デッキ枠 --- */

.deck-block {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #ccc;
}

.deck-block-title {
  font-size: 13px;
  font-weight: bold;
  color: #333;
  margin-bottom: 4px;
}

.deck-hint {
  margin: 0 0 10px;
  font-size: 11px;
  color: #777;
}

.deck-with-roster {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: flex-start;
  margin-bottom: 6px;
}

.deck-with-roster > .deck-row-executive,
.deck-with-roster > .deck-row-business {
  flex: 1 1 0;
  min-width: 0;
}

.deck-with-roster > .roster-panel {
  flex: 0 0 auto;
  min-width: 0;
  max-width: 200px;
}

.deck-row-executive {
  margin-bottom: 0;
}

.deck-row-business {
  margin-bottom: 0;
}

.business-open {
  cursor: pointer;
}

.business-open:focus-visible {
  outline: 2px solid #2a6a9a;
  outline-offset: 2px;
}

.roster-panel {
  border: 1px solid #ccc;
  background: rgba(255, 255, 255, 0.7);
  padding: 2px 6px;
}

.roster-summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: bold;
  color: #444;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

.roster-summary::-webkit-details-marker {
  display: none;
}

.roster-summary::before {
  content: "▶";
  font-size: 10px;
  color: #888;
  margin-right: 4px;
}

.roster-panel[open] .roster-summary::before {
  content: "▼";
}

.roster-count {
  margin-left: auto;
  font-weight: normal;
  color: #777;
  font-size: 11px;
}

.roster-hint {
  margin: 2px 0 4px;
  font-size: 11px;
  color: #777;
}

.roster-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-height: 280px;
  overflow-y: auto;
}

.roster-card {
  width: 64px;
  height: 80px;
  border: 1px solid #999;
  background: rgba(232, 244, 250, 0.95);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  padding: 4px;
  text-align: center;
  box-sizing: border-box;
}

.roster-card-art {
  position: relative;
  width: 100%;
  height: 36px;
  border: 1px solid #ddd;
  background-color: #f5f2ec;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: contain;
  flex-shrink: 0;
  overflow: hidden;
}

.roster-card-art-filled {
  border-color: #ccc;
}

.roster-card-art-char {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: contain;
}

.roster-rarity {
  font-size: 10px;
  font-weight: bold;
  color: #1a5a8a;
  line-height: 1.1;
}

.roster-name {
  font-size: 10px;
  color: #444;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.1;
}

.roster-assign-label {
  display: block;
  font-size: 9px;
  color: #1a5a3a;
  line-height: 1.2;
}

.roster-card-static {
  cursor: default;
}

.roster-form {
  margin: auto 0 0;
}

.roster-btn {
  font-family: inherit;
  font-size: 10px;
  padding: 1px 4px;
  border: 1px solid #666;
  background: rgba(255, 255, 255, 0.9);
  color: #333;
  cursor: pointer;
}

.roster-btn:hover {
  background: rgba(255, 255, 220, 0.95);
}

.roster-empty {
  margin: 0;
  font-size: 11px;
  color: #888;
}

.deck-row {
  margin-bottom: 12px;
}

.deck-row:last-child {
  margin-bottom: 0;
}

.deck-row-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
}

.deck-row-name {
  font-size: 12px;
  font-weight: bold;
  color: #444;
}

.deck-row-count {
  font-size: 11px;
  color: #777;
}

.deck-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.deck-slot {
  width: 64px;
  height: 80px;
  border: 1px solid #999;
  background: rgba(255, 255, 255, 0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
}

.deck-slot-empty {
  border-style: dashed;
  color: #888;
}

.deck-slot-filled {
  border-style: solid;
  background: rgba(232, 244, 250, 0.95);
  color: #333;
  padding: 4px;
  gap: 2px;
  justify-content: flex-start;
}

.deck-slot-art {
  position: relative;
  width: 100%;
  height: 36px;
  border: 1px solid #ddd;
  background-color: #f5f2ec;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: contain;
  flex-shrink: 0;
  overflow: hidden;
}

.deck-slot-art-filled {
  border-color: #ccc;
}

.deck-slot-art-char {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: contain;
}

.deck-slot-form {
  margin: 2px 0 0;
}

.deck-slot-remove {
  font-family: inherit;
  font-size: 10px;
  padding: 1px 4px;
  border: 1px solid #999;
  background: rgba(255, 255, 255, 0.9);
  color: #666;
  cursor: pointer;
}

.deck-slot-rarity {
  font-size: 10px;
  font-weight: bold;
  color: #1a5a8a;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.15;
  box-sizing: border-box;
}

.deck-slot-name {
  font-size: 10px;
  color: #444;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deck-slot-label {
  font-size: 11px;
  color: #777;
}

.deck-slot-state {
  font-size: 10px;
  color: #999;
}

.deck-slot-locked {
  border-color: #bbb;
  background: rgba(230, 230, 230, 0.85);
  color: #888;
}

.deck-slot-lock {
  font-size: 10px;
  letter-spacing: 0.04em;
  color: #999;
}

.deck-slot-unlock {
  font-size: 10px;
  color: #777;
}

.deck-slot-unlock-form {
  margin: 0;
  padding: 0;
}

.deck-slot-buy {
  font-family: inherit;
  cursor: pointer;
  border-color: #8aa7c0;
  background: rgba(232, 244, 250, 0.95);
  color: #2a5a7a;
}

.deck-slot-buy:hover {
  border-color: #2a6a9a;
  background: rgba(210, 232, 245, 0.95);
}

.deck-slot-buy .deck-slot-lock {
  color: #2a6a9a;
}

.deck-slot-buy .deck-slot-unlock {
  color: #1a5a8a;
  font-weight: bold;
}

.person-open {
  cursor: pointer;
}

.person-open:focus-visible {
  outline: 2px solid #2a6a9a;
  outline-offset: 2px;
}

.person-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

.person-modal[hidden] {
  display: none;
}

.person-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 24, 28, 0.55);
}

.person-modal-panel {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: #f7f4ef;
  border: 1px solid #333;
  padding: 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

.person-modal-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 28px;
  height: 28px;
  border: 1px solid #666;
  background: rgba(255, 255, 255, 0.9);
  font-family: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: #333;
}

.person-modal-close:hover {
  background: #fff;
}

.person-modal-art {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 52vh;
  margin: 0 auto 14px;
  border: 1px solid #999;
  background: #f5f2ec;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.person-modal-img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.person-modal-art-empty {
  font-size: 13px;
  letter-spacing: 0.08em;
  color: #999;
}

.person-modal-meta {
  text-align: left;
}

.person-modal-rarity {
  display: inline-block;
  font-size: 12px;
  font-weight: bold;
  color: #1a5a8a;
  margin-bottom: 4px;
}

/* ---- 人材レア枠（S〜S+++）カード全体 ---- */
.deck-slot-filled[data-rarity="S"],
.deck-slot-filled[data-rarity="S+"],
.deck-slot-filled[data-rarity="S++"],
.deck-slot-filled[data-rarity="S+++"],
.roster-card[data-rarity="S"],
.roster-card[data-rarity="S+"],
.roster-card[data-rarity="S++"],
.roster-card[data-rarity="S+++"] {
  position: relative;
  overflow: hidden;
  border-width: 2px;
}

.deck-slot-filled[data-rarity="S"] .deck-slot-art,
.deck-slot-filled[data-rarity="S+"] .deck-slot-art,
.deck-slot-filled[data-rarity="S++"] .deck-slot-art,
.deck-slot-filled[data-rarity="S+++"] .deck-slot-art,
.roster-card[data-rarity="S"] .roster-card-art,
.roster-card[data-rarity="S+"] .roster-card-art,
.roster-card[data-rarity="S++"] .roster-card-art,
.roster-card[data-rarity="S+++"] .roster-card-art {
  position: relative;
  height: 30px;
  max-height: 36px;
  flex: 1 1 auto;
  min-height: 22px;
  border: none;
  overflow: hidden;
}

.deck-slot-filled[data-rarity="S"] .deck-slot-rarity,
.deck-slot-filled[data-rarity="S+"] .deck-slot-rarity,
.deck-slot-filled[data-rarity="S++"] .deck-slot-rarity,
.deck-slot-filled[data-rarity="S+++"] .deck-slot-rarity,
.roster-card[data-rarity="S"] .roster-rarity,
.roster-card[data-rarity="S+"] .roster-rarity,
.roster-card[data-rarity="S++"] .roster-rarity,
.roster-card[data-rarity="S+++"] .roster-rarity {
  flex-shrink: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.deck-slot-filled[data-rarity="S++"] .deck-slot-rarity,
.deck-slot-filled[data-rarity="S+++"] .deck-slot-rarity,
.roster-card[data-rarity="S++"] .roster-rarity,
.roster-card[data-rarity="S+++"] .roster-rarity {
  font-size: 8px;
  letter-spacing: -0.05em;
}

.deck-slot-filled[data-rarity="S"] .deck-slot-name,
.deck-slot-filled[data-rarity="S+"] .deck-slot-name,
.deck-slot-filled[data-rarity="S++"] .deck-slot-name,
.deck-slot-filled[data-rarity="S+++"] .deck-slot-name,
.roster-card[data-rarity="S"] .roster-name,
.roster-card[data-rarity="S+"] .roster-name,
.roster-card[data-rarity="S++"] .roster-name,
.roster-card[data-rarity="S+++"] .roster-name {
  position: relative;
  z-index: 4;
  flex-shrink: 0;
  font-size: 9px;
  line-height: 1.1;
}

.deck-slot-filled[data-rarity="S"] .deck-slot-rarity,
.deck-slot-filled[data-rarity="S+"] .deck-slot-rarity,
.deck-slot-filled[data-rarity="S++"] .deck-slot-rarity,
.deck-slot-filled[data-rarity="S+++"] .deck-slot-rarity,
.roster-card[data-rarity="S"] .roster-rarity,
.roster-card[data-rarity="S+"] .roster-rarity,
.roster-card[data-rarity="S++"] .roster-rarity,
.roster-card[data-rarity="S+++"] .roster-rarity,
.roster-card[data-rarity="S"] .roster-type,
.roster-card[data-rarity="S+"] .roster-type,
.roster-card[data-rarity="S++"] .roster-type,
.roster-card[data-rarity="S+++"] .roster-type {
  position: relative;
  z-index: 4;
}

/* S: 金枠 */
.deck-slot-filled[data-rarity="S"],
.roster-card[data-rarity="S"] {
  border-color: #c9a227;
  background:
    linear-gradient(#fff8e7, #fff8e7) padding-box,
    linear-gradient(145deg, #8a6a10, #e8c547, #fff3b0, #c9a227, #8a6a10) border-box;
  border: 2px solid transparent;
  box-shadow: 0 1px 4px rgba(140, 100, 20, 0.35);
}

.deck-slot-filled[data-rarity="S"] .deck-slot-art,
.roster-card[data-rarity="S"] .roster-card-art,
.person-modal-art[data-rarity="S"] {
  background: linear-gradient(180deg, #fff6d0 0%, #e8c86a 100%);
}

/* S+: 強い金＋内側ハイライト */
.deck-slot-filled[data-rarity="S+"],
.roster-card[data-rarity="S+"] {
  border: 2px solid transparent;
  background:
    linear-gradient(#fff4d4, #ffe9a8) padding-box,
    linear-gradient(160deg, #6b5208, #f5d76e, #fff8d0, #d4af37, #6b5208) border-box;
  box-shadow:
    0 0 0 1px rgba(255, 230, 140, 0.9),
    0 2px 8px rgba(160, 120, 20, 0.45);
}

.deck-slot-filled[data-rarity="S+"] .deck-slot-art,
.roster-card[data-rarity="S+"] .roster-card-art,
.person-modal-art[data-rarity="S+"] {
  background: linear-gradient(165deg, #fff9e0 0%, #ffd86b 40%, #e0a820 100%);
}

.deck-slot-filled[data-rarity="S+"]::after,
.roster-card[data-rarity="S+"]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 40%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 60%
  );
  background-size: 200% 100%;
  animation: rarity-sheen 2.4s ease-in-out infinite;
  z-index: 3;
}

/* S++: 箔が動く */
.deck-slot-filled[data-rarity="S++"],
.roster-card[data-rarity="S++"] {
  border: 2px solid transparent;
  background:
    linear-gradient(#1f1808, #1f1808) padding-box,
    linear-gradient(120deg, #5a4200, #ffe9a0, #fffbe8, #c9a227, #5a4200) border-box;
  background-size: auto, 250% 250%;
  animation: rarity-shine-shift 3.5s ease-in-out infinite;
  box-shadow:
    0 0 0 1px #ffe9a0,
    0 0 10px rgba(255, 200, 60, 0.65),
    inset 0 0 12px rgba(255, 220, 120, 0.25);
  color: #fff8e0;
}

.deck-slot-filled[data-rarity="S++"] .deck-slot-art,
.roster-card[data-rarity="S++"] .roster-card-art,
.person-modal-art[data-rarity="S++"] {
  background:
    radial-gradient(circle at 30% 20%, #fff8d0 0%, transparent 45%),
    linear-gradient(150deg, #3a2a08 0%, #c9a227 35%, #ffe08a 55%, #8a6a10 100%);
  background-size: 100% 100%, 180% 180%;
  animation: rarity-shine-shift 4s ease-in-out infinite;
}

.deck-slot-filled[data-rarity="S++"] .deck-slot-name,
.deck-slot-filled[data-rarity="S++"] .deck-slot-rarity,
.roster-card[data-rarity="S++"] .roster-name,
.roster-card[data-rarity="S++"] .roster-rarity,
.roster-card[data-rarity="S++"] .roster-type {
  color: #ffe9a0;
  position: relative;
  z-index: 4;
}

.deck-slot-filled[data-rarity="S++"]::after,
.roster-card[data-rarity="S++"]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.7) 48%,
    transparent 65%
  );
  background-size: 220% 100%;
  animation: rarity-sheen 2s ease-in-out infinite;
}

/* S+++: ホログラム枠 */
.deck-slot-filled[data-rarity="S+++"],
.roster-card[data-rarity="S+++"] {
  border: 2px solid transparent;
  background:
    linear-gradient(#120f1a, #120f1a) padding-box,
    conic-gradient(
      from var(--holo-angle, 0deg),
      #ff5e9a,
      #ffd24d,
      #5ad1ff,
      #8d6bff,
      #7dffb3,
      #ff5e9a
    ) border-box;
  animation: rarity-holo-angle 2.8s linear infinite;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.55),
    0 0 14px rgba(120, 200, 255, 0.55),
    0 0 18px rgba(255, 120, 200, 0.35);
  color: #f5f0ff;
}

@property --holo-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes rarity-holo-angle {
  to {
    --holo-angle: 360deg;
  }
}

.deck-slot-filled[data-rarity="S+++"] .deck-slot-art,
.roster-card[data-rarity="S+++"] .roster-card-art,
.person-modal-art[data-rarity="S+++"] {
  background:
    linear-gradient(
      125deg,
      #ff8ec8 0%,
      #7ad7ff 20%,
      #ffe28a 40%,
      #b59bff 60%,
      #7dffc3 80%,
      #ff8ec8 100%
    );
  background-size: 300% 300%;
  animation: rarity-holo-shift 2.5s linear infinite;
}

.deck-slot-filled[data-rarity="S+++"] .deck-slot-name,
.deck-slot-filled[data-rarity="S+++"] .deck-slot-rarity,
.roster-card[data-rarity="S+++"] .roster-name,
.roster-card[data-rarity="S+++"] .roster-rarity,
.roster-card[data-rarity="S+++"] .roster-type {
  position: relative;
  z-index: 4;
  color: #fff;
  text-shadow: 0 0 4px rgba(120, 200, 255, 0.8);
}

.deck-slot-filled[data-rarity="S+++"]::before,
.roster-card[data-rarity="S+++"]::before,
.person-modal-art[data-rarity="S+++"]::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0.55;
  background-image:
    linear-gradient(
      115deg,
      transparent 25%,
      rgba(255, 255, 255, 0.15) 40%,
      rgba(120, 220, 255, 0.55) 48%,
      rgba(255, 140, 220, 0.5) 54%,
      rgba(255, 255, 255, 0.2) 62%,
      transparent 75%
    ),
    repeating-linear-gradient(
      -18deg,
      transparent 0 6px,
      rgba(255, 255, 255, 0.07) 6px 7px
    );
  background-size: 240% 100%, auto;
  animation: rarity-sheen 1.8s linear infinite;
}

.deck-slot-filled[data-rarity="S+++"]::after,
.roster-card[data-rarity="S+++"]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  background:
    radial-gradient(circle at 20% 25%, rgba(255, 255, 255, 0.9) 0 1px, transparent 2px),
    radial-gradient(circle at 75% 35%, rgba(255, 255, 255, 0.85) 0 1px, transparent 2px),
    radial-gradient(circle at 40% 70%, rgba(255, 255, 255, 0.8) 0 1px, transparent 2px),
    radial-gradient(circle at 85% 80%, rgba(255, 255, 255, 0.75) 0 1px, transparent 2px);
  animation: rarity-sparkle 1.6s steps(2) infinite;
}

@keyframes rarity-sparkle {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
}

.deck-slot-filled[data-rarity="S"] .deck-slot-rarity,
.roster-card[data-rarity="S"] .roster-rarity,
.person-modal-rarity[data-rarity="S"] {
  color: #9a7209;
  font-weight: 800;
}

.deck-slot-filled[data-rarity="S+"] .deck-slot-rarity,
.roster-card[data-rarity="S+"] .roster-rarity,
.person-modal-rarity[data-rarity="S+"] {
  color: #a07800;
  font-weight: 800;
  text-shadow: 0 0 6px rgba(255, 220, 100, 0.8);
}

.deck-slot-filled[data-rarity="S++"] .deck-slot-rarity,
.roster-card[data-rarity="S++"] .roster-rarity,
.person-modal-rarity[data-rarity="S++"] {
  color: #ffe08a;
  font-weight: 800;
  text-shadow: 0 0 8px rgba(255, 200, 60, 0.9);
}

.deck-slot-filled[data-rarity="S+++"] .deck-slot-rarity,
.roster-card[data-rarity="S+++"] .roster-rarity,
.person-modal-rarity[data-rarity="S+++"] {
  background: linear-gradient(90deg, #ff7eb3, #7ad7ff, #ffe28a, #b59bff, #ff7eb3);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
  animation: rarity-holo-text 2s linear infinite;
}

/* モーダルのレア演出（大きく） */
.person-modal-art[data-rarity="S"],
.person-modal-art[data-rarity="S+"],
.person-modal-art[data-rarity="S++"],
.person-modal-art[data-rarity="S+++"] {
  border-width: 3px;
  border-style: solid;
}

.person-modal-art[data-rarity="S"] {
  border-color: #c9a227;
  box-shadow:
    0 0 0 2px #fff3b0,
    0 0 16px rgba(201, 162, 39, 0.45);
}

.person-modal-art[data-rarity="S+"] {
  border-color: #d4af37;
  box-shadow:
    0 0 0 2px #fff8d0,
    0 0 20px rgba(212, 175, 55, 0.55);
}

.person-modal-art[data-rarity="S+"]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 65%
  );
  background-size: 220% 100%;
  animation: rarity-sheen 2.4s ease-in-out infinite;
}

.person-modal-art[data-rarity="S++"] {
  border-color: #ffe08a;
  box-shadow:
    0 0 0 2px #c9a227,
    0 0 24px rgba(255, 200, 60, 0.7);
}

.person-modal-art[data-rarity="S++"]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(
    105deg,
    transparent 25%,
    rgba(255, 255, 255, 0.75) 48%,
    transparent 70%
  );
  background-size: 220% 100%;
  animation: rarity-sheen 1.8s ease-in-out infinite;
}

.person-modal-art[data-rarity="S+++"] {
  border: 3px solid transparent;
  background:
    linear-gradient(
      125deg,
      #ff8ec8 0%,
      #7ad7ff 20%,
      #ffe28a 40%,
      #b59bff 60%,
      #7dffc3 80%,
      #ff8ec8 100%
    ) padding-box,
    conic-gradient(
      from var(--holo-angle, 0deg),
      #ff5e9a,
      #ffd24d,
      #5ad1ff,
      #8d6bff,
      #7dffb3,
      #ff5e9a
    ) border-box;
  background-size: 300% 300%, auto;
  animation: rarity-holo-shift 2.5s linear infinite, rarity-holo-angle 2.8s linear infinite;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.7),
    0 0 28px rgba(120, 200, 255, 0.55),
    0 0 36px rgba(255, 120, 200, 0.4);
}

.person-modal-art[data-rarity="S+++"]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.95) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 30%, rgba(255, 255, 255, 0.9) 0 2px, transparent 3px),
    radial-gradient(circle at 35% 72%, rgba(255, 255, 255, 0.85) 0 2px, transparent 3px),
    radial-gradient(circle at 88% 78%, rgba(255, 255, 255, 0.8) 0 1px, transparent 2px),
    linear-gradient(
      115deg,
      transparent 28%,
      rgba(255, 255, 255, 0.2) 42%,
      rgba(120, 220, 255, 0.45) 50%,
      rgba(255, 140, 220, 0.4) 56%,
      transparent 72%
    );
  background-size: auto, auto, auto, auto, 240% 100%;
  animation: rarity-sparkle 1.4s steps(2) infinite, rarity-sheen 1.8s linear infinite;
}

@keyframes rarity-shine-shift {
  0%,
  100% {
    background-position: 0% 40%, 0% 40%;
  }
  50% {
    background-position: 100% 60%, 100% 60%;
  }
}

@keyframes rarity-holo-shift {
  0% {
    background-position: 0% 50%, 0% 50%;
  }
  100% {
    background-position: 100% 50%, 100% 50%;
  }
}

@keyframes rarity-sheen {
  0% {
    background-position: 130% 0;
  }
  100% {
    background-position: -40% 0;
  }
}

@keyframes rarity-holo-text {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .deck-slot-filled[data-rarity="S+"],
  .roster-card[data-rarity="S+"],
  .deck-slot-filled[data-rarity="S++"],
  .roster-card[data-rarity="S++"],
  .deck-slot-filled[data-rarity="S+++"],
  .roster-card[data-rarity="S+++"],
  .deck-slot-filled[data-rarity="S+"]::after,
  .roster-card[data-rarity="S+"]::after,
  .deck-slot-filled[data-rarity="S++"]::after,
  .roster-card[data-rarity="S++"]::after,
  .deck-slot-filled[data-rarity="S+++"]::before,
  .roster-card[data-rarity="S+++"]::before,
  .deck-slot-filled[data-rarity="S+++"]::after,
  .roster-card[data-rarity="S+++"]::after,
  .person-modal-art[data-rarity="S+"]::after,
  .person-modal-art[data-rarity="S++"]::after,
  .person-modal-art[data-rarity="S+++"],
  .person-modal-art[data-rarity="S+++"]::before,
  .person-modal-art[data-rarity="S+++"]::after,
  .person-modal-rarity[data-rarity="S+++"],
  .train-detail-art[data-rarity="S+"]::after,
  .train-detail-art[data-rarity="S++"],
  .train-detail-art[data-rarity="S++"]::after,
  .train-detail-art[data-rarity="S+++"],
  .train-detail-art[data-rarity="S+++"]::before,
  .train-detail-art[data-rarity="S+++"]::after,
  .train-detail-rarity[data-rarity="S+++"],
  .train-pick-art[data-rarity="S+"]::after,
  .train-pick-art[data-rarity="S++"],
  .train-pick-art[data-rarity="S++"]::after,
  .train-pick-art[data-rarity="S+++"],
  .train-pick-art[data-rarity="S+++"]::before,
  .train-pick-art[data-rarity="S+++"]::after {
    animation: none;
  }
}

.person-modal-name {
  margin: 0 0 8px;
  font-size: 20px;
  color: #222;
  line-height: 1.3;
  padding-right: 28px;
}

.person-modal-flavor {
  margin: 0 0 12px;
  font-size: 13px;
  color: #555;
  line-height: 1.5;
  white-space: pre-wrap;
}

.person-modal-stats {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
}

.person-modal-stats > div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid #ddd;
  padding: 2px 0;
  font-size: 12px;
}

.person-modal-stats dt {
  margin: 0;
  color: #666;
  font-weight: normal;
}

.person-modal-stats dd {
  margin: 0;
  font-weight: bold;
  color: #333;
}

.person-modal-actions {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.person-modal-action-train {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: bold;
  padding: 10px 12px;
  border: 1px solid #1a5a8a;
  background: #1a5a8a;
  color: #fff;
  cursor: pointer;
}

.person-modal-action-train:hover {
  background: #14486e;
}

.person-modal-action-train[hidden] {
  display: none;
}

.person-modal-action-form {
  margin: 0;
}

.person-modal-action-form[hidden] {
  display: none;
}

.person-modal-action-btn {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  font-weight: bold;
  padding: 10px 12px;
  border: 1px solid #333;
  cursor: pointer;
}

.person-modal-action-assign {
  background: rgba(220, 238, 248, 0.95);
  color: #1a5a8a;
}

.person-modal-action-assign:hover {
  background: rgba(200, 228, 245, 0.98);
}

.person-modal-action-remove {
  background: rgba(255, 255, 255, 0.95);
  color: #444;
}

.person-modal-action-remove:hover {
  background: #fff;
}

.person-modal-action-swap {
  background: #f3ead2;
  color: #6a4a12;
}

.person-modal-action-swap:hover {
  background: #eee0c0;
}

.person-modal-action-swap[hidden] {
  display: none;
}

.deck-swap-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  padding: 6px 8px;
  border: 1px solid #2a6a9a;
  background: rgba(42, 106, 154, 0.12);
}

.deck-swap-banner[hidden] {
  display: none;
}

.deck-swap-text {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: bold;
  color: #1a5a8a;
}

.deck-swap-cancel {
  flex-shrink: 0;
  font-family: inherit;
  font-size: 11px;
  padding: 2px 8px;
  border: 1px solid #333;
  background: rgba(255, 255, 255, 0.9);
  cursor: pointer;
}

body.deck-swap-wait-roster.deck-swap-person .roster-card.person-open[data-action="assign"],
body.deck-swap-wait-deck.deck-swap-person .deck-slot-filled.person-open[data-action="remove"],
body.deck-swap-wait-roster.deck-swap-business .roster-card.business-open[data-action="assign"],
body.deck-swap-wait-deck.deck-swap-business .deck-slot-filled.business-open[data-action="remove"] {
  box-shadow: 0 0 0 2px #c45c4a;
}

.deck-slot.is-swap-source,
.roster-card.is-swap-source {
  box-shadow: 0 0 0 2px #2a6a9a;
}

body.person-modal-open {
  overflow: hidden;
}

.train-pick-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

.train-pick-modal[hidden] {
  display: none;
}

.train-pick-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 24, 28, 0.55);
}

.train-pick-panel {
  position: relative;
  z-index: 1;
  width: min(480px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: #f7f4ef;
  border: 1px solid #333;
  padding: 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

.train-pick-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 28px;
  height: 28px;
  border: 1px solid #666;
  background: rgba(255, 255, 255, 0.9);
  font-family: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: #333;
}

.train-pick-title {
  margin: 0 28px 6px 0;
  font-size: 16px;
  color: #222;
}

.train-pick-hint {
  margin: 0 0 12px;
  font-size: 12px;
  color: #666;
}

.train-pick-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.train-pick-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  border: 1px solid #ccc;
  background: rgba(255, 255, 255, 0.8);
}

.train-pick-card {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.train-pick-info {
  flex: 1;
  min-width: 0;
}

.train-pick-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.train-pick-art {
  position: relative;
  width: 36px;
  height: 44px;
  border: 1px dashed #bbb;
  background: #d8dde3;
  flex-shrink: 0;
  overflow: hidden;
}

.train-pick-art-char {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: contain;
}

/* 事業カード面：レア文字を中央に */
.biz-art-mark {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: -0.05em;
  line-height: 1;
  color: #3a4a5a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
  pointer-events: none;
  user-select: none;
}

.deck-slot-art .biz-art-mark,
.roster-card-art .biz-art-mark {
  font-size: 11px;
}

.train-pick-art .biz-art-mark {
  font-size: 14px;
}

.biz-art-mark-lg {
  font-size: 42px;
  letter-spacing: -0.06em;
}

.train-pick-art[data-rarity="B"],
.train-pick-art[data-rarity="A"],
.train-pick-art[data-rarity="A+"],
.deck-slot-art[data-rarity="B"],
.deck-slot-art[data-rarity="A"],
.deck-slot-art[data-rarity="A+"],
.roster-card-art[data-rarity="B"],
.roster-card-art[data-rarity="A"],
.roster-card-art[data-rarity="A+"],
.train-detail-art[data-rarity="B"],
.train-detail-art[data-rarity="A"],
.train-detail-art[data-rarity="A+"] {
  border-style: solid;
  border-width: 1px;
  border-color: #8a9aaa;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, transparent 42%),
    linear-gradient(180deg, #f2f5f8 0%, #cfd8e2 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 1px 2px rgba(40, 60, 80, 0.18);
}

.train-pick-art[data-rarity="A"],
.deck-slot-art[data-rarity="A"],
.roster-card-art[data-rarity="A"],
.train-detail-art[data-rarity="A"] {
  border-color: #6a8aaa;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, transparent 40%),
    linear-gradient(180deg, #e8f0f8 0%, #b8cce0 100%);
}

.train-pick-art[data-rarity="A+"],
.deck-slot-art[data-rarity="A+"],
.roster-card-art[data-rarity="A+"],
.train-detail-art[data-rarity="A+"] {
  border-color: #4a7aaa;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, transparent 38%),
    linear-gradient(180deg, #dceaf6 0%, #9ab8d4 100%);
}

.deck-slot-art[data-rarity="S"] .biz-art-mark,
.roster-card-art[data-rarity="S"] .biz-art-mark,
.train-pick-art[data-rarity="S"] .biz-art-mark,
.train-detail-art[data-rarity="S"] .biz-art-mark {
  color: #6a5208;
  text-shadow: 0 1px 0 rgba(255, 245, 180, 0.9);
}

.deck-slot-art[data-rarity="S+"] .biz-art-mark,
.roster-card-art[data-rarity="S+"] .biz-art-mark,
.train-pick-art[data-rarity="S+"] .biz-art-mark,
.train-detail-art[data-rarity="S+"] .biz-art-mark {
  color: #5a4200;
  text-shadow: 0 0 6px rgba(255, 230, 120, 0.95);
}

.deck-slot-art[data-rarity="S++"] .biz-art-mark,
.roster-card-art[data-rarity="S++"] .biz-art-mark,
.train-pick-art[data-rarity="S++"] .biz-art-mark,
.train-detail-art[data-rarity="S++"] .biz-art-mark {
  color: #fff6d0;
  text-shadow: 0 0 8px rgba(255, 200, 60, 0.9);
}

.deck-slot-art[data-rarity="S+++"] .biz-art-mark,
.roster-card-art[data-rarity="S+++"] .biz-art-mark,
.train-pick-art[data-rarity="S+++"] .biz-art-mark,
.train-detail-art[data-rarity="S+++"] .biz-art-mark {
  color: #fff;
  text-shadow: 0 0 8px rgba(120, 200, 255, 0.95);
  font-size: 10px;
}

.train-pick-art[data-rarity="S+++"] .biz-art-mark {
  font-size: 11px;
}

.train-detail-art[data-rarity="S+++"] .biz-art-mark-lg {
  font-size: 36px;
}

.train-pick-card[data-rarity="S"] .train-pick-art,
.train-pick-card[data-rarity="S+"] .train-pick-art,
.train-pick-card[data-rarity="S++"] .train-pick-art,
.train-pick-card[data-rarity="S+++"] .train-pick-art,
.train-pick-art[data-rarity="S"],
.train-pick-art[data-rarity="S+"],
.train-pick-art[data-rarity="S++"],
.train-pick-art[data-rarity="S+++"] {
  border-style: solid;
  border-width: 2px;
}

.train-pick-art[data-rarity="S"] {
  border-color: #c9a227;
  background: linear-gradient(180deg, #fff6d0 0%, #e8c86a 100%);
  box-shadow: 0 0 6px rgba(201, 162, 39, 0.45);
}

.train-pick-art[data-rarity="S+"] {
  border-color: #d4af37;
  background: linear-gradient(165deg, #fff9e0 0%, #ffd86b 40%, #e0a820 100%);
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.55);
}

.train-pick-art[data-rarity="S+"]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 65%
  );
  background-size: 220% 100%;
  animation: rarity-sheen 2.4s ease-in-out infinite;
}

.train-pick-art[data-rarity="S++"] {
  border-color: #ffe08a;
  background:
    radial-gradient(circle at 30% 20%, #fff8d0 0%, transparent 45%),
    linear-gradient(150deg, #3a2a08 0%, #c9a227 35%, #ffe08a 55%, #8a6a10 100%);
  background-size: 100% 100%, 180% 180%;
  animation: rarity-shine-shift 4s ease-in-out infinite;
  box-shadow: 0 0 10px rgba(255, 200, 60, 0.65);
}

.train-pick-art[data-rarity="S++"]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(
    100deg,
    transparent 30%,
    rgba(255, 255, 220, 0.45) 50%,
    transparent 70%
  );
  background-size: 200% 100%;
  animation: rarity-sheen 1.8s linear infinite;
}

.train-pick-art[data-rarity="S+++"] {
  border-color: #e8d0ff;
  background:
    linear-gradient(
      125deg,
      #ff8ec8 0%,
      #7ad7ff 20%,
      #ffe28a 40%,
      #b59bff 60%,
      #7dffc3 80%,
      #ff8ec8 100%
    );
  background-size: 300% 300%;
  animation: rarity-holo-shift 2.5s linear infinite;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.5),
    0 0 12px rgba(180, 120, 255, 0.7);
}

.train-pick-art[data-rarity="S+++"]::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.35) 0%,
    transparent 40%,
    rgba(120, 200, 255, 0.25) 70%,
    transparent 100%
  );
  mix-blend-mode: soft-light;
}

.train-pick-art[data-rarity="S+++"]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(
    90deg,
    transparent 20%,
    rgba(255, 255, 255, 0.5) 50%,
    transparent 80%
  );
  background-size: 200% 100%;
  animation: rarity-sheen 2s ease-in-out infinite;
}

.train-pick-rarity[data-rarity="S"] {
  color: #8a6a10;
}

.train-pick-rarity[data-rarity="S+"] {
  color: #a07810;
  text-shadow: 0 0 4px rgba(255, 220, 100, 0.8);
}

.train-pick-rarity[data-rarity="S++"] {
  color: #c9a227;
  text-shadow: 0 0 6px rgba(255, 200, 60, 0.9);
}

.train-pick-rarity[data-rarity="S+++"] {
  color: #b070e0;
  text-shadow: 0 0 8px rgba(180, 120, 255, 0.85);
}

.train-pick-rarity {
  font-size: 11px;
  font-weight: bold;
  color: #1a5a8a;
  min-width: 28px;
}

.train-pick-name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.train-pick-place {
  font-size: 11px;
  color: #777;
  flex-shrink: 0;
}

.train-pick-group {
  margin: 12px 0 6px;
  font-size: 12px;
  font-weight: 700;
  color: #1a5a8a;
}

.train-pick-list-page > .train-pick-group:first-child {
  margin-top: 0;
}

.train-pick-row-deck {
  border-color: #2a6a9a;
  background: rgba(230, 242, 250, 0.9);
}

.train-pick-row-executive {
  border-color: #8a5a1a;
  background: rgba(255, 248, 230, 0.95);
}

.train-person-role {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border: 1px solid #999;
  background: #fff;
  color: #555;
}

.train-person-role-executive {
  border-color: #8a5a1a;
  background: #fff8e0;
  color: #6a4a10;
}

.train-person-role-staff {
  border-color: #2a6a4a;
  background: #f4faf6;
  color: #1a5a3a;
}

.train-person-role-unassigned {
  border-color: #888;
  background: #f5f5f5;
  color: #666;
}

.train-pick-meta {
  margin-top: 2px;
  font-size: 11px;
  color: #666;
}

.train-pick-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.train-pick-train-form,
.train-pick-rest-form {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.train-pick-stat {
  font-family: inherit;
  font-size: 12px;
  padding: 4px 6px;
  border: 1px solid #999;
  background: #fff;
  max-width: 160px;
}

.train-pick-btn {
  font-family: inherit;
  font-size: 12px;
  font-weight: bold;
  padding: 6px 10px;
  border: 1px solid #333;
  background: rgba(220, 238, 248, 0.95);
  color: #1a5a8a;
  cursor: pointer;
  flex-shrink: 0;
}

.train-pick-btn:hover:not(:disabled) {
  background: rgba(200, 228, 245, 0.98);
}

.train-pick-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.train-pick-rest-btn {
  font-family: inherit;
  font-size: 12px;
  padding: 6px 10px;
  border: 1px solid #666;
  background: rgba(255, 255, 255, 0.95);
  color: #444;
  cursor: pointer;
}

.train-pick-rest-btn:hover {
  background: #fff;
}

.train-pick-empty {
  margin: 8px 0 0;
  font-size: 13px;
  color: #888;
}

.coming-soon-banner {
  margin: 20px 0 8px;
  padding: 28px 16px;
  border: 2px solid #2a6a9a;
  background: linear-gradient(180deg, rgba(232, 244, 255, 0.98), rgba(210, 230, 248, 0.92));
  color: #123a5a;
  font-size: 28px;
  font-weight: bold;
  letter-spacing: 0.18em;
  text-align: center;
  line-height: 1.2;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
}

body.train-pick-open {
  overflow: hidden;
}

.train-card-link {
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
}

.train-page-lead {
  margin: 0 0 12px;
  font-size: 13px;
  color: #555;
  line-height: 1.5;
}

.train-page-side {
  margin: 0 0 8px;
  font-size: 13px;
  color: #444;
}

.train-page-back-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin: 16px 0 0;
}

.train-page-back {
  display: inline-block;
  font-size: 13px;
  color: #1a5a8a;
  text-decoration: none;
  border: 1px solid #2a6a9a;
  background: rgba(220, 238, 248, 0.9);
  padding: 6px 10px;
}

.train-page-back:hover {
  background: rgba(200, 228, 245, 0.98);
}

.train-pick-list-page {
  margin-top: 10px;
}

.train-pick-row-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.train-pick-row-link:hover {
  background: rgba(230, 242, 250, 0.95);
}

.train-pick-go {
  flex-shrink: 0;
  font-size: 12px;
  color: #1a5a8a;
  font-weight: 700;
  padding-right: 4px;
}

.train-pick-ranks {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.stat-rank-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-size: 12px;
  font-weight: 700;
  color: #1a3a55;
  background: rgba(255, 248, 220, 0.95);
  border: 1px solid #c9a227;
  padding: 1px 5px;
}

.stat-rank-chip em {
  font-style: normal;
  font-weight: 600;
  font-size: 10px;
  color: #666;
}

.ability-rank {
  display: inline-block;
  min-width: 1.6em;
  font-weight: 800;
  font-size: 14px;
  color: #1a3a55;
}

.ability-value {
  color: #555;
  font-size: 0.95em;
}

.train-detail {
  margin-top: 4px;
}

.train-detail-hero {
  display: flex;
  gap: 14px;
  align-items: stretch;
  margin-bottom: 16px;
}

.train-detail-art {
  position: relative;
  width: 140px;
  min-height: 180px;
  flex-shrink: 0;
  overflow: hidden;
  isolation: isolate;
  background-color: #f5f2ec;
  border: 1px solid #8a9aaa;
}

.train-detail-art-char {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 180px;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: contain;
}

.train-detail-art[data-rarity="S"],
.train-detail-art[data-rarity="S+"],
.train-detail-art[data-rarity="S++"],
.train-detail-art[data-rarity="S+++"] {
  border-width: 3px;
  border-style: solid;
}

.train-detail-art[data-rarity="S"] {
  border-color: #c9a227;
  background: linear-gradient(180deg, #fff6d0 0%, #e8c86a 100%);
  box-shadow:
    0 0 0 2px #fff3b0,
    0 0 16px rgba(201, 162, 39, 0.45);
}

.train-detail-art[data-rarity="S+"] {
  border-color: #d4af37;
  background: linear-gradient(165deg, #fff9e0 0%, #ffd86b 40%, #e0a820 100%);
  box-shadow:
    0 0 0 2px #fff8d0,
    0 0 20px rgba(212, 175, 55, 0.55);
}

.train-detail-art[data-rarity="S+"]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 65%
  );
  background-size: 220% 100%;
  animation: rarity-sheen 2.4s ease-in-out infinite;
}

.train-detail-art[data-rarity="S++"] {
  border-color: #ffe08a;
  background:
    radial-gradient(circle at 30% 20%, #fff8d0 0%, transparent 45%),
    linear-gradient(150deg, #3a2a08 0%, #c9a227 35%, #ffe08a 55%, #8a6a10 100%);
  background-size: 100% 100%, 180% 180%;
  animation: rarity-shine-shift 4s ease-in-out infinite;
  box-shadow:
    0 0 0 2px #c9a227,
    0 0 24px rgba(255, 200, 60, 0.7);
}

.train-detail-art[data-rarity="S++"]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(
    105deg,
    transparent 25%,
    rgba(255, 255, 255, 0.75) 48%,
    transparent 70%
  );
  background-size: 220% 100%;
  animation: rarity-sheen 1.8s ease-in-out infinite;
}

.train-detail-art[data-rarity="S+++"] {
  border: 3px solid transparent;
  background:
    linear-gradient(
      125deg,
      #ff8ec8 0%,
      #7ad7ff 20%,
      #ffe28a 40%,
      #b59bff 60%,
      #7dffc3 80%,
      #ff8ec8 100%
    ) padding-box,
    conic-gradient(
      from var(--holo-angle, 0deg),
      #ff5e9a,
      #ffd24d,
      #5ad1ff,
      #8d6bff,
      #7dffb3,
      #ff5e9a
    ) border-box;
  background-size: 300% 300%, auto;
  animation: rarity-holo-shift 2.5s linear infinite, rarity-holo-angle 2.8s linear infinite;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.7),
    0 0 28px rgba(120, 200, 255, 0.55),
    0 0 36px rgba(255, 120, 200, 0.4);
}

.train-detail-art[data-rarity="S+++"]::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0.55;
  background-image:
    linear-gradient(
      115deg,
      transparent 25%,
      rgba(255, 255, 255, 0.15) 40%,
      rgba(120, 220, 255, 0.55) 48%,
      rgba(255, 140, 220, 0.5) 54%,
      rgba(255, 255, 255, 0.2) 62%,
      transparent 75%
    ),
    repeating-linear-gradient(
      -18deg,
      transparent 0 6px,
      rgba(255, 255, 255, 0.07) 6px 7px
    );
  background-size: 240% 100%, auto;
  animation: rarity-sheen 1.8s linear infinite;
}

.train-detail-art[data-rarity="S+++"]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.95) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 30%, rgba(255, 255, 255, 0.9) 0 2px, transparent 3px),
    radial-gradient(circle at 35% 72%, rgba(255, 255, 255, 0.85) 0 2px, transparent 3px),
    radial-gradient(circle at 88% 78%, rgba(255, 255, 255, 0.8) 0 1px, transparent 2px);
  animation: rarity-sparkle 1.4s steps(2) infinite;
}

.train-detail-rarity[data-rarity="S"] {
  color: #9a7209;
}

.train-detail-rarity[data-rarity="S+"] {
  color: #a07800;
  text-shadow: 0 0 6px rgba(255, 220, 100, 0.8);
}

.train-detail-rarity[data-rarity="S++"] {
  color: #a07800;
  text-shadow: 0 0 8px rgba(255, 200, 60, 0.9);
}

.train-detail-rarity[data-rarity="S+++"] {
  background: linear-gradient(90deg, #ff7eb3, #7ad7ff, #ffe28a, #b59bff, #ff7eb3);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rarity-holo-text 2s linear infinite;
}

.train-detail-identity {
  flex: 1;
  min-width: 0;
}

.train-detail-rarity {
  font-size: 13px;
  font-weight: 700;
  color: #8a6a12;
}

.train-detail-name {
  margin: 4px 0 6px;
  font-size: 22px;
  line-height: 1.2;
  color: #1a2a3a;
}

.train-detail-place {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #666;
  margin-bottom: 10px;
}

.train-detail-type {
  color: #666;
}

.train-detail-morale {
  font-size: 14px;
  color: #333;
}

.train-detail-morale strong {
  font-size: 18px;
  margin-right: 8px;
}

.train-detail-rate {
  color: #666;
  font-size: 12px;
}

.train-detail-story-hook {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: #3a4a5a;
}

.train-scene {
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 2px solid #2a6a9a;
  background: linear-gradient(165deg, #f7fbff 0%, #eef4f9 55%, #f8f4ec 100%);
  animation: train-scene-pop 0.4s ease-out both;
}

.train-scene-success,
.train-scene-high_success,
.train-scene-primary_success {
  border-color: #2a7a4a;
}

.train-scene-fail,
.train-scene-high_fail {
  border-color: #8a4a2a;
}

.train-scene-micro,
.train-scene-rest {
  border-color: #6a6a4a;
}

.train-scene-line {
  margin: 0 0 6px;
  font-size: 15px;
  line-height: 1.5;
  color: #1a2a3a;
  font-weight: 600;
}

.train-scene-summary {
  margin: 0;
  font-size: 12px;
  color: #555;
}

.train-scene-chapter {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed #8a9aaa;
}

.train-scene-chapter-label {
  font-size: 12px;
  font-weight: 700;
  color: #2a6a9a;
  margin-bottom: 4px;
}

.train-scene-chapter-body {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: #2a2a2a;
}

.train-story-panel {
  margin: 16px 0 0;
  padding: 12px;
  border: 1px solid #8a9aaa;
  background: #faf8f4;
}

.train-story-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.train-story-chapter-title {
  font-size: 13px;
  font-weight: 700;
  color: #2a4a6a;
  margin-bottom: 4px;
}

.train-story-chapter-body {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: #333;
}

.train-story-next {
  margin: 10px 0 0;
  font-size: 12px;
  color: #555;
}

@keyframes train-scene-pop {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.train-effect-panel {
  margin: 0 0 14px;
  padding: 12px;
  border: 2px solid #2a6a9a;
  background: #f4f8fb;
}

.train-effect-panel .deck-hint {
  margin-bottom: 4px;
}

.train-stat-effect {
  font-size: 10px;
  color: #555;
  line-height: 1.35;
  margin: 0 0 6px;
}

.train-detail-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.train-stat-cell {
  flex: 1 1 90px;
  min-width: 90px;
  text-align: center;
  background: rgba(255, 252, 245, 0.95);
  border: 1px solid #b8a070;
  padding: 8px 6px;
}

.train-stat-label {
  font-size: 11px;
  color: #666;
  margin-bottom: 2px;
}

.train-stat-rank {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
  color: #1a3a55;
}

.train-stat-rank[data-rank="G"],
.train-stat-rank[data-rank="G+"],
.stat-rank-chip[data-rank="G"],
.stat-rank-chip[data-rank="G+"] {
  color: #7a8694;
}

.train-stat-rank[data-rank="F"],
.train-stat-rank[data-rank="F+"],
.stat-rank-chip[data-rank="F"],
.stat-rank-chip[data-rank="F+"] {
  color: #8b5fbf;
}

.train-stat-rank[data-rank="E"],
.train-stat-rank[data-rank="E+"],
.stat-rank-chip[data-rank="E"],
.stat-rank-chip[data-rank="E+"] {
  color: #3aa0c8;
}

.train-stat-rank[data-rank="D"],
.train-stat-rank[data-rank="D+"],
.stat-rank-chip[data-rank="D"],
.stat-rank-chip[data-rank="D+"] {
  color: #3a9a5c;
}

.train-stat-rank[data-rank="C"],
.train-stat-rank[data-rank="C+"],
.stat-rank-chip[data-rank="C"],
.stat-rank-chip[data-rank="C+"] {
  color: #c9a227;
}

.train-stat-rank[data-rank="B"],
.train-stat-rank[data-rank="B+"],
.stat-rank-chip[data-rank="B"],
.stat-rank-chip[data-rank="B+"] {
  color: #d4782a;
}

.train-stat-rank[data-rank="A"],
.train-stat-rank[data-rank="A+"],
.stat-rank-chip[data-rank="A"],
.stat-rank-chip[data-rank="A+"] {
  color: #c43c3c;
}

.train-stat-rank[data-rank="S"],
.train-stat-rank[data-rank="S+"],
.stat-rank-chip[data-rank="S"],
.stat-rank-chip[data-rank="S+"] {
  color: #c9a227;
  text-shadow: 0 0 1px #8a7010;
}

.train-stat-value {
  font-size: 12px;
  color: #555;
  margin: 2px 0 8px;
}

.train-stat-current {
  font-weight: 700;
  color: #222;
}

.train-stat-max {
  font-weight: 700;
  color: #c43c3c;
}

.train-stat-form {
  margin: 0;
}

.train-stat-btn {
  width: 100%;
  border: 1px solid #2a6a9a;
  background: #1a5a8a;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 4px;
  cursor: pointer;
}

.train-stat-btn:hover:not(:disabled) {
  background: #14486e;
}

.train-stat-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.train-stat-rate {
  font-size: 11px;
  font-weight: 700;
  color: #1a5a8a;
  margin: 4px 0 2px;
}

.train-stat-fit-hint {
  font-size: 10px;
  color: #555;
  margin-bottom: 6px;
  line-height: 1.3;
}

.train-business-staff {
  margin: 14px 0;
  padding: 12px;
  border: 2px solid #2a6a4a;
  background: #f4faf6;
}

.train-business-staff-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.train-business-staff-title {
  margin: 0;
  font-size: 14px;
  color: #0d3a28;
}

.train-business-staff-count {
  font-size: 12px;
  font-weight: 700;
  color: #1a5a3a;
}

.train-business-staff-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.train-business-staff-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid #cfe8d8;
}

.train-business-staff-item:first-child {
  border-top: none;
}

.train-business-staff-main {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.train-business-staff-rarity {
  font-size: 11px;
  font-weight: 700;
  color: #1a5a3a;
}

.train-business-staff-name {
  font-size: 13px;
  font-weight: 700;
}

.train-business-staff-ranks {
  font-size: 10px;
  color: #555;
}

.train-business-staff-fit {
  display: flex;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  color: #1a5a8a;
}

.train-business-staff-remove {
  border: 1px solid #888;
  background: #fff;
  font-size: 11px;
  padding: 4px 8px;
  cursor: pointer;
}

.train-business-staff-empty {
  margin: 8px 0 0;
  font-size: 12px;
  color: #666;
}

.train-business-staff-assign {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #cfe8d8;
}

.train-business-staff-assign-label {
  font-size: 12px;
  font-weight: 700;
}

.train-business-staff-select {
  flex: 1;
  min-width: 160px;
  font-size: 12px;
  padding: 4px;
}

.train-business-staff-add {
  border: 1px solid #2a6a4a;
  background: #1a5a3a;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  cursor: pointer;
}

.train-detail-rest {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 2px solid #2a6a4a;
}

.train-rest-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-height: 64px;
  padding: 14px 12px;
  border: 2px solid #1a5a3a;
  background: linear-gradient(180deg, #e8f6ee, #cfe8d8);
  color: #0d3a28;
  cursor: pointer;
  font-family: inherit;
}

.train-rest-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #d8f0e4, #b8dcc8);
}

.train-rest-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.train-rest-btn-title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.1;
}

.train-rest-btn-sub {
  font-size: 12px;
  font-weight: 600;
  color: #2a5a42;
}

/* --- 決算公告 --- */

.settle-report {
  padding: 8px 4px 4px;
}

.settle-period {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #3a4a58;
}

.settle-headline {
  margin: 4px 0 10px;
  font-size: 18px;
  color: #102030;
}

.settle-stamp-wrap {
  display: flex;
  justify-content: flex-end;
  margin: 0 8px 12px;
}

.settle-stamp {
  display: inline-block;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 0.18em;
  padding: 8px 14px;
  border: 4px double currentColor;
  transform: rotate(-6deg);
  background: rgba(255, 255, 255, 0.72);
}

.settle-stamp[data-grade="strong"] {
  color: #b8860b;
}

.settle-stamp[data-grade="profit"] {
  color: #1a5a8a;
}

.settle-stamp[data-grade="loss"] {
  color: #a33;
}

.settle-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 12px 0;
}

.settle-kpi {
  padding: 8px 10px;
  border: 1px solid #8aa;
  background: rgba(255, 255, 255, 0.78);
}

.settle-kpi-label {
  font-size: 11px;
  color: #555;
}

.settle-kpi-value {
  margin-top: 2px;
  font-size: 16px;
  font-weight: 800;
}

.settle-ledger {
  margin-top: 4px;
}

.settle-levelup {
  margin: 12px 0 0;
  padding: 8px 10px;
  border: 2px solid #c48a1a;
  background: #fff4d6;
  color: #7a4e00;
  font-size: 13px;
  font-weight: 700;
}

.settle-continue {
  display: inline-block;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #fff;
  text-decoration: none;
  border: 2px solid #1a5a3a;
  background: #1a5a3a;
  padding: 10px 18px;
}

.settle-continue:hover {
  background: #14482e;
}

.settle-ir-section {
  margin-top: 20px;
  padding: 16px;
  border: 2px solid #5a7a9a;
  background: #f4f8fc;
}

.settle-ir-title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 800;
  color: #1a3550;
}

.settle-ir-hint {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.6;
  color: #334;
}

.settle-ir-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-bottom: 14px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid #c5d4e4;
  font-size: 13px;
  font-weight: 600;
}

.settle-ir-slider-block {
  margin-bottom: 16px;
  padding: 14px;
  background: #fff;
  border: 1px solid #c5d4e4;
}

.settle-ir-slider-block--dividend {
  border-left: 4px solid #5a8a6a;
}

.settle-ir-slider-block--shares {
  border-left: 4px solid #5a7a9a;
}

.settle-ir-slider-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 12px;
  margin-bottom: 12px;
}

.settle-ir-slider-title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: #1a3550;
}

.settle-ir-slider-ends {
  display: flex;
  gap: 16px;
  font-size: 11px;
  font-weight: 700;
}

.settle-ir-slider-end--left {
  color: #8a3a1a;
}

.settle-ir-slider-end--right {
  color: #1a5a3a;
}

.settle-ir-slider-wrap {
  padding: 4px 2px 0;
}

.settle-ir-range {
  --ir-track-h: 10px;
  --ir-thumb-size: 22px;
  --ir-center-pct: 50%;
  --ir-thumb-pct: 50%;
  display: block;
  width: 100%;
  height: var(--ir-thumb-size);
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.settle-ir-range:focus {
  outline: none;
}

.settle-ir-range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(26, 53, 80, 0.25);
}

.settle-ir-range::-webkit-slider-runnable-track {
  height: var(--ir-track-h);
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    #f0ddd4 0%,
    #f0ddd4 calc(var(--ir-center-pct) - 1px),
    #dde8e2 calc(var(--ir-center-pct) - 1px),
    #dde8e2 calc(var(--ir-center-pct) + 1px),
    #d8e8dc calc(var(--ir-center-pct) + 1px),
    #d8e8dc 100%
  );
  border: 1px solid #b8c8d8;
}

.settle-ir-range--dividend.settle-ir-range--active::-webkit-slider-runnable-track {
  background: linear-gradient(
    90deg,
    #e8c4b0 0%,
    #eef2f6 var(--ir-center-pct),
    #b8dcc8 var(--ir-center-pct),
    #8ec4a8 100%
  );
}

.settle-ir-range--shares.settle-ir-range--active::-webkit-slider-runnable-track {
  background: linear-gradient(
    90deg,
    #b8dcc8 0%,
    #eef2f6 var(--ir-center-pct),
    #e8c4b0 var(--ir-center-pct),
    #d8a890 100%
  );
}

.settle-ir-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--ir-thumb-size);
  height: var(--ir-thumb-size);
  margin-top: calc((var(--ir-track-h) - var(--ir-thumb-size)) / 2);
  border: 2px solid #1a3550;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

.settle-ir-range--active::-webkit-slider-thumb {
  background: #1a3550;
  border-color: #0f2438;
}

.settle-ir-range::-moz-range-track {
  height: var(--ir-track-h);
  border-radius: 999px;
  background: #eef2f6;
  border: 1px solid #b8c8d8;
}

.settle-ir-range::-moz-range-thumb {
  width: var(--ir-thumb-size);
  height: var(--ir-thumb-size);
  border: 2px solid #1a3550;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

.settle-ir-ticks {
  display: flex;
  justify-content: space-between;
  gap: 2px;
  margin-top: 8px;
  padding: 0 2px;
}

.settle-ir-tick {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: #667;
  line-height: 1.2;
  word-break: keep-all;
}

.settle-ir-tick--center {
  color: #1a3550;
  font-size: 11px;
}

.settle-ir-tick--disabled {
  opacity: 0.35;
  text-decoration: line-through;
}

.settle-ir-preview {
  margin-top: 12px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px dashed #c5d4e4;
  font-size: 13px;
  line-height: 1.5;
  transition: opacity 0.15s ease;
}

.settle-ir-preview--inactive {
  opacity: 0.45;
}

.settle-ir-preview-row + .settle-ir-preview-row {
  margin-top: 4px;
}

.settle-ir-preview-label {
  display: inline-block;
  min-width: 3em;
  margin-right: 6px;
  font-weight: 800;
  color: #456;
}

.settle-ir-preview-value {
  font-weight: 700;
  color: #1a2a3a;
}

.settle-ir-preview-cash {
  font-size: 12px;
  font-weight: 700;
}

.settle-ir-preview-cash--cost {
  color: #8a3a1a;
}

.settle-ir-preview-cash--gain {
  color: #1a5a3a;
}

.settle-ir-preview-effect {
  font-size: 12px;
  font-weight: 700;
  color: #1a5a3a;
}

.settle-ir-preview-effect--warn {
  color: #8a3a1a;
}

.settle-ir-combined {
  margin-bottom: 14px;
  padding: 12px 14px;
  background: #eef6fb;
  border: 2px solid #5a7a9a;
}

.settle-ir-combined-label {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #456;
  text-transform: uppercase;
}

.settle-ir-combined-choice {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: #1a3550;
}

.settle-ir-combined-detail {
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 700;
  color: #1a5a3a;
}

.settle-ir-form {
  margin: 0;
}

.settle-ir-submit-btn {
  width: 100%;
  font-size: 15px;
  font-weight: 800;
}

.settle-ir-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.settle-ir-panel {
  padding: 12px;
  background: #fff;
  border: 1px solid #c5d4e4;
}

.settle-ir-panel-title {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 800;
  color: #1a3550;
}

.settle-ir-subsection + .settle-ir-subsection {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed #ccd6e0;
}

.settle-ir-subsection-label {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
}

.settle-ir-subsection-label--up {
  color: #1a5a3a;
}

.settle-ir-subsection-label--down {
  color: #8a3a1a;
}

.settle-ir-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.settle-ir-form {
  margin: 0;
}

.settle-ir-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 10px 12px;
  text-align: left;
  border: 2px solid #b8c8d8;
  background: #fafcfe;
  cursor: pointer;
  font: inherit;
}

.settle-ir-card--up:not(:disabled):hover {
  border-color: #1a5a3a;
  background: #eef8f1;
}

.settle-ir-card--down:not(:disabled):hover {
  border-color: #a05030;
  background: #fff6f0;
}

.settle-ir-card:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.settle-ir-card-change {
  font-size: 15px;
  font-weight: 800;
  color: #1a2a3a;
}

.settle-ir-card-after {
  font-size: 13px;
  color: #456;
}

.settle-ir-card-cash {
  font-size: 12px;
  font-weight: 700;
}

.settle-ir-card-cash--cost {
  color: #8a3a1a;
}

.settle-ir-card-cash--gain {
  color: #1a5a3a;
}

.settle-ir-card-effect {
  font-size: 12px;
  color: #1a5a3a;
}

.settle-ir-card-effect--warn {
  color: #8a3a1a;
}

.settle-ir-skip-form {
  margin-top: 14px;
}

.settle-ir-skip-btn {
  width: 100%;
  background: #eef2f6;
  color: #334;
  border-color: #99a8b8;
}

.settle-ir-skip-btn:hover {
  background: #e2e8ef;
}

/* --- ランキング枠（あるけみすと風・横6社） --- */

.ranking-cards {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  width: 100%;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}

.rank-box {
  flex: 0 0 120px;
  min-width: 120px;
  border: 1px solid #999;
  background: rgba(250, 250, 250, 0.82);
}

.rank-box-header {
  background: rgba(42, 106, 154, 0.9);
  color: #fff;
  padding: 2px 6px;
  font-size: 11px;
  text-align: center;
  border-bottom: 1px solid #333;
  white-space: nowrap;
}

.rank-box-body {
  padding: 6px 6px 8px;
  font-size: 11px;
  text-align: center;
}

.rank-box.highlight {
  border: 2px solid #00aa00;
  background: rgba(240, 255, 240, 0.9);
}

.ranking-self-entry {
  margin: 4px 0 0;
  padding: 4px 8px;
  font-size: 12px;
  color: #1a5a8a;
  background: rgba(220, 238, 248, 0.7);
  border: 1px solid #9ab8cc;
}

.rank-chara {
  width: 48px;
  height: 60px;
  margin: 0 auto 4px;
  border: 2px solid #4a6a88;
  background: #e8f4fa;
  overflow: hidden;
  line-height: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 0 0 1px rgba(200, 170, 90, 0.4),
    0 1px 2px rgba(30, 50, 80, 0.15);
}

.rank-chara-img {
  display: block;
  width: 48px;
  height: 60px;
  object-fit: cover;
  object-position: center top;
  background: #e8f4fa;
}

.rank-company {
  font-weight: bold;
  font-size: 11px;
  color: #111;
  margin-bottom: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rank-security-code {
  font-weight: bold;
  font-variant-numeric: tabular-nums;
  color: #1a5a8a;
  margin-right: 4px;
}

.rank-chara-name {
  font-size: 10px;
  color: #444;
  margin-bottom: 3px;
}

.rank-level {
  font-size: 11px;
  font-weight: bold;
  color: #1a5a8a;
  border: 1px solid #2a6a9a;
  background: rgba(220, 238, 248, 0.95);
  display: inline-block;
  padding: 0 6px;
  margin-bottom: 4px;
  line-height: 1.4;
}

.rank-sales-label {
  font-size: 10px;
  color: #666;
}

.rank-sales {
  font-size: 11px;
  font-weight: bold;
  color: #222;
  font-variant-numeric: tabular-nums;
}

/* --- 四半期行動エリア（Step 6 以降で使用） --- */

.action-area {
  margin-top: 8px;
  border-top: 1px solid #999;
  padding-top: 8px;
}

.action-header {
  background: rgba(90, 158, 196, 0.88);
  color: #fff;
  padding: 3px 8px;
  font-weight: bold;
  margin-bottom: 6px;
}

.action-row {
  margin-bottom: 6px;
}

.action-btn {
  font-family: inherit;
  font-size: 12px;
  padding: 3px 10px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #333;
  cursor: pointer;
  margin-right: 4px;
}

.action-btn:hover {
  background: rgba(255, 255, 204, 0.9);
}

.npc-box {
  border: 1px solid #ccc;
  background: rgba(255, 255, 255, 0.72);
  padding: 4px 8px;
  margin-bottom: 8px;
  font-size: 11px;
}

/* --- スマホ（PCレイアウトは維持。平均株価は消さない） --- */

/* --- とても狭い画面 --- */

@media (max-width: 900px) {
  body {
    padding: 0 0 6px;
  }

  .ranking-cards {
    gap: 6px;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }

  .rank-box {
    flex: 0 0 132px;
    min-width: 132px;
  }
}

@media (max-width: 900px) {
  .chart-avg-split,
  .chart-avg-cell {
    display: block;
    width: 100%;
  }

  .action-top-row {
    grid-template-columns: 1fr;
  }

  .deck-with-roster {
    flex-direction: column;
  }

  .deck-with-roster > .roster-panel {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
  }

  .deck-slots {
    gap: 5px;
  }

  .deck-slot,
  .roster-card {
    width: 56px;
    height: 70px;
  }

  .roster-card-art {
    height: 30px;
  }

  .deck-slot-filled[data-rarity="S"] .deck-slot-art,
  .deck-slot-filled[data-rarity="S+"] .deck-slot-art,
  .deck-slot-filled[data-rarity="S++"] .deck-slot-art,
  .deck-slot-filled[data-rarity="S+++"] .deck-slot-art,
  .roster-card[data-rarity="S"] .roster-card-art,
  .roster-card[data-rarity="S+"] .roster-card-art,
  .roster-card[data-rarity="S++"] .roster-card-art,
  .roster-card[data-rarity="S+++"] .roster-card-art {
    height: 26px;
    max-height: 30px;
  }

  .panel-body {
    min-height: 0;
  }

  .train-business-staff-item {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "main remove"
      "fit fit";
    gap: 4px 8px;
    padding: 6px 0;
    align-items: start;
  }

  .train-business-staff-main {
    grid-area: main;
    min-width: 0;
    gap: 4px;
  }

  .train-business-staff-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .train-business-staff-fit {
    grid-area: fit;
    flex-wrap: wrap;
    gap: 4px 8px;
  }

  .train-business-staff-form {
    grid-area: remove;
  }

  .train-business-staff-ranks,
  .train-business-staff-reason {
    display: none;
  }

  .train-business-staff-preview:not(.has-selection) {
    display: none;
  }

  .train-business-staff-preview .train-business-staff-item:not(.is-selected) {
    display: none;
  }

  .train-business-staff-preview .train-business-staff-item.is-selected {
    grid-template-areas:
      "main main"
      "fit fit";
  }

  .settle-kpis {
    grid-template-columns: 1fr;
  }

  .settle-ir-columns {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 800px) {
  .page-home .main-grid,
  .main-grid-home {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding: 0 6px;
  }

  .page-home .panel-left,
  .page-home .panel-mid,
  .page-home .panel-right,
  .main-grid-home .panel-left,
  .main-grid-home .panel-mid,
  .main-grid-home .panel-right {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .site-header {
    flex-wrap: wrap;
  }

  .deck-slot,
  .roster-card {
    width: 52px;
    height: 64px;
  }

  .roster-card-art {
    height: 26px;
  }

  .deck-slot-filled[data-rarity="S"] .deck-slot-art,
  .deck-slot-filled[data-rarity="S+"] .deck-slot-art,
  .deck-slot-filled[data-rarity="S++"] .deck-slot-art,
  .deck-slot-filled[data-rarity="S+++"] .deck-slot-art,
  .roster-card[data-rarity="S"] .roster-card-art,
  .roster-card[data-rarity="S+"] .roster-card-art,
  .roster-card[data-rarity="S++"] .roster-card-art,
  .roster-card[data-rarity="S+++"] .roster-card-art {
    height: 22px;
    max-height: 26px;
    min-height: 18px;
  }

  .deck-slot-filled[data-rarity="S"] .deck-slot-rarity,
  .deck-slot-filled[data-rarity="S+"] .deck-slot-rarity,
  .deck-slot-filled[data-rarity="S++"] .deck-slot-rarity,
  .deck-slot-filled[data-rarity="S+++"] .deck-slot-rarity,
  .roster-card[data-rarity="S"] .roster-rarity,
  .roster-card[data-rarity="S+"] .roster-rarity,
  .roster-card[data-rarity="S++"] .roster-rarity,
  .roster-card[data-rarity="S+++"] .roster-rarity {
    font-size: 7px;
    letter-spacing: -0.06em;
  }

  .deck-slot-filled[data-rarity="S"] .deck-slot-name,
  .deck-slot-filled[data-rarity="S+"] .deck-slot-name,
  .deck-slot-filled[data-rarity="S++"] .deck-slot-name,
  .deck-slot-filled[data-rarity="S+++"] .deck-slot-name,
  .roster-card[data-rarity="S"] .roster-name,
  .roster-card[data-rarity="S+"] .roster-name,
  .roster-card[data-rarity="S++"] .roster-name,
  .roster-card[data-rarity="S+++"] .roster-name {
    font-size: 8px;
  }

  .company-chara,
  .company-chara img {
    width: 56px;
    height: 70px;
  }
}

/* ── 詳細ランキングページ ── */

.ranking-detail {
  max-width: 720px;
  margin: 24px auto;
  padding: 0 16px;
}

.ranking-detail-title {
  font-size: 1.25rem;
  margin-bottom: 8px;
}

.ranking-detail-self {
  margin-bottom: 16px;
  font-size: 0.95rem;
  color: #555;
}

.ranking-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin-bottom: 16px;
}

.ranking-table th,
.ranking-table td {
  padding: 6px 10px;
  border-bottom: 1px solid #ddd;
  text-align: left;
}

.ranking-table th {
  background: #f5f5f5;
  font-weight: 600;
  position: sticky;
  top: 0;
}

.ranking-th-rank,
.ranking-td-rank {
  width: 60px;
  text-align: center;
}

.ranking-th-code,
.ranking-td-code {
  width: 72px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #1a5a8a;
}

.ranking-th-level,
.ranking-td-level {
  width: 50px;
  text-align: center;
}

.ranking-th-sales,
.ranking-td-sales {
  text-align: right;
}

.ranking-row-self {
  background: #fff8e1;
  font-weight: 600;
}

.ranking-pagination {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  margin-bottom: 16px;
}

.ranking-page-btn {
  padding: 6px 14px;
  border: 1px solid #aaa;
  border-radius: 4px;
  text-decoration: none;
  color: #333;
  font-size: 0.85rem;
}

.ranking-page-btn:hover {
  background: #eee;
}

.ranking-page-info {
  font-size: 0.85rem;
  color: #666;
}

.ranking-back-link {
  display: inline-block;
  font-size: 0.85rem;
  color: #1976d2;
  text-decoration: none;
}

.ranking-back-link:hover {
  text-decoration: underline;
}

.ranking-detail-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.85rem;
  color: #1976d2;
  text-decoration: none;
}

.ranking-detail-link:hover {
  text-decoration: underline;
}

body.page-home .ranking-row {
  padding-left: 0;
  padding-right: 0;
}

body.page-home main.main-grid.main-grid-home {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 8px 0;
  padding: 0 8px;
  box-sizing: border-box;
}

body.page-home main.main-grid.main-grid-home > .panel-left,
body.page-home main.main-grid.main-grid-home > .panel-right {
  display: table-cell;
  width: 50%;
  vertical-align: top;
  margin-top: 0;
}

.donate-row {
  padding: 8px 8px 0;
  box-sizing: border-box;
}

.home-footer-left {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.donate-panel {
  width: 100%;
}

.donate-body {
  min-height: 0;
}

.donate-copy {
  margin: 0;
  font-size: 12px;
  line-height: 1.65;
}

.notice-panel {
  width: 100%;
}

.notice-header {
  letter-spacing: 0.12em;
}

.notice-body {
  min-height: 0;
  padding: 0;
  background: rgba(255, 255, 255, 0.42);
}

.notice-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.notice-entry {
  border-bottom: 1px solid rgba(42, 106, 154, 0.14);
}

.notice-entry:last-child {
  border-bottom: none;
}

.notice-entry.is-new {
  background: linear-gradient(90deg, rgba(42, 106, 154, 0.08), rgba(255, 255, 255, 0));
}

.notice-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 0 10px;
}

.notice-details {
  flex: 1;
  min-width: 0;
}

.notice-summary {
  display: grid;
  grid-template-columns: 40px auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  cursor: pointer;
  list-style: none;
}

.notice-summary::-webkit-details-marker,
.notice-summary::marker {
  display: none;
  content: "";
}

.notice-summary time {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: #5a7a92;
  letter-spacing: 0.04em;
}

.notice-tag {
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.08em;
  color: #2a6a9a;
  border: 1px solid rgba(42, 106, 154, 0.32);
  padding: 0 6px;
  line-height: 1.55;
  background: rgba(255, 255, 255, 0.7);
}

.notice-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: #1a5a8a;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.notice-summary:hover .notice-title,
.notice-details[open] .notice-title {
  color: #0d3d5c;
}

.notice-article {
  padding: 0 0 10px 48px;
  color: #243038;
  font-size: 12px;
  line-height: 1.75;
}

.notice-article p {
  margin: 0 0 0.7em;
}

.notice-article p:last-child {
  margin-bottom: 0;
}

.notice-new {
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 0.08em;
  color: #fff;
  background: #c45c4a;
  padding: 1px 5px;
  line-height: 1.4;
}

.notice-new.is-off {
  visibility: hidden;
}

.notice-tag-empty {
  visibility: hidden;
}

.notice-item-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding-top: 7px;
}

.notice-edit-link,
.notice-cancel-link {
  font-size: 11px;
  color: #2a6a9a;
  text-decoration: none;
}

.notice-edit-link:hover,
.notice-cancel-link:hover {
  text-decoration: underline;
}

.notice-delete-form {
  margin: 0;
}

.notice-delete-btn,
.notice-save-btn {
  font-family: inherit;
  font-size: 11px;
  padding: 2px 8px;
  border: 1px solid #333;
  background: rgba(255, 255, 255, 0.9);
  cursor: pointer;
}

.notice-delete-btn:hover,
.notice-save-btn:hover {
  background: #fff;
}

.notice-editor {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 8px 10px;
  border-top: 1px solid rgba(42, 106, 154, 0.22);
  background: rgba(255, 255, 255, 0.55);
}

.notice-editor-row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 8px;
}

.notice-editor-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 10px;
  color: #5a7a92;
}

.notice-editor-field-title {
  flex: 1 1 180px;
  min-width: 0;
}

.notice-editor-field-body {
  width: 100%;
}

.notice-input {
  font-family: inherit;
  font-size: 12px;
  padding: 3px 6px;
  border: 1px solid #999;
  background: #fff;
}

.notice-input-tag {
  width: 72px;
}

.notice-input-title,
.notice-input-body {
  width: 100%;
}

.notice-input-body {
  min-height: 96px;
  resize: vertical;
  line-height: 1.6;
}

.notice-editor-new {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: bold;
  color: #c45c4a;
  padding-bottom: 3px;
}

.notice-save-btn {
  font-weight: bold;
  background: rgba(42, 106, 154, 0.95);
  color: #fff;
  border-color: #333;
  padding: 4px 12px;
}

.notice-save-btn:hover {
  background: #2a6a9a;
}

.notice-cancel-link {
  padding-bottom: 4px;
}

@media (max-width: 640px) {
  body.page-home main.main-grid.main-grid-home,
  body.page-home main.main-grid.main-grid-home > .panel-left,
  body.page-home main.main-grid.main-grid-home > .panel-right {
    display: block;
    width: 100%;
  }

  .home-footer-left {
    width: 100%;
  }

  /* 行動メニュー: タップしやすい縦並び */
  .panel-body-action-menu {
    padding: 8px;
  }

  .panel-body-action-menu .menu-grid,
  .panel-body-action-menu .menu-grid tbody,
  .panel-body-action-menu .menu-grid tr {
    display: block;
    width: 100%;
  }

  .panel-body-action-menu .menu-grid tr {
    margin-bottom: 8px;
    border: 1px solid #999;
  }

  .panel-body-action-menu .menu-grid tr:last-child {
    margin-bottom: 0;
  }

  .panel-body-action-menu .menu-grid td {
    display: block;
    width: 100%;
    border: none;
  }

  .panel-body-action-menu .menu-label {
    width: 100%;
    padding: 8px 10px;
    font-size: 13px;
  }

  .panel-body-action-menu .menu-btn-cell {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 8px;
  }

  .panel-body-action-menu .menu-btn-cell .skip-period-form {
    width: 100%;
  }

  .panel-body-action-menu .menu-btn {
    min-height: 44px;
    padding: 10px 12px;
    font-size: 14px;
    touch-action: manipulation;
  }

  .panel-body-action-menu a.menu-btn,
  .panel-body-action-menu .menu-btn-cell > .menu-btn {
    width: 100%;
    flex: none;
  }

  .action-menu-meta {
    font-size: 13px;
    margin-bottom: 10px;
  }

  .trading-cards .train-card-link {
    min-height: 44px;
    padding: 10px 8px;
    touch-action: manipulation;
  }

  /* アイテムモーダル: 下から出るシート */
  .item-modal {
    align-items: flex-end;
    padding: 0;
  }

  .item-modal-panel {
    width: 100%;
    max-height: 88vh;
    border-radius: 12px 12px 0 0;
    padding: 20px 16px 16px;
  }

  .item-modal-close {
    top: 10px;
    right: 10px;
    width: 44px;
    height: 44px;
    font-size: 22px;
  }

  .item-modal-panel .item-card-actions {
    flex-direction: column;
  }

  .item-modal-panel .item-btn {
    min-height: 44px;
    width: 100%;
    font-size: 14px;
    padding: 10px 12px;
    touch-action: manipulation;
  }
}

/* --- 自社株（トレーディング） --- */

.treasury-panel {
  margin: 12px 0;
  padding: 10px;
  border: 1px solid #999;
  background: rgba(255, 255, 255, 0.85);
}

.treasury-panel-title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: bold;
  color: #1a4a6a;
}

.treasury-table th {
  width: 38%;
}

.treasury-hint {
  margin: 8px 0 0;
  font-size: 11px;
  color: #666;
  line-height: 1.5;
}

.treasury-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.treasury-block {
  margin: 0;
}

.treasury-form {
  margin: 0;
}

.treasury-form-label {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: bold;
  color: #333;
}

.treasury-form-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.treasury-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
}

.treasury-preset-btn {
  flex: 0 0 auto;
  min-height: 40px;
  width: auto;
  padding: 8px 12px;
  touch-action: manipulation;
}

.treasury-preset-btn.is-selected {
  background: rgba(255, 255, 204, 0.95);
  border-color: #2a6a9a;
  font-weight: bold;
}

.treasury-input {
  flex: 1 1 0;
  min-width: 8ch;
  min-height: 44px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 16px;
  border: 1px solid #888;
  background: #fff;
  color: #000;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

.treasury-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 4.5rem;
  max-width: 28%;
  min-height: 44px;
  padding: 8px 12px;
  font-size: 14px;
  touch-action: manipulation;
}