/* 方舟像素字体 Ark Pixel Font 12px（OFL 授权，见 fonts/ark-pixel-OFL.txt）。像素字体只在 12 的整数倍字号下清晰 */
@font-face { font-family: "Ark Pixel"; src: url("../../fonts/ark-pixel-12px-proportional-zh_hans.otf.woff2") format("woff2"); font-display: block; }
:root { --ink: #050c0b; --muted: #9cc4b2; --paper: #0e4c45; --red: #e8462e; --gold: #e8bc48; --pale: #f4f0dc; }
* { box-sizing: border-box; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
html, body { height: 100%; margin: 0; background: var(--paper); color: var(--pale); overflow: hidden; touch-action: none; }
body { font: 12px/16px "Ark Pixel", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", ui-monospace, monospace; -webkit-font-smoothing: none; font-smooth: never; text-rendering: optimizeSpeed; }
b, h1, h2, strong { font-weight: normal; } /* 像素字体不要合成粗体，会糊 */
#combo, #toast span, #relics { text-shadow: 1px 0 0 var(--ink), -1px 0 0 var(--ink), 0 1px 0 var(--ink), 0 -1px 0 var(--ink), 1px 1px 0 var(--ink); }
#stage { position: fixed; inset: 0; display: grid; place-items: center; }
canvas { display: block; image-rendering: pixelated; touch-action: none; }
img.ico { width: 16px; height: 16px; image-rendering: pixelated; vertical-align: middle; }
/* 像素九宫格边框 */
#left, #mid, #tip, #toast b, #relicnote, #settings select { border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 9 9' shape-rendering='crispEdges'%3E%3Cpath fill='%23050c0b' d='M1 0H8V1H9V8H8V9H1V8H0V1H1Z'/%3E%3Cpath fill='%230d2622' d='M1 1H8V8H1Z'/%3E%3Cpath fill='%231f4a40' d='M1 1H8V2H1Z'/%3E%3Cpath fill='%23081a17' d='M1 7H8V8H1Z'/%3E%3C/svg%3E") 3 fill / 6px / 0 stretch; border-style: solid; background: none; }
#overlay, #pause, #settings, #dailybox .panel, #menu .drawer, #menu .nav { border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 9 9' shape-rendering='crispEdges'%3E%3Cpath fill='%233a2608' d='M1 0H8V1H9V8H8V9H1V8H0V1H1Z'/%3E%3Cpath fill='%230d2622' d='M1 1H8V8H1Z'/%3E%3Cpath fill='%23e8bc48' d='M1 1H8V2H1Z'/%3E%3Cpath fill='%23081a17' d='M1 7H8V8H1Z'/%3E%3C/svg%3E") 3 fill / 6px / 0 stretch; border-style: solid; background: none; }
.btns button, #menu .go, #menu .buy { border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 9 9' shape-rendering='crispEdges'%3E%3Cpath fill='%232a1806' d='M1 0H8V1H9V8H8V9H1V8H0V1H1Z'/%3E%3Cpath fill='%23e8bc48' d='M1 1H8V8H1Z'/%3E%3Cpath fill='%23fff2b0' d='M1 1H8V2H1Z'/%3E%3Cpath fill='%23a8741c' d='M1 7H8V8H1Z'/%3E%3C/svg%3E") 3 fill / 6px / 0 stretch; border-style: solid; background: none; color: #1a1206; }
.btns button:active, #menu .go:active, #menu .buy:active { border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 9 9' shape-rendering='crispEdges'%3E%3Cpath fill='%232a1806' d='M1 0H8V1H9V8H8V9H1V8H0V1H1Z'/%3E%3Cpath fill='%23c9982e' d='M1 1H8V8H1Z'/%3E%3Cpath fill='%23a8741c' d='M1 1H8V2H1Z'/%3E%3Cpath fill='%23e8bc48' d='M1 7H8V8H1Z'/%3E%3C/svg%3E") 3 fill / 6px / 0 stretch; border-style: solid; transform: translateY(1px); }
.btns button + button, #settings .seg button, #menu .buy.alt, #menu .buy.poor, #boostbtn, #wskills button, #menu .settings-btn, #menu .nav button, #menu .achbtn, .pager .pg, #pausebtn, #mute , #cards .reroll { border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 9 9' shape-rendering='crispEdges'%3E%3Cpath fill='%23050c0b' d='M1 0H8V1H9V8H8V9H1V8H0V1H1Z'/%3E%3Cpath fill='%23183a33' d='M1 1H8V8H1Z'/%3E%3Cpath fill='%232f6658' d='M1 1H8V2H1Z'/%3E%3Cpath fill='%230c2420' d='M1 7H8V8H1Z'/%3E%3C/svg%3E") 3 fill / 6px / 0 stretch; border-style: solid; background: none; color: var(--pale); }
.card, #menu .tile { border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 9 9' shape-rendering='crispEdges'%3E%3Cpath fill='%23050c0b' d='M1 0H8V1H9V8H8V9H1V8H0V1H1Z'/%3E%3Cpath fill='%23112e29' d='M1 1H8V8H1Z'/%3E%3Cpath fill='%232a5a4c' d='M1 1H8V2H1Z'/%3E%3Cpath fill='%230a1f1b' d='M1 7H8V8H1Z'/%3E%3C/svg%3E") 3 fill / 6px / 0 stretch; border-style: solid; background: none; }
.card:hover, .card:focus-visible, #menu .tile.cur, #menu .nav button.on, #settings .seg button.on { border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 9 9' shape-rendering='crispEdges'%3E%3Cpath fill='%23e8bc48' d='M1 0H8V1H9V8H8V9H1V8H0V1H1Z'/%3E%3Cpath fill='%23163a33' d='M1 1H8V8H1Z'/%3E%3Cpath fill='%233a7262' d='M1 1H8V2H1Z'/%3E%3Cpath fill='%230a1f1b' d='M1 7H8V8H1Z'/%3E%3C/svg%3E") 3 fill / 6px / 0 stretch; border-style: solid; }
.card.relic { border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 9 9' shape-rendering='crispEdges'%3E%3Cpath fill='%23c98cff' d='M1 0H8V1H9V8H8V9H1V8H0V1H1Z'/%3E%3Cpath fill='%2324183a' d='M1 1H8V8H1Z'/%3E%3Cpath fill='%234a3470' d='M1 1H8V2H1Z'/%3E%3Cpath fill='%23140c22' d='M1 7H8V8H1Z'/%3E%3C/svg%3E") 3 fill / 6px / 0 stretch; border-style: solid; } .card.branch { border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 9 9' shape-rendering='crispEdges'%3E%3Cpath fill='%23ff9d6b' d='M1 0H8V1H9V8H8V9H1V8H0V1H1Z'/%3E%3Cpath fill='%232e1e14' d='M1 1H8V8H1Z'/%3E%3Cpath fill='%236a4028' d='M1 1H8V2H1Z'/%3E%3Cpath fill='%231a100a' d='M1 7H8V8H1Z'/%3E%3C/svg%3E") 3 fill / 6px / 0 stretch; border-style: solid; }
.bar { border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 9 9' shape-rendering='crispEdges'%3E%3Cpath fill='%23050c0b' d='M1 0H8V1H9V8H8V9H1V8H0V1H1Z'/%3E%3Cpath fill='%231b2a27' d='M1 1H8V8H1Z'/%3E%3Cpath fill='%231b2a27' d='M1 1H8V2H1Z'/%3E%3Cpath fill='%231b2a27' d='M1 7H8V8H1Z'/%3E%3C/svg%3E") 3 fill / 6px / 0 stretch; border-style: solid; background: none; }
button { font: inherit; cursor: pointer; outline: none; white-space: nowrap; }
button:disabled { opacity: .4; cursor: default; }

#hud { visibility: hidden; position: fixed; top: max(6px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right));
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 4px 10px; pointer-events: none; }
#left, #mid { padding: 0 8px; height: 40px; } /* HUD 三块统一 40 高，内容垂直居中 */
/* 左上：两行对齐。第一行 船型 | 血条 | 血量，第二行 加速 | 加速槽 | 船长技能 */
#left { display: grid; grid-template-columns: auto 84px minmax(34px, auto); align-items: center; align-content: center; gap: 2px 6px; justify-self: start; }
#left .bar { width: auto; }
#evs { justify-self: center; color: #ffd27a; white-space: nowrap; }
#tier { color: var(--gold); white-space: nowrap; }
.bar { position: relative; height: 12px; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(var(--hi, #fff2b0) 0 2px, var(--fill, var(--gold)) 2px calc(100% - 2px), var(--lo, #a8741c) calc(100% - 2px)); }
.bar.boss i, #hpbar i { --hi: #ff9a80; --fill: var(--red); --lo: #9a2a1a; }
.bar.boss.open i { --hi: #fff0b0; --fill: var(--gold); --lo: #9a6a1a; } /* 海怪露出破绽 */
#hpbar { width: 84px; }
#hplag { position: absolute; left: 0; top: 0; bottom: 0; background: #fff1d6; } /* 掉血残影 */
#hpbar.hurt { animation: hpshake .25s steps(5); } @keyframes hpshake { 20% { transform: translate(-2px, 1px); } 40% { transform: translate(2px, -1px); } 60% { transform: translate(-1px, 0); } 80% { transform: translate(1px, 1px); } }
#hpbar.heal i { --hi: #d4ffd8; --fill: #4fd27a; --lo: #1f7a40; } /* 回血 */
.bar.gain i { filter: brightness(1.6); } /* 经验条：大箱子给了经验 */
#hpbar.low i { animation: hplow .5s steps(2) infinite; } #hpbar.low.calm i { animation: none; --hi: #ffd0c0; --fill: #ff5a3a; }
@keyframes hplow { 50% { --fill: #ffb0a0; filter: brightness(1.8); } }
#hptext { color: var(--muted); font-variant-numeric: tabular-nums; }
/* 血量下面一排异常状态（燃烧、结霜 / 冻住、触电）：图标 + 底下一道细条（剩下的时间、寒意） */
#stv { display: flex; gap: 2px; height: 16px; align-items: center; }
#stv span { position: relative; width: 16px; height: 16px; }
#stv img { display: block; width: 16px; height: 16px; image-rendering: pixelated; }
#stv b { position: absolute; left: 1px; bottom: 0; height: 2px; box-shadow: 0 0 0 1px var(--ink); }
#stv .burn b { background: #ff963c; } #stv .chill b, #stv .frozen b { background: #aae2ff; } #stv .shock b { background: #fff08a; } #stv .poison b { background: #96dc50; }
#mid { display: grid; gap: 2px; justify-items: center; align-content: center; }
#goal { color: var(--pale); white-space: nowrap; }
#bar { width: min(240px, 32vw); }
#right { justify-self: end; display: flex; gap: 4px; align-items: center; }
#combo { color: var(--gold); font-size: 12px; transition: transform .1s; transform-origin: right center; }
#combo.pop { transform: translateY(-2px); } /* 像素字只在 12 的整数倍下清晰：连杀跳一下，不按 1.3 倍放大 */
#combo.mile { font-size: 24px; color: #fff; } /* 每 25 连杀停半秒：字号整 2 倍（原来 scale 1.7） */
#pausebtn, #mute { pointer-events: auto; padding: 0 10px; height: 40px; }
/* 加速槽：和血条同样式。满了亮青色，加速中亮青色往下掉，回复中暗蓝，耗空锁住时暗红 */
#dash { display: contents; white-space: nowrap; }
#dash b { font-weight: normal; color: var(--muted); }
#dashbar i { --hi: #8fb6d6; --fill: #3a6f98; --lo: #24486a; }
#dash.ready b { color: #bfe9ff; }
#dash.ready #dashbar i, #dash.use #dashbar i { --hi: #e6fbff; --fill: #5fd4ff; --lo: #2a8ab8; }
#dash.use b { color: #fff; } #dash.cd #dashbar i { --hi: #d08a8a; --fill: #8a3a3a; --lo: #5a2424; }
/* 手机上转向选「跟随手指」时的加速按钮：右下角，技能区正下方，按住加速。摇杆模式没有这个按钮 */
#boostbtn { position: fixed; right: calc(max(8px, env(safe-area-inset-right)) + 20px); bottom: max(8px, env(safe-area-inset-bottom)); width: 72px; height: 44px; z-index: 4; color: var(--pale); touch-action: none; }
#boostbtn span { position: relative; }
#boostbtn i { position: absolute; left: 3px; top: 3px; bottom: 3px; background: rgba(95, 212, 255, .32); pointer-events: none; } /* 加速槽 */
#boostbtn.lock i { background: rgba(232, 70, 46, .35); }
#boostbtn.on { color: #bfe9ff; box-shadow: 0 0 0 3px rgba(191, 233, 255, .85); }
#boostbtn[hidden] { display: none; }
/* 主动技能。电脑：屏幕下方正中一排快捷栏，右下角标按键。手机：围着右下角的加速按钮摆，右手拇指够得到（docs/controls.md）。
   按钮 48×48，图标 16×16 放大 2 倍；冷却时压一层暗色，中间写还剩几秒 */
#wskills { position: fixed; left: 0; right: 0; margin-left: auto; margin-right: auto; width: -webkit-fit-content; width: fit-content; bottom: max(8px, env(safe-area-inset-bottom)); display: flex; gap: 4px; z-index: 4; }
#wskills[hidden] { display: none; }
#wskills button { position: relative; width: 48px; height: 48px; padding: 0; font: inherit; display: grid; place-items: center; color: var(--muted); touch-action: none; overflow: hidden; }
#wskills button img { width: 32px; height: 32px; image-rendering: pixelated; }
#wskills button i { position: absolute; left: 3px; right: 3px; top: 3px; background: rgba(5, 12, 11, .62); pointer-events: none; }
#wskills button em { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-size: 12px; line-height: 12px; color: var(--pale); text-shadow: 1px 0 var(--ink), -1px 0 var(--ink), 0 1px var(--ink), 0 -1px var(--ink); pointer-events: none; }
#wskills button u { position: absolute; right: 3px; bottom: 3px; padding: 0 2px; text-decoration: none; font-size: 12px; line-height: 12px; color: var(--pale); background: rgba(5, 12, 11, .78); }
html:not(.touch) #wskills .cap { margin-right: 8px; }
#wskills button.ready { box-shadow: inset 0 0 0 2px rgba(255, 210, 122, .6); }
#wskills button.back { box-shadow: 0 0 0 3px #ffe9a8; } /* 刚冷却好，亮一下 */
#wskills button.fire { box-shadow: 0 0 0 3px #fff; } /* 亮框画在按钮外面：手指盖住按钮也看得见按到了 */
#wskills button.cd img { filter: saturate(.5) brightness(.8); }
#wskills button.deny img { animation: wsDeny .18s steps(4); } /* 还在冷却：图标抖一下 */
@keyframes wsDeny { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
/* 手机：照激战峡谷的右手区。第一件武器在中间最大，后装的从左下到正上绕着它排一弧，船长技能小一号贴在右上（召唤师技能的位置） */
.touch #wskills { left: auto; right: calc(max(8px, env(safe-area-inset-right)) + 20px); bottom: calc(max(8px, env(safe-area-inset-bottom)) + 48px); width: 72px; height: 72px; transform: none; display: block; }
.touch #wskills[hidden] { display: none; }
.touch #wskills, .touch #boostbtn { zoom: 1; } /* 手指不会随屏幕变大：平板上按钮大小和拇指移动距离都和手机一样 */
.touch #wskills::before { content: ''; position: absolute; left: -70px; top: -68px; width: 170px; height: 196px; } /* 这一片按偏了不算转向，也不算第二根手指加速 */
.touch #wskills button { position: absolute; left: 12px; top: 12px; background: rgba(10, 28, 25, .62); }
.touch #wskills button em { font-size: 24px; line-height: 24px; } /* 拿远看也要认得出还剩几秒 */
.touch #wskills button.aim { box-shadow: 0 0 0 3px #ffd60a; }
.touch #wskills .s0 { left: 0; top: 0; width: 72px; height: 72px; }
.touch #wskills .s0 img { width: 48px; height: 48px; }
.touch #wskills .s1 { transform: translate(-72px, 27px); }
.touch #wskills .s2 { transform: translate(-74px, -27px); }
.touch #wskills .s3 { transform: translate(-22px, -72px); }
.touch #wskills .cap { left: 14px; top: 14px; width: 44px; height: 44px; transform: translate(32px, -64px); }
.touch #wskills .aimx { position: absolute; right: -20px; top: -84px; padding: 4px 6px; font-weight: normal; font-size: 12px; line-height: 12px; white-space: nowrap; color: #fff; background: #a8321e; }
.touch #wskills .aimx[hidden] { display: none; }
#dash.off { display: none; }
#relics { display: flex; flex-wrap: wrap; gap: 2px; max-width: 200px; } /* 宝物图标：血条下面单独一行 */
#relics .crew { display: inline-flex; align-items: center; gap: 2px; margin-left: 2px; font-size: 12px; line-height: 16px; color: #ffd27a; white-space: nowrap; } /* 救起的船员：救生圈和本局伤害加成 */
#combo { justify-self: end; }
#dailybox { position: fixed; inset: 0; z-index: 9; display: grid; place-items: center; background: rgba(4, 14, 12, .6); } #dailybox[hidden] { display: none; }
#dailybox .panel { width: min(460px, calc(100vw - 32px)); padding: 12px 16px; display: grid; gap: 8px; }
#dailybox h2 { margin: 0; font-size: 24px; line-height: 28px; font-weight: normal; color: var(--gold); text-shadow: 2px 2px 0 var(--ink); letter-spacing: .1em; display: flex; align-items: baseline; justify-content: space-between; }
#dailybox h2 small { font-size: 12px; line-height: 16px; color: var(--pale); letter-spacing: 0; text-shadow: none; }
#dailybox .dbody { display: grid; grid-template-columns: 144px minmax(0, 1fr); gap: 12px; align-items: stretch; }
#dailybox .thumb { display: block; min-height: 84px; background: center / cover no-repeat; image-rendering: pixelated; border: 2px solid var(--ink); }
#dailybox dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px; align-content: center; }
#dailybox dt { color: var(--muted); } #dailybox dd { margin: 0; color: var(--pale); display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; } #dailybox dd.best { color: var(--gold); }
#dailybox .mods { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; color: var(--pale); } #dailybox .mods b { font-weight: normal; color: #ff9d6b; margin-right: 8px; }
/* 居中一律用 inset + margin:auto（按布局取整到整像素），不用 left:50% + translate(-50%)：宽度是奇数时平移半个像素，像素字和描边糊成两列 */
#pause, #settings { position: fixed; inset: 0; margin: auto; height: -webkit-fit-content; height: fit-content; width: -webkit-fit-content; width: fit-content; z-index: 9; min-width: 260px; padding: 12px 16px; }
#pause[hidden], #settings[hidden], #tip[hidden] { display: none; }
#pause h2, #settings h2 { margin: 0 0 6px; font-size: 24px; line-height: 28px; font-weight: normal; text-shadow: 2px 2px 0 var(--ink); color: var(--gold); text-align: center; letter-spacing: .2em; }
.btns.col { flex-direction: column; } .btns.col button { width: 100%; }
#overlay p.best { color: var(--gold); text-align: center; margin: 0; }
#settings label { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
#settings input[type=range] { flex: 1; min-width: 0; height: 20px; margin: 0; padding: 0 2px; -webkit-appearance: none; appearance: none; background: none; cursor: pointer; }
#settings input[type=range]::-webkit-slider-runnable-track { height: 8px; background: linear-gradient(90deg, var(--gold) var(--v, 50%), #0a1a17 var(--v, 50%)); box-shadow: 0 0 0 2px var(--ink); }
#settings input[type=range]::-moz-range-track { height: 8px; background: linear-gradient(90deg, var(--gold) var(--v, 50%), #0a1a17 var(--v, 50%)); box-shadow: 0 0 0 2px var(--ink); }
#settings input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 20px; margin-top: -6px; background: #fff2b0; box-shadow: 0 0 0 2px var(--ink), inset 0 -3px 0 #a8741c; }
#settings input[type=range]::-moz-range-thumb { width: 10px; height: 20px; border: 0; border-radius: 0; background: #fff2b0; box-shadow: 0 0 0 2px var(--ink), inset 0 -3px 0 #a8741c; }
#settings input[type=checkbox] { -webkit-appearance: none; appearance: none; flex: none; width: 16px; height: 16px; margin: 0; background: #0a1a17 center / 16px no-repeat; image-rendering: pixelated; box-shadow: inset 0 0 0 2px rgba(156, 196, 178, .5); cursor: pointer; }
#settings input[type=checkbox]:checked { background-image: var(--ck); box-shadow: inset 0 0 0 2px rgba(232, 188, 72, .7); }
#settings .btns { margin-top: 10px; }
#settings { max-height: calc(100vh - 20px); overflow: auto; }
#tip { position: fixed; left: 0; right: 0; margin-left: auto; margin-right: auto; width: -webkit-fit-content; width: fit-content; bottom: max(62px, calc(env(safe-area-inset-bottom) + 58px)); padding: 2px 12px; color: var(--pale); z-index: 5; pointer-events: none; white-space: nowrap; animation: tip 1s steps(2) infinite; }
@keyframes tip { 50% { color: var(--gold); } }
/* 结算：背景压暗，面板从下面弹上来，标题砸下来，各项成绩依次亮出，最后是银币和按钮 */
@keyframes ovIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes ovTitle { 0% { opacity: 0; transform: scale(2); } 25% { opacity: 1; transform: scale(2); } 60% { transform: translateY(2px); } 100% { opacity: 1; transform: none; } } /* 砸下来：2 倍 → 往下沉 2 像素 → 原位，逐帧跳（step-end），只用整数倍和整像素（原来 1.8 → 0.94 连续缩放，像素字糊） */
@keyframes ovFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
#overlay { box-shadow: 0 0 0 100vmax rgba(4, 14, 12, .5); animation: ovIn .28s steps(4) both; }
#overlay h1 { animation: ovTitle .4s step-end .12s both; }
#overlay .stats span { animation: ovFade .2s steps(3) both; }
#overlay .stats span:nth-child(1) { animation-delay: .3s; } #overlay .stats span:nth-child(2) { animation-delay: .36s; } #overlay .stats span:nth-child(3) { animation-delay: .42s; }
#overlay .stats span:nth-child(4) { animation-delay: .48s; } #overlay .stats span:nth-child(5) { animation-delay: .54s; } #overlay .stats span:nth-child(6) { animation-delay: .6s; }
#overlay .reward, #overlay .best, #overlay .achs { animation: ovFade .2s steps(3) .72s both; }
#overlay .btns { animation: ovFade .2s steps(3) .85s both; }
@media (prefers-reduced-motion: reduce) { #overlay, #overlay * { animation: none !important; } }
#toast { position: fixed; left: 0; right: 0; margin-left: auto; margin-right: auto; width: -webkit-fit-content; width: fit-content; top: 22%; transform: translateY(-4px); text-align: center; pointer-events: none; opacity: 0; transition: opacity .2s steps(3), transform .2s steps(3); }
#toast.show { opacity: 1; transform: none; }
#toast b { display: inline-block; font-size: 12px; padding: 2px 14px; color: var(--gold); letter-spacing: .1em; }
#toast span { display: block; margin-top: 4px; color: var(--pale); }
#toast span:empty { display: none; }
#overlay { position: fixed; inset: 0; margin: auto; height: -webkit-fit-content; height: fit-content; width: min(420px, calc(100vw - 48px)); padding: 14px 18px; text-align: center; z-index: 7; }
#overlay[hidden] { display: none; }
#overlay h1 { margin: 0 0 8px; font-size: 24px; line-height: 28px; letter-spacing: .15em; color: var(--gold); }
#overlay p { margin: 0 0 10px; line-height: 20px; }
#overlay .reward { color: var(--gold); font-size: 12px; }
#overlay .achs { color: #e4a8ff; }
#cards { position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; background: repeating-linear-gradient(0deg, rgba(4, 14, 12, .62) 0 2px, rgba(4, 14, 12, .5) 2px 4px); z-index: 6; }
#cards[hidden] { display: none; }
#cards h2 { margin: 0; font-size: 24px; line-height: 28px; font-weight: normal; color: var(--gold); letter-spacing: .12em; text-align: center; text-shadow: 2px 2px 0 var(--ink); }
#cards h2 small { font-size: 12px; letter-spacing: 0; color: var(--muted); text-shadow: none; margin-left: 12px; } /* 说明和标题同一行，省出高度 */
#cards .row { display: flex; gap: 8px; max-width: calc(100vw - 24px); }
.card { position: relative; width: 184px; flex: 0 1 auto; min-width: 0; grid-template-columns: minmax(0, 1fr); min-height: 112px; padding: 8px 10px 10px; display: grid; grid-template-rows: auto auto 1fr; align-content: start; gap: 4px; text-align: left; color: var(--pale); }
.card:hover { translate: 0 -2px; } /* 用 translate，不和入场动画的 transform 打架（动画停在最后一帧会盖掉 transform） */
/* 卡片一张接一张从下面弹上来（整像素一格一格地动，不糊）；原来瞬间出现 */
@keyframes cardIn { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
#cards .card { animation: cardIn .2s steps(4, end) both; }
#cards .card:nth-child(2) { animation-delay: .05s; } #cards .card:nth-child(3) { animation-delay: .1s; }
@media (prefers-reduced-motion: reduce) { #cards .card { animation: none; } }
.card .ch { display: flex; gap: 8px; align-items: center; padding-bottom: 4px; border-bottom: 2px solid rgba(156, 196, 178, .2); }
.card .ch .ico, .card .ch .noico { width: 32px; height: 32px; flex: none; } /* 8×8、16×16、32×32 都是整数倍 */

.card .ch div { display: grid; min-width: 0; flex: 1; }
.card i { font-style: normal; font-size: 12px; color: var(--muted); }
.card.evo { border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 9 9' shape-rendering='crispEdges'%3E%3Cpath fill='%23ffd27a' d='M1 0H8V1H9V8H8V9H1V8H0V1H1Z'/%3E%3Cpath fill='%23302408' d='M1 1H8V8H1Z'/%3E%3Cpath fill='%236a5018' d='M1 1H8V2H1Z'/%3E%3Cpath fill='%23181004' d='M1 7H8V8H1Z'/%3E%3C/svg%3E") 3 fill / 6px / 0 stretch; border-style: solid; } .card.evo i, .card.evo b { color: #ffd27a; }
.card.weapon i { color: #ff9d6b; } .card.branch i { color: #ffb48a; } .card.relic i, .card.relic b { color: #e4a8ff; } .card.hull i { color: #8fd0ff; }
.card b { font-size: 24px; line-height: 24px; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card em { font-style: normal; font-size: 12px; color: #9fe0b8; }
.card { white-space: normal; } /* 卡片是按钮，按钮默认不换行；卡片里的说明要换行 */
.card span { font-size: 12px; line-height: 16px; }
.card kbd { margin-left: auto; align-self: flex-start; font: inherit; font-size: 12px; color: var(--muted); }


.btns { display: flex; gap: 8px; justify-content: center; }
.btns button, #menu .go { font-size: 12px; padding: 4px 16px; }
/* 港口首页：船在中间，底部一条操作栏；点入口才拉出左侧抽屉 */
#menu { position: fixed; inset: 0; z-index: 8; pointer-events: none;
  padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  display: grid; grid-template-rows: minmax(0, 1fr); grid-template-columns: auto minmax(300px, 1fr) minmax(200px, 42%); gap: 8px; } /* 左边竖排入口和中间抽屉都是全高；右栏从上到下：游戏名和银币、船、配置、成就、出航 */
#menu[hidden] { display: none; }
#menu > * { pointer-events: auto; }
#menu .top, #menu .launch { margin-left: 16px; } /* 右栏和抽屉之间多空一截（加上格子间距共 24px），不挤在一起 */
#menu .top { grid-row: 1; grid-column: 3; align-self: start; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 6px; min-width: 0; }
/* 港口标题：字标是 port.js 的 logoHTML 用游戏字体现画的（每格 2px，和其他金色标题的像素一样大）。字体没到时先排文字 */
#menu h1 { margin: 0; font-size: 24px; line-height: 28px; font-weight: normal; letter-spacing: .2em; color: var(--gold); text-shadow: 2px 2px 0 var(--ink); white-space: nowrap; }
#menu h1 .logo { display: block; image-rendering: pixelated; width: calc(var(--w) * 2); height: calc(var(--h) * 2); }
#menu .top { container-type: inline-size; }
@container (max-width: 199px) { #menu h1 .logo { width: var(--w); height: var(--h); } } /* 右栏放不下就每格 1px（放大 2 倍的屏幕上仍是整数倍），不按比例缩成非整数倍 */
#menu .brand { display: contents; }
#menu .brand h1 { grid-column: 1 / -1; grid-row: 1; } /* 字标单独一行；银币和成绩并排在下面 */
#menu .silver { display: flex; align-items: center; gap: 4px; } #menu .silver .ico { width: 16px; height: 16px; image-rendering: pixelated; }
#menu .brand small { grid-column: 1; grid-row: 2; font-size: 12px; line-height: 16px; color: var(--muted); white-space: nowrap; overflow: hidden; }
#menu .silver { grid-column: 2; grid-row: 2; justify-self: end; white-space: nowrap; line-height: 16px; } /* 银币在字标下面靠右：和成绩同一行，右边和下面的按钮对齐 */
#menu .silver b { color: var(--gold); }
#menu .nav { grid-row: 1; grid-column: 1; display: flex; flex-direction: column; gap: 4px; min-height: 0; padding: 6px; } /* 左栏是一整条全高的面板，按钮按自己的高度从上往下排，不拉伸；设置在最下面 */
#menu .nav button { flex: 0 1 44px; } #menu .nav .settings-btn { margin-top: auto; }
/* 底部操作栏统一 48 高：入口按钮、配置卡、出航按钮顶边底边都对齐 */
#menu .nav button { display: grid; justify-items: center; align-content: center; gap: 2px; width: 56px; height: 100%; min-height: 0; padding: 0; }
#menu .nav button .ico { width: 16px; height: 16px; }
#menu .launch { grid-row: 1; grid-column: 3; align-self: end; display: grid; grid-template-columns: 1fr 1fr; min-width: 0; } /* 每日挑战和成就并排，比摞起来省一个按钮的高度，都留给船 */
#menu .launch { gap: 6px; } #menu .achbtn { display: flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0; color: var(--pale); } #menu .achbtn b { font-weight: normal; color: var(--gold); } #menu .achbtn.on { color: var(--gold); }
#menu .go.big { grid-column: 1 / -1; font-size: 24px; line-height: 28px; height: 48px; padding: 0; letter-spacing: .3em; }
#menu .drawer { grid-row: 1; grid-column: 2; min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 6px; padding: 8px 10px; }
#menu .drawer header { display: flex; align-items: center; min-height: 28px; }
#menu .drawer h2 small { font-size: 12px; line-height: 16px; color: var(--muted); letter-spacing: 0; }
#menu .drawer h2 { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; margin: 0; font-size: 24px; line-height: 28px; font-weight: normal; color: var(--gold); letter-spacing: .1em; }
#menu .tiles { position: relative; overflow: hidden; min-height: 0; } /* 不滚动：放不下就翻页 */
.pager { display: flex; align-items: center; gap: 6px; color: var(--pale); white-space: nowrap; } .pager[hidden] { display: none; }
.pager .pg { width: 44px; height: 28px; padding: 0; color: var(--gold); } .pager .pg:disabled { color: var(--muted); opacity: .5; } .pager .pg:disabled .ico { filter: grayscale(1); } .pager .pg .ico { display: block; margin: 0 auto; } /* 翻页箭头是 16×16 的图标（icon-art.js 的 UI_ART.prev / next），翻不了时变灰 */
#menu .page { display: grid; gap: 6px; align-content: start; }
#menu .page.in-r { animation: pageR .16s steps(3) both; } #menu .page.in-l { animation: pageL .16s steps(3) both; }
@keyframes pageR { from { transform: translateX(18px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes pageL { from { transform: translateX(-18px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #menu .page { animation: none !important; } }
#menu.open { background: linear-gradient(90deg, rgba(4, 14, 12, .55) 0, rgba(4, 14, 12, .2) 50%, rgba(4, 14, 12, 0) 62%); }
#menu h3 { margin: 0; font-size: 12px; line-height: 16px; font-weight: normal; color: var(--muted); }
#menu .grid { display: grid; gap: 4px; } /* 列数和行高由 fillTiles 按屏幕算 */
/* 格子只放认东西要用的：图、名字、价格。金边是当前选中（cur），金色名字和勾是已经装上或正在用（sel） */
#menu .tile { position: relative; min-width: 0; padding: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; color: var(--pale); cursor: pointer; outline: none; }
#menu .tile b { max-width: 100%; white-space: nowrap; overflow: hidden; }
@media (hover: hover) { #menu .tile[tabindex]:hover { filter: brightness(1.15); } }
#menu .tile .big { width: calc(16px * var(--bigk, 2)); height: calc(16px * var(--bigk, 2)); flex: none; image-rendering: pixelated; }
#menu .tile .st { display: flex; align-items: center; justify-content: center; height: 16px; flex: none; }
#menu .tile.lock .big, #menu .tile.poor .big { filter: grayscale(1) brightness(.8); } /* 还没到手：图标变灰，文字照样看得清 */
#menu .tile.lock b, #menu .tile.poor b { color: var(--muted); }
#menu .tile.sel b, #menu .tile.max b { color: var(--gold); }
#menu .price { display: inline-flex; align-items: center; gap: 2px; color: var(--gold); white-space: nowrap; }
#menu .price.poor { color: #ff9d8a; }
#menu .tile .segs { display: flex; gap: 2px; height: 6px; margin: 2px 0 1px; } /* 等级：一格一级 */
#menu .tile .segs i { flex: 1; background: #0a1a17; box-shadow: inset 0 0 0 1px rgba(156, 196, 178, .35); }
#menu .tile .segs i.on { background: var(--gold); box-shadow: inset 0 -2px 0 #a8741c; }
#menu .tile.rel { padding: 3px 0; } #menu .tile.rel .ck { position: absolute; top: 1px; right: 0; width: 16px; height: 16px; image-rendering: pixelated; }
/* 船、船长、武器、强化是横条：左边图，右边两行字（名字和价格一行，效果一行） */
#menu .tile.ship, #menu .tile.sea, #menu .tile.cap, #menu .tile.wpn, #menu .tile.perm { flex-direction: row; justify-content: flex-start; gap: 6px; padding: 1px 6px; text-align: left; }
#menu .tile .tx { flex: 1; min-width: 0; display: grid; align-content: center; }
#menu .tile .l1 { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-width: 0; height: 16px; }
#menu .tile .fx { line-height: 16px; color: var(--muted); } #menu .tile.cur .fx { color: var(--pale); }
#menu .tile .chips { line-height: 16px; }
#menu .tile.cap .big { width: calc(16px * var(--capk, 2)); height: calc(16px * var(--capk, 2)); }
#menu .tiles.low .tile .chips, #menu .tiles.low .tile .fx { display: none; } #menu .tiles.low .tile:not(.cap) .big, #menu .tiles.thin .tile.wpn .big, #menu .tiles.thin .tile.perm .big { width: 16px; height: 16px; } /* 这一页放不下：效果写到说明区，图标小一档，按 1 倍画（原来 24px 是 1.5 倍，像素宽窄不一） */
#menu .tiles.thin .tile.wpn, #menu .tiles.thin .tile.perm { gap: 4px; padding: 1px 4px; } /* 窄屏两列：一行正好放下 9 个字的说明 */
#menu .tiles.low .tile.ship, #menu .tiles.low .tile.sea { flex-direction: column; justify-content: center; gap: 0; } #menu .tiles.low .tile.ship .tx, #menu .tiles.low .tile.sea .tx { align-self: stretch; }
/* 船坞：船的缩略图、三色涂装 */
#menu .tile.ship .shipimg { display: block; flex: none; width: calc(80px * var(--shipk, 1)); height: calc(52px * var(--shipk, 1)); background: center / 100% 100% no-repeat; image-rendering: pixelated; }
#menu .tile.poor .shipimg, #menu .tile.lock .shipimg { filter: saturate(.7) brightness(.85); }
#menu .tile.skin { padding: 3px 2px; } #menu .tile.skin .price .coin { display: none; }
#menu .tile.skin .ic { display: flex; flex: none; } #menu .tile.skin .ic s { display: block; width: 10px; height: 14px; box-shadow: inset 0 0 0 1px var(--ink); }
#menu .tile.skin .lk { filter: grayscale(1) brightness(.9); }
/* 海域：和船坞一样横排，左边风景（按原始像素整数倍放大，只露中间那段），右边名字、银币加成、一句话 */
#menu .tile.sea .thumb { position: relative; display: block; flex: none; width: calc(68px * var(--shipk, 1)); height: calc(40px * var(--shipk, 1)); background: center / auto calc(40px * var(--shipk, 1)) no-repeat; /* 海图按原图整数倍画，框矮了就裁掉上下（不缩放） */ image-rendering: pixelated; box-shadow: 0 0 0 2px var(--ink); }
#menu .tile.sea .fx.need { color: var(--pale); }
#menu .tile.sea .won { font-style: normal; position: absolute; top: 0; left: 0; display: inline-flex; align-items: center; gap: 2px; padding-right: 4px; line-height: 16px; background: rgba(4, 14, 12, .8); color: var(--gold); }
/* 成就：不能点，所以是一条条记录，不做成按钮的样子 */
#menu .tile.ach { display: grid; grid-template-columns: 16px auto minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 1px 4px; line-height: 16px; text-align: left; cursor: default; border: 0; border-image: none; background: rgba(4, 14, 12, .4); }
#menu .tile.ach .mk { width: 16px; height: 16px; box-shadow: inset 0 0 0 2px rgba(156, 196, 178, .28); } #menu .tile.ach.sel .mk { box-shadow: none; } #menu .tile.ach .ck { display: block; }
#menu .tile.ach b { width: 48px; } #menu .tile.ach .ds { min-width: 0; line-height: 16px; color: var(--muted); } #menu .tile.ach.sel .ds { color: var(--muted); } #menu .tile.ach .ds i { margin-left: 8px; font-style: normal; color: var(--pale); }
#menu .grid.ach { gap: 1px; } #menu .tile.ach .rt { display: flex; align-items: center; }
/* 底部说明区：选中那件的效果 + 一个 40 高的按钮，位置永远不变 */
#menu .tiles { display: flex; flex-direction: column; }
#menu .gridbox { position: relative; flex: none; min-height: 0; }
#menu .detail { flex: none; margin-top: auto; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 4px 6px; box-sizing: border-box; text-align: left; background: rgba(4, 14, 12, .5); box-shadow: inset 0 2px 0 rgba(232, 188, 72, .4); }
#menu .detail .arc { width: 48px; height: 48px; flex: none; image-rendering: pixelated; }
#menu .detail .dt { flex: 1; min-width: 0; display: grid; align-content: center; }
#menu .detail p { margin: 0; line-height: 16px; color: var(--pale); }
#menu .detail .ti b { color: var(--gold); } #menu .detail u { margin-right: 8px; color: var(--muted); text-decoration: none; } #menu .detail .ti u { margin: 0 0 0 8px; }
#menu .detail em { margin-right: 8px; font-style: normal; color: #ffb48a; } #menu .detail p b { color: var(--gold); }
#menu .chips { display: flex; flex-wrap: wrap; gap: 0 8px; } #menu .chips i { font-style: normal; white-space: nowrap; } #menu .chips .up { color: #8fe6a8; } #menu .chips .dn { color: #ff9d8a; } #menu .chips .sp { color: var(--gold); } #menu .chips .sk { color: #ffb48a; }
#menu .buy { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 84px; height: 40px; padding: 0 10px; }
#menu .buy .price { color: inherit; }
#menu .stat { flex: none; min-width: 84px; text-align: center; color: var(--gold); }
/* 抽屉标题旁边的开局格子 */
#menu .drawer h2 small { display: flex; align-items: center; gap: 4px; min-width: 0; }
#menu .slot { display: inline-flex; align-items: center; gap: 3px; height: 24px; padding: 0 6px 0 4px; font-style: normal; white-space: nowrap; color: var(--pale); background: rgba(4, 14, 12, .5); box-shadow: inset 0 0 0 2px rgba(232, 188, 72, .45); }
#menu .drawer h2 small .need { white-space: nowrap; color: var(--pale); }
#menu .drawer.paged .slot span { display: none; } /* 要翻页时标题这一行还有翻页按钮，开局格子只留图标 */
#menu .slot:not(.on) { width: 24px; padding: 0; box-shadow: inset 0 0 0 2px rgba(156, 196, 178, .25); }
/* 导航：图标直接是现在带的东西 */
#menu .nav .ics { display: flex; align-items: center; justify-content: center; height: 16px; }
#menu .nav button.on { color: var(--gold); }
#menu .nav .seaic { display: block; width: 24px; height: 16px; background: center / auto no-repeat; image-rendering: pixelated; box-shadow: 0 0 0 1px var(--ink); }
#pause { min-width: 0; width: min(620px, calc(100vw - 32px)); display: grid; gap: 8px; }
#overlay .where { color: var(--muted); }
#overlay .recap { margin: 0 0 4px; line-height: 16px; } #overlay .recap.kill { color: var(--red); } #overlay .recap.hurt { color: var(--muted); }
#overlay .recap.dmg { display: flex; justify-content: center; gap: 12px; margin-bottom: 8px; } #overlay .recap.dmg span { display: flex; align-items: center; gap: 4px; } #overlay .recap.dmg img { width: 16px; height: 16px; image-rendering: pixelated; }
#overlay .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 0; }
#overlay .stats span { display: flex; justify-content: space-between; padding: 0 12px; border-left: 2px solid rgba(156, 196, 178, .2); } #overlay .stats span:nth-child(3n + 1) { border-left: 0; } #overlay .stats i { font-style: normal; color: var(--muted); }
#settings { width: min(460px, calc(100vw - 40px)); }
#settings .opts { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; }
#settings .seg { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin: 4px 0; } #settings .seg button { flex: 1; height: 32px; padding: 0; color: var(--pale); } #settings .seg button.on { color: var(--gold); }
#settings .checks { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 12px; }
#menu .pager .pg, .sheet .pager .pg { position: relative; } #menu .pager .pg::after, .sheet .pager .pg::after { content: ''; position: absolute; inset: -8px 0; } /* 翻页按钮只有 28 高，点击范围再往上下各放 8（暂停面板的也是） */
/* 大屏：界面整体放大两倍（像素字只在整数倍下清晰） */
@media (min-width: 1100px) and (min-height: 640px) { #hud, #cards, #overlay, #pause, #settings, #dailybox, #toast, #omen, #bosscard, #tip, #relicnote, #wskills, #boostbtn { zoom: 2; } }
@media (min-width: 1280px) and (min-height: 640px) { #menu { zoom: 2; } } /* 首页三栏放大 2 倍要约 620 宽（入口 + 抽屉 300 + 右栏 200 + 栏间空隙 32 + 左右边距），窄于 1280 不放大，否则右栏挤出屏幕 */
/* 船只情报表（暂停）和武装表（暂停、升级选卡） */
.sheet { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 14px; text-align: left; }
.sheet .ship { display: grid; gap: 4px; align-content: start; }
.sheet .portrait { height: 104px; margin: 2px; background-position: center bottom; background-repeat: no-repeat; image-rendering: pixelated; box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px #2a5a4c; } /* 不用带填充的像素边框，否则会盖住立绘 */
.sheet .nm, .sheet dl { margin-left: 2px !important; } /* 和立绘的描边内沿对齐 */
.sheet .nm { margin: 0; display: flex; gap: 8px; align-items: baseline; } .sheet .nm b { color: var(--gold); } .sheet .nm span { color: var(--muted); }
.sheet dl { margin: 0; display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 2px 8px; }
.sheet dt { color: var(--muted); } .sheet dd { margin: 0; color: var(--pale); }
.sheet .right { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 4px; min-width: 0; overflow: hidden; } /* 不滚动：放不下就翻页（renderSheet） */
.sheet .sheet-page { position: relative; display: grid; gap: 6px; align-content: start; min-height: 0; }
.sheet .sheet-page.in-r { animation: pageR .16s steps(3) both; } .sheet .sheet-page.in-l { animation: pageL .16s steps(3) both; }
.sheet .pager { justify-content: flex-end; }
.sheet h3, .arm h3 { margin: 0 0 2px; font-size: 12px; font-weight: normal; color: var(--gold); border-bottom: 2px solid rgba(232, 188, 72, .25); }
.arm h3 em { font-style: normal; color: var(--muted); margin-left: 6px; }
.arm { display: grid; gap: 2px; align-content: start; min-width: 280px; text-align: left; }
.arm table { border-collapse: collapse; width: 100%; }
.arm td { padding: 0 6px 0 0; height: 18px; white-space: nowrap; }
.arm td:first-child { width: 18px; } .arm .lv { color: var(--gold); } .arm .lv i { font-style: normal; color: var(--muted); }
.arm .br { color: #ffb48a; } .arm tr.dim td { color: var(--muted); } .arm .br.next { color: var(--muted); }
.arm .mods { display: flex; flex-wrap: wrap; gap: 2px 12px; color: var(--pale); } .arm .mods span { display: flex; gap: 3px; align-items: center; } .arm .mods b { font-weight: normal; color: var(--gold); } .arm .mods .none { color: var(--muted); }
.relist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.relist li { display: flex; gap: 6px; align-items: flex-start; } .relist .ico { flex: none; } .relist b { color: #e4a8ff; flex: none; } .relist span { color: var(--muted); }
/* 升级界面：刷新按钮在卡片正下方，最下面一行是不带框的当前状态 */
#cards .reroll { padding: 4px 16px; }
#cards .status { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 14px; max-width: min(640px, calc(100vw - 32px)); padding-top: 8px; border-top: 2px solid rgba(156, 196, 178, .2); color: var(--pale); }
#cards .status i { font-style: normal; color: var(--gold); }
#cards .status span { display: flex; gap: 3px; align-items: center; white-space: nowrap; } #cards .status b { font-weight: normal; color: var(--gold); margin-left: 3px; } #cards .status .dim { color: var(--muted); }
/* 路线卡：A 青色、B 橙色 */
.card.branch.ra { border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 9 9' shape-rendering='crispEdges'%3E%3Cpath fill='%235fd4ff' d='M1 0H8V1H9V8H8V9H1V8H0V1H1Z'/%3E%3Cpath fill='%2310303a' d='M1 1H8V8H1Z'/%3E%3Cpath fill='%232f6a7c' d='M1 1H8V2H1Z'/%3E%3Cpath fill='%230a1f26' d='M1 7H8V8H1Z'/%3E%3C/svg%3E") 3 fill / 6px / 0 stretch; border-style: solid; } .card.ra i { color: #8fe0ff; }
.card.branch.rb { border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 9 9' shape-rendering='crispEdges'%3E%3Cpath fill='%23ff9d6b' d='M1 0H8V1H9V8H8V9H1V8H0V1H1Z'/%3E%3Cpath fill='%232e1e14' d='M1 1H8V8H1Z'/%3E%3Cpath fill='%236a4028' d='M1 1H8V2H1Z'/%3E%3Cpath fill='%231a100a' d='M1 7H8V8H1Z'/%3E%3C/svg%3E") 3 fill / 6px / 0 stretch; border-style: solid; } .card.rb i { color: #ffb48a; }
/* 获得宝物的信息板：屏幕下方居中 */
#relicnote { position: fixed; left: 0; right: 0; margin-left: auto; margin-right: auto; width: -webkit-fit-content; width: fit-content; bottom: max(96px, calc(env(safe-area-inset-bottom) + 92px)); transform: translateY(8px); display: flex; gap: 10px; align-items: center; padding: 6px 14px; z-index: 5; pointer-events: none; opacity: 0; transition: opacity .2s steps(3), transform .2s steps(3); max-width: calc(100vw - 32px); }
#relicnote.show { opacity: 1; transform: none; }
#relicnote .ico { width: 32px; height: 32px; flex: none; }
#relicnote div { display: grid; } #relicnote i { font-style: normal; color: #e4a8ff; } #relicnote b { font-weight: normal; color: var(--gold); } #relicnote span { color: var(--pale); }
#rotate { display: none; }
@media (orientation: portrait) and (pointer: coarse) { /* 手机和平板竖着拿都提示（原来只管 700px 以下，平板竖屏直接按横屏界面玩） */
  #rotate { display: grid; place-items: center; position: fixed; inset: 0; background: var(--paper); z-index: 10; font-size: 12px; }
}
/* 手机横屏：抽屉内边距收一点，多放一行 */
@media (max-height: 400px) { #menu .drawer { padding: 6px 8px; gap: 4px; } }
@media (max-height: 300px) { #menu .nav .ics { display: none; } } /* 左边 7 个入口只有 30 来高，放不下图标 */
@media (max-height: 360px) { #menu .brand small { display: none; } } /* 右栏要给船留地方 */
#menu .tiles.low h3 { display: none; } /* 矮屏不写「船型」「涂装」（和 menuH3 对应） */
/* 矮屏（手机横屏 Safari 去掉地址栏后只剩 320 左右）：抽屉标题缩小（左边入口已经高亮了是哪一项），翻页按钮还在；海域缩略图压矮 */
@media (max-height: 360px) {
  #menu .drawer { padding: 4px 8px; gap: 2px; }
  #menu .drawer h2 { font-size: 12px; line-height: 16px; }
  #menu .slot { height: 16px; padding: 0 4px 0 0; box-shadow: none; background: none; } #menu .slot:not(.on) { width: 16px; box-shadow: inset 0 0 0 2px rgba(156, 196, 178, .25); }
  #menu .detail { padding: 2px 4px; min-height: 40px; }
}
/* 再矮（Safari 开着标签栏，只剩 280 左右）：海域卡片的缩略图压扁一半（左栏图标这时也藏了，不能哪里都看不到海），首页不显示最好成绩那一行；
   选卡界面不显示底部状态条（暂停界面里有），标题和卡片挨近一点 */
@media (max-height: 300px) {
  #menu .tile.sea .thumb { height: calc(22px * var(--shipk, 1)); } /* 只裁掉上下，海图本身不缩（原来压到 0.55 倍，丢行跳格） */
  #menu .buy { height: 36px; }
  #menu .brand small { display: none; }
  .sheet .portrait { display: none; } /* 暂停面板太矮时不放船的立绘 */
  #cards .status { display: none; }
  #cards { gap: 4px; }
}

/* 海怪登场：预警横幅（照 Darius 一类街机的 WARNING，红底斜纹、闪五下，减少闪烁时不闪）和标题卡（名字两边的线往外伸） */
#omen { position: fixed; left: 0; right: 0; top: 30%; height: 40px; display: flex; align-items: center; justify-content: center; pointer-events: none; visibility: hidden;
  background: repeating-linear-gradient(135deg, rgba(120, 18, 18, .82) 0 8px, rgba(40, 6, 8, .82) 8px 16px); border-top: 2px solid #050c0b; border-bottom: 2px solid #050c0b; }
#omen b { font-size: 24px; line-height: 28px; font-weight: normal; letter-spacing: .3em; color: #ffd8c8; padding: 2px 16px 2px 22px; background: #2a0608; text-shadow: 1px 1px 0 #050c0b; }
#omen.show { visibility: visible; animation: omenblink .6s steps(1) 0s 5; }
#omen.calm, #tip.calm { animation: none; }
@keyframes omenblink { 50% { opacity: .25; } }
#bosscard { position: fixed; left: 0; right: 0; margin-left: auto; margin-right: auto; width: -webkit-fit-content; width: fit-content; top: 20%; text-align: center; pointer-events: none; opacity: 0; transition: opacity .3s steps(3); white-space: nowrap; }
#bosscard.show { opacity: 1; }
#bosscard i { display: block; font-style: normal; color: var(--pale); text-shadow: 1px 0 0 var(--ink), -1px 0 0 var(--ink), 0 1px 0 var(--ink), 0 -1px 0 var(--ink); }
#bosscard b { position: relative; display: inline-block; font-size: 24px; line-height: 28px; font-weight: normal; color: var(--gold); margin-top: 4px; letter-spacing: .15em;
  text-shadow: 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 2px 0 var(--ink), 0 -2px 0 var(--ink), 2px 2px 0 var(--ink); }
#bosscard b::before, #bosscard b::after { content: ''; position: absolute; top: 13px; width: 0; height: 2px; background: var(--gold); box-shadow: 0 2px 0 var(--ink); transition: width .5s steps(5) .15s; }
#bosscard b::before { right: calc(100% + 10px); }
#bosscard b::after { left: calc(100% + 8px); }
#bosscard.show b::before, #bosscard.show b::after { width: 60px; }