/*!
 * 海战棋在线 · battleship
 * 独立设计系统「海军坐标图」：藏青海图 + 冰青网格 + 朱红命中 + 米白
 * 字体层级：等宽坐标与标题、右上角方位罗盘；网格带经纬线
 */
.bts-page, .bts-modal, .bts-toast {
    --bts-bg: #f1f6f7;
    --bts-card: #ffffff;
    --bts-card2: #e9f1f3;
    --bts-line: #c9dce1;
    --bts-ink: #112d40;
    --bts-ink2: #617d8a;
    --bts-navy: #123c5a;
    --bts-sea: #2b83a4;
    --bts-sea-soft: rgba(43, 131, 164, .12);
    --bts-red: #cf4b3a;
    --bts-green: #2c8c71;
    --bts-num: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
:root[data-theme="dark"] .bts-page, :root[data-theme="dark"] .bts-modal, :root[data-theme="dark"] .bts-toast {
    --bts-bg: #0c151c;
    --bts-card: #15232d;
    --bts-card2: #1b2e39;
    --bts-line: #2e4b59;
    --bts-ink: #e8f3f7;
    --bts-ink2: #9bb7c2;
    --bts-navy: #8ab8d8;
    --bts-sea: #55b8d8;
    --bts-sea-soft: rgba(85, 184, 216, .14);
    --bts-red: #f1856f;
    --bts-green: #63d0ac;
}
.bts-page { background: var(--bts-bg); color: var(--bts-ink); font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; font-size: 15px; line-height: 1.75; }
.bts-page *, .bts-page *::before, .bts-page *::after { box-sizing: border-box; }
.bts-wrap { max-width: 1160px; margin: 0 auto; padding: 20px 16px 12px; }
.bts-page .detail-breadcrumb { margin: 0 0 16px; font-size: 13px; color: var(--bts-ink2); }
.bts-page .detail-breadcrumb a { color: var(--bts-navy); text-decoration: none; }
.bts-page .detail-breadcrumb .sep { margin: 0 8px; opacity: .6; }

/* ---------- Hero ---------- */
.bts-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 22px; align-items: center; padding: 26px 30px; border: 1px solid var(--bts-line); border-radius: 3px; background: linear-gradient(145deg, var(--bts-card), var(--bts-card2)); box-shadow: inset 0 0 0 4px rgba(43, 131, 164, .07); }
.bts-kicker { font: 700 11px var(--bts-num); letter-spacing: .24em; color: var(--bts-sea); }
.bts-hero h1 { margin: 10px 0 6px; font: 800 clamp(29px, 3.5vw, 42px)/1.2 var(--bts-num); letter-spacing: .04em; }
.bts-sub { margin: 0 0 18px; color: var(--bts-ink2); font-size: 15px; }
.bts-sub b { color: var(--bts-navy); }
.bts-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.bts-cta { cursor: pointer; border: 0; border-radius: 3px; padding: 11px 26px; font: 800 15px var(--bts-num); color: #fff; background: linear-gradient(135deg, #1b5c81, #0d3552); box-shadow: 0 8px 20px -12px rgba(13, 53, 82, .9); }
.bts-cta:hover { filter: brightness(1.15); }
.bts-ghost, .bts-mini { cursor: pointer; border: 1px solid var(--bts-line); border-radius: 3px; background: var(--bts-card); color: var(--bts-ink); font-size: 13px; font-weight: 700; padding: 10px 18px; font-family: var(--bts-num); }
.bts-mini { padding: 8px 12px; font-size: 12px; }
.bts-mini:disabled { opacity: .45; cursor: not-allowed; }
.bts-mini-solid { background: var(--bts-navy); color: #fff; border-color: var(--bts-navy); }
.bts-ghost:hover, .bts-mini:hover:not(:disabled) { border-color: var(--bts-sea); color: var(--bts-sea); }
.bts-hero-note { margin: 14px 0 0; font-size: 12px; color: var(--bts-ink2); }
.bts-radar { position: relative; justify-self: center; width: 170px; height: 170px; border: 2px solid var(--bts-sea); border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 27px, rgba(43, 131, 164, .18) 27px 28px), var(--bts-sea-soft); }
.bts-radar::before, .bts-radar::after { content: ''; position: absolute; background: rgba(43, 131, 164, .3); }
.bts-radar::before { left: 50%; top: 0; width: 1px; height: 100%; }
.bts-radar::after { top: 50%; left: 0; height: 1px; width: 100%; }
.bts-radar i { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--bts-red); box-shadow: 0 0 0 4px rgba(207, 75, 58, .18); }
.bts-radar i:nth-child(1) { left: 26%; top: 32%; } .bts-radar i:nth-child(2) { left: 62%; top: 46%; } .bts-radar i:nth-child(3) { left: 44%; top: 70%; }
.bts-radar span { position: absolute; left: 50%; top: 50%; width: 48%; height: 1px; background: var(--bts-green); transform-origin: left center; animation: bts-sweep 5s linear infinite; }
@keyframes bts-sweep { to { transform: rotate(360deg); } }

