/* 首杀 · 全站壳子：一条顶栏走遍全站（2026-11-15）。脚本是同目录 shell.js，每页一行占位。
   只靠 tokens.css 的变量和 firstblood.css 里的小怪兽（.fb-monster）、开机键（.fb-btn），别的都在这一份里，哪一版的设计系统副本都接得上。
   左边招牌，中间五个地方（卡片键），右边这一页的东西（她的页是「她 · 跟她说话」）、账号、开机。
   两种高度：页面顶上是高的（电脑 64 / 手机两行 118），往下滚收成细条（44 / 52），任何时候都在，不藏。手机横着拿只有细条。
   规矩照设计系统：游戏物件（键）像素切角加厚底，霓虹只给招牌和小怪兽；时长、曲线全取 tokens；系统设了「减少动态效果」只换颜色不动。 */

:root { --fb-shell-tall: 64px; --fb-shell-slim: 44px; --fb-shell-h: var(--fb-shell-tall);
  --fb-shell-green: var(--fb-neon-green); --fb-shell-cyan: var(--fb-neon-cyan); --fb-shell-magenta: var(--fb-neon-magenta); --fb-shell-gold: var(--fb-gold); --fb-shell-rust: var(--fb-rust-text);
  --fb-shell-cut: polygon(0 var(--fb-n), var(--fb-n) var(--fb-n), var(--fb-n) 0, calc(100% - var(--fb-n)) 0, calc(100% - var(--fb-n)) var(--fb-n), 100% var(--fb-n), 100% calc(100% - var(--fb-n)), calc(100% - var(--fb-n)) calc(100% - var(--fb-n)), calc(100% - var(--fb-n)) 100%, var(--fb-n) 100%, var(--fb-n) calc(100% - var(--fb-n)), 0 calc(100% - var(--fb-n))); }
@media (max-width: 767px) { :root { --fb-shell-tall: 118px; --fb-shell-slim: 52px; } }
@media (min-width: 768px) and (max-height: 480px) { :root { --fb-shell-tall: 44px; --fb-shell-slim: 44px; } }

/* ───────── 占位和底子 ───────── */
.fb-shell, .fb-shell *, .fb-shell *::before, .fb-shell *::after { box-sizing: border-box; }
.fb-shell { display: block; position: relative; z-index: 70; height: var(--fb-shell-tall); margin: 0; padding: 0; font-family: var(--font-body); font-size: 15px; line-height: 25px; color: var(--fb-ink); -webkit-font-smoothing: antialiased; }
.fb-shell[data-shell="slim"] { height: var(--fb-shell-slim); }
.fb-shell[data-shell="dock"] { height: 0; }
/* 顶栏真正画在这里：body 第一个孩子，fixed、零高度，不进任何页面的网格、不跟着任何 transform 走（shell.js 建它） */
.fb-shell.fb-shell--root { position: fixed; inset: 0 0 auto; height: 0; z-index: 70; }
/* 占位画好以后只是一块空地：不接点击、不压东西（不然它叠在顶栏上面，点小怪兽键点到的是它） */
header.fb-shell[data-ready] { z-index: auto; pointer-events: none; }
.fb-shell a { text-decoration: none; }
.fb-shell button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
.fb-shell p { margin: 0; }
.fb-shell [hidden] { display: none !important; }
.fb-shell :focus-visible { outline: 0; box-shadow: var(--fb-ring-focus); }
.fb-shell .fb-shell__fallback { display: inline-block; padding: 12px 16px; font: 400 24px/1 var(--font-display); color: var(--fb-tube); }   /* 脚本没跑起来时至少能回首页 */

.fb-shell .fb-shell__bar { position: fixed; z-index: 70; inset: 0 0 auto; height: var(--fb-shell-tall); overflow: hidden; background: rgba(10,13,15,.86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--fb-line);
  transition: height var(--fb-dur-enter) var(--fb-ease-out), background-color var(--fb-dur-state), border-color var(--fb-dur-state); }
