/* DOGEZILLA V7 — 合并自 V6 的 zilla / cover-v5 / agentic / zilla-wallet（顺序不变），末尾为 V7 新增 */

/* ===== zilla.css ===== */
/* DOGEZILLA — 怪兽电影海报风 */
@font-face { font-family: "Big Shoulders"; src: url(assets/fonts/bsd-900.woff2) format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Big Shoulders"; src: url(assets/fonts/bsd-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(assets/fonts/barlow-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(assets/fonts/barlow-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(assets/fonts/barlow-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --night: #070d14;
  --city: #10233a;
  --deep: #0b1a2a;
  --orange: #ff8a1f;
  --ember: #c4560c;
  --teal: #2ad1d8;
  --gold: #f2c14e;
  --paper: #f3ead8;
  --paper-dim: #f3ead8b3;
  --line: #2ad1d82e;
  --display: "Big Shoulders", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --body: "Barlow", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --pad: clamp(18px, 4vw, 56px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; background: var(--night); color: var(--paper); font: 400 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 900; line-height: .95; }
h2 { font-size: clamp(44px, 6vw, 84px); letter-spacing: .005em; }
dl, dd { margin: 0; }
.sr, .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 14px; background: var(--gold); color: var(--night); font-weight: 700; }
.skip:focus { top: 12px; }

