:root {
  color-scheme: dark;
  font-family: "Instrument Sans", "Microsoft YaHei UI", "PingFang SC", "Noto Sans CJK SC", system-ui, sans-serif;
  --page: #080e1c;
  --panel: #101a2c;
  --border: #273851;
  --bright: #f0f5ff;
  --muted: #acbdd4;
  --faint: #8499b5;
  --gold: #ffcd6a;
  --aqua: #87ebda;
  font-synthesis: none;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  min-width: 300px;
  margin: 0;
  background: radial-gradient(ellipse at 47% 22%, #13223b 0%, var(--page) 76%);
  color: var(--bright);
  min-height: 100dvh;
}
button { color: inherit; font: inherit; font-weight: 700; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; }
button:focus-visible, canvas:focus-visible { outline: 2px solid var(--aqua); outline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }
.shell { width: min(1264px, calc(100% - 80px)); margin-inline: auto; }

.topbar { border-bottom: 1px solid #233049; background: #090f1ce8; }
.topbar-inner { min-height: 75px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.crest {
  width: 44px; height: 44px; flex: none; border-radius: 13px; position: relative;
  display: grid; place-items: center; background: linear-gradient(155deg, #2d3040, #161c30 65%);
  border: 1px solid #80643c; box-shadow: inset 0 1px #ffe59c32, 0 3px 12px #0007;
}
.crest i { position: absolute; inset: 9px; background: #ffdb85; clip-path: polygon(50% 0,64% 29%,55% 24%,55% 62%,79% 43%,74% 40%,91% 21%,95% 49%,88% 47%,55% 79%,55% 100%,45% 100%,45% 79%,12% 47%,5% 49%,9% 21%,26% 40%,21% 43%,45% 62%,45% 24%,36% 29%); }
.brand h1 { font-size: 23px; line-height: 1.25; letter-spacing: .14em; font-weight: 900; }
.brand-sub { color: var(--gold); font-size: 9px; font-weight: 800; letter-spacing: .25em; margin-top: 4px; }
.top-actions { display: flex; gap: 9px; align-items: center; }
.utility {
  min-height: 40px; padding: 0 12px; border-radius: 9px; border: 1px solid #35445c;
  background: #151f31; color: #d7e3f7; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 12px; white-space: nowrap;
}
.utility:hover, .deck-button:hover, .power-button:hover:enabled { background: #25334b; border-color: #627795; }
.utility[aria-pressed="true"] { border-color: #75c9c1; color: var(--aqua); }
.utility-icon { display: inline-grid; place-items: center; flex: none; }
.help-icon { width: 15px; height: 15px; border: 1px solid currentColor; border-radius: 100%; font: 700 10px/1 system-ui; }
.pause-icon { width: 11px; height: 13px; border-left: 3px solid; border-right: 3px solid; }
[aria-pressed="true"] .pause-icon { width: 12px; height: 13px; border: 0; background: currentColor; clip-path: polygon(0 0,100% 50%,0 100%); }
.sound-icon { position: relative; width: 16px; height: 15px; }
.sound-icon::before { position: absolute; content: ""; inset: 1px 6px 1px 0; background: currentColor; clip-path: polygon(0 30%,35% 30%,100% 0,100% 100%,35% 70%,0 70%); }
.sound-icon i { position: absolute; right: 0; width: 7px; height: 7px; }
.sound-icon i::before, .sound-icon i::after { position: absolute; left: 3px; content: ""; width: 1px; height: 8px; background: currentColor; transform: rotate(45deg); }
.sound-icon i::after { transform: rotate(-45deg); }
[aria-pressed="true"] .sound-icon i { height: 10px; border: 1px solid currentColor; border-left: 0; border-radius: 0 80% 80% 0; }
[aria-pressed="true"] .sound-icon i::before, [aria-pressed="true"] .sound-icon i::after { display: none; }

.main { padding-top: 26px; padding-bottom: max(20px, env(safe-area-inset-bottom)); }
.sea-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 13px; gap: 10px; }
.location { display: flex; align-items: center; gap: 9px; }
.location-icon { color: #77b9ff; background: #172945; border: 1px solid #335880; border-radius: 8px; width: 30px; height: 30px; display: grid; place-items: center; font: 800 19px/1 system-ui; }
.location h2 { font-size: 17px; font-weight: 850; white-space: nowrap; letter-spacing: .1em; }
.sea-status { display: inline-flex; gap: 7px; align-items: center; padding: 6px 11px; border: 1px solid #285363; border-radius: 50px; background: #12303d; font-size: 11px; font-weight: 750; color: var(--aqua); white-space: nowrap; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 9px currentColor; }
.sea-status.event-active { color: var(--gold); background: #312917; border-color: #6c5430; }

.cabinet { overflow: hidden; border: 1px solid #526b8c; border-radius: 19px; background: #10192b; box-shadow: 0 23px 55px #0206109c, 0 0 0 4px #142038; }
.arena { position: relative; isolation: isolate; height: clamp(360px, calc(100svh - 285px), 690px); background: #08366d; }
.ocean { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 55% -30%, #65d1ef 0%, transparent 66%), linear-gradient(165deg, #164d88, #05336b 54%, #071b42); }
.ocean::before { position: absolute; content: ""; inset: 0; background: url('assets/ocean.jpg') center 55% / cover no-repeat; }
.ocean::after { position: absolute; content: ""; inset: 0; background: linear-gradient(#07224f55, #0b28521a 44%, #07142622 76%, #040f24a0); box-shadow: inset 0 0 75px #0b183966; }
canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
canvas:focus-visible { outline-offset: -3px; }
.scoreboard { position: absolute; top: 16px; left: 17px; display: flex; gap: 8px; pointer-events: none; }
.stat { min-width: 96px; min-height: 59px; display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 10px; background: #07182cdc; border: 1px solid #6592b48c; box-shadow: 0 4px 12px #03122450; }
.stat-gold { min-width: 139px; border-color: #b88a4ca1; background: linear-gradient(105deg, #292333ec, #131d33e8); }
.stat-label { display: block; color: #b5c8e1; font-size: 11px; line-height: 1.2; font-weight: 670; white-space: nowrap; }
.stat-value { display: block; color: #f9fcff; font-size: 23px; font-weight: 850; line-height: 1.2; margin-top: 2px; font-variant-numeric: tabular-nums; }
.stat-gold .stat-value { color: var(--gold); }
.coin-icon { position: relative; display: inline-block; flex: none; width: 23px; height: 23px; border-radius: 50%; border: 1px solid #ffecb1; background: linear-gradient(145deg, #ffed92, #f9ac33 65%, #ef8c21); box-shadow: inset 0 0 0 2px #d47d20, inset 0 0 0 3px #ffdb65, 0 1px 4px #19101155; }
.coin-icon::before, .coin-icon::after { content: ""; position: absolute; width: 2px; height: 9px; top: 6px; left: 10px; background: #a95e17; border-radius: 1px; transform: rotate(45deg); }
.coin-icon::after { transform: rotate(-45deg); }
.aim-help { position: absolute; left: 50%; bottom: 104px; transform: translateX(-50%); padding: 6px 10px; border-radius: 6px; background: #07192dcc; color: #e4f3ff; border: 1px solid #7ca8ce69; font-size: 11px; pointer-events: none; white-space: nowrap; }
.toast { position: absolute; z-index: 3; inset: auto auto 24px 50%; transform: translateX(-50%); max-width: calc(100% - 26px); padding: 10px 17px; border: 1px solid #b9904d; border-radius: 10px; color: #ffe4a6; background: #211c2bf2; text-align: center; font-size: 13px; font-weight: 750; pointer-events: none; box-shadow: 0 4px 18px #0008; }
.event-pop { position: absolute; z-index: 1; left: 50%; top: 22%; transform: translateX(-50%); display: grid; gap: 5px; padding: 10px 30px 13px; text-align: center; background: linear-gradient(90deg, transparent, #15142ae0 20% 80%, transparent); color: #fff1b8; width: max-content; max-width: 100%; pointer-events: none; }
.event-pop strong { font-size: clamp(20px, 4vw, 36px); letter-spacing: .16em; text-shadow: 0 2px 6px #421e0e; }
.event-pop span { font-size: 12px; }
.pause-screen { position: absolute; inset: 0; display: grid; place-items: center; background: #071123b7; z-index: 2; }
.pause-card { width: min(260px, 85%); text-align: center; padding: 23px; border: 1px solid #775c32; border-radius: 13px; background: #101b30; box-shadow: 0 12px 35px #000a; }
.pause-card .pause-icon { display: inline-block; color: var(--gold); margin-bottom: 9px; }
.pause-card h3 { margin-bottom: 16px; font-size: 21px; }
.pause-card .primary { width: 100%; justify-content: center; }

.dock { min-height: 85px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; background: linear-gradient(180deg, #1a273e, #111a2d 84%); border-top: 1px solid #62728c; padding: 9px 15px; }
.dock-tools { display: flex; align-items: center; gap: 9px; }
.deck-button { position: relative; min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid #455670; border-radius: 8px; background: #202d45; padding: 0 10px; white-space: nowrap; font-size: 12px; }
.button-icon { font: 800 20px/1 system-ui; color: #92b8ff; }
.skill-icon { color: #c8a5fa; }
.skill-button { padding-bottom: 5px; }
.skill-button[aria-disabled="true"] { color: #aab7ce; }
.skill-button.ready { color: #f2dbff; border-color: #ad6cf4; background: #45266b; box-shadow: 0 0 15px #a654ff55; }
.energy-value { color: #debcff; font-size: 10px; min-width: 22px; text-align: right; }
.energy-track { position: absolute; height: 3px; bottom: 4px; left: 9px; right: 9px; background: #10172c; border-radius: 4px; overflow: hidden; }
.energy-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8556df, #e0b8ff); }
.auto-dot { width: 6px; height: 6px; border-radius: 50%; background: #798da9; }
.auto-button[aria-pressed="true"] { border-color: #6bcdbe; background: #19404a; }
.auto-button[aria-pressed="true"] .auto-dot { background: #81efce; box-shadow: 0 0 7px #81efce; }
.power-controls { display: flex; gap: 9px; align-items: center; }
.power-button { flex: none; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid #546883; border-radius: 8px; background: linear-gradient(#2c3c57, #1d293d); font: 500 23px/1 system-ui; color: #edf5ff; }
.power-button:disabled { color: #7588a3; border-color: #394a64; background: #182437; }
.power-info { min-width: 81px; text-align: center; }
.power-label { display: block; font-size: 10px; font-weight: 700; color: var(--muted); letter-spacing: .07em; }
.power-level { color: var(--gold); line-height: 1.09; font-weight: 850; font-size: 24px; font-variant-numeric: tabular-nums; }
.power-level small { color: #aabbd2; font-size: 11px; font-weight: 680; }
.power-cost { display: block; font-size: 10px; color: var(--faint); white-space: nowrap; }
.dock-coins { justify-self: end; }
.primary { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(#ffdc83, #ffbc51); color: #31200d; border: 1px solid #ffe0a0; box-shadow: inset 0 -2px #b1672640, 0 4px 12px #01050e63; border-radius: 8px; padding: 0 14px; min-height: 43px; font-size: 13px; font-weight: 850; }
.primary:hover { background: linear-gradient(#ffe8a5, #ffc86f); }
.primary:active, .deck-button:active, .power-button:active:enabled { transform: translateY(1px); }
.coins-button { min-height: 46px; white-space: nowrap; }
.coins-button small { color: #6c3e13; font-size: 11px; margin-left: 5px; }
.coins-button .coin-icon { width: 21px; height: 21px; }
.coins-button .coin-icon::before, .coins-button .coin-icon::after { left: 9px; top: 5px; }
.game-footer { display: flex; justify-content: space-between; align-items: center; gap: 6px 12px; color: #9aaec7; margin-top: 15px; font-size: 11px; }
.game-tip, .desktop-tip { display: flex; align-items: center; gap: 6px; }
.game-tip > span:first-child { color: #8fb5ed; font: 900 18px/1 system-ui; }
kbd { font-family: inherit; font-size: 10px; font-weight: 650; line-height: 1; color: #d8e5f9; background: #19243a; border: 1px solid #354963; border-radius: 4px; padding: 3px 5px; white-space: nowrap; }

.guide { width: min(440px, calc(100% - 30px)); max-height: min(580px, 90svh); padding: 19px 22px 22px; border-radius: 14px; border: 1px solid #6b81a0; background: linear-gradient(145deg, #1b2d46, #111b2e); color: var(--bright); box-shadow: 0 14px 60px #000c; }
.guide::backdrop { background: #030816c9; }
.guide-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.guide h2 { font-size: 20px; }
.close-button { min-width: 36px; min-height: 36px; line-height: 1; font-size: 23px; padding: 0; }
.guide ul { padding: 0; list-style: none; margin: 8px 0 18px; }
.guide li { display: grid; gap: 5px; padding: 11px 0; border-bottom: 1px solid #354965; }
.guide li strong { font-size: 13px; color: var(--gold); }
.guide li span { font-size: 13px; color: #d1def0; line-height: 1.6; }
.guide-continue { justify-content: center; width: 100%; }

@media (max-width: 810px) {
  .shell { width: calc(100% - 36px); }
  .dock { gap: 8px; padding-inline: 9px; }
  .dock-tools { gap: 6px; }
  .deck-button { padding-inline: 7px; }
  .power-controls { gap: 5px; }
}
@media (max-width: 620px) {
  .shell { width: calc(100% - 20px); }
  .topbar-inner { min-height: 61px; }
  .brand { gap: 8px; }
  .crest { width: 37px; height: 37px; border-radius: 10px; }
  .crest i { inset: 7px; }
  .brand h1 { font-size: 18px; letter-spacing: .1em; }
  .brand-sub { margin-top: 3px; font-size: 7px; letter-spacing: .17em; }
  .top-actions { gap: 6px; }
  .topbar .utility { min-width: 36px; min-height: 36px; padding: 0; }
  .utility-label { display: none; }
  .main { padding-top: 13px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .sea-heading { margin-bottom: 8px; }
  .location { gap: 7px; }
  .location-icon { width: 25px; height: 25px; font-size: 16px; }
  .location h2 { font-size: 14px; }
  .sea-status { padding: 5px 8px; font-size: 10px; }
  .cabinet { border-radius: 12px; box-shadow: 0 15px 33px #02061096, 0 0 0 2px #17263d; }
  .arena { height: clamp(330px, calc(100svh - 253px), 680px); }
  .ocean::before { background-position: 48% center; }
  .scoreboard { top: 8px; left: 8px; right: 8px; gap: 5px; }
  .stat { min-width: 0; flex: 1; min-height: 45px; padding: 5px 8px; gap: 6px; border-radius: 7px; }
  .stat-gold { flex: 1.35; }
  .stat-value { font-size: clamp(15px, 4.4vw, 21px); }
  .stat-label { font-size: 10px; }
  .stat .coin-icon { transform: scale(.8); margin: 0 -2px 0 -2px; }
  .aim-help { bottom: 93px; }
  .dock { grid-template-columns: 1fr 1fr; grid-template-areas: 'power coins' 'tools tools'; padding: 8px; gap: 7px; }
  .dock-tools { grid-area: tools; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .power-controls { grid-area: power; justify-content: center; }
  .dock-coins { grid-area: coins; width: 100%; }
  .coins-button { width: 100%; justify-content: center; min-height: 41px; padding-inline: 5px; font-size: 12px; gap: 6px; }
  .coins-button small { display: inline-block; margin-left: 3px; }
  .power-button { width: 32px; height: 36px; }
  .power-info { min-width: 59px; }
  .power-level { font-size: 20px; }
  .power-cost { font-size: 9px; }
  .deck-button { min-height: 38px; font-size: 11px; }
  .game-footer { margin-top: 9px; font-size: 10px; }
  .desktop-tip { display: none; }
}
@media (hover: none) { .desktop-tip { display: none; } }
@media (orientation: landscape) and (max-height: 520px) {
  .topbar-inner { min-height: 49px; }
  .crest { width: 31px; height: 31px; }
  .crest i { inset: 6px; }
  .brand h1 { font-size: 16px; }
  .brand-sub { font-size: 7px; margin-top: 2px; }
  .main { padding-top: 8px; }
  .sea-heading { margin-bottom: 6px; }
  .location-icon { width: 24px; height: 24px; }
  .location h2 { font-size: 14px; }
  .arena { min-height: 195px; height: calc(100svh - 155px); }
  .scoreboard { top: 8px; left: 9px; }
  .stat { min-height: 44px; padding-block: 4px; }
  .stat-value { font-size: 19px; }
  .dock { min-height: 60px; padding-block: 4px; }
  .aim-help { bottom: 73px; }
  .game-footer { margin-top: 7px; }
}