/* Shared homepage / draw-page theme tokens and bottom navigation. */
:root {
  --home-page: #f7f7ff; --home-deep: #e7eaff; --home-panel: rgba(255,255,255,.82);
  --home-solid: #fff; --home-text: #20214c; --home-muted: #6c7199;
  --home-primary: #6652df; --home-accent: #168fc7; --home-line: rgba(100,87,201,.25);
  --home-shadow: 0 6px 20px rgba(3,9,23,.18);
}
html[data-header-mode="dark"] {
  --home-page:#06091d; --home-deep:#10153b; --home-panel:rgba(13,18,52,.78);
  --home-solid:#11173e; --home-text:#f5f4ff; --home-muted:#a9b1dc;
  --home-primary:#765cff; --home-accent:#34d6ff; --home-line:rgba(125,112,255,.38);
}
html[data-home-theme="original"] { --home-primary:#2476ef; --home-accent:#17b8c7; }
html[data-home-theme="aurora"] { --home-primary:#1ba693; --home-accent:#6958ce; --home-page:#f5fffc; --home-deep:#d8f5ed; }
html[data-home-theme="particles"] { --home-primary:#237eb2; --home-accent:#20c3d5; --home-page:#f4fbff; --home-deep:#d8eef7; }
html[data-home-theme="esports"] { --home-primary:#d93463; --home-accent:#5949d5; --home-page:#fff8fb; --home-deep:#f5dfe8; }
html[data-home-theme="arcade"] { --home-primary:#7948da; --home-accent:#da56b3; --home-page:#fff9fd; --home-deep:#f0dcff; }
html[data-home-theme="gold"] { --home-primary:#9f793e; --home-accent:#c18f38; --home-page:#fffdf8; --home-deep:#ead9b9; }
html[data-header-mode="dark"][data-home-theme="aurora"] { --home-page:#07262b; --home-deep:#13433e; --home-panel:#0b3337; --home-solid:#0b3337; }
html[data-header-mode="dark"][data-home-theme="particles"] { --home-page:#05121b; --home-deep:#0c1f2b; --home-panel:#071923; --home-solid:#071923; }
html[data-header-mode="dark"][data-home-theme="esports"] { --home-page:#0c1420; --home-deep:#1b2a3c; --home-panel:#111c2b; --home-solid:#111c2b; }
html[data-header-mode="dark"][data-home-theme="arcade"] { --home-page:#18102b; --home-deep:#2a1742; --home-panel:#211235; --home-solid:#211235; }
html[data-header-mode="dark"][data-home-theme="gold"] { --home-page:#15120d; --home-deep:#272016; --home-panel:#211a10; --home-solid:#211a10; }
.home-bottom-nav { position:fixed; z-index:100; left:50%; bottom:16px; transform:translateX(-50%); display:grid; grid-template-columns:repeat(auto-fit,minmax(55px,1fr)); align-items:end; width:min(920px,calc(100% - 24px)); min-height:78px; padding:8px 8px 7px; isolation:isolate; }
.home-bottom-nav::before { content:""; position:absolute; z-index:-1; inset:auto 0 0; height:40px; background:color-mix(in srgb,var(--home-solid) 94%,transparent); border:1px solid var(--home-line); border-radius:24px; box-shadow:0 -8px 24px rgba(20,36,62,.12); backdrop-filter:blur(18px) saturate(135%); }
.home-bottom-item { display:flex; flex-direction:column; align-items:center; justify-content:end; min-width:0; min-height:62px; text-decoration:none; color:var(--home-text); gap:0; }
.home-bottom-item img { width:48px; height:48px; object-fit:contain; filter:drop-shadow(0 4px 5px rgba(25,25,65,.2)); }
.home-bottom-item span { min-width:60px; padding:2px 12px; border:1px solid var(--home-line); border-radius:99px; background:linear-gradient(180deg,var(--home-primary),#332d69); color:#fff; font-size:11px; line-height:16px; font-weight:700; text-align:center; }
.home-bottom-item[aria-current] { transform:translateY(-4px); }
.home-bottom-service { border:0; padding:0; background:transparent; font:inherit; cursor:pointer; }
.home-bottom-item:hover img { transform:translateY(-3px); }
.home-bottom-nav:not(:has(.home-bottom-item)) { display:none; }
.home-bottom-nav, .home-bottom-nav * { box-sizing:border-box; }
.home-bottom-item { font-family:"Microsoft YaHei","PingFang SC",sans-serif; }
.home-bottom-invite { position:relative; border:0; padding:0; background:transparent; font:inherit; cursor:pointer; }
.home-bottom-invite em { position:absolute; top:0; left:calc(50% + 15px); min-width:17px; padding:0 3px; border:2px solid white; border-radius:99px; background:#f05264; color:white; font:700 10px/15px sans-serif; }
.home-bottom-invite em[hidden] { display:none; }
@media (max-width:768px) {
  .home-bottom-nav { bottom:0; width:100%; padding-bottom:calc(6px + env(safe-area-inset-bottom,0px)); }
  .home-bottom-nav::before { border-radius:22px 22px 0 0; height:calc(40px + env(safe-area-inset-bottom,0px)); }
  .home-bottom-item span { min-width:42px; font-size:10px; padding-inline:8px; }
  .home-bottom-item img { width:42px; height:42px; }
}
@media (prefers-reduced-motion:reduce) { .home-bottom-item img { transition:none; } }