/* 冒险者工会 · 深海 × 羊皮纸 的混搭视觉
   只依赖系统字体，零构建。 */

:root {
  --abyss: #050f1f;
  --abyss-2: #0a1c33;
  --panel: rgba(14, 34, 58, 0.86);
  --panel-2: rgba(17, 42, 71, 0.92);
  --line: rgba(120, 200, 255, 0.18);
  --text: #dff2ff;
  --muted: #8fb3cc;
  --cyan: #5fe0ff;
  --gold: #ffd166;
  --rose: #ff8fab;
  --green: #7ee787;
  --shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
  --radius: 16px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Segoe UI", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1200px 700px at 15% -10%, #123a5e 0%, transparent 60%),
    radial-gradient(900px 600px at 110% 10%, #1b2a4a 0%, transparent 55%),
    linear-gradient(180deg, #071527 0%, #040c18 100%);
  /* 游戏式全屏界面：页面本身不滚动，标题画面和面板各自滚动 */
  overflow: hidden;
}

/* 深海气泡 */
.bubbles { pointer-events: none; overflow: hidden; }
.bubbles span {
  position: absolute;
  bottom: -60px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(200, 245, 255, 0.9), rgba(90, 190, 255, 0.15));
  animation: rise linear infinite;
  opacity: 0.55;
}
.bubbles span:nth-child(1) { left: 6%;  animation-duration: 17s; animation-delay: 0s; }
.bubbles span:nth-child(2) { left: 18%; animation-duration: 23s; animation-delay: 3s; width: 16px; height: 16px; }
.bubbles span:nth-child(3) { left: 31%; animation-duration: 15s; animation-delay: 6s; }
.bubbles span:nth-child(4) { left: 44%; animation-duration: 26s; animation-delay: 1.5s; width: 7px; height: 7px; }
.bubbles span:nth-child(5) { left: 57%; animation-duration: 19s; animation-delay: 8s; }
.bubbles span:nth-child(6) { left: 68%; animation-duration: 28s; animation-delay: 4s; width: 20px; height: 20px; }
.bubbles span:nth-child(7) { left: 79%; animation-duration: 16s; animation-delay: 10s; }
.bubbles span:nth-child(8) { left: 88%; animation-duration: 22s; animation-delay: 2s; width: 13px; height: 13px; }
.bubbles span:nth-child(9) { left: 95%; animation-duration: 20s; animation-delay: 12s; }
.bubbles span:nth-child(10) { left: 52%; animation-duration: 24s; animation-delay: 14s; width: 9px; height: 9px; }

@keyframes rise {
  0%   { transform: translateY(0) translateX(0) scale(0.8); opacity: 0; }
  10%  { opacity: 0.6; }
  100% { transform: translateY(-115vh) translateX(30px) scale(1.15); opacity: 0; }
}

/* ═════════════ 游戏外壳：世界背景 / 标题画面 / 顶栏 / 看板主界面 / 滑入面板 ═════════════ */

:root {
  --title-font: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STZhongsong", "SimSun", serif;
  --gold-2: #f3c56b;
  --edge: rgba(150, 220, 255, 0.35);
  --cut: 14px;
  --px: 0;
  --py: 0;
}

/* ── 深海世界 ── */
.world { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.world > * { position: absolute; inset: -40px; }
.world-sky {
  /* 启动时探测到 assets/bg-home.webp 才会加 .has-bg 铺上背景图；没有就只显示渐变 */
  background:
    radial-gradient(900px 520px at 50% -8%, #1f6fa8 0%, transparent 70%),
    radial-gradient(700px 500px at 12% 30%, #0f3a66 0%, transparent 70%),
    radial-gradient(800px 600px at 92% 60%, #102d55 0%, transparent 70%),
    linear-gradient(180deg, #0a2a4c 0%, #061a33 45%, #030b18 100%);
  transform: translate(calc(var(--px) * -6px), calc(var(--py) * -4px));
}
.world.has-bg .world-sky {
  background:
    linear-gradient(180deg, rgba(3, 10, 22, 0.15) 0%, rgba(3, 10, 22, 0.55) 70%, rgba(2, 8, 18, 0.9) 100%),
    url("assets/bg-home.webp") center / cover no-repeat,
    #061a33;
}
.world.has-bg .world-ruins { display: none; }
.world-rays { transform: translate(calc(var(--px) * -12px), 0); mix-blend-mode: screen; }
.world-rays i {
  position: absolute; top: -10%; height: 120%; width: 140px;
  background: linear-gradient(180deg, rgba(160, 230, 255, 0.28), rgba(120, 210, 255, 0.06) 55%, transparent 80%);
  filter: blur(14px);
  transform-origin: top center;
  animation: sway 11s ease-in-out infinite alternate;
}
.world-rays i:nth-child(1) { left: 18%; transform: rotate(14deg); animation-delay: -2s; }
.world-rays i:nth-child(2) { left: 34%; width: 90px; transform: rotate(9deg); animation-delay: -6s; opacity: 0.7; }
.world-rays i:nth-child(3) { left: 50%; width: 200px; transform: rotate(4deg); animation-delay: -4s; }
.world-rays i:nth-child(4) { left: 66%; width: 110px; transform: rotate(-3deg); animation-delay: -8s; opacity: 0.6; }
.world-rays i:nth-child(5) { left: 80%; transform: rotate(-9deg); animation-delay: -1s; opacity: 0.5; }
@keyframes sway { from { rotate: -3deg; opacity: 0.55; } to { rotate: 3deg; opacity: 1; } }

.world-ruins { top: auto; height: 46vh; width: calc(100% + 80px); }
.world-ruins.far { fill: rgba(16, 52, 88, 0.55); bottom: 14vh; transform: translate(calc(var(--px) * -10px), calc(var(--py) * -3px)); }
.world-ruins.near { fill: rgba(4, 16, 32, 0.92); bottom: -40px; height: 34vh; transform: translate(calc(var(--px) * -22px), calc(var(--py) * -6px)); }
.world-glow {
  background: radial-gradient(420px 300px at 46% 78%, rgba(95, 224, 255, 0.22), transparent 70%);
  transform: translate(calc(var(--px) * -16px), 0);
}
.world .bubbles { position: absolute; inset: 0; z-index: auto; }

@media (prefers-reduced-motion: reduce) {
  .world-rays i, .bubbles span, .home-portrait, .whale-avatar { animation: none !important; }
  .world > * { transform: none !important; }
}

/* ── 通用：切角面板 ── */
.cut {
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}

/* ── 标题画面（未登录）── */
.title-layer {
  position: fixed; inset: 0; z-index: 30;
  display: none;
  overflow-y: auto;
  padding: 7vh 20px 40px;
  background: radial-gradient(900px 500px at 50% 20%, rgba(10, 40, 70, 0.2), rgba(2, 8, 18, 0.55));
}
body[data-view="register"] .title-layer { display: block; }
body[data-view="register"] .hud-top,
body[data-view="register"] .home { display: none; }
.title-logo { text-align: center; margin-bottom: 28px; animation: fadeUp 0.8s ease both; }
.title-en { margin: 0; letter-spacing: 0.6em; font-size: 12px; color: var(--cyan); opacity: 0.85; }
.title-logo h1 {
  margin: 8px 0 6px;
  font-family: var(--title-font);
  font-size: clamp(40px, 7vw, 76px);
  letter-spacing: 0.18em;
  background: linear-gradient(180deg, #ffffff 0%, #bfefff 45%, #6fc9ff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 22px rgba(95, 224, 255, 0.45));
}
.title-tag { margin: 0; color: var(--muted); letter-spacing: 0.2em; font-size: 13px; }
.title-body { max-width: 640px; margin: 0 auto; display: grid; gap: 16px; animation: fadeUp 0.8s 0.15s ease both; }
.title-body .panel { background: rgba(8, 26, 46, 0.78); backdrop-filter: blur(10px); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ── 顶栏 HUD ── */
.hud-top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 24px;
  background: linear-gradient(180deg, rgba(2, 10, 22, 0.75), transparent);
  pointer-events: none;
}
.hud-top > * { pointer-events: auto; }
.hud-profile { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hud-profile .whale-avatar { width: 46px; height: 46px; border-radius: 50%; font-size: 24px; animation: none; border: 2px solid var(--edge); }
.hud-name { font-weight: 600; font-size: 15px; letter-spacing: 0.04em; white-space: nowrap; }
.hud-lv { display: flex; align-items: center; gap: 8px; margin-top: 3px; font-size: 11px; color: var(--muted); }
.hud-lv b { color: var(--gold); font-weight: 600; }
.hud-lv .xpbar { width: 120px; height: 4px; margin: 0; }
.hud-right { display: flex; align-items: center; gap: 10px; }
.hud-res { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.res-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px 5px 8px;
  background: rgba(4, 16, 32, 0.7);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  backdrop-filter: blur(6px);
}
.res-pill b { color: var(--gold); font-size: 13px; }
.res-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: #5d7f97; }
.res-pill .dot.on { background: var(--green); box-shadow: 0 0 8px var(--green); }
.hud-btn {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(4, 16, 32, 0.7); color: var(--muted);
  font-size: 15px; cursor: pointer;
}
.hud-btn:hover { color: var(--rose); border-color: var(--rose); }

/* ── 看板主界面 ── */
.home { position: fixed; inset: 0; z-index: 5; }
.home-stage {
  /* 夹在左侧公告（24 + 290px）和右侧菜单（270px）之间，立绘再大也只在这块里等比例缩放，不压住两边 */
  position: absolute; left: 330px; right: 290px; bottom: 0;
  height: calc(100vh - 70px);
  transform: translate(calc(var(--px) * 8px), calc(var(--py) * 4px));
}
.home-portrait {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0; border: 0; background: none; cursor: pointer;
  animation: breathe 5.5s ease-in-out infinite;
  transform-origin: 50% 100%;
}
.home-portrait img {
  max-width: 100%; max-height: 100%;
  object-fit: contain; object-position: bottom;
  filter: drop-shadow(0 0 30px rgba(95, 224, 255, 0.28)) drop-shadow(0 18px 40px rgba(0, 0, 0, 0.5));
  -webkit-user-drag: none; user-select: none;
}
.home-portrait.framed img {
  /* 方形头像（不是透明立绘）当立绘用时，加一圈光框避免生硬的矩形 */
  max-width: min(78%, 460px); max-height: 70%;
  margin-bottom: 14vh;
  border-radius: 28px;
  border: 2px solid var(--edge);
  box-shadow: 0 0 0 6px rgba(95, 224, 255, 0.08), 0 0 60px rgba(95, 224, 255, 0.25);
}
.home-portrait .emoji {
  font-size: min(34vh, 300px); line-height: 1; margin-bottom: 16vh;
  filter: drop-shadow(0 0 40px rgba(95, 224, 255, 0.55));
}
.home-portrait.poke { animation: poke 0.45s ease, breathe 5.5s 0.45s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-8px) scale(1.008); } }
@keyframes poke { 0% { transform: scale(1); } 35% { transform: scale(1.03, 0.97); } 70% { transform: scale(0.99, 1.02); } 100% { transform: scale(1); } }

.home-speech {
  position: absolute; left: 70%; top: 20%;
  max-width: 280px;
  padding: 12px 16px;
  font-size: 14px; line-height: 1.6;
  color: #eaf8ff;
  background: rgba(6, 22, 42, 0.82);
  border: 1px solid var(--edge);
  border-radius: 16px 16px 16px 4px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.35s, transform 0.35s;
}
.home-speech.show { opacity: 1; transform: none; }

.home-plate { position: absolute; left: 32px; bottom: 34px; max-width: 40vw; }
.plate-name {
  margin: 0;
  font-family: var(--title-font);
  font-size: clamp(30px, 4vw, 52px);
  letter-spacing: 0.12em;
  line-height: 1.1;
  text-shadow: 0 0 24px rgba(95, 224, 255, 0.5), 0 2px 0 rgba(0, 0, 0, 0.4);
}
.plate-sub { margin: 8px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.plate-sub .line { width: 40px; height: 1px; background: linear-gradient(90deg, var(--cyan), transparent); }
.plate-online { display: inline-flex; align-items: center; gap: 6px; }
.plate-online i { width: 8px; height: 8px; border-radius: 50%; background: #5d7f97; }
.plate-online.on { color: var(--green); }
.plate-online.on i { background: var(--green); box-shadow: 0 0 10px var(--green); }

.home-news {
  position: absolute; left: 24px; top: 92px;
  width: 290px;
  display: grid; gap: 10px;
}
.news-card {
  --cut: 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(10, 34, 60, 0.85), rgba(6, 20, 38, 0.75));
  border-left: 2px solid var(--cyan);
  backdrop-filter: blur(8px);
  font-size: 12px; color: var(--muted);
}
.news-card h4 { margin: 0 0 8px; font-size: 12px; letter-spacing: 0.2em; color: var(--cyan); font-weight: 600; }
.news-card p { margin: 0; line-height: 1.6; }
.news-team {
  display: grid; grid-template-columns: 30px 1fr; gap: 4px 10px; align-items: center;
  width: 100%; padding: 8px 0; border: 0; border-top: 1px solid var(--line);
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.news-team:first-of-type { border-top: 0; }
.news-team:hover b { color: var(--cyan); }
.news-team .whale-avatar { width: 30px; height: 30px; font-size: 15px; border-radius: 50%; grid-row: span 2; animation: none; }
.news-team b { color: var(--text); font-weight: 500; font-size: 12px; }
.news-team .bar { height: 3px; background: rgba(255, 255, 255, 0.08); border-radius: 2px; overflow: hidden; }
.news-team .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--gold)); }

.home-menu {
  position: absolute; right: 0; top: 50%; transform: translateY(-58%);
  display: grid; gap: 10px;
  width: 270px;
}
.home-menu button {
  --cut: 12px;
  position: relative;
  display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 12px;
  padding: 12px 22px 12px 18px;
  border: 0;
  background: linear-gradient(90deg, rgba(8, 28, 52, 0.88), rgba(8, 28, 52, 0.55));
  color: var(--text);
  font: inherit; text-align: left; cursor: pointer;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut));
  transition: transform 0.2s, background 0.2s;
}
.home-menu button::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--cyan), transparent);
  opacity: 0.6; transition: opacity 0.2s;
}
.home-menu button:hover, .home-menu button:focus-visible {
  transform: translateX(-12px);
  background: linear-gradient(90deg, rgba(20, 70, 110, 0.95), rgba(10, 40, 70, 0.6));
  outline: none;
}
.home-menu button:hover::before { opacity: 1; }
.home-menu .ico { grid-row: span 2; font-size: 24px; text-align: center; filter: drop-shadow(0 0 8px rgba(95, 224, 255, 0.5)); }
.home-menu b { font-size: 16px; font-weight: 600; letter-spacing: 0.12em; }
.home-menu small { font-size: 10px; letter-spacing: 0.3em; color: var(--muted); }
.home-menu .count {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  min-width: 20px; padding: 1px 6px; border-radius: 999px;
  background: var(--rose); color: #2a0010; font-size: 11px; font-weight: 700; text-align: center;
}

