:root {
  color-scheme: light;
  font-family: system-ui, "Microsoft YaHei", sans-serif;
  color: #192f3b;
  background: #edf3f5;
  --muted: #506774;
  --line: #dbe5e9;
}
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 1160px; padding: 32px 24px; margin: auto; }
.hero {
  padding: 27px 30px;
  border-radius: 20px;
  color: #f7fbff;
  background: linear-gradient(125deg, #142e43, #175456);
}
.eyebrow { font-size: 12px; letter-spacing: .15em; color: #b5e0df; }
.eyebrow span { margin-inline-start: .65rem; letter-spacing: normal; }
h1 { font-size: clamp(26px, 5vw, 42px); margin: 8px 0; }
h2 { font-size: 19px; margin: 0; }
p, li { line-height: 1.65; }
#notice { margin: 0 0 12px; overflow-wrap: anywhere; }
.layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.sidebar { display: grid; gap: 18px; min-width: 0; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 21px; min-width: 0; }
.muted, footer { color: var(--muted); font-size: 13px; }
button { font: inherit; cursor: pointer; }
button:disabled { opacity: .55; cursor: wait; }
.secondary { background: #edf4f6; color: #214353; border: 1px solid var(--line); border-radius: 8px; padding: 7px 13px; }
:focus-visible { outline: 2px solid #247a78; outline-offset: 3px; }
.badge { display: inline-block; border-radius: 999px; background: #e9f1f5; color: #27495c; padding: 3px 9px; font-size: 12px; font-weight: 600; vertical-align: middle; white-space: nowrap; }
.hero .badge { background: #d6eeeb; color: #164242; }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.section-title .badge { margin-inline-start: 4px; }
.ship-card { position: relative; margin-top: 9px; border: 1px solid var(--line); border-radius: 11px; padding: 12px 14px; overflow-wrap: anywhere; }
.ship-card h3 { margin: 5px 0; font-size: 17px; }
.ship-card p { margin: 0; font-size: 14px; color: var(--muted); }
.ship-card[data-state=in_battle] { border-color: #91c4b4; background: #f0faf6; }
.ship-card[data-state=in_battle] .badge { background: #d5eee4; color: #14543f; }
.pool-card { border-top: 1px solid var(--line); padding: 11px 0; overflow-wrap: anywhere; }
.pool-card summary { cursor: pointer; font-weight: 600; line-height: 1.6; }
.pool-card ul { padding-inline-start: 22px; font-size: 14px; max-height: 320px; overflow: auto; }
.howto { font-size: 14px; }
.howto p { margin: 10px 0 0; }
.howto ul { margin: 9px 0; padding-inline-start: 1.3em; }
.howto li + li { margin-top: 5px; }
code { font: inherit; color: #175452; background: #edf6f5; border-radius: 4px; padding: 1px 4px; overflow-wrap: anywhere; }
.rule-hint { border-top: 1px solid var(--line); padding-top: 8px; color: var(--muted); }
#feedback { min-height: 0; margin: 12px 0; font-size: 14px; color: #67421f; overflow-wrap: anywhere; }
footer { margin-top: 21px; text-align: center; }
@media (max-width: 760px) {
  main { padding: 15px 12px; }
  .hero { padding: 19px 17px; border-radius: 15px; }
  .layout { grid-template-columns: 1fr; }
  .layout, .sidebar { gap: 12px; }
  .card { padding: 16px; }
}