/* ---------- 顶栏 ---------- */
.bar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 22px;
  padding: 12px var(--pad);
  background: #070d14d9; backdrop-filter: blur(10px);
  border-bottom: 1px solid #ffffff10;
}
.brand img { border-radius: 50%; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 900 26px/1 var(--display); letter-spacing: .02em; }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a { padding: 8px 12px; text-decoration: none; font-weight: 500; font-size: 15px; color: var(--paper-dim); border-radius: 4px; }
.nav a:hover { color: var(--paper); background: #ffffff0d; }
.lang { min-width: 48px; height: 40px; border: 1px solid #ffffff2a; border-radius: 4px; background: none; font-weight: 700; }
.lang:hover { border-color: var(--teal); }
.menu { display: none; width: 44px; height: 40px; border: 1px solid #ffffff2a; border-radius: 4px; background: none; place-content: center; gap: 6px; }
.menu i { display: block; width: 18px; height: 2px; background: var(--paper); }

/* ---------- 56 号港口 ---------- */
.poster {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
  align-items: center;
  gap: 0 clamp(8px, 3vw, 48px);
  min-height: clamp(580px, calc(100svh - 65px), 960px);
  padding: 0 max(var(--pad), calc((100% - 1480px) / 2));
  background: linear-gradient(180deg, #070e19 5%, #102b3b 62%, #1c4a50 91%, #08141f 100%);
}
.sky { position: absolute; inset: 0; pointer-events: none; }
.harbor-moon {
  position: absolute; right: 8%; top: 9%; width: min(40vw, 590px); aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 45% 30%, #9ae3d6 0%, #508c8b 47%, #2b5961 100%);
  box-shadow: 0 0 100px #4ac6bf35;
  opacity: .64;
}
.beam { position: absolute; bottom: 8%; width: 19vw; height: 112%; transform-origin: 50% 100%;
  background: linear-gradient(0deg, #53e1d83d, #57d9d81a 36%, transparent 95%); clip-path: polygon(48% 100%, 52% 100%, 100% 0, 0 0); }
.beam-a { left: 40%; transform: rotate(27deg); }
.beam-b { right: 4%; transform: rotate(-16deg); opacity: .8; }

.stage { position: relative; z-index: 2; align-self: stretch; min-width: 0; }
.city { position: absolute; left: 0; bottom: 0; width: 100%; max-width: none; object-fit: cover; object-position: 50% 100%; pointer-events: none; }
.city-far { height: clamp(190px, 37vh, 390px); opacity: .84; }
.city-near { height: clamp(38px, 7.5vh, 74px); z-index: 4; }
.kaiju {
  position: absolute; inset: 3% 0 0; width: 100%; height: 97%;
  object-fit: contain; object-position: center bottom;
  filter: drop-shadow(0 5px 25px #050b145e);
  animation: landfall .9s cubic-bezier(.2, .75, .3, 1) both;
}
.harbor-mist {
  position: absolute; z-index: 3; inset: auto -8% 0; height: clamp(90px, 20vh, 195px); pointer-events: none;
  background: radial-gradient(ellipse at 64% 62%, #89ccc571, transparent 59%),
    radial-gradient(ellipse at 33% 85%, #81aeb068, transparent 54%), linear-gradient(0deg, #080f1b 0%, transparent 74%);
  animation: fog-arrival 1.15s ease-out both;
}
@keyframes landfall { from { opacity: .35; transform: translateY(24px); } }
@keyframes fog-arrival { from { opacity: .35; transform: translateX(-7%); } }

.poster-copy { position: relative; z-index: 5; padding: 42px 0 65px; }
.teaser { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 22px; color: #a7e9de; font: 700 14px/1.3 var(--body); letter-spacing: .09em; }
.teaser::before { content: ""; width: 7px; height: 7px; flex: none; background: var(--teal); border-radius: 50%; box-shadow: 0 0 13px #2ad1d8a0; }
.title { display: grid; font-size: clamp(90px, min(11vw, 18vh), 182px); line-height: .81; letter-spacing: -.035em; color: var(--paper); text-shadow: 0 9px 30px #050c17a0; }
.title span:last-child { padding-left: .23em; }
.hero-line { margin: 24px 0 0; color: var(--paper); font: 700 clamp(20px, 2.15vw, 32px)/1.2 var(--body); }
.tagline { margin: 10px 0 0; color: #d6e2e3; font-size: 17px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 25px; }
.hero-mint { display: inline-grid; min-height: 49px; place-items: center; padding: 8px 24px; border: 1px solid #ffc878; border-radius: 4px;
  background: #ffb25d; color: #16120e; font-weight: 700; text-decoration: none; box-shadow: 0 3px 0 #b7642c; transition: background-color .16s; }
.hero-mint:hover { background: #ffc987; }
.hero-chain { color: #a7c6cd; font: 700 12px/1.2 var(--body); letter-spacing: .1em; }

/* ---------- 铸造控制台 ---------- */
.mint-deck {
  --counter-pad: clamp(22px, 3.8vw, 46px);
  position: relative; isolation: isolate;
  padding: clamp(50px, 8vw, 104px) max(var(--pad), calc((100% - 1120px) / 2));
  background: radial-gradient(ellipse 73% 95% at 76% -34%, #3262638a, transparent 80%),
    radial-gradient(ellipse 50% 54% at 7% 1%, #284b545c, transparent 86%),
    linear-gradient(#0a1520, #101f2b 55%, #09141e);
}
.mint-deck::before, .mint-deck::after {
  position: absolute; inset: 0 0 auto; height: 1px; pointer-events: none;
}
.mint-deck::before { content: ""; background: linear-gradient(90deg, transparent 4%, #91cec464 56%, transparent 96%); }
.mint-counter {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr);
  min-width: 0; border: 1px solid #a1c4c044; border-top-color: #c5d1ba9c;
  border-radius: 3px 3px 0 0;
  background: radial-gradient(ellipse at 0% 0%, #203841, transparent 68%), #0b1822;
  box-shadow: 0 34px 64px -46px #000;
}
.console {
  position: relative; min-width: 0; padding: var(--counter-pad);
}
.console::before { content: ""; position: absolute; top: -1px; left: var(--counter-pad); width: 66px; height: 2px; background: #f4b36d; }
.console:target::before { width: 96px; box-shadow: 0 0 14px #f4b36d80; }
.console-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 9px 17px; margin-bottom: 16px; }
.console-head h2 { font-size: clamp(27px, 3.5vw, 44px); line-height: 1.05; }
.chain-tag { flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; color: #b9d9d2; }
.chain-tag i { width: 7px; height: 7px; background: #89c8bb; transform: rotate(45deg); }

.unit-price { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin-bottom: 14px; padding: 8px 0; border-block: 1px solid #a2b9b438; }
.unit-price dt { font-size: 14px; color: #b8c8ce; }
.unit-price dd { color: #abe3e3; font-weight: 700; text-align: right; }
.unit-price dd[data-state="tba"] { color: #b8c8ce; }

.qty { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 12px; }
.qty-label { grid-column: 1 / -1; font-size: 14px; color: #c7d3d6; }
.stepper { display: flex; align-items: center; border: 1px solid #8aaead61; border-radius: 5px; background: #07131c; }
.stepper button { width: 44px; height: 46px; border: 0; border-radius: 4px; background: none; font-size: 22px; }
.stepper button:hover:not(:disabled) { background: #ffffff10; }
.stepper button:disabled { opacity: .3; }
.stepper output { min-width: 36px; text-align: center; font: 900 28px/1 var(--display); }
.mw-presets { display: grid; grid-template-columns: repeat(4, minmax(44px, 1fr)); gap: 5px; }
.mw-presets button { height: 46px; border: 1px solid #8aaead42; border-radius: 5px; background: #0b1b24; font: 700 20px/1 var(--display);
  transition: background-color .16s, border-color .16s, color .16s; }
.mw-presets button:hover { border-color: #92d4d7; }
.mw-presets button[aria-pressed="true"] { background: #abe3e3; border-color: #abe3e3; color: var(--night); }

.quote { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 20px; border-block: 1px solid #a2b9b438; }
.quote div { padding: 10px 0; }
.quote div + div { padding-inline-start: 13px; border-left: 1px solid #a2b9b42b; }
.quote dt { font-size: 13px; color: #b8c8ce; }
.quote dd { font-size: 13px; color: #b8c8ce; overflow-wrap: anywhere; }
.quote dd b { font: 900 28px/1.1 var(--display); color: var(--paper); }
.quote-note { min-height: 1.4em; margin: 8px 0 0; font-size: 13px; color: var(--paper-dim); }
.console:not(:has(.summon.is-live)) .quote-note:not([data-state="live"]) { display: none; }

.summon {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 58px; margin-top: 14px; padding: 0 18px;
  border: 1px solid #ffc688; border-radius: 5px; background: #ffba70; color: var(--night);
  font: 900 22px/1 var(--display); letter-spacing: .01em;
  box-shadow: 0 4px 0 var(--ember);
  transition: transform .12s, box-shadow .12s;
}
.summon:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ember); }
.summon:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--ember); }
.summon small { flex: none; white-space: nowrap; padding: 4px 8px; background: var(--night); color: var(--orange); font: 700 13px/1 var(--body); border-radius: 3px; }
.summon:disabled { color: #f4debf; box-shadow: none; border-color: #bc8f5e75;
  background: #3a302b; }
.summon:disabled small { border: 1px solid #f4bb7040; background: #201c1d; color: #ffc686; }
.console-note { margin: 10px 0 0; font-size: 13px; color: var(--paper-dim); }
.console:not(:has(.summon.is-live)) .console-note { display: none; }

/* ---------- 铸造信息 ---------- */
.billing {
  display: grid; align-content: center; gap: 0; min-width: 0; padding: var(--counter-pad);
  border-inline-start: 1px solid #a2b9b42b; font-family: var(--body);
}
.billing div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 0; }
.billing div + div { border-top: 1px solid #a2b9b42b; }
.billing dt { font-weight: 700; font-size: 14px; color: #b9c8cd; letter-spacing: .03em; }
.billing dd { font: 700 19px/1.25 var(--display); letter-spacing: .025em; text-align: right; overflow-wrap: anywhere; }
.billing dd[data-state="tba"] { color: #b8c8ce; }

/* ---------- 通用区块 ---------- */
main > section:not(.poster) { padding: clamp(48px, 6vw, 86px) max(var(--pad), calc((100% - 1120px) / 2)); }
:where(main > section:not(.poster)) h2 { font-size: clamp(34px, 4.6vw, 58px); line-height: 1.06; }
.lead { max-width: 56ch; color: var(--paper-dim); }
.tba-val { color: var(--paper-dim); }

/* ---------- 链上动态 ---------- */
.mint-activity { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  background: linear-gradient(150deg, #0f2330, #0a1722 70%); border: 1px solid #a1c4c044;
  border-top: 0; border-radius: 0 0 11px 11px; }
.mint-activity > section { min-width: 0; padding: clamp(20px, 3vw, 38px); }
.mint-activity h2 { font-size: clamp(25px, 3vw, 36px); line-height: 1.1; }
.energy-head { display: grid; gap: 8px; margin-bottom: 15px; }
.energy-status { max-width: 46ch; margin: 0; color: #c5d3d7; font-size: 14px; }
.meter { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(10px, 2.2vw, 24px);
  padding: clamp(10px, 2vw, 18px); border: 1px solid #75b7bf59; border-radius: 12px; background: #07121d; }
.meter-pct { min-width: 4ch; font: 900 clamp(24px, 3vw, 40px)/1 var(--display); color: var(--paper); text-align: right; font-variant-numeric: tabular-nums; }
.energy-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px; border: 1px solid #83a4b135; border-radius: 12px; background: #0b1926; }
.energy-stats div { padding: 10px clamp(9px, 1.4vw, 16px); min-width: 0; }
.energy-stats div + div { border-left: 1px solid #83a4b135; }
.energy-stats dt { font-size: 14px; color: var(--paper-dim); }
.energy-stats dd { color: var(--paper-dim); }
.energy-stats b { font: 900 clamp(24px, 2.65vw, 35px)/1.1 var(--display); color: var(--paper); overflow-wrap: anywhere; }

/* ---------- 怪兽档案 ---------- */
.file { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .85fr); gap: clamp(28px, 4vw, 64px); align-items: center;
  background: radial-gradient(ellipse at 18% 60%, #16333e, var(--night) 66%); }
.file-photo { margin: 0; width: 100%; padding: clamp(5px, .75vw, 9px); rotate: -1deg;
  background: #ebd7b7; border: 1px solid #ffeed1; border-radius: 3px; box-shadow: 0 22px 46px -18px #000b; }
.file-photo img { width: 100%; height: auto; }
.dossier { position: relative; padding: clamp(22px, 3.5vw, 44px); background: linear-gradient(150deg, #fff0d6, #e9d7bb);
  color: #211a14; border: 1px solid #fff0d6; border-radius: 3px 12px 12px 3px;
  box-shadow: inset 4px 0 0 #c89257, 0 20px 38px -22px #000b; }
.dossier h2 { color: #211a14; font-size: clamp(34px, 4vw, 56px); }
.stamp { display: table; margin: 0 0 13px; padding: 4px 8px; border: 2px solid #994638; border-radius: 2px;
  color: #994638; font: 900 16px/1 var(--display); letter-spacing: .08em; rotate: -4deg; }
.facts { display: grid; margin: 19px 0; border-top: 1px solid #2b211d61; }
.facts div { display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: 9px; padding: 8px 0; border-bottom: 1px solid #2b211d31; }
.facts dt { font-weight: 700; }
.story { max-width: 58ch; margin: 0; line-height: 1.75; }

/* ---------- 能量构成 + 登陆路线 ---------- */
.route { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(34px, 6vw, 86px);
  background: #0a1724; border-block: 1px solid #83a4b126; }
.token .lead { margin: 12px 0 20px; }
.token-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.token-grid div { padding: clamp(10px, 1.5vw, 16px); border: 1px solid #83a4b138; border-radius: 7px; min-width: 0; background: #0f202c; }
.token-grid dt { font-size: 14px; color: var(--paper-dim); }
.token-grid dd { margin-top: 6px; font: 900 clamp(18px, 2vw, 26px)/1.14 var(--display); overflow-wrap: anywhere; }
.token-grid dd[data-state="tba"] { color: #b4c3ca; }
.steps { list-style: none; margin: 20px 0 0; padding: 0; }
.steps li { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 14px; padding: 0 0 20px; }
.steps li:not(:last-child)::before { content: ""; position: absolute; top: 36px; bottom: 0; left: 18px; width: 1px; background: #83a4b14a; }
.steps li:last-child { padding-bottom: 0; }
.steps b { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #81adb758; border-radius: 50%;
  background: #0f2431; font: 900 19px/1 var(--display); color: #acd7db; }
.steps li:first-child b { border-color: #f4bb7061; color: #ffc686; }
.steps h3 { font-size: 25px; line-height: 1.12; }
.steps p { margin: 4px 0 0; color: var(--paper-dim); }

/* ---------- 铸造排行 ---------- */
.rank { border-inline-start: 1px solid #83a4b133; }
.rank-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 11px; margin-bottom: 15px; }
.tabs { display: flex; border: 1px solid #83a4b13d; border-radius: 10px; padding: 3px; background: #09141e; }
.tabs button { min-height: 44px; padding: 7px 16px; border: 0; border-radius: 7px; background: none; font-weight: 700; color: #c0cdd0;
  transition: background-color .16s, color .16s; }
.tabs button:hover { color: #fff; }
.tabs button[aria-selected="true"] { background: #addcdd; color: var(--night); }
.board { padding: 0 clamp(14px, 2.4vw, 27px); background: #0a1925; border: 1px solid #83a4b13d; border-radius: 13px; }
.row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; }
.row + .row { border-top: 1px solid #ffffff14; }
.row .no { font: 900 30px/1 var(--display); color: var(--paper-dim); }
.row:nth-child(-n+3) .no { color: var(--orange); }
.row code { font-size: 15px; }
.row a { color: var(--teal); text-underline-offset: 3px; }
.row .amt { font: 900 26px/1 var(--display); text-align: right; }
.row .amt small { font: 500 13px var(--body); color: var(--paper-dim); }
.row .bar-fill { grid-column: 2 / -1; height: 4px; background: #ffffff10; }
.row .bar-fill i { display: block; height: 100%; background: var(--teal); }
.empty { display: flex; align-items: center; gap: 14px; padding: 17px 0; color: #c0cdd0; font-size: 14px; }
.empty img { width: 44px; height: auto; border-radius: 50%; }
.empty strong { display: block; margin-bottom: 4px; color: var(--paper); font: 900 22px/1.1 var(--display); }

@media (prefers-reduced-motion: no-preference) {
  .quote.quote-feedback::after, .meter.meter-feedback::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  }
  .quote.quote-feedback::after {
    z-index: -1; background: radial-gradient(ellipse at 20% 30%, #9cf4e140, transparent 72%);
    animation: mint-quote-feedback .46s ease-out both;
  }
  .meter.meter-feedback::after {
    box-shadow: inset 0 0 0 1px #95f4e5b0, inset 0 0 24px #71e6cf35;
    animation: mint-meter-feedback .68s ease-out both;
  }
  .meter.meter-feedback 
  @supports (animation-timeline: view()) and (animation-range: entry 0% cover 40%) {
    .mint-deck { view-timeline-name: --mint-deck-view; view-timeline-axis: block; }
    .mint-deck::after {
      content: ""; background: linear-gradient(90deg, transparent, #b2fff3 52%, transparent) 100% 0 / 27% 100% no-repeat;
      animation: mint-dock-guide auto linear both;
      animation-timeline: --mint-deck-view;
      animation-range: entry 0% cover 40%;
    }
  }
  @supports (animation-timeline: view()) {
    .file-photo, .dossier {
      animation: dossier-arrival auto linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 27%;
    }
  }
}
@keyframes mint-quote-feedback { from { opacity: 1; } to { opacity: 0; } }
@keyframes mint-meter-feedback { from { opacity: 1; } to { opacity: 0; } }
@keyframes mint-dock-guide { to { background-position: 0 0; } }
@keyframes dossier-arrival { from { opacity: .72; transform: translateY(15px); } }

/* ---------- 响应式 ---------- */
@media (max-width: 1080px) {
  .nav { position: fixed; inset: 65px 0 auto; display: none; flex-direction: column; padding: 10px var(--pad) 18px; background: #070d14f5; border-bottom: 1px solid #ffffff14; }
  .nav.open { display: flex; }
  .nav a { padding: 12px; font-size: 17px; }
  .menu { display: grid; }
  .lang { margin-left: auto; }
}
@media (max-width: 900px) {
  .poster { grid-template-columns: 1fr; min-height: 0; }
  .poster-copy { padding: 32px 0 4px; text-align: center; }
  .teaser { margin-bottom: 16px; }
  .title { display: flex; justify-content: center; font-size: clamp(53px, 16.8vw, 118px); }
  .title span:last-child { padding-left: 0; }
  .hero-line { margin-top: 16px; }
  .tagline { margin-top: 6px; }
  .hero-actions { justify-content: center; margin-top: 17px; }
  .stage { height: clamp(280px, 85vw, 510px); margin: 0 calc(var(--pad) * -1); }
  .kaiju { inset: 0 4% 0; width: 92%; height: 100%; }
  .harbor-moon { right: 50%; top: auto; bottom: 12%; translate: 50% 0; width: clamp(220px, 72vw, 455px); opacity: .5; }
  .beam { width: 33vw; height: 68%; }
  .beam-a { left: 8%; } .beam-b { right: 7%; }
  .city-far { height: 32%; } .city-near { height: 46px; }
  .harbor-mist { height: 18%; }
  .mint-counter, .mint-activity { max-width: 620px; margin-inline: auto; grid-template-columns: minmax(0, 1fr); }
  .billing { border-inline-start: 0; border-top: 1px solid #a2b9b42b; }
  .rank { border-inline-start: 0; border-top: 1px solid #83a4b133; }
  .file, .route { grid-template-columns: 1fr; }
  .file-photo { rotate: 0deg; }
  .token-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .bar { gap: 10px; }
  .brand { gap: 8px; }
  .brand img { width: 34px; height: 34px; }
  .brand span { font-size: 22px; }
  .tagline { font-size: 15px; }
      .energy-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .energy-stats div:last-child { grid-column: 1 / -1; border-top: 1px solid #83a4b135; border-left: 0; }
  .facts div { grid-template-columns: 5.5em minmax(0, 1fr); }
  .tabs { width: 100%; }
  .tabs button { flex: 1; }
  .row { grid-template-columns: 37px minmax(0, 1fr) auto; gap: 8px; }
  .row .no { font-size: 21px; overflow-wrap: anywhere; }
  .row code { overflow-wrap: anywhere; }
  .summon { font-size: 18px; padding: 0 12px; }
}
@media (max-width: 415px) {
  .qty { grid-template-columns: minmax(0, 1fr); }
  .stepper { display: grid; grid-template-columns: 46px minmax(0, 1fr) 46px; }
  .stepper button { width: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .kaiju, .harbor-mist { animation: none; }
  .hero-mint, .summon, .mw-presets button, .tabs button { transition: none; }
  .summon:hover:not(:disabled), .summon:active:not(:disabled) { transform: none; }
}


/* ===== cover-v5.css ===== */
/* The harbor is the cover. Type and controls sit inside that single scene. */
.poster--cover {
  --cover-ink: #0a1520;
  --cover-cream: #f3ead7;
  --cover-edge: max(var(--pad), calc((100% - 1360px) / 2));
  --cover-position-x: .5;
  --cover-ratio: 1.77683;
  --cover-fog-rise: -42%;
  --cover-vignette: radial-gradient(ellipse at 4% 100%, #081520f2 0%, #081520b0 22%, transparent 57%),
    linear-gradient(180deg, #0a152057, transparent 25%, transparent 74%, #0a1520 100%);
  display: block;
  min-height: max(600px, calc(100svh - 65px));
  padding: 0;
  background: radial-gradient(ellipse at 54% 52%, #1b4d53, #091821 75%);
}

.cover-art, .cover-grade, .cover-ear, .cover-light, .cover-mist, .cover-fins, .cover-water {
  position: absolute;
  pointer-events: none;
}

.cover-art { inset: 0; display: block; }
.cover-art img { width: 100%; height: 100%; object-fit: cover; object-position: calc(var(--cover-position-x) * 100%) 50%; }

.cover-grade {
  z-index: 1;
  inset: 0;
  background: var(--cover-vignette);
}

.cover-title {
  position: absolute;
  z-index: 2;
  inset: clamp(22px, 4.2svh, 58px) var(--cover-edge) auto;
  width: auto;
  text-align: left;
  color: var(--cover-cream);
  font-size: clamp(103px, min(13.8vw, 25svh), 266px);
  font-weight: 900;
  line-height: .85;
  letter-spacing: -.042em;
  white-space: nowrap;
  text-shadow: 0 3px 22px #07141c5c;
  pointer-events: none;
}

.cover-ear { display: none; }
@media (min-width: 901px) {
  @supports (mask-image: url("")) {
    .cover-ear {
      z-index: 3;
      inset: 0;
      display: block;
      background: var(--cover-vignette), url("assets/art/port56-cover-wide.webp") center / cover no-repeat;
      /* Same full-frame artwork, cropped to the illustrated ear silhouette. */
      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1672 941'%3E%3Cpath d='M856 246C850 215 844 164 860 127C878 83 923 5 960 5C995 3 1037 63 1057 129L1084 146 1012 231 883 305 823 329C830 297 843 263 856 246Z'/%3E%3C/svg%3E") center / cover no-repeat;
    }
  }
}

.cover-copy {
  position: absolute;
  z-index: 5;
  inset: auto var(--cover-edge) clamp(31px, 6.5svh, 78px);
  width: fit-content;
  max-width: calc(100% - var(--cover-edge) * 2);
}

.cover-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 9px;
  color: #b1dfd7;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
}
.cover-kicker::before { content: ""; width: 20px; height: 1px; background: #9be7d8; }
.cover-line { margin: 0 0 18px; color: #f7efe0; font-size: clamp(22px, 2.15vw, 32px); font-weight: 700; line-height: 1.25; }
.cover-mint {
  min-height: 48px;
  padding: 10px 25px;
  border-radius: 5px;
  border-color: #ffad70;
  background: #ffa35e;
  color: #201a15;
  box-shadow: 0 8px 24px #060b1233;
}
.cover-mint:hover { background: #ffc089; }

.cover-light {
  z-index: 3;
  inset: -32% -10%;
  opacity: 0;
  transform: translate3d(-45%, 0, 0) rotate(-15deg);
  background: radial-gradient(ellipse 23% 42% at 52% 51%, #fff0c46b, #a1efe841 42%, #9ee8e514 67%, transparent 100%);
  mix-blend-mode: screen;
}

.cover-fins, .cover-water {
  z-index: 3;
  inset: 0;
  container-type: size;
  overflow: hidden;
  mix-blend-mode: screen;
}

/* Place the glints on the painted features using the same crop as object-fit. */
.cover-fins i, .cover-water i {
  --art-width: max(100cqw, 100cqh * var(--cover-ratio));
  --art-height: max(100cqh, 100cqw / var(--cover-ratio));
  position: absolute;
  left: calc((100% - var(--art-width)) * var(--cover-position-x) + var(--art-width) * var(--glint-x));
  top: calc((100% - var(--art-height)) * .5 + var(--art-height) * var(--glint-y));
  width: calc(var(--art-width) * var(--glint-width));
  height: calc(var(--art-height) * var(--glint-height));
  translate: -50% -50%;
  opacity: 0;
}

.cover-fins i {
  background: radial-gradient(ellipse, #aefbf0d9 0%, #5cefd28c 28%, #34daca40 53%, transparent 72%);
  --glint-width: .085;
  --glint-height: .105;
}
.cover-fins i:nth-child(1) { --glint-x: .173; --glint-y: .612; --glint-delay: .19s; }
.cover-fins i:nth-child(2) { --glint-x: .238; --glint-y: .549; --glint-delay: .39s; }
.cover-fins i:nth-child(3) { --glint-x: .307; --glint-y: .451; --glint-delay: .59s; }

.cover-water i {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 42' preserveAspectRatio='none'%3E%3Cpath d='M0 32Q32 31 62 25T113 25Q130 27 157 22T203 17Q236 19 252 16T290 11Q319 10 343 14T390 11Q416 10 431 6T464 9Q484 12 506 8T553 10Q582 10 600 5' fill='none' stroke='%23aef3e8' stroke-width='1.7' stroke-linecap='round'/%3E%3Cpath d='M88 33Q115 31 139 31m58-2q15 1 30-3m72-3q21-2 38-1m49-4q25 1 37-4m73 1q24-3 48-2' fill='none' stroke='%23e0fff5' stroke-width='1.15' stroke-linecap='round' opacity='.72'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask-image: radial-gradient(ellipse 52% 68% at 50% 52%, #000 32%, transparent 99%);
}
.cover-water i:nth-child(1) {
  --glint-x: .812;
  --glint-y: .936;
  --glint-width: .43;
  --glint-height: .047;
  --wave-period: 6.7s;
  --wave-delay: -1.6s;
}
.cover-water i:nth-child(2) {
  --glint-x: .741;
  --glint-y: .986;
  --glint-width: .64;
  --glint-height: .051;
  --wave-period: 9.1s;
  --wave-delay: -4.1s;
}
.cover-water i:nth-child(3) {
  --glint-x: .766;
  --glint-y: .951;
  --glint-width: .36;
  --glint-height: .10;
  background:
    radial-gradient(ellipse 39% 13% at 53% 26%, #bcf7e991 0%, transparent 100%),
    radial-gradient(ellipse 48% 15% at 58% 51%, #53e6cf93 0%, transparent 100%),
    radial-gradient(ellipse 38% 13% at 45% 78%, #8cfff283 0%, transparent 100%);
}

.cover-mist {
  z-index: 4;
  inset: auto -12% -1px;
  height: 58%;
  opacity: .23;
  mask-image: linear-gradient(180deg, transparent, #000 24%, #000 73%, transparent);
  background:
    radial-gradient(ellipse at 19% 78%, #92c5be99 0%, #6a9f9e55 24%, transparent 54%),
    radial-gradient(ellipse at 80% 90%, #9bc7c999 0%, #497f8650 27%, transparent 56%),
    linear-gradient(180deg, transparent 5%, #122a35 74%, var(--cover-ink) 100%);
}

@media (prefers-reduced-motion: no-preference) {
  .cover-arriving .cover-light { animation: cover-searchlight 1.6s cubic-bezier(.24, .58, .32, 1) both; }
  @supports (width: 1cqw) and (container-type: size) {
    .cover-arriving .cover-fins i { animation: cover-fin-glow 1.15s ease-out var(--glint-delay) both; }
    .cover-water i:nth-child(-n + 2) { animation: cover-water-foam var(--wave-period) ease-in-out var(--wave-delay) infinite; }
    .cover-arriving .cover-water i:nth-child(3) { animation: cover-water-reflection 1.65s ease-in-out .08s both; }
  }
  .scene-paused .cover-light, .scene-paused .cover-fins i, .scene-paused .cover-water i { animation-play-state: paused; }

  @supports (animation-timeline: view()) and (animation-range: exit 0% exit 100%) {
    .poster--cover { view-timeline-name: --cover-exit; view-timeline-axis: block; }
    .cover-mist {
      animation: cover-fog-cross 1s linear both;
      animation-timeline: --cover-exit;
      animation-range: exit 8% exit 100%;
    }
    .cover-art, .cover-ear {
      animation: cover-camera 1s linear both;
      animation-timeline: --cover-exit;
      animation-range: exit 8% exit 100%;
      transform-origin: 53% 62%;
    }
  }
}

@keyframes cover-searchlight {
  0% { opacity: 0; transform: translate3d(-45%, 4%, 0) rotate(-15deg); }
  27% { opacity: .66; }
  62% { opacity: .92; transform: translate3d(3%, 0, 0) rotate(4deg); }
  100% { opacity: 0; transform: translate3d(31%, -5%, 0) rotate(15deg); }
}
@keyframes cover-fin-glow {
  from { opacity: 0; transform: scale(.78); }
  31% { opacity: .72; transform: scale(1); }
  to { opacity: 0; transform: scale(1.12); }
}
@keyframes cover-water-foam {
  0%, 100% { opacity: .12; transform: translate3d(-3%, 13%, 0) scaleX(.97); }
  44% { opacity: .52; transform: translate3d(2%, -10%, 0) scaleX(1.04); }
  73% { opacity: .30; transform: translate3d(4%, 5%, 0) scaleX(1); }
}
@keyframes cover-water-reflection {
  0% { opacity: 0; transform: translate3d(-27%, 0, 0) scaleX(.7); }
  32% { opacity: .32; }
  65% { opacity: .77; transform: translate3d(0, 0, 0) scaleX(1); }
  100% { opacity: 0; transform: translate3d(23%, 0, 0) scaleX(.84); }
}
@keyframes cover-fog-cross {
  0% { opacity: .23; transform: translate3d(-7%, 12%, 0) scale(1.02); }
  72% { opacity: .9; }
  100% { opacity: 1; transform: translate3d(5%, var(--cover-fog-rise), 0) scale(1.22); }
}
@keyframes cover-camera { to { transform: scale(1.085) translate3d(0, -2%, 0); } }

@media (max-width: 900px) {
  .poster--cover { --cover-edge: var(--pad); min-height: max(570px, calc(100svh - 65px)); }
  .cover-title { font-size: clamp(76px, 20vw, 183px); text-align: center; }
}

@media (max-width: 700px) {
  .poster--cover {
    --cover-edge: clamp(17px, 6vw, 35px);
    --cover-position-x: .7;
    --cover-ratio: .70669;
    --cover-fog-rise: -34%;
    min-height: max(560px, calc(100svh - 65px));
  }
  .cover-title { inset-block-start: clamp(32px, 6.4svh, 60px); font-size: clamp(60px, 21vw, 139px); }
  .cover-grade {
    background:
      linear-gradient(180deg, #0a15205c, transparent 24%, transparent 54%, #0a152040 72%, #0a1520f5 100%),
      radial-gradient(ellipse at 0 100%, #07121be6, transparent 54%);
  }
  .cover-copy { inset-block-end: clamp(24px, 4svh, 38px); }
  .cover-kicker { margin-bottom: 6px; font-size: 11px; }
  .cover-line { margin-bottom: 13px; font-size: clamp(19px, 5.1vw, 25px); }
  .cover-mint { min-height: 46px; padding: 8px 22px; }
  .cover-mist { height: 53%; }
  /* The narrow crop catches the fin and the outer seam of the blue suit. */
  .cover-fins i { --glint-width: .145; --glint-height: .088; }
  .cover-fins i:nth-child(1) { --glint-x: .168; --glint-y: .614; }
  .cover-fins i:nth-child(2) { --glint-x: .191; --glint-y: .403; }
  .cover-fins i:nth-child(3) { --glint-x: .258; --glint-y: .293; }
  .cover-water i:nth-child(1) { --glint-x: .633; --glint-y: .935; --glint-width: .81; --glint-height: .043; }
  .cover-water i:nth-child(2) { --glint-x: .532; --glint-y: .986; --glint-width: .93; --glint-height: .047; }
  .cover-water i:nth-child(3) { --glint-x: .526; --glint-y: .956; --glint-width: .63; --glint-height: .082; }
}


/* ===== agentic.css ===== */
/* DOGEZILLA · Agentic Wallet 扫码弹窗 */

.agentic-live .hero-copy > .preview-note { display: none; }
[data-preview] .mw-quote strong.is-filled { color: inherit; background: none; animation: none; min-width: 0; user-select: auto; }
.mw-quote-primary strong.is-filled { color: #237393; }

/* 已连接条 */
.ag-connected-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 9px;
  margin-top: 10px;
  padding: 8px 8px 8px 12px;
  border: 1px solid #b9dcc5;
  border-radius: 10px;
  background: #eef8f1;
  color: #24553a;
  font-size: 13px;
  animation: ag-in .35s var(--ease-out, ease) both;
}
.ag-connected-bar[hidden] { display: none; }
.ag-dot { width: 8px; height: 8px; border-radius: 50%; background: #2f9e5b; box-shadow: 0 0 0 0 #2f9e5b80; animation: ag-ping 2s ease-out infinite; }
@keyframes ag-ping { 70%, 100% { box-shadow: 0 0 0 8px #2f9e5b00; } }
.ag-connected-label { font-weight: 750; }
.ag-connected-address { color: #1f4a32; font-size: 12.5px; }
.ag-disconnect {
  margin-left: auto;
  min-height: 34px;
  padding: 5px 12px;
  border: 1px solid #b9dcc5;
  border-radius: 8px;
  background: #fff;
  color: #24553a;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}
.ag-disconnect:hover { border-color: #3c9dc4; color: #257b9d; }

.mw-wallet-button.is-live:not(:disabled) { cursor: pointer; }
.mw-wallet-button.is-connected small::before { background: #6fe39a; box-shadow: 0 0 0 0 #6fe39a88; }

/* 弹窗 */
.ag-dialog {
  width: min(440px, calc(100% - 28px));
  max-height: calc(100dvh - 28px);
  padding: 0;
  border: 0;
  border-radius: 26px;
  background: transparent;
  color: var(--ink, #1b2329);
  overflow: visible;
}
.ag-dialog::backdrop { background: #0c212a99; backdrop-filter: blur(6px); }
.ag-dialog[open] { animation: ag-pop .45s cubic-bezier(.34, 1.4, .64, 1); }
.ag-dialog[open]::backdrop { animation: ag-fade .3s ease; }
@keyframes ag-pop { from { opacity: 0; transform: translateY(18px) scale(.94); } }
@keyframes ag-fade { from { opacity: 0; } }
@keyframes ag-in { from { opacity: 0; transform: translateY(6px); } }

.ag-card {
  position: relative;
  max-height: calc(100dvh - 28px);
  overflow-y: auto;
  padding: 34px 28px 26px;
  border: 1px solid #eedcc6;
  border-radius: 26px;
  background: radial-gradient(ellipse at 50% 0%, #fff3e1, transparent 60%), #fffcf6;
  box-shadow: 0 40px 80px -30px #0c212acc;
  text-align: center;
}
.ag-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid #eedcc6;
  border-radius: 50%;
  background: #fff8ee;
  color: #495964;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: transform .25s, background-color .2s;
}
.ag-close:hover { transform: rotate(90deg); background: #f9e5d3; }
.ag-body > * { animation: ag-in .35s ease both; }
.ag-body > :nth-child(2) { animation-delay: .03s; }
.ag-body > :nth-child(3) { animation-delay: .06s; }
.ag-body > :nth-child(4) { animation-delay: .09s; }
.ag-body > :nth-child(n+5) { animation-delay: .12s; }

/* 二维码框：沿用截图里的虚线 + 棋盘格风格 */
.ag-qr {
  position: relative;
  display: grid;
  place-items: center;
  width: 216px;
  aspect-ratio: 1;
  margin: 0 auto;
  padding: 12px;
  border: 2px dashed #d7b57f;
  border-radius: 24px;
  background:
    conic-gradient(#f6e3c3 25%, #fff6e6 0 50%, #f6e3c3 0 75%, #fff6e6 0) 0 0 / 18px 18px;
}
.ag-qr img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 24px -14px #1d566d88;
  image-rendering: pixelated;
}
.ag-qr.is-expired img { filter: blur(3px) grayscale(1); opacity: .35; }
.ag-qr-overlay {
  position: absolute;
  inset: auto 50% 50% auto;
  translate: 50% 50%;
  padding: 10px 14px;
  border: 0;
  border-radius: 10px;
  background: var(--orange, #2680a4);
  color: #fffaf0;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 0 #1b5a73;
}
.ag-qr.is-loading::after { position: absolute; inset: 12px; border-radius: 12px; background: linear-gradient(90deg, #fff6e600, #fff6e6cc, #fff6e600) 0 0 / 200% 100%; animation: shimmer 1.4s linear infinite; content: ""; }

.ag-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid #e9d7c2;
  border-top-color: var(--orange, #2680a4);
  border-radius: 50%;
  animation: ag-spin .8s linear infinite;
}
.ag-spinner-lg { width: 54px; height: 54px; border-width: 4px; }
@keyframes ag-spin { to { transform: rotate(1turn); } }
.ag-working { display: grid; place-items: center; height: 120px; }

.ag-kicker { margin: 22px 0 0; color: #5d7382; font: 700 11px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .16em; }
.ag-dialog h2 { margin: 8px 0 0; font: 800 26px/1.2 var(--display, sans-serif); letter-spacing: -.03em; }
.ag-lead { max-width: 34ch; margin: 12px auto 0; color: #495964; font-size: 14.5px; line-height: 1.65; }

.ag-pairing {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 8px 14px;
  border: 1px solid #eedcc6;
  border-radius: 12px;
  background: #fff6e6;
}
.ag-pairing span { color: #5d7382; font-size: 12px; font-weight: 700; }
.ag-pairing strong { color: #1b2329; font: 800 22px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .18em; }
.ag-status { margin: 12px 0 0; color: #5d7382; font-size: 13px; font-variant-numeric: tabular-nums; }
.ag-status.is-warn { color: #257b9d; font-weight: 750; }
.ag-open-app { display: inline-block; margin-top: 8px; color: #257b9d; font-size: 13px; font-weight: 750; text-decoration: underline; text-underline-offset: 3px; }

.ag-scope { margin: 18px 0 0; border: 1px solid #eedcc6; border-radius: 14px; background: #fffaf2; text-align: left; }
.ag-scope summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 14px; color: #1d576e; font-size: 13px; font-weight: 800; list-style: none; cursor: pointer; }
.ag-scope summary::-webkit-details-marker { display: none; }
.ag-scope summary::after { content: "+"; font-size: 17px; transition: transform .25s; }
.ag-scope[open] summary::after { transform: rotate(45deg); }
.ag-scope ul { margin: 0; padding: 0 16px 12px 30px; color: #495964; font-size: 12.5px; line-height: 1.6; }
.ag-scope li + li { margin-top: 4px; }

.ag-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ag-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s, background-color .2s;
}
.ag-btn:disabled { opacity: .55; cursor: not-allowed; }
.ag-btn-primary {
  width: 100%;
  margin-top: 18px;
  border-color: #b8862f;
  background: linear-gradient(135deg, #f3d48b, #e2b04b 55%, #cf9533);
  color: #3a2208;
  box-shadow: 0 4px 0 #a5742a, 0 16px 28px -16px #b8862f;
  font-size: 15.5px;
}
.ag-btn-primary:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 6px 0 #a5742a, 0 20px 32px -16px #b8862f; }
.ag-btn-primary:not(:disabled):active { transform: translateY(2px); box-shadow: 0 1px 0 #a5742a; }
.ag-btn-quiet { border-color: #eedcc6; background: #fff8ee; color: #495964; font-size: 13px; }
.ag-btn-quiet:hover { background: #f9e5d3; }
.ag-body > .ag-btn-quiet { width: 100%; margin-top: 8px; }

.ag-badge {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 4px auto 0;
  border-radius: 50%;
  font: 800 28px/1 var(--display, sans-serif);
}
.ag-badge-ok { background: linear-gradient(135deg, #3fb36b, #23874a); color: #fff; box-shadow: 0 12px 24px -12px #23874a; }
.ag-badge-wait { background: #fff0c7; box-shadow: 0 12px 24px -14px #b8862f; }
.ag-badge-err { background: #fbe1d8; color: #257b9d; }
.ag-pop { animation: ag-badge-pop .6s cubic-bezier(.34, 1.8, .64, 1) both !important; }
@keyframes ag-badge-pop { from { transform: scale(0) rotate(-30deg); } }

.ag-wallet { display: inline-flex; align-items: center; gap: 9px; margin-top: 14px; padding: 7px 12px; border-radius: 10px; background: #eef8f1; color: #24553a; font-size: 13px; font-weight: 700; }
.ag-wallet code { color: #1f4a32; }
.ag-summary { display: grid; gap: 0; margin: 18px 0 0; border: 1px solid #eedcc6; border-radius: 14px; background: #fffaf2; text-align: left; }
.ag-summary > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 15px; }
.ag-summary > div + div { border-top: 1px solid #f1e3d2; }
.ag-summary dt { color: #5d7382; font-size: 13px; }
.ag-summary dd { margin: 0; color: #1b2329; font-weight: 750; overflow-wrap: anywhere; text-align: right; }
.ag-summary .is-strong dd { color: #237393; font: 800 26px/1 var(--display, sans-serif); letter-spacing: -.03em; }
.ag-summary .is-strong small { font: 750 12px var(--body, sans-serif); letter-spacing: .04em; }
.ag-summary a { color: #257b9d; text-decoration: underline; text-underline-offset: 3px; }
.ag-note { margin: 12px 0 0; color: #5d7382; font-size: 12.5px; line-height: 1.55; }
.ag-tx { display: inline-block; margin-top: 14px; color: #257b9d; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 420px) {
  .ag-card { padding: 30px 18px 20px; border-radius: 22px; }
  .ag-qr { width: 190px; }
  .ag-dialog h2 { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  .ag-dialog[open], .ag-dialog[open]::backdrop, .ag-body > *, .ag-dot { animation: none !important; }
}

/* 钱包额度与邀请链接 */
.ag-quota { margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; background: #fff3e4; color: #6b3a1f; font-size: 13px; font-weight: 650; text-align: center; }
.ag-invite { display: grid; gap: 6px; margin: 14px 0 6px; padding: 12px; border: 1px dashed rgba(130, 53, 36, .35); border-radius: 12px; text-align: left; }
.ag-invite > span { font-size: 12px; font-weight: 750; letter-spacing: .02em; color: #246782; }
.ag-invite small { color: var(--muted, #616d76); font-size: 12px; line-height: 1.5; }
.ag-invite-row { display: flex; gap: 8px; align-items: center; min-width: 0; }
.ag-invite-row code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 8px 10px; border-radius: 8px; background: #fbf4ea; font-size: 12px; }
.ag-invite-copy { flex: none; min-height: 36px; padding: 0 14px; border: 0; border-radius: 8px; background: #267ea1; color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.ag-invite-copy:hover { background: #206a87; }


/* ===== zilla-wallet.css ===== */
/* 钱包扫码弹窗：沿用纸色卡片（与怪兽档案一致），换成 DOGEZILLA 配色 */
.ag-dialog::backdrop { background: #04080dcc; backdrop-filter: blur(6px); }
.ag-card { background: var(--paper) !important; color: #1a1712 !important; border-radius: 4px !important; box-shadow: 10px 10px 0 var(--orange), 0 30px 80px #000 !important; }
.ag-dialog h2 { font-family: var(--display) !important; font-weight: 900 !important; font-size: 34px !important; letter-spacing: 0 !important; color: #1a1712; }
.ag-close:hover { background: #ffe1c2 !important; }
.ag-dialog :is(.ag-status.is-warn, .ag-open-app) { color: var(--ember) !important; }
.ag-dialog button:not(.ag-close) { font-family: var(--body); }
.ag-connected-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 12px; background: #2ad1d814 !important; border: 1px solid var(--line) !important; border-radius: 4px; color: var(--paper); }
.ag-connected-bar[hidden] { display: none; }
.ag-connected-address { color: var(--teal) !important; }
.ag-disconnect { margin-left: auto; color: var(--paper) !important; background: none !important; border: 1px solid #ffffff33 !important; border-radius: 4px; padding: 6px 10px; }
.ag-disconnect:hover { border-color: var(--teal) !important; }


/* ===================================================================
   V7 新增
   =================================================================== */

/* ---------- 首屏：铸造状态条 ---------- */
.cover-status {
  display: flex; flex-wrap: wrap; gap: 0; width: fit-content; margin: 0 0 16px;
  border: 1px solid #a7d9d33d; border-radius: 6px; background: #081520b8; backdrop-filter: blur(6px);
}
.cover-status div { padding: 8px 16px; min-width: 0; }
.cover-status div + div { border-left: 1px solid #a7d9d32e; }
.cover-status dt { font-size: 12px; color: #a9c4c6; }
.cover-status dd { font: 700 20px/1.2 var(--display); letter-spacing: .02em; color: var(--paper); white-space: nowrap; }
.cover-status dd[data-state="tba"], #hero-state:not([data-state="live"]) { color: #ffc686; }
.cover-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.cover-mint { font-size: 17px; }
.cover-how { color: #cfeee8; font-weight: 700; text-underline-offset: 4px; }
.cover-how:hover { color: #fff; }

/* ---------- 能量槽 → 港口水位尺 ---------- */
.tide { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: end; gap: clamp(14px, 2.4vw, 26px); margin-bottom: 4px; }
.tide .meter { display: block; padding: 0; border: 0; background: none; border-radius: 0; }
.gauge {
  --tick: #c9e6e24d;
  position: relative; height: clamp(210px, 26vw, 270px); overflow: hidden;
  border: 1px solid #8fb9b85c; border-radius: 4px 4px 2px 2px;
  background:
    repeating-linear-gradient(0deg, var(--tick) 0 2px, transparent 2px 10%) left bottom / 42% 100% no-repeat,
    repeating-linear-gradient(0deg, #c9e6e226 0 1px, transparent 1px 2%) left bottom / 22% 100% no-repeat,
    linear-gradient(90deg, #0b1d29, #102735 60%, #0b1d29);
  box-shadow: inset 0 0 0 3px #071019, 0 18px 30px -20px #000;
}
.gauge-land {
  position: absolute; z-index: 3; inset: 7px 0 auto; padding-top: 4px; text-align: center;
  border-top: 2px dashed #ffb25d; color: #ffc686; font: 700 11px/1 var(--body); letter-spacing: .06em;
}
.water {
  position: absolute; z-index: 1; inset: auto 0 0; display: block;
  height: calc(var(--level, 0) * 1%); min-height: 6px;
  background: linear-gradient(180deg, #7fe7dfe6, #2aaebb 30%, #146b80);
  box-shadow: 0 -6px 18px #2ad1d855;
  transition: height 1.2s cubic-bezier(.2, .8, .2, 1);
}
.water::before {
  content: ""; position: absolute; inset: -7px 0 auto; height: 8px;
  background: radial-gradient(circle at 10px 8px, transparent 7px, #7fe7dfe6 7.5px) 0 0 / 20px 8px repeat-x;
}
.buoy {
  position: absolute; z-index: 2; left: 50%; top: -24px; width: 40px; height: 40px; translate: -50% 0;
  border-radius: 50%; box-shadow: 0 0 0 2px #f3ead7, 0 6px 14px #0009;
  animation: bob 3.4s ease-in-out infinite;
}
@keyframes bob { 50% { transform: translateY(-4px) rotate(-4deg); } }
.meter.is-full .gauge-land { color: #fff; border-top-style: solid; }
.tide-read { display: grid; gap: 2px; padding-bottom: 6px; }
.tide-label { font-size: 14px; color: var(--paper-dim); }
.tide .meter-pct { text-align: left; font-size: clamp(54px, 7vw, 92px); line-height: .9; }

/* ---------- 档案：当前身高 ---------- */
.fact-height dd b { font: 900 30px/1 var(--display); color: #1d4f5a; }
.fact-height dd span { color: #5d4c3e; font-size: 14px; }

/* ---------- 怎么铸造 ---------- */
.howto { background: linear-gradient(180deg, #09141e, #0c1c27); }
.how-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); margin: 26px 0 0; padding: 0; }
.how-steps li { position: relative; padding: 20px 20px 22px; border-top: 3px solid #f4b36d; background: #0e2230; border-radius: 0 0 8px 8px; }
.how-steps b { display: block; font: 900 46px/1 var(--display); color: #f4b36d; }
.how-steps h3 { margin-top: 8px; font-size: 26px; }
.how-steps p { margin: 6px 0 0; color: #c5d3d7; }
.how-note { max-width: 70ch; margin: 22px 0 0; padding: 12px 16px; border-left: 3px solid #e2735f; background: #2a15142e; color: #f3d8cf; font-size: 15px; }

/* ---------- 问答 + 社群 ---------- */
.faq { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .7fr); gap: 24px clamp(28px, 5vw, 72px); align-items: start; background: #0b1822; }
.faq h2 { grid-column: 1 / -1; }
.faq-list details { border-bottom: 1px solid #ffffff1c; }
.faq-list summary { display: flex; justify-content: space-between; gap: 16px; padding: 17px 0; list-style: none; cursor: pointer; font-weight: 700; font-size: 18px; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; flex: none; font: 900 26px/1 var(--display); color: #f4b36d; transition: rotate .2s; }
.faq-list details[open] summary::after { rotate: 45deg; }
.faq-list p { max-width: 62ch; margin: 0 0 18px; color: #c5d3d7; }
.community { padding: 22px; border: 1px solid #a1c4c044; border-radius: 8px; background: #0e2230; }
.community h3 { font-size: 30px; }
.community p { margin: 6px 0 14px; color: #c5d3d7; }
.comm-links { display: flex; flex-wrap: wrap; gap: 8px; }
.comm { padding: 9px 15px; border: 1px dashed #ffffff38; border-radius: 4px; font-weight: 700; color: #f3ead86b; }

/* ---------- 页脚 ---------- */
.site-foot { display: grid; justify-items: center; gap: 10px; padding: 48px var(--pad) 96px; text-align: center; background: #050b11; border-top: 1px solid #a1c4c033; }
.foot-brand { display: flex; align-items: center; gap: 10px; font: 900 30px/1 var(--display); }
.foot-brand img { border-radius: 50%; }
.disclaimer { max-width: 62ch; margin: 0; font-size: 13px; color: #f3ead880; }
.totop { color: #abe3e3; font-weight: 700; }

/* ---------- 手机底部铸造按钮 ---------- */
.dock-mint { display: none; }
@media (max-width: 900px) {
  .dock-mint {
    position: fixed; z-index: 40; inset: auto 14px max(14px, env(safe-area-inset-bottom));
    display: grid; place-items: center; min-height: 52px;
    border-radius: 8px; background: #ffb25d; color: #16120e; font-weight: 800; font-size: 17px; text-decoration: none;
    box-shadow: 0 4px 0 #b7642c, 0 14px 30px #000a;
    opacity: 0; transform: translateY(130%); pointer-events: none;
    transition: opacity .25s, transform .25s;
  }
  .dock-mint.is-shown { opacity: 1; transform: none; pointer-events: auto; }
  .how-steps { grid-template-columns: 1fr; }
  .faq { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .cover-status { width: 100%; }
  .cover-status div { flex: 1 1 0; padding: 7px 10px; }
  .cover-status dd { font-size: 17px; }
  .tide { grid-template-columns: 76px minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .buoy { animation: none; }
  .water, .dock-mint { transition: none; }
}
.gauge-mark { position: absolute; z-index: 2; right: 6px; translate: 0 50%; font: 700 11px/1 var(--display); color: #c9e6e28c; }
.m75 { bottom: 75%; } .m50 { bottom: 50%; } .m25 { bottom: 25%; }
.tide { align-items: stretch; }
.tide-read { align-content: end; gap: 6px; padding-bottom: 0; }
.tide .meter-pct.is-na { font-size: 44px; color: #f3ead866; }
.tide .energy-stats { grid-template-columns: 1fr 1fr; margin-top: 8px; }
.tide .energy-stats div:last-child { grid-column: 1 / -1; border-left: 0; border-top: 1px solid #83a4b135; }

/* ===================================================================
   V8 新增：顶栏融入首屏 · 首屏特效 · 持币战力榜
   =================================================================== */
html { scroll-padding-top: 12px; }

/* ---------- 顶栏融入首屏 ---------- */
.bar--overlay {
  position: absolute; inset: 0 0 auto; z-index: 30;
  background: linear-gradient(180deg, #050b11b3, #050b1100);
  border-bottom: 0; backdrop-filter: none;
}
.bar--overlay .brand { margin-right: auto; text-shadow: 0 2px 12px #000a; }
.social { display: flex; align-items: center; gap: 8px; }
.social:not(:has(a)) { display: none; }
.social-link {
  display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 12px;
  border: 1px solid #ffffff3d; border-radius: 4px; background: #050b1166; color: var(--paper);
  font-weight: 700; text-decoration: none; backdrop-filter: blur(6px);
}
.social-link:hover { border-color: #abe3e3; }
.bar--overlay .lang { background: #050b1166; backdrop-filter: blur(6px); }
.poster--cover { min-height: max(620px, 100svh); }
.cover-title { inset-block-start: calc(64px + clamp(10px, 2.4svh, 34px)); }
@media (max-width: 900px) { .poster--cover { min-height: max(600px, 100svh); } }
@media (max-width: 700px) { .cover-title { inset-block-start: calc(60px + clamp(12px, 3svh, 30px)); } }

/* ---------- 首屏特效 ---------- */
/* 1) 标题逐字从海面升起 */
.cover-title .tl { display: inline-block; }
/* 2) 鼠标视差：画面层整体轻移（同一位移，耳朵蒙版和高光仍然对齐） */
.cover-art, .cover-ear, .cover-fins, .cover-water, .cover-lamp {
  scale: 1.035;
  translate: calc(var(--mx, 0) * 22px) calc(var(--my, 0) * 12px);
  transition: translate .7s cubic-bezier(.2, .8, .2, 1);
}
.cover-title { translate: calc(var(--mx, 0) * -12px) calc(var(--my, 0) * -6px); transition: translate .7s cubic-bezier(.2, .8, .2, 1); }
/* 3) 码头路灯：暖光呼吸 + 偶尔闪烁 */
.cover-lamp { position: absolute; z-index: 3; inset: 0; container-type: size; overflow: hidden; pointer-events: none; mix-blend-mode: screen; }
.cover-lamp i {
  --art-width: max(100cqw, 100cqh * var(--cover-ratio));
  --art-height: max(100cqh, 100cqw / var(--cover-ratio));
  position: absolute;
  left: calc((100% - var(--art-width)) * var(--cover-position-x) + var(--art-width) * .905);
  top: calc((100% - var(--art-height)) * .5 + var(--art-height) * .265);
  width: calc(var(--art-width) * .14); height: calc(var(--art-height) * .2);
  translate: -50% -50%;
  background: radial-gradient(ellipse, #fff3c8b0 0%, #9ff2e86b 32%, #5ee3d824 58%, transparent 74%);
  opacity: .5;
}
/* 4) 细雨画布 */
.cover-rain { position: absolute; z-index: 4; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }
/* 5) 状态灯 */
#hero-state:not([data-state="live"])::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; vertical-align: .15em;
  border-radius: 50%; background: #ffb25d; box-shadow: 0 0 0 0 #ffb25d99;
}
@media (prefers-reduced-motion: no-preference) {
  .cover-title .tl { animation: letter-rise 1s cubic-bezier(.16, .84, .3, 1) calc(.15s + var(--i) * .055s) both; }
  .cover-lamp i { animation: lamp 6.5s ease-in-out 1.6s infinite; }
  #hero-state:not([data-state="live"])::before { animation: ping 2s ease-out infinite; }
  .scene-paused .cover-lamp i, .scene-paused #hero-state::before { animation-play-state: paused; }
}
@keyframes letter-rise {
  from { opacity: 0; transform: translateY(.45em) scaleY(1.15); filter: blur(8px); }
  60% { opacity: 1; filter: blur(0); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes lamp {
  0%, 100% { opacity: .45; } 40% { opacity: .85; } 46% { opacity: .3; } 48% { opacity: .8; } 70% { opacity: .6; }
}
@keyframes ping { 70% { box-shadow: 0 0 0 9px #ffb25d00; } 100% { box-shadow: 0 0 0 0 #ffb25d00; } }
@media (max-width: 700px) { .cover-lamp { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .cover-art, .cover-ear, .cover-fins, .cover-water, .cover-lamp, .cover-title { translate: none; transition: none; }
  .cover-rain { display: none; }
}

/* ---------- 持币战力榜 ---------- */
.power { background: radial-gradient(ellipse 60% 70% at 50% 30%, #17384a, #0a1520 70%); text-align: center; }
.power-head { display: grid; justify-items: center; gap: 10px; }
.power-lead { max-width: 52ch; margin: 0; color: #c5d3d7; }
.podium {
  --gold: #f2c14e; --silver: #cfdbe0; --bronze: #d58e55;
  list-style: none; display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: clamp(8px, 1.6vw, 18px);
  max-width: 860px; margin: clamp(30px, 4vw, 48px) auto 0; padding: 0 0 0;
  border-bottom: 8px solid #213846; position: relative;
}
.podium::before {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 46%; height: 135%; translate: -50% 0; pointer-events: none;
  background: linear-gradient(0deg, #f2c14e30, transparent 85%); clip-path: polygon(38% 100%, 62% 100%, 100% 0, 0 0);
}
.spot { position: relative; display: grid; justify-items: center; gap: 12px; min-width: 0; }
.spot-1 { --c: var(--gold); } .spot-2 { --c: var(--silver); } .spot-3 { --c: var(--bronze); }
.champ { position: relative; display: grid; justify-items: center; gap: 4px; min-width: 0; max-width: 100%; }
.champ img { width: clamp(52px, 7vw, 66px); height: auto; border-radius: 50%; box-shadow: 0 0 0 3px var(--c), 0 10px 24px #000a; }
.spot-1 .champ img { width: clamp(64px, 9vw, 86px); box-shadow: 0 0 0 4px var(--c), 0 0 34px #f2c14e88, 0 12px 26px #000a; }
.crown {
  width: 38px; height: 24px; margin-bottom: -2px; background: var(--gold);
  clip-path: polygon(0 100%, 0 25%, 25% 60%, 50% 0, 75% 60%, 100% 25%, 100% 100%);
  filter: drop-shadow(0 0 8px #f2c14eaa);
}
.champ-addr { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--paper); }
.champ-addr a { color: var(--paper); text-underline-offset: 3px; }
.champ-power { color: #c5d3d7; font-size: 13px; }
.champ-power b { font: 900 clamp(24px, 3vw, 34px)/1 var(--display); color: var(--c); }
.block {
  width: 100%; display: grid; justify-items: center; padding-top: 10px;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 92%, #fff), color-mix(in srgb, var(--c) 55%, #0a1520));
  box-shadow: inset 0 2px 0 #ffffff80, inset 0 -18px 30px #0a152055;
}
.block span { font: 900 clamp(46px, 7vw, 84px)/1 var(--display); color: #0a1520b3; text-shadow: 0 1px 0 #ffffff66; }
.spot-1 .block { height: clamp(150px, 20vw, 210px); }
.spot-2 .block { height: clamp(110px, 14vw, 150px); }
.spot-3 .block { height: clamp(84px, 11vw, 118px); }
.spot.is-vacant .champ img { filter: grayscale(1) brightness(.6); opacity: .55; }
.spot.is-vacant .champ-addr { color: #f3ead880; }
@media (prefers-reduced-motion: no-preference) {
  .spot:not(.is-vacant) .crown { animation: crown-bob 3s ease-in-out infinite; }
}
@keyframes crown-bob { 50% { transform: translateY(-4px); } }
.power-list { max-width: 860px; margin: 26px auto 0; text-align: left; }
.power-list .row .no { color: var(--paper-dim); }
.power-note { margin: 14px 0 0; font-size: 13px; color: #f3ead880; }
/* 拆字后阴影改到整体上，避免相邻字母互相压出暗边 */
.cover-title[data-split] { text-shadow: none; filter: drop-shadow(0 3px 18px #07141c66); }
.cover-title .tl { text-shadow: none; }

.power-lead { text-wrap: balance; }
.faq { grid-template-columns: minmax(0, 1fr); }
.faq-list { max-width: 860px; }
@media (max-width: 700px) {
  .cover-status { display: grid; grid-template-columns: auto auto 1fr; }
  .cover-status div { padding: 7px 11px; }
  .cover-status dd { font-size: 16px; }
  #hero-state:not([data-state="live"])::before { width: 6px; height: 6px; margin-right: 5px; }
}

/* ===================================================================
   V9：雷暴 + 路灯断电（路灯为原画，平时遮罩完全透明）
   =================================================================== */
/* 闪电画布：在画面之上、标题之下 */
.cover-bolt { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }

/* 断电遮罩：按原画坐标盖住灯罩和光束，正片叠底压暗 */
.cover-blackout {
  position: absolute; z-index: 2; inset: 0; container-type: size; overflow: hidden; pointer-events: none;
  mix-blend-mode: multiply; filter: blur(7px); opacity: 0;
  scale: 1.035; translate: calc(var(--mx, 0) * 22px) calc(var(--my, 0) * 12px);
  transition: translate .7s cubic-bezier(.2, .8, .2, 1);
}
.cover-blackout i {
  --art-width: max(100cqw, 100cqh * var(--cover-ratio));
  --art-height: max(100cqh, 100cqw / var(--cover-ratio));
  position: absolute; background: #0a171d;
  left: calc((100% - var(--art-width)) * var(--cover-position-x) + var(--art-width) * var(--x0));
  top: calc((100% - var(--art-height)) * .5 + var(--art-height) * var(--y0));
  width: calc(var(--art-width) * var(--w)); height: calc(var(--art-height) * var(--h));
}
.bo-beam { --x0: .80; --y0: .23; --w: .155; --h: .40; clip-path: polygon(50% 1%, 97% 1%, 70% 88%, 7% 100%, 7% 33%, 23% 10%); }
.bo-head { --x0: .858; --y0: .15; --w: .1; --h: .115; clip-path: polygon(24% 0, 86% 0, 100% 100%, 0 100%); }
.lamp-off .cover-blackout { opacity: .93; }
.lamp-dim .cover-blackout { opacity: .55; }

/* 天空闪光 */
.cover-flash {
  position: absolute; z-index: 4; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background:
    radial-gradient(ellipse 55% 60% at var(--fx, 18%) 0%, #eafcffd9, #a6ecff66 38%, transparent 72%),
    linear-gradient(180deg, #cfefff4d, transparent 65%);
}
.is-striking .cover-flash { animation: sky-flash .75s linear both; }
@keyframes sky-flash {
  0% { opacity: 0; } 5% { opacity: .9; } 12% { opacity: .12; } 20% { opacity: 1; } 40% { opacity: .3; } 100% { opacity: 0; }
}
/* 雷声：画面轻微震动 */
.is-rumbling .cover-copy, .is-rumbling .cover-title { animation: rumble .45s linear both; }
@keyframes rumble {
  0%, 100% { transform: none; } 20% { transform: translate(1.5px, -1px); } 40% { transform: translate(-2px, 1px); }
  60% { transform: translate(1px, 1.5px); } 80% { transform: translate(-1px, -1px); }
}
@media (max-width: 700px) { .cover-blackout { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .cover-bolt, .cover-blackout, .cover-flash { display: none; }
}
/* 断电改用「关灯版」原画切片（同一幅画压暗灯泡与光束），比纯色遮罩自然 */
.cover-blackout { mix-blend-mode: normal; filter: none; }
.cover-blackout .bo-art {
  --x0: .78; --y0: .08; --w: .22; --h: .64;
  clip-path: none; background: url("assets/art/port56-lamp-off.webp") 0 0 / 100% 100% no-repeat;
}
.lamp-off .cover-blackout { opacity: 1; }
.lamp-dim .cover-blackout { opacity: .6; }

/* 路灯在原画最右侧（横向 87%–95%）。
   3:2 ~ 16:9：保持原裁法，耳朵压标题的效果与 V6 一致，路灯可见；
   比 3:2 更方：从左边多裁，保证路灯可见，并关掉耳朵效果，标题完整可读；
   比 16:9 更宽：耳朵蒙版会与原画错位（V6 原有问题），关掉耳朵效果。 */
@media (min-width: 701px) and (max-aspect-ratio: 3/2) {
  .poster--cover { --cover-position-x: .9; }
  .cover-ear { display: none !important; }
}
@media (min-width: 701px) and (min-aspect-ratio: 16/9) {
  .cover-ear { display: none !important; }
}
/* 耳朵压标题时限制标题字号，避免耳朵盖住最后一个字母（标题宽约 3.41 倍字号） */
@media (min-width: 901px) and (min-aspect-ratio: 3/2) and (max-aspect-ratio: 16/9) {
  /* 耳朵左缘 ≈ 50vw + 0.89vh；标题左缘 = max(56px, 50vw − 680px)；只让耳朵压住「A」最右一点（约 10px） */
  .cover-title { font-size: min(clamp(103px, min(13.8vw, 25svh), 266px), calc(14.66vw + .26vh - 13.5px), calc(202px + .26vh)); }
}