.start-btn {
  --cut: 18px;
  position: absolute; right: 36px; bottom: 34px;
  display: grid; justify-items: center; gap: 2px;
  min-width: 230px; padding: 16px 34px;
  border: 0; cursor: pointer;
  color: #2a1700;
  background: linear-gradient(135deg, #ffe29a 0%, #ffc24d 50%, #ff9a3c 100%);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  box-shadow: 0 0 30px rgba(255, 194, 77, 0.45);
  transition: transform 0.18s, filter 0.18s;
}
.start-btn span { font-family: var(--title-font); font-size: 24px; font-weight: 700; letter-spacing: 0.3em; padding-left: 0.3em; }
.start-btn small { font-size: 11px; letter-spacing: 0.2em; opacity: 0.75; }
.start-btn:hover { transform: translateY(-2px); filter: brightness(1.07); }
.start-btn:active { transform: translateY(1px); }
.start-btn:disabled { filter: grayscale(0.6) brightness(0.8); cursor: wait; }

/* ── 二级页面：滑入面板 ── */
.panel-layer {
  position: fixed; inset: 0; z-index: 20;
  display: flex; flex-direction: column;
  background: linear-gradient(90deg, rgba(2, 10, 22, 0.55), rgba(3, 13, 28, 0.94) 22%);
  backdrop-filter: blur(6px);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.38s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s 0.38s;
}
body:not([data-view="home"]):not([data-view="register"]) .panel-layer {
  transform: none; visibility: visible;
  transition: transform 0.38s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* 面板打开时整块主界面（菜单、开始冒险、看板、公告）直接隐藏，只留深海背景；
   光靠 opacity 在某些内嵌浏览器里会透出来（主人 11-06 截图），用 visibility 保证不渲染、不可点 */
body:not([data-view="home"]):not([data-view="register"]) .home { visibility: hidden; }
body:not([data-view="home"]):not([data-view="register"]) .home-menu,
body:not([data-view="home"]):not([data-view="register"]) .start-btn { opacity: 0; pointer-events: none; }
.panel-head {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 28px 14px;
  border-bottom: 1px solid var(--line);
}
.panel-head h2 { margin: 0; font-family: var(--title-font); font-size: 26px; letter-spacing: 0.16em; }
.panel-head p { margin: 2px 0 0; font-size: 11px; letter-spacing: 0.4em; color: var(--cyan); opacity: 0.8; }
.panel-back {
  width: 44px; height: 44px; flex: none;
  border: 1px solid var(--edge); border-radius: 50%;
  background: rgba(6, 22, 42, 0.8); color: var(--text);
  font-size: 28px; line-height: 1; cursor: pointer;
}
.panel-back:hover { border-color: var(--cyan); color: var(--cyan); }
.panel-body { flex: 1; overflow-y: auto; padding: 20px 28px 48px; }
.panel-body .stage { max-width: 1320px; margin: 0 auto; }

/* ── 窄屏：立绘居中，菜单变底栏 ── */
@media (max-width: 860px) {
  .hud-top { padding: 10px 14px; }
  .hud-lv .xpbar { width: 70px; }
  .res-pill.quality { display: none; }
  .home-news { display: none; }
  .home-stage { left: 50%; right: auto; width: 100vw; height: 72vh; bottom: 150px; transform: translateX(-50%); }
  .home-speech { left: auto; right: 14px; top: 6%; max-width: 62vw; font-size: 13px; }
  .home-plate { left: 16px; bottom: 214px; max-width: none; }
  .plate-name { font-size: 30px; }
  .home-menu {
    top: auto; bottom: 0; right: 0; left: 0; transform: none;
    width: auto; grid-template-columns: repeat(5, 1fr); gap: 0;
    background: rgba(3, 12, 26, 0.92); border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .home-menu button {
    grid-template-columns: 1fr; grid-template-rows: auto auto; justify-items: center;
    padding: 10px 2px; clip-path: none; background: none; row-gap: 2px;
  }
  .home-menu button::before { display: none; }
  .home-menu button:hover { transform: none; background: rgba(95, 224, 255, 0.08); }
  .home-menu .ico { grid-row: auto; font-size: 20px; }
  .home-menu b { font-size: 12px; letter-spacing: 0.04em; }
  .home-menu small { display: none; }
  .home-menu .count { top: 4px; right: 10%; transform: none; }
  .start-btn { left: 16px; right: 16px; bottom: 78px; min-width: 0; padding: 12px; }
  .start-btn span { font-size: 20px; }
  .panel-head { padding: 12px 16px; }
  .panel-head h2 { font-size: 20px; }
  .panel-body { padding: 16px 16px 40px; }
}

/* ── 沿用的小部件 ── */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(95, 224, 255, 0.08);
  color: var(--cyan); font-size: 12px;
}
.whale-avatar {
  width: 58px; height: 58px;
  display: grid; place-items: center;
  font-size: 30px;
  border-radius: 18px;
  background: radial-gradient(circle at 30% 25%, #35d0ff55, #0a2947 70%);
  border: 1px solid rgba(95, 224, 255, 0.35);
  overflow: hidden;
  animation: float 4.5s ease-in-out infinite;
}
.whale-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scene .hero img { display: block; width: 84px; height: 84px; object-fit: contain; }
.scene .hero.b img { width: 72px; height: 72px; }
.msg .who .who-avatar { display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: -3px; text-align: center; line-height: 16px; }
.msg .who .who-avatar img { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; display: block; }
.avatar-card { display: flex; gap: 16px; align-items: flex-start; }
.avatar-preview { flex: none; width: 120px; height: 120px; border-radius: 16px; display: grid; place-items: center; font-size: 56px; overflow: hidden; border: 1px solid var(--line); background: radial-gradient(circle at 30% 25%, #35d0ff55, #0a2947 70%); }
.avatar-preview img { width: 100%; height: 100%; object-fit: contain; }
label.file-btn { display: inline-flex; align-items: center; cursor: pointer; }
@media (max-width: 560px) { .avatar-card { flex-direction: column; } }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.xpbar { height: 6px; margin-top: 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.xpbar > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #5fe0ff, #7ee787); }
.whale-stats { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--muted); }
.whale-stats b { color: var(--gold); font-size: 15px; }

/* 主舞台 */
.stage { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: 20px;
}
.panel h2 { margin: 0 0 4px; font-size: 17px; letter-spacing: 1px; }
.panel .sub { margin: 0 0 16px; color: var(--muted); font-size: 12px; }

.toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
input[type="text"], input[type="search"], input[type="password"], textarea, select {
  font: inherit;
  color: var(--text);
  background: rgba(6, 20, 36, 0.9);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  min-height: 42px;
  outline: none;
}
input:focus, textarea:focus, select:focus { border-color: var(--cyan); }
input::placeholder, textarea::placeholder { color: #5d7f97; }
textarea { width: 100%; min-height: 90px; resize: vertical; }
.grow { flex: 1; }

button.primary, button.ghost, button.gold, button.danger, label.file-btn {
  font: inherit;
  border-radius: 10px;
  padding: 10px 18px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: 0.18s;
  min-height: 42px;
}
button.primary, label.file-btn { background: linear-gradient(135deg, #37c8ff, #2f7dff); color: #04121f; font-weight: 600; }
button.primary:hover { filter: brightness(1.08); }
button.gold { background: linear-gradient(135deg, #ffd166, #ff9f45); color: #2a1a00; font-weight: 600; }
button.ghost { background: transparent; border-color: var(--line); color: var(--text); }
button.ghost:hover { border-color: var(--cyan); color: var(--cyan); }
button.danger { background: transparent; border-color: #7a2b3a; color: #ff9db0; }
button:disabled { opacity: 0.45; cursor: not-allowed; }

/* 任务卡片 */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel-2);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
}
.card::before {
  content: "";
  position: absolute; inset: 0 auto 0 0; width: 3px;
  background: linear-gradient(180deg, var(--cyan), transparent);
  opacity: 0.7;
}
.card h3 { margin: 0; font-size: 14px; line-height: 1.5; }
.card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.card .owner { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.card .owner .whale-avatar { width: 30px; height: 30px; font-size: 16px; border-radius: 10px; animation: none; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  color: #a9d8f2;
  background: rgba(95, 224, 255, 0.1);
  border: 1px solid rgba(95, 224, 255, 0.22);
}
.quality { font-size: 11px; padding: 3px 9px; border-radius: 999px; border: 1px solid; }
.q-coarse { color: #c9b18c; border-color: #6b563b; background: rgba(201, 177, 140, 0.1); }
.q-fine { color: #bfe3ff; border-color: #38658c; background: rgba(191, 227, 255, 0.1); }
.q-feast { color: #d9b3ff; border-color: #6e4a99; background: rgba(217, 179, 255, 0.1); }
.q-legend {
  color: #ffe08a; border-color: #c99a2e;
  background: linear-gradient(135deg, rgba(255, 209, 102, 0.24), rgba(255, 160, 50, 0.12));
  text-shadow: 0 0 8px rgba(255, 209, 102, 0.55);
}
.stars { color: var(--gold); letter-spacing: 2px; font-size: 12px; }
.card .actions { display: flex; gap: 8px; margin-top: auto; padding-top: 6px; }
.card .actions button { padding: 8px 12px; min-height: 36px; font-size: 12px; }
.card.mine { border-color: rgba(255, 209, 102, 0.4); }
.status-open { color: var(--green); }
.status-matched { color: var(--gold); }
.status-done { color: var(--muted); }

/* 探索场景 */
.scene {
  position: relative;
  height: 210px;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(600px 200px at 50% 120%, rgba(52, 180, 255, 0.22), transparent 70%),
    linear-gradient(180deg, #071a2e 0%, #040d1a 100%);
  margin-bottom: 16px;
}
.scene .floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
  background: linear-gradient(180deg, rgba(20, 60, 96, 0.45), rgba(6, 20, 36, 0.9));
  border-top: 1px dashed rgba(95, 224, 255, 0.25);
}
.scene .rune {
  position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  font-size: 12px; letter-spacing: 6px; color: rgba(95, 224, 255, 0.6);
}
.scene .boss {
  position: absolute; right: 10%; bottom: 40%;
  font-size: 54px; filter: drop-shadow(0 0 16px rgba(255, 90, 120, 0.5));
  animation: bob 3.2s ease-in-out infinite;
}
.scene .hero {
  position: absolute; bottom: 26%;
  font-size: 46px;
  transition: left 1.1s ease-in-out;
  filter: drop-shadow(0 0 14px rgba(95, 224, 255, 0.6));
}
.scene .hero.a { left: 8%; }
.scene .hero.b { left: 22%; font-size: 38px; }
.scene .spark { position: absolute; font-size: 18px; animation: spark 1.8s ease-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes spark { 0% { opacity: 0; transform: translate(0,0) scale(0.6); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(26px,-30px) scale(1.2); } }
.hpbar { position: absolute; left: 10%; right: 10%; bottom: 14px; height: 8px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; }
.hpbar > i { display: block; height: 100%; background: linear-gradient(90deg, #ff6b81, #ffd166); transition: width 0.8s; }

/* 聊天 */
.chat { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; padding-right: 4px; }
.msg { max-width: 78%; padding: 9px 12px; border-radius: 12px; font-size: 13px; line-height: 1.6; background: rgba(120, 200, 255, 0.08); border: 1px solid var(--line); }
.msg.me { display: block; align-self: flex-end; background: rgba(95, 224, 255, 0.14); border-color: rgba(95, 224, 255, 0.3); }
.msg .who { display: block; font-size: 11px; color: var(--muted); margin-bottom: 3px; }
.msg .text { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.owner { border-style: dashed; }
.msg.result { max-width: 92%; border-color: rgba(255, 209, 102, 0.55); background: rgba(255, 209, 102, 0.08); }
.msg .text + .text, .msg .code + .text, .msg .text + .code, .msg .code + .code { margin-top: 8px; }
.msg .code { border: 1px solid var(--line); border-radius: 10px; background: var(--abyss); overflow: hidden; }
.msg .code-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 8px; font-size: 11px; color: var(--muted); border-bottom: 1px solid var(--line); }
.msg .code pre { margin: 0; padding: 10px 12px; max-height: 360px; overflow: auto; font-size: 12px; line-height: 1.5; }
.msg-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
button.mini { height: 24px; padding: 0 9px; border-radius: 7px; font: inherit; font-size: 11px; cursor: pointer; border: 1px solid var(--line); background: transparent; color: var(--cyan); }
button.mini:hover { border-color: var(--cyan); }
.msg .who .badge { margin-left: 6px; font-size: 10px; padding: 1px 6px; }
.scene .hero .pct { display: block; text-align: center; font-size: 11px; color: var(--cyan); }
pre.cmd { margin: 8px 0; padding: 10px 12px; border-radius: 10px; background: var(--abyss); border: 1px solid var(--line); font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.chatbar { display: flex; gap: 8px; margin-top: 12px; }

/* 表单 */
.form { display: grid; gap: 14px; max-width: 640px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 13px; color: var(--muted); }
.hint { font-size: 11px; color: #6f93ad; }
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row > .field { flex: 1; min-width: 180px; }

/* 列表 */
.list { display: flex; flex-direction: column; gap: 10px; }
.item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px;
  background: rgba(10, 30, 50, 0.7); cursor: pointer;
}
.item:hover { border-color: rgba(95, 224, 255, 0.45); }
.item .left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.item .left .whale-avatar { width: 36px; height: 36px; font-size: 18px; border-radius: 12px; animation: none; }
.item small { color: var(--muted); }

.empty { text-align: center; padding: 34px 12px; color: var(--muted); font-size: 13px; }
.error { color: #ff9db0; font-size: 13px; }
.ok { color: var(--green); font-size: 13px; }

.badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.badge.live { color: var(--green); border-color: rgba(126, 231, 135, 0.35); }

.ledger { width: 100%; border-collapse: collapse; font-size: 12px; }
.ledger th, .ledger td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.ledger th { color: var(--muted); font-weight: 500; }

/* 鲸鱼娘页：立绘预览（竖版、透明背景用棋盘格衬底） */
.portrait-preview {
  flex: none; width: 120px; height: 180px; border-radius: 14px; overflow: hidden;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  background: repeating-conic-gradient(rgba(255, 255, 255, 0.05) 0 25%, transparent 0 50%) 0 0 / 16px 16px, #071a30;
  color: var(--muted); font-size: 12px;
}
.portrait-preview img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; }

/* 队伍页：双方成员状态（P1） */
.member-states { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.member-state {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 10px;
  border: 1px solid var(--line); background: rgba(6, 20, 36, 0.7);
  font-size: 12px; color: var(--muted);
}
.member-state b { color: var(--text); font-weight: 500; }
.member-state.is-done { border-color: rgba(126, 231, 135, 0.4); }
.member-state img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.ledger .formula { color: var(--muted); font-size: 11px; }

/* ═════════════ 战斗场景（U3）：进度驱动的攻击、击败演出、鱼食掉落、全屏观战 ═════════════ */
.scene { height: 260px; }
.scene .boss { display: grid; justify-items: center; transition: filter 0.6s, opacity 0.6s, transform 0.6s; }
.scene .boss-body { display: block; font-size: 64px; line-height: 1; }
.scene .boss-name { margin-top: 2px; font-size: 11px; letter-spacing: 0.2em; color: #ffb3c1; text-shadow: 0 0 8px rgba(255, 90, 120, 0.6); }
.scene .boss.hit .boss-body { animation: bossHit 0.5s 0.55s ease; }
.scene .boss.down { animation: none; filter: grayscale(1) brightness(0.6) drop-shadow(0 0 0 transparent); opacity: 0.55; transform: rotate(-12deg) translateY(10px); }
.scene .boss.down.just { animation: bossDown 1.1s ease both; }
.scene .dmg {
  position: absolute; top: -6px; left: 50%;
  font-weight: 800; font-size: 22px; color: #ffd166;
  text-shadow: 0 0 10px rgba(255, 120, 60, 0.9), 0 2px 0 #7a2b00;
  opacity: 0; animation: dmgFloat 1.3s 0.55s ease-out forwards;
  pointer-events: none;
}
.scene .hero.strike { animation: strike 0.7s 0.2s ease; }
.scene .hpbar { height: 12px; bottom: 12px; }
.scene .hpbar > i { transition: width 1.1s ease 0.5s; }
.scene .hpbar > b {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 9px; letter-spacing: 0.15em; color: rgba(255, 255, 255, 0.85); font-weight: 600;
}
.scene .victory {
  position: absolute; left: 50%; top: 32%; transform: translate(-50%, -50%);
  display: grid; justify-items: center; gap: 4px;
  font-family: var(--title-font); font-size: 40px; font-weight: 700; letter-spacing: 0.3em;
  color: #ffe29a; text-shadow: 0 0 24px rgba(255, 194, 77, 0.8), 0 3px 0 rgba(90, 50, 0, 0.6);
  pointer-events: none;
}
.scene .victory small { font-family: inherit; font-size: 12px; letter-spacing: 0.2em; color: var(--text); text-shadow: none; opacity: 0.8; }
.scene .victory.just { animation: victoryIn 0.9s 0.6s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.scene .loot { position: absolute; right: 6%; top: 18%; display: grid; gap: 6px; justify-items: end; }
.scene .loot span {
  padding: 4px 10px; border-radius: 999px; font-size: 12px;
  background: rgba(255, 209, 102, 0.15); border: 1px solid rgba(255, 209, 102, 0.5); color: var(--gold);
}
.scene .loot.just span { opacity: 0; animation: lootDrop 0.8s cubic-bezier(0.3, 1.5, 0.5, 1) forwards; }
.scene.cleared::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(500px 220px at 72% 55%, rgba(255, 209, 102, 0.12), transparent 70%);
}
.scene-full-btn {
  position: absolute; right: 10px; top: 10px; z-index: 3;
  width: 32px; height: 32px; border-radius: 8px;
  border: 1px solid var(--line); background: rgba(4, 16, 32, 0.7); color: var(--muted);
  font-size: 15px; cursor: pointer;
}
.scene-full-btn:hover { color: var(--cyan); border-color: var(--cyan); }

/* 全屏观战 */
.scene.full {
  position: fixed; inset: 0; z-index: 40; height: auto; margin: 0; border-radius: 0; border: 0;
  background:
    radial-gradient(900px 400px at 50% 110%, rgba(52, 180, 255, 0.28), transparent 70%),
    linear-gradient(180deg, #0a2a4c 0%, #04101f 100%);
}
.scene.full .rune { top: 28px; font-size: 16px; letter-spacing: 10px; }
.scene.full .hero { bottom: 30%; font-size: 90px; }
.scene.full .hero img { width: 180px; height: 180px; }
.scene.full .hero.b img { width: 150px; height: 150px; }
.scene.full .hero .pct { font-size: 14px; }
.scene.full .boss { bottom: 34%; right: 12%; }
.scene.full .boss-body { font-size: 140px; }
.scene.full .boss-name { font-size: 15px; }
.scene.full .dmg { font-size: 40px; }
.scene.full .hpbar { left: 20%; right: 20%; bottom: 120px; height: 18px; }
.scene.full .hpbar > b { font-size: 11px; }
.scene.full .victory { font-size: 84px; top: 30%; }
.scene.full .victory small { font-size: 16px; }
.scene.full .loot { top: 22%; }
.scene.full .loot span { font-size: 16px; padding: 6px 14px; }
.scene.full .scene-full-btn { right: 20px; top: 20px; width: 40px; height: 40px; font-size: 18px; }
.scene-feed {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  width: min(720px, 92vw); display: grid; gap: 4px;
}
.scene-feed p {
  margin: 0; padding: 6px 12px; border-radius: 8px;
  background: rgba(4, 16, 32, 0.72); font-size: 13px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.scene-feed b { color: var(--cyan); font-weight: 600; margin-right: 8px; }
@media (max-width: 860px) {
  .scene.full .hero { font-size: 56px; }
  .scene.full .hero img { width: 96px; height: 96px; }
  .scene.full .hero.b img { width: 80px; height: 80px; }
  .scene.full .boss-body { font-size: 84px; }
  .scene.full .victory { font-size: 48px; }
  .scene.full .hpbar { left: 8%; right: 8%; bottom: 140px; }
}

@keyframes strike { 0% { transform: translateX(0); } 40% { transform: translateX(36px) scale(1.08); } 100% { transform: translateX(0); } }
@keyframes bossHit { 0%, 100% { transform: translateX(0); filter: none; } 20% { transform: translateX(-8px); filter: brightness(2) saturate(0.4); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }
@keyframes dmgFloat { 0% { opacity: 0; transform: translate(-50%, 0) scale(0.6); } 20% { opacity: 1; transform: translate(-50%, -14px) scale(1.2); } 100% { opacity: 0; transform: translate(-50%, -54px) scale(1); } }
@keyframes bossDown { 0% { filter: none; opacity: 1; transform: none; } 30% { filter: brightness(2.5); transform: scale(1.1); } 100% { filter: grayscale(1) brightness(0.6); opacity: 0.55; transform: rotate(-12deg) translateY(10px); } }
@keyframes victoryIn { 0% { opacity: 0; transform: translate(-50%, -50%) scale(2.2); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes lootDrop { 0% { opacity: 0; transform: translateY(-40px); } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .scene .hero.strike, .scene .boss.hit .boss-body, .scene .dmg, .scene .boss.down.just, .scene .victory.just, .scene .loot.just span { animation: none !important; opacity: 1; }
}
/* 全屏观战时，面板层的 backdrop-filter 会让 position:fixed 相对面板定位（并跟着滚动），这里关掉 */
body.scene-full .panel-layer { backdrop-filter: none; transform: none; }
body.scene-full .panel-body { overflow: hidden; }

/* 看板台词的情绪（C6 的 mood）：气泡边框颜色 */
.home-speech[data-mood="hungry"] { border-color: rgba(255, 209, 102, 0.6); }
.home-speech[data-mood="tired"] { border-color: rgba(143, 179, 204, 0.5); color: #c9dceb; }
.home-speech[data-mood="proud"] { border-color: rgba(255, 143, 171, 0.6); box-shadow: 0 0 24px rgba(255, 143, 171, 0.25), 0 10px 30px rgba(0, 0, 0, 0.4); }

/* M2：可加入的队伍、多人场景 */
.item.joinable { border-color: rgba(255, 209, 102, 0.35); }
.avatar-stack { display: flex; }
.avatar-stack .whale-avatar { width: 32px; height: 32px; font-size: 16px; border-radius: 50%; animation: none; border: 2px solid #0a1c33; }
.avatar-stack .whale-avatar + .whale-avatar { margin-left: -10px; }
.scene .hero.crowded { font-size: 34px; }
.scene .hero.crowded img { width: 64px; height: 64px; }
.scene.full .hero.crowded { font-size: 70px; }
.scene.full .hero.crowded img { width: 130px; height: 130px; }

/* 新手引导：下一步该点的按钮呼吸发光 */
.home-menu button.guide { background: linear-gradient(90deg, rgba(40, 110, 160, 0.95), rgba(10, 40, 70, 0.6)); }
.home-menu button.guide::before { opacity: 1; background: linear-gradient(180deg, var(--gold), transparent); }
.home-menu button.guide::after {
  content: "下一步"; position: absolute; right: 14px; top: 8px;
  padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 700;
  background: var(--gold); color: #2a1700;
}
.home-menu button.guide, .start-btn.guide { animation: guidePulse 1.8s ease-in-out infinite; }
/* 按钮带 clip-path 切角，box-shadow 会被裁掉，所以用亮度呼吸 */
@keyframes guidePulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.35); } }
@media (max-width: 860px) {
  .home-menu button.guide::after { top: 2px; right: 4px; font-size: 9px; padding: 0 4px; }
}
@media (prefers-reduced-motion: reduce) { .home-menu button.guide, .start-btn.guide { animation: none; } }

/* U7 举报：⚑ 小按钮 + 原生 dialog */
.report-btn {
  margin-left: auto; padding: 0 6px; height: 20px; border-radius: 6px;
  border: 1px solid transparent; background: transparent; color: #6f93ad;
  font-size: 12px; cursor: pointer; opacity: 0.55; transition: opacity 0.15s, color 0.15s;
}
.msg .who .report-btn, .member-state .report-btn { margin-left: 6px; }
.report-btn:hover, .report-btn:focus-visible { opacity: 1; color: var(--rose); border-color: rgba(255, 143, 171, 0.4); outline: none; }
.report-dialog {
  width: min(460px, calc(100vw - 32px)); padding: 20px; border-radius: 16px;
  border: 1px solid var(--edge); background: #0a1c33; color: var(--text);
  box-shadow: var(--shadow);
}
.report-dialog::backdrop { background: rgba(2, 8, 18, 0.65); backdrop-filter: blur(3px); }
.report-dialog h3 { margin: 0; font-size: 17px; }
.report-dialog textarea { min-height: 90px; }

/* D10 无障碍：读屏专用区域、清晰的键盘焦点 */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:where(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.report-btn:focus-visible { outline: 2px solid var(--rose); }


/* U10 养成：亲密度条、喂食托盘、吃东西动画、按等级解锁的看板装饰（全部原创 CSS） */
.plate-affinity { margin-top: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: #ffd0dc; }
.plate-affinity .aff-label b { color: var(--rose); }
.aff-bar { position: relative; display: inline-block; width: 140px; height: 8px; border-radius: 99px; background: rgba(255, 143, 171, 0.14); border: 1px solid rgba(255, 143, 171, 0.3); overflow: hidden; }
.aff-bar i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, #ff8fab, #ffc2d1); box-shadow: 0 0 10px rgba(255, 143, 171, 0.7); transition: width 0.6s ease; }
.feed-btn {
  height: 28px; padding: 0 14px; border-radius: 99px; cursor: pointer;
  border: 1px solid rgba(255, 143, 171, 0.55); background: rgba(255, 143, 171, 0.14); color: #ffe3ea; font-size: 13px;
}
.feed-btn:hover, .feed-btn[aria-expanded="true"] { background: rgba(255, 143, 171, 0.3); }
.feed-tray { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; max-width: 420px; }
.feed-tray[hidden] { display: none; }
.feed-tray p { margin: 0; font-size: 13px; color: var(--muted); }
.feed-tray button {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line); background: rgba(6, 22, 42, 0.85); color: var(--text); font-size: 13px;
}
.feed-tray button:hover:not(:disabled) { border-color: var(--rose); }
.feed-tray button:disabled { opacity: 0.5; cursor: wait; }
.feed-tray .food { font-size: 18px; }
.feed-tray b { color: var(--gold); font-weight: 600; }
.feed-tray small { color: var(--rose); }

/* 吃东西：食物从下方飞到嘴边，立绘嚼一下，冒爱心 */
.feed-fx { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.feed-burst { position: absolute; inset: 0; }
.feed-burst > span { position: absolute; left: 50%; opacity: 0; }
.fx-food { top: 32%; font-size: 40px; animation: foodFly 0.7s cubic-bezier(.3,.7,.4,1) forwards; }
.fx-heart { top: 26%; color: var(--rose); font-size: 26px; text-shadow: 0 0 12px rgba(255, 143, 171, 0.8); animation: heartUp 1.3s 0.6s ease-out forwards; }
.fx-heart.h2 { margin-left: -46px; font-size: 20px; animation-delay: 0.7s; }
.fx-heart.h3 { margin-left: 40px; font-size: 18px; animation-delay: 0.8s; }
.fx-gain { top: 20%; transform: translateX(-50%); white-space: nowrap; font-weight: 700; color: #ffe3ea; text-shadow: 0 0 10px rgba(255, 143, 171, 0.9); animation: gainUp 1.5s 0.6s ease-out forwards; }
.fx-level { top: 12%; transform: translateX(-50%); white-space: nowrap; font-family: var(--title-font); font-size: 30px; color: var(--gold); text-shadow: 0 0 18px rgba(255, 209, 102, 0.9); animation: levelPop 1.6s 0.7s ease-out forwards; }
@keyframes foodFly { 0% { opacity: 0; transform: translate(-50%, 220px) scale(0.6) rotate(-30deg); } 25% { opacity: 1; } 85% { opacity: 1; transform: translate(-50%, 0) scale(1.1) rotate(10deg); } 100% { opacity: 0; transform: translate(-50%, -6px) scale(0.3); } }
@keyframes heartUp { 0% { opacity: 0; transform: translate(-50%, 0) scale(0.4); } 25% { opacity: 1; transform: translate(-50%, -14px) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -80px) scale(0.9); } }
@keyframes gainUp { 0% { opacity: 0; transform: translate(-50%, 10px); } 20% { opacity: 1; transform: translate(-50%, 0); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -36px); } }
@keyframes levelPop { 0% { opacity: 0; transform: translateX(-50%) scale(2); } 25% { opacity: 1; transform: translateX(-50%) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; } }
.home-portrait.munch { animation: munch 0.5s 0.55s ease 2, breathe 5.5s 1.6s ease-in-out infinite; }
.feed-stage.munch .whale-avatar, .feed-stage.munch > img, .feed-stage.munch > span { animation: munch 0.5s 0.55s ease 2; }
@keyframes munch { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.025, 0.97); } 60% { transform: scale(0.99, 1.02); } }

/* 解锁装饰：在立绘后面，点不到 */
.home-deco { position: absolute; inset: 0; pointer-events: none; }
.deco-halo {
  position: absolute; left: 50%; top: 4%; width: min(62%, 400px); aspect-ratio: 1; transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(95, 224, 255, 0.10) 0, transparent 50%, rgba(190, 240, 255, 0.7) 56%, rgba(95, 224, 255, 0.3) 62%, transparent 71%);
  filter: blur(1px) drop-shadow(0 0 18px rgba(95, 224, 255, 0.6));
  animation: haloPulse 6s ease-in-out infinite;
}
[data-affinity="6"] .deco-halo { background: radial-gradient(circle, rgba(255, 209, 102, 0.12) 0, transparent 50%, rgba(255, 236, 180, 0.8) 56%, rgba(255, 209, 102, 0.35) 63%, transparent 72%); filter: blur(1px) drop-shadow(0 0 20px rgba(255, 209, 102, 0.7)); }
@keyframes haloPulse { 0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.03); } }
.deco-bubbles i {
  position: absolute; bottom: 8%; width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid rgba(190, 240, 255, 0.6); background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.7), rgba(95, 224, 255, 0.08) 60%);
  animation: decoBubble 7s linear infinite; opacity: 0;
}
.deco-bubbles i:nth-child(1) { left: 12%; animation-delay: 0s; }
.deco-bubbles i:nth-child(2) { left: 24%; width: 9px; height: 9px; animation-delay: -2.4s; }
.deco-bubbles i:nth-child(3) { left: 38%; width: 18px; height: 18px; animation-delay: -4.1s; }
.deco-bubbles i:nth-child(4) { left: 62%; width: 10px; height: 10px; animation-delay: -1.3s; }
.deco-bubbles i:nth-child(5) { left: 74%; animation-delay: -5.2s; }
.deco-bubbles i:nth-child(6) { left: 86%; width: 8px; height: 8px; animation-delay: -3.3s; }
.deco-bubbles i:nth-child(7) { left: 52%; width: 12px; height: 12px; animation-delay: -6.1s; }
@keyframes decoBubble { 0% { opacity: 0; transform: translate(0, 0); } 10% { opacity: 1; } 50% { transform: translate(10px, -36vh); } 90% { opacity: 0.8; } 100% { opacity: 0; transform: translate(-6px, -72vh); } }
.deco-stars i {
  position: absolute; width: 12px; height: 12px; background: #fff7d6;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  filter: drop-shadow(0 0 4px #ffe6a0); animation: twinkle 2.8s ease-in-out infinite; opacity: 0;
}
.deco-stars i:nth-child(1) { left: 18%; top: 22%; animation-delay: 0s; }
.deco-stars i:nth-child(2) { left: 80%; top: 18%; width: 16px; height: 16px; animation-delay: -0.7s; }
.deco-stars i:nth-child(3) { left: 30%; top: 46%; animation-delay: -1.4s; }
.deco-stars i:nth-child(4) { left: 72%; top: 40%; width: 8px; height: 8px; animation-delay: -2.1s; }
.deco-stars i:nth-child(5) { left: 10%; top: 62%; animation-delay: -0.4s; }
.deco-stars i:nth-child(6) { left: 88%; top: 58%; animation-delay: -1.1s; }
.deco-stars i:nth-child(7) { left: 44%; top: 12%; width: 10px; height: 10px; animation-delay: -1.8s; }
.deco-stars i:nth-child(8) { left: 60%; top: 70%; animation-delay: -2.5s; }
.deco-stars i:nth-child(9) { left: 24%; top: 80%; width: 8px; height: 8px; animation-delay: -0.9s; }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(0.5) rotate(0deg); } 50% { opacity: 1; transform: scale(1.2) rotate(45deg); } }

/* Lv.3 海浪名牌：名字下方的波纹边框 */
.home[data-affinity="3"] .plate-name, .home[data-affinity="4"] .plate-name,
.home[data-affinity="5"] .plate-name, .home[data-affinity="6"] .plate-name {
  display: inline-block; padding: 4px 18px 10px 0;
  background:
    radial-gradient(circle at 10px -4px, transparent 9px, rgba(95, 224, 255, 0.55) 10px, transparent 11px) bottom left / 20px 10px repeat-x;
}
.home[data-affinity="6"] .plate-name { background-image: radial-gradient(circle at 10px -4px, transparent 9px, rgba(255, 209, 102, 0.7) 10px, transparent 11px); }
.plate-title {
  margin-left: 12px; padding: 2px 10px; vertical-align: middle; border-radius: 6px;
  font-family: inherit; font-size: 14px; letter-spacing: 0.2em; color: #2a1a00;
  background: linear-gradient(135deg, #ffe7a3, #ffc94d); box-shadow: 0 0 16px rgba(255, 209, 102, 0.6);
  text-shadow: none;
}

/* 「鲸鱼娘」页的亲密度卡片 */
.affinity-card { gap: 18px; }
.aff-head { display: flex; gap: 18px; align-items: center; }
.feed-stage { position: relative; flex: none; width: 96px; height: 96px; display: grid; place-items: center; font-size: 52px; }
.feed-stage .whale-avatar { width: 88px; height: 88px; font-size: 48px; }
.feed-stage .whale-avatar img { width: 88px; height: 88px; }
.feed-stage .feed-fx .fx-food { font-size: 26px; }
.feed-stage .feed-fx .fx-gain { font-size: 13px; top: 4%; }
.feed-stage .feed-fx .fx-level { font-size: 18px; top: 70%; }
.aff-summary { flex: 1; min-width: 0; display: grid; gap: 6px; }
.aff-summary h3 { margin: 0; }
.aff-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.aff-row .aff-bar { flex: 1 1 200px; max-width: 460px; width: auto; height: 10px; }
.aff-hint { margin: 0; font-size: 13px; line-height: 1.7; color: var(--muted); }
/* 宽屏：左边喂食、右边装饰；窄屏上下排 */
.aff-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(240px, 1fr); gap: 18px; }
.aff-grid h4 { margin: 0 0 10px; font-size: 14px; color: var(--muted); letter-spacing: 0.08em; }
.aff-feed, .aff-deco { padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(6, 20, 36, 0.45); min-width: 0; }
.feed-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1400px) { .feed-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .feed-tiles { grid-template-columns: 1fr; } }
.feed-tile { display: grid; gap: 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(10, 28, 51, 0.7); }
.feed-tile .tile-top { display: flex; align-items: center; gap: 8px; }
.feed-tile .food { font-size: 22px; }
.feed-tile .tile-info { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.feed-tile .tile-info b { color: var(--gold); font-weight: 600; }
.feed-tile .gain { color: var(--rose); }
.feed-tile .tile-act { display: flex; gap: 8px; }
.feed-tile input {
  flex: 1; min-width: 0; min-height: 34px; padding: 4px 8px; font: inherit; color: var(--text);
  background: rgba(6, 20, 36, 0.9); border: 1px solid var(--line); border-radius: 8px; outline: none;
}
.feed-tile input:disabled { opacity: 0.5; }
.feed-tile button { min-height: 34px; padding: 0 14px; }
.feed-tile.empty-row { opacity: 0.55; }
.deco-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13px; }
.deco-list li { display: flex; gap: 10px; align-items: flex-start; color: var(--muted); }
.deco-list li div { display: grid; gap: 2px; }
.deco-list li b { color: #b5cad9; font-weight: 600; }
.deco-list li.on b { color: var(--rose); }
.deco-list li.on .lock { color: var(--gold); }
.deco-list .lock { width: 18px; text-align: center; }
@media (max-width: 900px) { .aff-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .aff-head { flex-direction: column; align-items: flex-start; } }
.ledger td.spend { color: var(--rose); }
@media (max-width: 860px) { .feed-tray { max-width: none; } .aff-bar { width: 110px; } }

@media (prefers-reduced-motion: reduce) {
  .deco-halo, .deco-bubbles i, .deco-stars i, .home-portrait.munch, .feed-stage.munch * { animation: none !important; }
  .deco-bubbles i, .deco-stars i { opacity: 0.7; }
  .feed-burst > span { animation-duration: 0.01s !important; animation-delay: 0s !important; }
  .fx-gain, .fx-level { animation: none !important; opacity: 1; }
}


/* U13 · CSP：原来写在 style="" 里的固定样式改成工具类（!important 保持原内联样式的优先级） */
.u-m0 { margin: 0 !important; }
.u-mt8 { margin: 8px 0 0 !important; }
.u-mb4 { margin: 0 0 4px !important; }
.u-mb8 { margin: 0 0 8px !important; }
.u-mt12 { margin-top: 12px !important; }
.u-mt16 { margin-top: 16px !important; }
.u-mb10 { margin-bottom: 10px !important; }
.u-mb12 { margin-bottom: 12px !important; }
.u-mb14 { margin-bottom: 14px !important; }
.u-mb16 { margin-bottom: 16px !important; }
.u-gold { color: var(--gold) !important; }
.u-divider { margin-top: 16px !important; border-top: 1px solid var(--line); padding-top: 16px; }
.spark.s1 { left: 34%; bottom: 42%; }
.spark.s2 { left: 58%; bottom: 52%; }


/* U13 隐私与数据 */
.privacy-facts { display: grid; gap: 12px; margin-bottom: 16px; }
.privacy-facts section { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: rgba(6, 20, 36, 0.5); }
.privacy-facts h3 { margin: 0 0 6px; font-size: 15px; color: var(--cyan); }
.privacy-facts ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 13px; line-height: 1.7; color: #c9dceb; }
.privacy-facts b { color: var(--text); }
.danger-card { border-color: rgba(255, 143, 171, 0.45); }
.danger-card::before { background: var(--rose) !important; }
.danger-card h3 { color: var(--rose); }
.privacy-details { border: 1px dashed var(--line); border-radius: 12px; padding: 8px 12px; font-size: 13px; }
.privacy-details summary { cursor: pointer; color: var(--cyan); }
.privacy-details[open] summary { margin-bottom: 10px; }
.privacy-details .privacy-facts { margin-bottom: 8px; }


/* U12 鲸鱼娘的工具请求卡片 */
.msg.tool { max-width: min(560px, 100%); }
.tool-card { margin-top: 6px; display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255, 209, 102, 0.45); background: rgba(255, 209, 102, 0.06); }
.tool-head { display: flex; align-items: center; gap: 8px; }
.tool-head b { color: var(--gold); }
.tool-head .badge { margin-left: auto; }
.badge.wait { color: #2a1a00; background: var(--gold); border-color: var(--gold); }
.badge.deny { color: var(--rose); border-color: rgba(255, 143, 171, 0.5); }
.tool-path { margin: 0; font-size: 13px; color: var(--muted); word-break: break-all; }
.tool-path code { color: var(--text); }
.tool-preview { margin: 0; max-height: 220px; overflow: auto; padding: 8px 10px; border-radius: 8px; background: rgba(2, 10, 20, 0.75); border: 1px solid var(--line); font-size: 12px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.tool-note { margin: 0; font-size: 12px; color: var(--muted); }
.tool-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.approval-line.ok code { color: var(--green); }
.approval-line.deny code { color: var(--rose); }

/* 不透明的立绘（照片、方形插画）：当成一张卡片，留出上下边距，圆角 + 光边 */
.home-portrait.opaque img {
  max-height: 82%; max-width: 92%; margin-bottom: 7vh;
  border-radius: 22px;
  border: 1px solid rgba(160, 230, 255, 0.35);
  box-shadow: 0 0 0 6px rgba(95, 224, 255, 0.07), 0 0 48px rgba(95, 224, 255, 0.22), 0 24px 50px rgba(0, 0, 0, 0.5);
  filter: none;
}
@media (max-width: 860px) { .home-portrait.opaque img { max-height: 78%; margin-bottom: 4vh; } }

/* 传说鱼食的金鱼图标 */
.gold-fish { display: inline-block; vertical-align: -0.14em; filter: drop-shadow(0 0 4px rgba(255, 209, 102, 0.75)); }

/* 发布委托：宽屏左边表单、右边预览和小贴士；窄屏上下排 */
.publish-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: 20px; align-items: start; }
.publish-layout .form { max-width: none; }
.publish-layout .row > .field { flex: 1 1 220px; }
.publish-side { display: grid; gap: 12px; }
.side-card { padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(6, 20, 36, 0.45); }
.side-card h4 { margin: 0 0 10px; font-size: 14px; color: var(--muted); letter-spacing: 0.08em; }
.preview-card { pointer-events: none; }
.tips { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13px; line-height: 1.6; color: #c9dceb; }
.food-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.food-table td { padding: 5px 4px; border-bottom: 1px solid var(--line); color: #c9dceb; }
.food-table td:last-child { text-align: right; color: var(--muted); white-space: nowrap; }
@media (max-width: 1000px) { .publish-layout { grid-template-columns: 1fr; } }
.publish-layout textarea { min-height: 200px; }
/* 发布委托底部整宽的「难度和鱼食」横条 */
.food-strip { margin-top: 16px; }
.food-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.food-cell { display: grid; gap: 6px; justify-items: start; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(10, 28, 51, 0.7); font-size: 13px; }
.food-cell b { color: #c9dceb; font-weight: 600; }
.food-cell small { color: var(--muted); }
@media (max-width: 1100px) { .food-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .food-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* U14 页脚备案号：只在标题画面和主界面显示，打开面板时隐藏 */
.site-footer {
  position: fixed; left: 50%; bottom: 8px; transform: translateX(-50%); z-index: 31;
  display: flex; gap: 8px; align-items: center; white-space: nowrap;
  font-size: 12px; color: rgba(143, 179, 204, 0.75);
}
.site-footer[hidden] { display: none; }
.site-footer a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.site-footer img { width: 14px; height: 16px; flex: none; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--text); text-decoration: underline; }
body:not([data-view="home"]) #siteFooter { display: none; }
.title-footer { position: static; transform: none; justify-content: center; margin: 28px 0 0; }
/* 手机主界面底部被「开始冒险」和菜单栏占满，备案号只在标题画面（访客首先看到的页面）显示 */
@media (max-width: 860px) {
  #siteFooter { display: none; }
  .site-footer { font-size: 11px; }
}