.fb-shell.is-slim .fb-shell__bar { height: var(--fb-shell-slim); }
/* 压在首屏大图上的页：顶上那一截透明，只留一层往下淡的暗，字看得清；一收成细条就换回实底 */
.fb-shell[data-over="1"]:not(.is-slim) .fb-shell__bar { background: linear-gradient(180deg, rgba(5,6,8,.62), rgba(5,6,8,0)); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; }
/* 她的页：细条底下那条线是她的颜色 */
.fb-shell[class*="fb-a-"].is-slim .fb-shell__bar { border-bottom: 2px solid color-mix(in srgb, var(--a) 70%, transparent); }

.fb-shell .fb-shell__row.fb-nav__in { display: flex; align-items: center; flex-wrap: nowrap; gap: 12px; height: 100%; min-height: 0; max-width: calc(var(--fb-page-max) + 80px); margin: 0 auto; padding: 0 40px; }

/* ───────── 招牌 ───────── */
.fb-shell .fb-shell__brand { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.fb-shell .fb-shell__brand .fb-monster { --m: 27px; }
.fb-shell .fb-shell__brand b { font: 400 28px/34px var(--font-display); letter-spacing: .04em; color: var(--fb-tube); text-shadow: var(--fb-glow-magenta); }
.fb-shell .fb-shell__brand small { font: 400 10px/12px var(--font-latin); letter-spacing: .16em; color: var(--fb-ink-3); }
.fb-shell.is-slim .fb-shell__brand { gap: 8px; }
.fb-shell.is-slim .fb-shell__brand .fb-monster { --m: 18px; }
.fb-shell.is-slim .fb-shell__brand b { font-size: 22px; line-height: 26px; }
.fb-shell.is-slim .fb-shell__brand small { display: none; }

/* ───────── 五个地方：卡片键 ─────────
   平时：深色键面、像素切角、底下 3px 厚底，图标是这个地方的颜色。
   指上去：抬起 2px、左右抖一下（像素步）、图标一蹦一蹦。按下去：陷进厚底、键面闪一下这个颜色、四角迸四颗像素。
   这一页：整颗键亮成这个地方的颜色（不发光），小怪兽站在上面。
   能点的地方比画出来的卡高（键本身 44px 或撑满细条），画出来的卡（--card-h：36 / 细条 30）在里面上下居中：手指点得到，眼睛看到的还是小卡。 */
.fb-shell .fb-tab--green { --t: var(--fb-neon-green); --tk: var(--fb-green-key); --tink: var(--fb-on-green); }
.fb-shell .fb-tab--cyan { --t: var(--fb-neon-cyan); --tk: color-mix(in srgb, var(--fb-neon-cyan) 46%, #000); --tink: var(--fb-on-cyan); }
.fb-shell .fb-tab--magenta { --t: var(--fb-neon-magenta); --tk: var(--fb-magenta-key); --tink: var(--fb-on-magenta); }
.fb-shell .fb-tab--gold { --t: var(--fb-gold); --tk: color-mix(in srgb, var(--fb-gold) 48%, #000); --tink: var(--fb-on-gold); }
.fb-shell .fb-tab--rust { --t: var(--fb-rust-text); --tk: color-mix(in srgb, var(--fb-rust) 70%, #000); --tink: #1d0b03; }

.fb-shell .fb-shell__tabs { position: relative; display: flex; align-items: center; gap: 8px; align-self: stretch; margin: 0 auto; padding-top: 14px; }
.fb-shell.is-slim .fb-shell__tabs { padding-top: 0; gap: 6px; }
.fb-shell .fb-tab { --face: var(--fb-surface-1); --edge: var(--fb-line); --key: #020304; --fb-n: 3px; --card-h: 36px;
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 14px 0 11px;
  color: var(--fb-ink-2); font: 500 14px/20px var(--font-body); white-space: nowrap; user-select: none; -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 3px 0 var(--key));
  transition: transform var(--fb-dur-state) var(--fb-ease-out), filter var(--fb-dur-state) var(--fb-ease-out), color var(--fb-dur-state); }
.fb-shell .fb-tab::before, .fb-shell .fb-tab::after { content: ""; position: absolute; clip-path: var(--fb-shell-cut); }
.fb-shell .fb-tab::before { inset: calc(50% - var(--card-h) / 2) 0; z-index: -2; background: var(--edge); transition: background var(--fb-dur-state); }
.fb-shell .fb-tab::after { inset: calc(50% - var(--card-h) / 2 + 1px) 1px; z-index: -1; background: var(--face); transition: background var(--fb-dur-state); }
.fb-shell .fb-tab__ico { flex: none; width: 18px; height: 18px; background: var(--t); -webkit-mask: var(--ico) center / 100% 100% no-repeat; mask: var(--ico) center / 100% 100% no-repeat; }
.fb-shell.is-slim .fb-tab { --card-h: 30px; height: 100%; padding: 0 11px 0 8px; gap: 6px; font-size: 13px; line-height: 18px; filter: drop-shadow(0 2px 0 var(--key)); }

@media (hover: hover) {
  .fb-shell .fb-tab:hover { --face: var(--fb-surface-2); --edge: color-mix(in srgb, var(--t) 55%, var(--fb-line)); color: var(--fb-ink); transform: translateY(-2px); filter: drop-shadow(0 5px 0 var(--key)); animation: fb-tab-jiggle var(--fb-dur-state) steps(3, end) 1; }
  .fb-shell .fb-tab:hover .fb-tab__ico { animation: fb-walk .5s var(--fb-ease-pixel) infinite; }
  .fb-shell.is-slim .fb-tab:hover { filter: drop-shadow(0 4px 0 var(--key)); }
}
.fb-shell .fb-tab:active { transform: translateY(3px); filter: drop-shadow(0 0 0 var(--key)); transition-duration: var(--fb-dur-press); }
.fb-shell .fb-tab.is-hit::after { animation: fb-tab-flash var(--fb-dur-state) steps(2, end) 1; }
.fb-shell .fb-tab__fx { position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; margin: -1px 0 0 -1px; color: var(--t); opacity: 0; pointer-events: none; }
.fb-shell .fb-tab.is-hit .fb-tab__fx { animation: fb-tab-spark 260ms steps(3, end) 1; }

.fb-shell .fb-tab[aria-current="page"] { --face: var(--t); --edge: var(--t); --key: var(--tk); color: var(--tink); font-weight: 700; }
.fb-shell .fb-tab[aria-current="page"] .fb-tab__ico { background: var(--tink); }
@media (hover: hover) { .fb-shell .fb-tab[aria-current="page"]:hover { --face: var(--t); --edge: var(--fb-tube); color: var(--tink); } }
.fb-shell.is-boot .fb-tab[aria-current="page"] { animation: fb-tab-on 480ms steps(4, end) 1; }

/* 「新」：一枚斜贴的像素贴纸，进页面闪两下，指到那颗键上它晃一下 */
.fb-shell .fb-tab__new { position: absolute; z-index: 2; top: calc(50% - var(--card-h) / 2 - 9px); right: -9px; display: grid; place-items: center; min-width: 20px; height: 17px; padding: 0 4px; border-radius: 2px; background: var(--fb-neon-magenta); color: var(--fb-on-magenta);
  font: 700 11px/17px var(--font-body); rotate: -8deg; box-shadow: 0 0 0 1.5px var(--fb-night), 2px 2px 0 1.5px var(--fb-night); pointer-events: none; }
.fb-shell.is-boot .fb-tab__new { animation: fb-tab-blink .3s steps(2, jump-none) 4; }
@media (hover: hover) { .fb-shell .fb-tab:hover .fb-tab__new { animation: fb-tab-wiggle var(--fb-dur-enter) steps(3, end) 1; } }
.fb-shell.is-slim .fb-tab__new { top: calc(50% - var(--card-h) / 2 - 5px); right: -7px; height: 15px; min-width: 17px; font-size: 10px; line-height: 15px; }

/* 小怪兽：站在亮着的键顶上；指哪跑哪（像素步），按下去跳；细条上没地方站，先下去 */
.fb-shell .fb-shell__pet { position: absolute; left: 0; top: 0; z-index: 3; --m: 18px; pointer-events: none; filter: drop-shadow(0 0 6px rgba(255,47,209,.55));
  transition: transform var(--fb-dur-enter) steps(6, end), opacity var(--fb-dur-state); }
.fb-shell .fb-shell__pet.is-walking { animation: fb-walk .28s var(--fb-ease-pixel) infinite; }
.fb-shell .fb-shell__pet.is-hop { animation: fb-hop var(--fb-dur-hop) var(--fb-ease-pixel) 1; }
.fb-shell.is-boot .fb-shell__pet:not(.is-off) { animation: fb-shell-land var(--fb-dur-hop) var(--fb-ease-pop) 1; }
.fb-shell .fb-shell__pet.is-off { opacity: 0; transition: none; }

/* ───────── 这一页的东西：她的页是「她 · 跟她说话」（聊天在 #talk） ───────── */
.fb-shell .fb-shell__slot { display: none; align-items: center; align-self: stretch; gap: 8px; flex: none; }
.fb-shell.is-slim .fb-shell__slot { display: flex; }
.fb-shell .fb-shell__slot:empty { display: none !important; }
.fb-shell .fb-shell__who { display: inline-flex; align-items: center; gap: 6px; height: 30px; color: var(--fb-ink); padding: 0 11px 0 3px; border-radius: var(--fb-radius-pill); background: color-mix(in srgb, var(--a) 16%, var(--fb-surface-1)); border: 1px solid color-mix(in srgb, var(--a) 50%, var(--fb-line)); font: 700 13px/18px var(--font-body); white-space: nowrap; }
.fb-shell .fb-shell__who .fb-avatar { --s: 22px; box-shadow: 0 0 0 1.5px var(--a); }
.fb-shell .fb-shell__talk { --fb-n: 3px; --card-h: 30px; position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 6px; height: min(44px, 100%); padding: 0 12px 0 9px; color: var(--a-ink, var(--fb-night)); font: 700 13px/18px var(--font-body); white-space: nowrap;
  filter: drop-shadow(0 3px 0 color-mix(in srgb, var(--a) 45%, #000)); transition: transform var(--fb-dur-state) var(--fb-ease-out), filter var(--fb-dur-state); -webkit-tap-highlight-color: transparent; }
.fb-shell .fb-shell__talk::before { content: ""; position: absolute; inset: calc(50% - var(--card-h) / 2) 0; z-index: -1; background: var(--a); clip-path: var(--fb-shell-cut); }
.fb-shell .fb-shell__talk i { width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--ico) center / 100% 100% no-repeat; mask: var(--ico) center / 100% 100% no-repeat; }
@media (hover: hover) { .fb-shell .fb-shell__talk:hover { transform: translateY(-2px); filter: drop-shadow(0 5px 0 color-mix(in srgb, var(--a) 45%, #000)); } .fb-shell .fb-shell__talk:hover i { animation: fb-walk .5s var(--fb-ease-pixel) infinite; } }
.fb-shell .fb-shell__talk:active { transform: translateY(3px); filter: none; transition-duration: var(--fb-dur-press); }
.fb-shell .fb-shell__talk.is-hit::before { animation: fb-tab-flash-a var(--fb-dur-state) steps(2, end) 1; }

/* ───────── 线索本：挨着账号，一本像素本子 + 找到几条（金色＝世界那颗键的颜色）；数一变，本子跳一下 ───────── */
.fb-shell .fb-shell__clue { --t: var(--fb-gold); --fb-n: 3px; --card-h: 32px; position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 6px; flex: none; height: min(44px, 100%); align-self: center; padding: 0 8px 0 9px; color: var(--fb-ink-2); font: 500 13px/18px var(--font-body); white-space: nowrap; -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 3px 0 #020304); transition: transform var(--fb-dur-state) var(--fb-ease-out), filter var(--fb-dur-state), color var(--fb-dur-state); }
.fb-shell .fb-shell__clue::before, .fb-shell .fb-shell__clue::after { content: ""; position: absolute; clip-path: var(--fb-shell-cut); }
.fb-shell .fb-shell__clue::before { inset: calc(50% - var(--card-h) / 2) 0; z-index: -2; background: var(--fb-line-strong); }
.fb-shell .fb-shell__clue::after { inset: calc(50% - var(--card-h) / 2 + 1px) 1px; z-index: -1; background: var(--fb-surface-1); }
.fb-shell .fb-shell__clue i { width: 18px; height: 18px; flex: none; background: var(--t); -webkit-mask: var(--ico) center / 100% 100% no-repeat; mask: var(--ico) center / 100% 100% no-repeat; }
.fb-shell .fb-shell__clue b, .fb-shell .fb-shell__mclue b { display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 5px; border-radius: 2px; background: var(--fb-surface-3); color: var(--fb-ink-3); font: 400 12px/18px var(--font-latin); }
.fb-shell .fb-shell__clue.is-some b { background: var(--fb-gold); color: var(--fb-on-gold); }
.fb-shell.is-slim .fb-shell__clue { --card-h: 30px; }
@media (hover: hover) { .fb-shell .fb-shell__clue:hover { color: var(--fb-ink); transform: translateY(-2px); filter: drop-shadow(0 5px 0 #020304); } .fb-shell .fb-shell__clue:hover i { animation: fb-walk .5s var(--fb-ease-pixel) infinite; } }
.fb-shell .fb-shell__clue:active { transform: translateY(3px); filter: none; transition-duration: var(--fb-dur-press); }
.fb-shell .fb-shell__clue.is-bump i { animation: fb-hop var(--fb-dur-hop) var(--fb-ease-pixel) 1; }
.fb-shell .fb-shell__clue.is-bump b { animation: fb-pop var(--fb-dur-enter) var(--fb-ease-pop) 1; }
.fb-shell .fb-shell__mclue b { margin-left: 4px; background: var(--fb-gold); color: var(--fb-on-gold); }

/* ───────── 账号、开机 ───────── */
.fb-shell #fb-account { display: inline-flex; align-items: center; flex: none; }
.fb-shell .ac-login { height: 32px; padding: 0 12px; border-radius: var(--fb-radius-sm); border: 1px solid var(--fb-line-strong); background: var(--fb-surface-1); font: 500 13px/18px var(--font-body); color: var(--fb-ink); }
.fb-shell.is-me .ac-face, .fb-shell.is-me .ac-login { border-color: var(--fb-neon-cyan); box-shadow: 0 0 0 1px var(--fb-neon-cyan); }
.fb-shell .fb-shell__join { flex: none; }
html.has-fb-shell .ac-menu { top: calc(var(--fb-shell-h) + 8px) !important; }

/* ───────── 收起来用的：小怪兽键（去别处）、你在哪 ───────── */
.fb-shell .fb-shell__pocket { --face: var(--fb-surface-1); --edge: var(--fb-line-strong); --key: #020304; --fb-n: 3px; --card-h: 36px; position: relative; isolation: isolate; display: none; align-items: center; gap: 6px; flex: none; height: 44px; padding: 0 10px 0 8px;
  filter: drop-shadow(0 3px 0 var(--key)); transition: transform var(--fb-dur-press); -webkit-tap-highlight-color: transparent; }
.fb-shell .fb-shell__pocket::before, .fb-shell .fb-shell__pocket::after { content: ""; position: absolute; clip-path: var(--fb-shell-cut); }
.fb-shell .fb-shell__pocket::before { inset: calc(50% - var(--card-h) / 2) 0; z-index: -2; background: var(--edge); }
.fb-shell .fb-shell__pocket::after { inset: calc(50% - var(--card-h) / 2 + 1px) 1px; z-index: -1; background: var(--face); }
.fb-shell .fb-shell__pocket .fb-monster { --m: 18px; }
.fb-shell .fb-shell__pocket b { font: 400 20px/24px var(--font-display); letter-spacing: .04em; color: var(--fb-tube); text-shadow: var(--fb-glow-magenta); }
.fb-shell .fb-shell__caret { width: 10px; height: 6px; background: var(--fb-ink-2); -webkit-mask: var(--caret) center / 100% 100% no-repeat; mask: var(--caret) center / 100% 100% no-repeat; transition: rotate var(--fb-dur-state) steps(2, end); }
.fb-shell .fb-shell__pocket:active { transform: translateY(3px); filter: none; }
.fb-shell.is-open .fb-shell__pocket { --face: var(--fb-surface-3); --edge: var(--fb-neon-magenta); }
.fb-shell.is-open .fb-shell__caret { rotate: 180deg; background: var(--fb-neon-magenta); }
.fb-shell.is-open .fb-shell__pocket .fb-monster { animation: fb-hop var(--fb-dur-hop) var(--fb-ease-pixel) 1; }

.fb-shell .fb-shell__loc { display: none; align-items: center; gap: 6px; min-width: 0; }
.fb-shell .fb-shell__where { --fb-n: 2px; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px 0 6px; background: var(--t); color: var(--tink); font: 700 13px/18px var(--font-body); clip-path: var(--fb-shell-cut); white-space: nowrap; }
.fb-shell .fb-shell__where i { width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--ico) center / 100% 100% no-repeat; mask: var(--ico) center / 100% 100% no-repeat; }

/* ───────── 导航卡：从细条底下掉下来一块主题色色块，上面五张深色圆角卡、底边一道主题色（艺人页那套卡片，老板认的） ─────────
   色块和卡的算法跟设计系统 fb-block / fb-card 是同一套，这里抄在本地，壳子不挑设计系统的版本 */
.fb-shell .fb-shell__scrim { position: fixed; inset: 0; z-index: 68; background: rgba(5,6,8,.6); animation: fb-shell-fade var(--fb-dur-state) ease-out both; }
.fb-shell .fb-shell__menu { --theme: var(--a, var(--fb-neon-magenta)); --f1: color-mix(in srgb, var(--theme) 86%, #000); --f-deep: color-mix(in srgb, var(--theme) 45%, #000); --on: var(--fb-night);
  --card: color-mix(in srgb, var(--theme) 9%, #0b0e12); --card-line: color-mix(in srgb, var(--theme) 14%, #050608);
  position: fixed; z-index: 69; left: 0; right: 0; top: var(--fb-shell-h); max-height: calc(100dvh - var(--fb-shell-h)); overflow: auto; overscroll-behavior: contain; padding: 14px 12px 20px;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.03) 0 2px, transparent 2px 6px), var(--f1); color: var(--on); box-shadow: var(--fb-shadow-pop); animation: fb-shell-drop var(--fb-dur-enter) var(--fb-ease-pop) both; }
@supports (color: oklch(from red l c h)) {
  .fb-shell .fb-shell__menu { --f1: oklch(from var(--theme) calc(l * .86) min(.25, calc(c * 1.25)) h); --f-deep: oklch(from var(--theme) calc(l * .86 - .27) min(.19, calc(c * 1.05)) h); --on: oklch(from var(--f1) clamp(.2, calc((.66 - l) * 100), .99) .04 h);
    --card: oklch(from var(--theme) .165 min(.035, c) h); --card-line: oklch(from var(--theme) .1 min(.03, c) h); }
}
.fb-shell .fb-shell__menu.fb-a-luzong { --theme: #3f74c4; } .fb-shell .fb-shell__menu.fb-a-xuanji { --theme: #2f9b78; }   /* 名牌色太深的两位，跟艺人页同一个提亮值 */
.fb-shell .fb-shell__mk { margin: 0 2px 10px; font: 700 13px/20px var(--font-body); letter-spacing: .3em; color: var(--on); }
.fb-shell .fb-shell__dests { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
.fb-shell .fb-shell__dest { position: relative; display: grid; align-content: center; gap: 2px; min-height: 78px; padding: 12px 12px 12px 62px; border: 1px solid var(--card-line); border-radius: var(--fb-radius-lg); background: var(--card); color: var(--fb-ink);
  box-shadow: 0 5px 0 var(--f-deep); transition: transform var(--fb-dur-state) var(--fb-ease-out), box-shadow var(--fb-dur-state); animation: fb-shell-in var(--fb-dur-enter) var(--fb-ease-pop) both; -webkit-tap-highlight-color: transparent; }
.fb-shell .fb-shell__dest:first-child { grid-column: 1 / -1; }
.fb-shell .fb-shell__dest:nth-child(2) { animation-delay: 40ms; } .fb-shell .fb-shell__dest:nth-child(3) { animation-delay: 80ms; } .fb-shell .fb-shell__dest:nth-child(4) { animation-delay: 120ms; } .fb-shell .fb-shell__dest:nth-child(5) { animation-delay: 160ms; }
.fb-shell .fb-shell__dest:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--f-deep); transition-duration: var(--fb-dur-press); }
@media (hover: hover) { .fb-shell .fb-shell__dest:hover { transform: translateY(-3px); box-shadow: 0 8px 0 var(--f-deep); } }
.fb-shell .fb-shell__dico { position: absolute; left: 14px; top: 50%; width: 36px; height: 36px; margin-top: -18px; background: var(--t); -webkit-mask: var(--ico) center / 100% 100% no-repeat; mask: var(--ico) center / 100% 100% no-repeat; }
.fb-shell .fb-shell__dest > b { font: 400 24px/30px var(--font-display); letter-spacing: .04em; color: var(--fb-ink); }
.fb-shell .fb-shell__dest > small { font: 400 12px/18px var(--font-body); color: var(--fb-ink-3); }
.fb-shell .fb-shell__dest[aria-current="page"] { border-color: var(--t); }
.fb-shell .fb-shell__dest[aria-current="page"] > b { color: var(--t); }
.fb-shell .fb-shell__here { position: absolute; right: 10px; top: 10px; padding: 1px 7px; border-radius: 2px; background: var(--t); color: var(--tink); font: 700 11px/16px var(--font-body); rotate: 3deg; }
.fb-shell .fb-shell__dest .fb-tab__new { top: -7px; right: -6px; }
.fb-shell .fb-shell__dest.is-hit { animation: fb-shell-press var(--fb-dur-state) steps(2, end) 1; }
.fb-shell .fb-shell__mfoot { display: flex; gap: 10px; margin-top: 18px; }
.fb-shell .fb-shell__mfoot > * { flex: 1; }
.fb-shell .fb-shell__mbtn { display: flex; align-items: center; justify-content: center; gap: 2px; white-space: nowrap; height: var(--fb-control-sm); border-radius: var(--fb-radius-md); background: var(--card); border: 1px solid var(--card-line); box-shadow: 0 3px 0 var(--f-deep); color: var(--fb-ink); font: 500 13px/18px var(--font-body); }
.fb-shell .fb-shell__mbtn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--f-deep); }
@media (min-width: 768px) { .fb-shell .fb-shell__menu { left: 12px; right: auto; width: 440px; border-radius: 0 0 var(--fb-radius-lg) var(--fb-radius-lg); } }

/* ───────── 手机竖屏（窄于 768）：高的时候两行（招牌 + 账号 + 开机 / 五颗键）；细条＝小怪兽键 + 你在哪 + 这一页的东西 + 账号 ───────── */
@media (max-width: 767px) {
  .fb-shell .fb-shell__row.fb-nav__in { flex-wrap: wrap; align-content: flex-start; gap: 0 8px; padding: 0 12px; }
  .fb-shell .fb-shell__brand { height: 52px; margin-right: auto; }
  .fb-shell .fb-shell__brand .fb-monster { --m: 24px; }
  .fb-shell .fb-shell__brand b { font-size: 26px; line-height: 30px; }
  .fb-shell .fb-shell__brand small { display: none; }
  .fb-shell .fb-shell__tabs { order: 9; flex: 0 0 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; align-self: auto; margin: 0; padding: 4px 0 0; }
  .fb-shell .fb-tab { --card-h: 50px; flex-direction: column; justify-content: center; gap: 3px; height: 50px; padding: 0; font-size: 12px; line-height: 16px; }
  .fb-shell .fb-tab__new { top: -7px; right: -5px; }
  /* 细条：五颗键跟着栏一起折上去（不是一下没了），换成小怪兽键 */
  .fb-shell.is-slim .fb-shell__row.fb-nav__in { flex-wrap: nowrap; align-content: center; gap: 8px; }
  .fb-shell.is-slim .fb-shell__brand, .fb-shell.is-slim .fb-shell__join { display: none; }
  .fb-shell.is-slim .fb-shell__tabs { position: absolute; left: 12px; right: 12px; top: 56px; opacity: 0; pointer-events: none; visibility: hidden; transition: opacity var(--fb-dur-state), visibility 0s var(--fb-dur-state); }
  .fb-shell.is-slim .fb-shell__pocket { display: inline-flex; }
  .fb-shell.is-slim .fb-shell__loc { display: flex; margin-right: auto; }
  .fb-shell.is-slim[class*="fb-a-"] .fb-shell__loc { display: none; }   /* 她的页：「她」就是你在哪，不用再写「艺人」 */
  .fb-shell.is-slim .fb-shell__slot { margin-right: auto; gap: 6px; }
  .fb-shell.is-slim .ac-face__name { display: none; }
  .fb-shell.is-slim .ac-face { padding: 2px; }
  .fb-shell .fb-shell__clue span { display: none; }
  .fb-shell .fb-shell__clue { height: 44px; padding: 0 6px 0 7px; gap: 4px; }
  .fb-shell.is-slim .fb-shell__clue { height: min(44px, 100%); }
  .fb-shell.is-slim .fb-shell__who { display: none; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  .fb-shell .fb-shell__row.fb-nav__in { padding: 0 16px; gap: 10px; }
  .fb-shell .fb-shell__brand small, .fb-shell .fb-shell__who, .fb-shell .ac-face__name, .fb-shell .fb-shell__clue span { display: none; }
  .fb-shell .fb-shell__tabs { gap: 6px; }
  .fb-shell .fb-tab { padding: 0 11px 0 8px; }
  .fb-shell .ac-face { padding: 2px; }
}
@media (min-width: 768px) and (max-height: 480px) { .fb-shell .fb-shell__row.fb-nav__in { padding: 0 16px; gap: 8px; } }

/* ───────── 播放器（dock）：顶栏是播放器自己的那一行，「首杀」后面多一个像素小三角＝点了去别处；导航卡从那一行底下掉下来 ───────── */
/* 小三角挂在「首杀」底下正中、不占宽：播放器那一行在 360 宽上是一个像素一个像素排好的（tools/topbar_check 守着），多一点宽「开机」就出屏 */
body.has-shell-dock #stage header.top .brand[aria-controls] { position: relative; }
body.has-shell-dock #stage header.top .brand[aria-controls]::after { content: ""; position: absolute; left: 50%; top: 100%; width: 9px; height: 6px; margin: -1px 0 0 -4px; background: currentColor; opacity: .75; pointer-events: none;
  -webkit-mask: var(--caret) center / 100% 100% no-repeat; mask: var(--caret) center / 100% 100% no-repeat; transition: rotate var(--fb-dur-state) steps(2, end); }
body.has-shell-dock #stage header.top .brand[aria-expanded="true"]::after { rotate: 180deg; opacity: 1; }

/* ───────── 动效（全取 tokens 的节奏）───────── */
@keyframes fb-tab-jiggle { 0% { translate: -1px 0; } 50% { translate: 1px 0; } 100% { translate: 0 0; } }
@keyframes fb-tab-flash { 0% { background: color-mix(in srgb, var(--t) 70%, #fff); } 100% { background: var(--face); } }
@keyframes fb-tab-flash-a { 0% { background: #fff; } 100% { background: var(--a); } }
@keyframes fb-tab-spark { 0% { opacity: 1; box-shadow: -14px -10px 0 currentColor, 14px -10px 0 currentColor, -14px 10px 0 currentColor, 14px 10px 0 currentColor; }
  100% { opacity: 0; box-shadow: -30px -20px 0 currentColor, 30px -20px 0 currentColor, -30px 20px 0 currentColor, 30px 20px 0 currentColor; } }
@keyframes fb-tab-on { 0% { opacity: .3; } 25% { opacity: 1; } 50% { opacity: .55; } 100% { opacity: 1; } }
@keyframes fb-tab-blink { 0% { opacity: 1; } 100% { opacity: .2; } }
@keyframes fb-tab-wiggle { 0% { rotate: -8deg; } 33% { rotate: -16deg; } 66% { rotate: 0deg; } 100% { rotate: -8deg; } }
@keyframes fb-shell-land { 0% { opacity: 0; margin-top: -14px; } 60% { opacity: 1; margin-top: 2px; } 100% { margin-top: 0; } }
@keyframes fb-shell-drop { from { opacity: 0; translate: 0 -14px; } to { opacity: 1; translate: 0 0; } }
@keyframes fb-shell-in { from { opacity: 0; translate: 0 -8px; } to { opacity: 1; translate: 0 0; } }
@keyframes fb-shell-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fb-shell-press { 0% { background: color-mix(in srgb, var(--t) 30%, var(--card)); } 100% { background: var(--card); } }
@media (prefers-reduced-motion: reduce) {
  .fb-shell *, .fb-shell *::before, .fb-shell *::after, .fb-shell .fb-shell__bar { animation: none !important; transition: none !important; }
  .fb-shell .fb-tab:hover, .fb-shell .fb-tab:active, .fb-shell .fb-shell__talk:hover, .fb-shell .fb-shell__talk:active, .fb-shell .fb-shell__pocket:active, .fb-shell .fb-shell__dest:hover, .fb-shell .fb-shell__dest:active { transform: none; }
}