.battle-shell { background: #f8fbff; }

.compact-brand { min-height: 98px; padding-block: 12px; }
.compact-brand h1 { font-size: 39px; }
.breadcrumb {
  padding: 5px 10px;
  color: #555;
  background: #f3f3f3;
  border-bottom: 1px solid #bcbcbc;
  font-size: 11px;
}

.manual-heading {
  position: relative;
  margin: 10px;
  padding: 18px 20px;
  color: #fff;
  background:
    radial-gradient(circle at 92% 28%, rgba(255,255,255,.13) 0 45px, transparent 46px),
    repeating-linear-gradient(135deg, #123d77 0 11px, #174f92 11px 22px);
  border: 3px double #c9dcf7;
  box-shadow: inset 0 0 0 1px #082a58;
}
.manual-heading h2 { margin: 2px 0; font-size: 28px; letter-spacing: .08em; text-shadow: 2px 2px #04204c; }
.manual-heading p { margin: 3px 0; }
.manual-kicker { color: #ffef79; font: bold 10px Verdana, sans-serif; letter-spacing: .16em; }
.manual-heading .version { position: absolute; right: 10px; bottom: 7px; color: #cbe0ff; font-size: 10px; }

.shutdown-notice {
  margin: 0 10px 10px;
  padding: 13px 16px;
  color: #720014;
  background: repeating-linear-gradient(-45deg, #fff0a8 0 12px, #ffe47a 12px 24px);
  border: 4px double #c9002c;
  box-shadow: 3px 3px 0 rgba(125, 0, 26, .2), inset 0 0 0 2px #fff8c8;
  text-align: center;
}
.shutdown-notice span {
  display: block;
  margin-bottom: 3px;
  color: #fff;
  background: #c9002c;
  font-weight: bold;
  letter-spacing: .12em;
}
.shutdown-notice strong {
  display: block;
  font-size: 22px;
  line-height: 1.45;
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
.shutdown-notice p { margin: 5px 0 0; font-weight: bold; }

.battle-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 195px;
  gap: 10px;
  padding: 0 10px 12px;
}
.manual-main { min-width: 0; }

.guide-note {
  margin-bottom: 9px;
  padding: 8px 10px;
  color: #633500;
  background: #fffbd7;
  border: 1px dashed #d69100;
}

.chapter-title {
  margin: 12px 0 6px;
  padding: 5px 9px;
  color: #fff;
  background: #173f79;
  border-left: 8px solid #ffdb35;
  border-bottom: 3px double #96add0;
  font-size: 16px;
  letter-spacing: .08em;
}
.market-title { background: #744316; border-left-color: #ffc85a; }

.manual-section { margin: 0 0 7px; border: 1px solid #8194b2; background: #fff; }
.manual-section summary {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 5px 7px;
  color: #12396c;
  background: linear-gradient(#fff, #dfe9f8);
  border: 1px outset #fff;
  cursor: pointer;
  list-style: none;
  font-weight: bold;
}
.manual-section summary::-webkit-details-marker { display: none; }
.manual-section summary::after { content: "▼"; margin-left: 4px; color: #a35c00; font-size: 10px; }
.manual-section[open] summary { color: #fff; background: linear-gradient(#346daf, #164a8b); border-color: #5e88bb; }
.manual-section[open] summary::after { content: "▲"; color: #ffef73; }
.section-no { display: grid; place-items: center; width: 31px; height: 24px; color: #fff; background: #d86f0d; border: 1px outset #ffc082; font: bold 11px Verdana, sans-serif; }
.manual-section summary small { color: #6b7d98; font: 9px Verdana, sans-serif; letter-spacing: .08em; }
.manual-section[open] summary small { color: #d8e8ff; }
.manual-section summary::after { grid-column: 4; }

.manual-body { padding: 11px 13px 13px; background: #fffef5; }
.manual-body > :first-child { margin-top: 0; }
.manual-body > :last-child { margin-bottom: 0; }
.manual-body h3 {
  margin: 13px 0 6px;
  padding: 2px 6px;
  color: #724111;
  background: #fff2bc;
  border-left: 5px solid #dc8500;
  border-bottom: 1px dotted #b58443;
  font-size: 14px;
}
.manual-body ul, .manual-body ol { padding-left: 23px; }
.manual-body li { margin: 3px 0; }

.step-list { padding: 0 !important; list-style: none; counter-reset: step; }
.step-list li { display: grid; grid-template-columns: 62px 1fr; border-bottom: 1px dotted #aaa; }
.step-list b { padding: 3px 6px; color: #fff; background: #4778af; text-align: center; }
.step-list span { padding: 3px 8px; }

.tip-box, .warning-box, .danger-box, .qa-box { margin: 9px 0; padding: 8px 10px; border: 1px solid; }
.tip-box { color: #245c17; background: #efffe8; border-color: #67a653; }
.warning-box { color: #744600; background: #fff7cf; border-color: #d49a23; }
.danger-box { color: #8c142c; background: #fff0f3; border-color: #d66379; }
.qa-box { color: #163e72; background: #edf5ff; border-color: #6f99c9; }

.table-scroll { overflow-x: auto; }
.spec-table { width: 100%; border-collapse: collapse; background: #fff; }
.spec-table th, .spec-table td { padding: 5px 7px; border: 1px solid #9aa9bf; text-align: left; vertical-align: top; }
.spec-table thead th { color: #fff; background: #335f97; text-align: center; }
.spec-table tbody th { color: #153c71; background: #edf4ff; white-space: nowrap; }

.stat-list { display: grid; grid-template-columns: 110px 1fr; margin: 7px 0; border-top: 1px solid #abb7c8; }
.stat-list dt, .stat-list dd { margin: 0; padding: 5px 7px; border-right: 1px solid #abb7c8; border-bottom: 1px solid #abb7c8; }
.stat-list dt { color: #193e70; background: #e9f2ff; border-left: 1px solid #abb7c8; font-weight: bold; }

.effect-grid, .rule-cards, .sell-types { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.effect-grid div, .rule-cards article, .sell-types div { padding: 7px; background: #fff; border: 1px solid #9cafc8; }
.effect-grid b { display: inline-block; min-width: 68px; color: #fff; background: #315f9a; text-align: center; }
.effect-grid strong, .effect-grid span, .sell-types span { display: block; }
.effect-grid strong { margin: 3px 0; color: #8e4400; }
.rule-cards article { margin: 0; background: #f8fbff; }
.rule-cards article b { color: #16457d; }
.rule-cards article p { margin: 2px 0 0; }
.sell-types div { text-align: center; background: #fff8da; border-color: #c39532; }
.sell-types b { display: block; color: #8a4800; font-size: 15px; }
.coin { display: inline-block; padding: 0 5px; color: #fff; background: #c56b00; border-radius: 50%; font-weight: bold; }
.small-note, .last-note { color: #777; font-size: 11px; }
.faq-list p { padding: 7px 9px; background: #fff; border: 1px dotted #8f9db2; }
.back-top { text-align: right; }

.manual-toc { min-width: 0; }
.toc-box { margin-bottom: 9px; border: 1px solid #7f92ad; background: #fff; }
.toc-box h2 { margin: 0; padding: 5px; color: #fff; background: #174d8f; border-bottom: 2px solid #ffda3b; text-align: center; font-size: 13px; }
.toc-box h3 { margin: 0; padding: 4px 7px; color: #7a430d; background: #fff1be; border-bottom: 1px solid #d5a750; font-size: 12px; }
.toc-box a { display: block; padding: 4px 8px 4px 17px; color: #173d70; background: linear-gradient(to right, #edf5ff, #fff); border-bottom: 1px dotted #9cabbe; text-decoration: none; }
.toc-box a::before { content: "▸ "; margin-left: -10px; }
.toc-box a:hover { color: #c80034; background: #fff8b2; }
.quick-box a { padding-block: 6px; font-weight: bold; }
.mini-banner { margin: 10px auto; padding: 9px; width: 150px; color: #fff; background: #694318; border: 3px outset #e6c687; text-align: center; font: bold 15px Verdana, sans-serif; letter-spacing: .08em; line-height: 1.25; }
.mini-banner small { font-size: 8px; }

@media (max-width: 720px) {
  .compact-brand h1 { font-size: clamp(27px, 9vw, 35px); }
  .manual-heading { margin: 6px; padding: 13px; }
  .manual-heading h2 { font-size: 23px; }
  .manual-heading .version { position: static; margin-top: 7px; }
  .shutdown-notice { margin: 0 6px 8px; padding: 10px 8px; }
  .shutdown-notice strong { font-size: 18px; }
  .battle-grid { display: flex; flex-direction: column; padding: 0 6px 8px; }
  .manual-toc { order: -1; }
  .toc-box:first-child { display: grid; grid-template-columns: 1fr 1fr; }
  .toc-box:first-child h2 { grid-column: 1 / -1; }
  .toc-box:first-child h3 { grid-column: 1 / -1; }
  .toc-box:first-child a { min-width: 0; }
  .quick-box, .mini-banner { display: none; }
  .manual-section summary { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .manual-section summary small { display: none; }
  .manual-section summary::after { grid-column: 3; }
  .manual-body { padding: 9px; }
  .effect-grid, .rule-cards, .sell-types { grid-template-columns: 1fr; }
  .stat-list { grid-template-columns: 86px 1fr; }
}

@media (max-width: 400px) {
  .manual-heading h2 { font-size: 21px; }
  .step-list li { grid-template-columns: 54px 1fr; }
  .spec-table { font-size: 11px; }
}