/* ---------- 面板 ---------- */
.bts-panel { margin-top: 18px; border: 1px solid var(--bts-line); border-radius: 3px; background: var(--bts-card); overflow: hidden; }
.bts-topbar { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--bts-line); background: var(--bts-sea-soft); }
.bts-metric { padding: 11px 15px; border-right: 1px dashed var(--bts-line); }
.bts-metric:last-child { border-right: 0; }
.bts-metric span { display: block; font-size: 11px; color: var(--bts-ink2); }
.bts-metric b { font: 800 19px var(--bts-num); color: var(--bts-navy); }
.bts-main { display: grid; grid-template-columns: minmax(0, 1fr) 300px; }
.bts-chart-area { min-width: 0; padding: 18px; }
.bts-chart-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 12px; font-size: 13px; color: var(--bts-ink2); }
.bts-chart-head b { color: var(--bts-ink); }
.bts-chart { display: grid; grid-template-columns: 26px repeat(10, minmax(0, 1fr)); gap: 2px; max-width: 520px; }
.bts-axis { display: grid; place-items: center; aspect-ratio: 1; font: 700 11px var(--bts-num); color: var(--bts-ink2); }
.bts-cell { aspect-ratio: 1; min-width: 0; border: 1px solid var(--bts-line); border-radius: 2px; background: var(--bts-card2); display: grid; place-items: center; font: 700 12px var(--bts-num); color: var(--bts-ink2); cursor: pointer; padding: 0; }
.bts-cell:hover { background: var(--bts-sea-soft); }
.bts-cell.miss { background: rgba(43, 131, 164, .22); color: var(--bts-sea); cursor: default; }
.bts-cell.hit { background: var(--bts-red); color: #fff; border-color: var(--bts-red); cursor: default; }
.bts-cell.sunk { background: #7e2b21; color: #ffd9d0; cursor: default; }
.bts-fire { margin-top: 16px; padding: 14px; border: 1px dashed var(--bts-line); border-radius: 3px; background: var(--bts-card2); }
.bts-l { display: block; margin-bottom: 6px; font-size: 12px; color: var(--bts-ink2); }
.bts-input { width: 100%; min-width: 0; border: 1px solid var(--bts-line); border-radius: 3px; padding: 9px 10px; background: var(--bts-card); color: var(--bts-ink); font: 14px var(--bts-num); text-transform: uppercase; }
.bts-input:focus { outline: 2px solid var(--bts-sea); outline-offset: 1px; }
.bts-inline { display: flex; gap: 8px; }
.bts-inline .bts-input { flex: 1; }
.bts-validate, .bts-check { min-height: 20px; margin: 6px 0 0; font-size: 12px; color: var(--bts-red); white-space: pre-wrap; }

/* ---------- 侧栏 ---------- */
.bts-side { min-width: 0; padding: 18px; border-left: 1px solid var(--bts-line); background: var(--bts-card2); }
.bts-side-title { margin: 0 0 10px; font: 800 13px var(--bts-num); letter-spacing: .08em; color: var(--bts-navy); border-bottom: 2px solid var(--bts-line); padding-bottom: 5px; }
.bts-side-title:not(:first-child) { margin-top: 20px; }
.bts-fleet { font: 12px/2 var(--bts-num); }
.bts-fleet div { display: flex; justify-content: space-between; border-bottom: 1px dotted var(--bts-line); }
.bts-fleet div.is-sunk { color: var(--bts-red); text-decoration: line-through; }
.bts-dim { color: var(--bts-ink2); font-size: 12px; }
.bts-own { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; }
.bts-own i { aspect-ratio: 1; border: 1px solid var(--bts-line); border-radius: 2px; background: var(--bts-card); }
.bts-own i.ship { background: var(--bts-navy); border-color: var(--bts-navy); }
.bts-row { display: flex; gap: 7px; margin-top: 9px; flex-wrap: wrap; }
.bts-log { margin: 0; padding-left: 18px; max-height: 120px; overflow: auto; font: 11px/1.8 var(--bts-num); color: var(--bts-ink2); }

/* ---------- 实验室 ---------- */
.bts-lab { margin-top: 18px; padding: 22px; border: 1px solid var(--bts-line); border-radius: 3px; background: var(--bts-card); }
.bts-lab-head h2 { margin: 0 0 4px; font: 800 19px var(--bts-num); }
.bts-lab-head p { margin: 0 0 16px; font-size: 13px; color: var(--bts-ink2); }
.bts-lab-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bts-lab-box { min-width: 0; padding: 16px; border: 1px dashed var(--bts-line); background: var(--bts-card2); }
.bts-lab-box label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 700; }
.bts-ta { width: 100%; min-width: 0; border: 1px solid var(--bts-line); border-radius: 3px; padding: 8px; background: var(--bts-card); color: var(--bts-ink); font: 12px/1.6 var(--bts-num); resize: vertical; }
.bts-batch { margin-top: 10px; font: 12px/1.9 var(--bts-num); white-space: pre-wrap; color: var(--bts-navy); }
.bts-lab-note { margin: 10px 0 0; font-size: 12px; color: var(--bts-ink2); }
.bts-lab-note code { font-family: var(--bts-num); }

/* ---------- 弹窗 / toast ---------- */
.bts-modal { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(8, 28, 40, .68); }
.bts-modal[hidden] { display: none !important; }
.bts-modal-box { position: relative; width: min(410px, 100%); padding: 28px; border: 2px solid var(--bts-sea); border-radius: 4px; background: var(--bts-card); text-align: center; }
.bts-modal-x { position: absolute; right: 12px; top: 6px; border: 0; background: transparent; font-size: 25px; color: var(--bts-ink2); cursor: pointer; }
.bts-modal-badge { font: 800 11px var(--bts-num); letter-spacing: .2em; color: var(--bts-red); }
.bts-modal-box h2 { margin: 10px 0 6px; font: 800 24px var(--bts-num); }
.bts-modal-box p { margin: 0 0 14px; color: var(--bts-ink2); font-size: 13px; }
.bts-modal-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 18px; font: 12px var(--bts-num); }
.bts-modal-stats div { padding: 9px 2px; border: 1px solid var(--bts-line); }
.bts-modal-stats b { display: block; font-size: 18px; color: var(--bts-red); }
.bts-toast { position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 9500; padding: 10px 18px; background: var(--bts-ink); color: var(--bts-card); font: 13px var(--bts-num); opacity: 0; pointer-events: none; transition: opacity .25s; }
.bts-toast.on { opacity: 1; }

@media (max-width: 940px) {
    .bts-hero { grid-template-columns: 1fr; }
    .bts-radar { display: none; }
    .bts-main { grid-template-columns: 1fr; }
    .bts-side { border-left: 0; border-top: 1px solid var(--bts-line); }
    .bts-lab-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .bts-topbar { grid-template-columns: repeat(2, 1fr); }
    .bts-metric:nth-child(2) { border-right: 0; }
    .bts-chart { grid-template-columns: 18px repeat(10, minmax(0, 1fr)); gap: 1px; }
    .bts-axis { font-size: 8px; }
    .bts-cell { font-size: 8px; }
    .bts-hero h1 { font-size: 27px; }
}