/* 房号卡片和 /rooms 页（rooms.js 渲染）。颜色全用 styles.css 的变量：浅色蓝白、深色深蓝铜金，换主题不用改这里；
   只有甲板图那一块是固定的：官方图是白底，所以放在浅色衬底上，标记色用固定的红，深浅两种主题下都醒目。
   依赖 styles.css（配色变量、.btn、弹窗外壳），所以 /rooms 页要先加载 styles.css 再加载本文件。 */

.rl-host { display: block; }
.rl-loading { display: flex; align-items: center; justify-content: center; min-height: 140px; color: var(--muted, #737D8E); font-size: 12.5px; }
.rl-prompt { color: var(--muted, #737D8E); font-size: 13px; padding: 20px 2px; }

/* ───────── 卡片 ───────── */
.rl-card { border: 1px solid var(--line-soft, rgba(27,37,54,.09)); border-radius: 10px; padding: 16px 18px 14px; background: var(--panel-2, #F5F6F8); color: var(--text, #1B2536); min-width: 0; }
.rl-head { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; }
.rl-no { padding: 6px 16px 7px; border: 1px dashed var(--line, rgba(47,111,181,.28)); border-radius: 8px; background: var(--brass-dim, rgba(47,111,181,.1)); }
.rl-no small { display: block; font-size: 9.5px; letter-spacing: .22em; color: var(--muted, #737D8E); }
.rl-no b { display: block; font: 600 28px/1.15 var(--mono, monospace); letter-spacing: .04em; color: var(--brass-2, #245A96); }
.rl-ship-name b { display: block; font: 600 17px/1.25 var(--serif, serif); letter-spacing: .03em; }
.rl-ship-name small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted, #737D8E); letter-spacing: .04em; }
.rl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.rl-tier, .rl-flag { display: inline-block; padding: 2px 10px; border: 1px solid var(--line, rgba(47,111,181,.28)); border-radius: 999px; font-size: 11.5px; color: var(--text-2, #3D4859); white-space: nowrap; }
.rl-tier-con { color: var(--brass-2, #245A96); }
.rl-tier-ver { color: var(--ok, #245A96); }
.rl-tier-ocn { color: var(--info, #245A96); }
.rl-flag.rl-live { color: var(--ok, #245A96); }

.rl-cat { margin-top: 14px; font-size: 14.5px; line-height: 1.5; }
.rl-cat b { color: var(--brass-2, #245A96); margin-right: 4px; }
.rl-cat small { display: block; margin-top: 2px; color: var(--muted, #737D8E); font-size: 11.5px; }

.rl-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0 18px; margin-top: 10px; }
.rl-fact { padding: 9px 0 8px; border-top: 1px solid var(--line-soft, rgba(27,37,54,.09)); min-width: 0; }
.rl-fact dt { font-size: 11px; letter-spacing: .08em; color: var(--muted, #737D8E); }
.rl-fact dd { margin-top: 3px; font-size: 13.5px; line-height: 1.55; overflow-wrap: anywhere; }
.rl-official { display: inline-block; margin-left: 6px; padding: 0 5px; border: 1px solid var(--line, rgba(47,111,181,.28)); border-radius: 3px; font: normal 10px/1.5 var(--sans, sans-serif); letter-spacing: .06em; color: var(--brass-2, #245A96); vertical-align: 1px; }
.rl-diff, .rl-hint, .rl-tag { font-size: 11px; line-height: 1.5; }
.rl-diff { display: block; margin-top: 2px; color: var(--warn, #2F6FB5); }
.rl-hint { display: block; margin-top: 2px; color: var(--muted, #737D8E); }
.rl-tag { color: var(--muted, #737D8E); }
.rl-third { display: inline-flex; gap: 2px; margin-left: 6px; vertical-align: -1px; }
.rl-third i { display: grid; place-items: center; width: 16px; height: 16px; border: 1px solid var(--line, rgba(47,111,181,.28)); border-radius: 3px; font: normal 10px/1 var(--sans, sans-serif); color: var(--muted, #737D8E); }
.rl-third i.on { background: var(--brass, #2F6FB5); border-color: var(--brass, #2F6FB5); color: var(--ink, #fff); }

/* ───────── 甲板图 ───────── */
.rl-deck { margin: 14px 0 0; }
.rl-deck-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; min-height: 26px; }
.rl-deck-bar b { font-size: 12.5px; font-weight: 600; letter-spacing: .02em; }
.rl-zoom { padding: 3px 11px; border: 1px solid var(--line, rgba(47,111,181,.28)); border-radius: 6px; font-size: 11.5px; color: var(--text-2, #3D4859); }
.rl-zoom:hover { border-color: var(--brass, #2F6FB5); color: var(--brass-2, #245A96); }
.rl-zoom[hidden] { display: none; }
.rl-stage { width: fit-content; overflow-x: auto; overflow-y: hidden; max-width: 100%; border: 1px solid var(--line, rgba(47,111,181,.28)); border-radius: 8px; background: #F7F4EC; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; min-height: 60px; }
.rl-stage:focus-visible { outline: 2px solid var(--brass, #2F6FB5); outline-offset: 2px; }
/* styles.css 给所有 svg 设了图标用的 1.1em 宽高和描边，这里要全部改回来；宽高由 rooms.js 按缩放写在 style 里 */
.rl-svg { display: block; max-width: none; flex: none; vertical-align: top; stroke: none; stroke-width: 1; }
.rl-svg image { image-rendering: auto; }
.rl-other { fill: rgba(47,111,181,.26); stroke: rgba(47,111,181,.8); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rl-halo { fill: none; stroke: #fff; stroke-width: 7; vector-effect: non-scaling-stroke; }
.rl-hit { fill: rgba(225,29,72,.16); stroke: #E11D48; stroke-width: 3; vector-effect: non-scaling-stroke; animation: rl-pulse 1.8s ease-in-out infinite; }
.rl-pin rect { fill: #E11D48; }
.rl-pin text { fill: #fff; stroke: none; font-family: var(--mono, monospace); font-weight: 600; letter-spacing: .02em; }
@keyframes rl-pulse { 50% { fill-opacity: .32; stroke-opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .rl-hit { animation: none; } }
.rl-deck figcaption { margin-top: 8px; font-size: 11.5px; line-height: 1.75; color: var(--muted, #737D8E); }
.rl-key { display: inline-block; margin-right: 8px; white-space: nowrap; }
.rl-key i { display: inline-block; width: 13px; height: 10px; margin: 0 4px 0 0; vertical-align: -1px; border-radius: 2px; }
.rl-key i + i { margin-left: 10px; }
.rl-key-hit { background: rgba(225,29,72,.18); border: 2px solid #E11D48; }
.rl-key-other { background: rgba(47,111,181,.26); border: 1px solid rgba(47,111,181,.8); }

.rl-warn { margin-top: 12px; padding: 8px 12px; border-left: 3px solid var(--warn, #2F6FB5); border-radius: 0 6px 6px 0; background: var(--brass-dim, rgba(47,111,181,.1)); font-size: 12.5px; line-height: 1.6; color: var(--text, #1B2536); }
.rl-gap { margin-top: 10px; font-size: 12px; line-height: 1.7; color: var(--text-2, #3D4859); }
.rl-gap summary { cursor: pointer; color: var(--brass-2, #245A96); }
.rl-gap p { margin-top: 6px; color: var(--muted, #737D8E); }
.rl-foot { margin-top: 12px; font-size: 11.5px; line-height: 1.7; color: var(--muted, #737D8E); }
.rl-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft, rgba(27,37,54,.09)); }

.rl-miss-text b { display: block; font: 600 16px/1.5 var(--serif, serif); }
.rl-miss-text small { display: block; margin-top: 4px; font-size: 12px; color: var(--muted, #737D8E); }
.rl-miss .rl-head + .rl-miss-text { margin-top: 14px; }
.rl-miss .rl-facts { margin-top: 12px; }

/* ───────── 首页弹窗里的房号链接 ───────── */
.room-link { padding: 1px 2px; font: inherit; color: var(--brass-2, #245A96); border-bottom: 1px dotted currentColor; border-radius: 2px; }
.room-link:hover { color: var(--brass, #2F6FB5); border-bottom-style: solid; }
.room-link:focus-visible { outline: 2px solid var(--brass, #2F6FB5); outline-offset: 2px; }
.room-dialog { width: min(760px, calc(100vw - 28px)); }
.room-dialog .dialog-content { padding: 16px 20px 20px; }
@media (max-width: 600px) { .room-dialog .dialog-content { padding: 12px 12px 16px; } .rl-card { padding: 14px 14px 12px; } .rl-no b { font-size: 24px; } .rl-chips { margin-left: 0; } }

/* ───────── /rooms 页 ───────── */
.rl-page { max-width: 900px; }
.rl-form { display: grid; gap: 22px; }
.rl-ships { border: 0; min-width: 0; }
.rl-ships legend, .rl-ask label { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13.5px; font-weight: 600; }
.rl-ships legend i, .rl-ask label i { display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--brass, #2F6FB5); border-radius: 50%; font: normal 11px/1 var(--mono, monospace); color: var(--brass-2, #245A96); }
.rl-ship-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 8px; }
.rl-ship { position: relative; padding: 10px 12px 9px; border: 1px solid var(--line-soft, rgba(27,37,54,.09)); border-radius: 10px; background: var(--panel, #fff); color: var(--text, #1B2536); text-align: left; transition: .15s; }
.rl-ship b { display: block; font: 600 15px/1.3 var(--serif, serif); letter-spacing: .03em; }
.rl-ship small { display: block; margin-top: 1px; font-size: 11px; color: var(--muted, #737D8E); }
.rl-ship em { display: block; margin-top: 3px; font: normal 10.5px/1.3 var(--sans, sans-serif); letter-spacing: .06em; color: var(--muted, #737D8E); }
.rl-ship:hover:not(:disabled) { border-color: var(--line, rgba(47,111,181,.28)); }
.rl-ship[aria-pressed="true"] { border-color: var(--brass, #2F6FB5); background: var(--brass-dim, rgba(47,111,181,.1)); box-shadow: inset 3px 0 0 var(--brass, #2F6FB5); }
.rl-ship:disabled { opacity: .6; cursor: not-allowed; }
.rl-ask-row { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.rl-input { width: min(100%, 240px); padding: 9px 12px; font: 500 18px/1.3 var(--mono, monospace); letter-spacing: .1em; }
.rl-ask-hint { margin-top: 8px; font-size: 12px; line-height: 1.6; color: var(--muted, #737D8E); }
.rl-result { margin-top: 20px; }
.rl-notes { margin-top: 26px; border: 1px dashed var(--line, rgba(47,111,181,.28)); border-radius: 8px; padding: 0 14px; font-size: 12.5px; }
.rl-notes summary { cursor: pointer; padding: 11px 0; color: var(--text-2, #3D4859); }
.rl-notes summary:hover { color: var(--brass-2, #245A96); }
.rl-notes-body { padding: 0 0 12px; line-height: 1.8; color: var(--text-2, #3D4859); }
.rl-notes-body h4 { margin: 4px 0 4px; font: 600 14px/1.4 var(--serif, serif); color: var(--text, #1B2536); }
.rl-notes-body p { margin-top: 6px; }
.rl-notes-body ul { margin: 8px 0 0; padding-left: 18px; }
.rl-notes-body li { margin-top: 6px; color: var(--muted, #737D8E); }

/* ───────── 深色：卡片靠变量自动换色，这里只补对比 ───────── */
body:not(.light) .rl-card { background: var(--panel-2, #182C48); }
body:not(.light) .rl-no { background: rgba(201,164,92,.1); }
body:not(.light) .rl-stage { border-color: rgba(201,164,92,.35); box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
body:not(.light) .rl-ship { background: var(--panel, #12213A); }
body:not(.light) .rl-ship[aria-pressed="true"] { background: var(--brass-dim, rgba(201,164,92,.12)); }
body:not(.light) .rl-third i.on { color: #1A1406; }