/* Sidebar + top bar in the arcade 3D language, and the click/route animations (pages-extra.js drives the glider and the effects).
   Why: the menu is the part people touch most, so it carries the "block you press" motif. Every link is a keycap with a solid navy
   bottom edge; the active page is a yellow keycap that slides to the link you pick (one shared glider, so the move is visible);
   a press sinks the key; a route change lifts the page cards in one after another. All motion is transform and opacity. */

/* ---------- sidebar ---------- */
.app .sidebar { overflow-y: auto; overflow-x: hidden; scrollbar-width: none; gap: 4px; background: linear-gradient(180deg, #63bbff 0%, #8ccfff 62%, #b8e4a8 100%); border-right: 3px solid var(--arc-edge); transition: transform .5s cubic-bezier(.2, 1.15, .35, 1); }
:root[data-theme="dark"] .app .sidebar { background: linear-gradient(180deg, #10204a 0%, #0d1a3c 70%, #12301f 100%); }
.app .sidebar::-webkit-scrollbar { display: none; }
.app .sidebar .brand { padding: 6px 8px 14px; font-size: 19px; }
.app .sidebar .brand-mark { transition: transform .4s cubic-bezier(.3, 1.8, .5, 1); }
.app .sidebar .brand:hover .brand-mark { transform: rotate(-14deg) scale(1.12); }
.app .nav { gap: 7px; }
.app .nav-label { padding: 10px 6px 4px; font: 600 13px var(--font-display); letter-spacing: .04em; opacity: .85; }

.app .nav a {
  position: relative; z-index: 1; min-height: 42px; padding: 0 12px; gap: 12px; border-radius: 14px;
  background: #fff; color: var(--arc-navy); border: 2.5px solid var(--arc-edge); box-shadow: 0 4px 0 var(--arc-edge);
  font: 700 15px var(--font); overflow: hidden;
  transition: transform .2s cubic-bezier(.3, 1.7, .5, 1), box-shadow .2s ease, background .2s;
}
:root[data-theme="dark"] .app .nav a { background: #1a2d5c; color: var(--ink); }
.app .nav a:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--arc-edge); background: #fff; }
:root[data-theme="dark"] .app .nav a:hover { background: #22397a; color: var(--ink); }
.app .nav a:active { transform: translateY(4px); box-shadow: 0 0 0 var(--arc-edge); transition-duration: .08s; }
.app .nav a .ico { width: 22px; height: 22px; stroke-width: 2.3; flex: none; transition: transform .35s cubic-bezier(.3, 1.8, .5, 1); }
.app .nav a:hover .ico { transform: rotate(-10deg) scale(1.18); }
/* the active link is see-through: the yellow glider sits behind it */
.app .nav a[aria-current="page"] { background: transparent; border-color: transparent; box-shadow: none; transform: none; color: var(--arc-navy); font-weight: 800; }
:root[data-theme="dark"] .app .nav a[aria-current="page"] { background: transparent; color: #13213f; }
.app .nav a[aria-current="page"]:active { transform: translateY(3px); }
.app .nav a[aria-current="page"] .ico { animation: nv-pop .5s cubic-bezier(.3, 1.8, .5, 1) both; }
.app .nav a .chip { margin-left: auto; }

.nav-glider { position: absolute; top: 0; left: 0; z-index: 0; border-radius: 14px; background: var(--arc-coin); border: 2.5px solid var(--arc-edge); box-shadow: 0 4px 0 var(--arc-edge), inset 0 2px 0 rgba(255, 255, 255, .55); pointer-events: none; will-change: transform; }
.nav-glider.go { transition: transform .55s cubic-bezier(.3, 1.4, .45, 1); }
.nav-glider.go::after { content: ''; position: absolute; inset: -2.5px; border-radius: 14px; animation: nv-squash .55s ease-out; }

.app .side-foot { gap: 12px; padding-top: 10px; }
.app .side-balance { border-radius: 18px; transition: transform .22s cubic-bezier(.3, 1.7, .5, 1), box-shadow .22s; position: relative; overflow: hidden; }
.app .side-balance::after { content: ''; position: absolute; right: -14px; top: -14px; width: 54px; height: 54px; border-radius: 50%; border: 6px solid rgba(185, 127, 0, .35); }
.app .side-balance:hover { transform: translateY(-3px) rotate(-.6deg); box-shadow: 0 7px 0 var(--arc-edge); }
.app .side-user { background: rgba(255, 255, 255, .55); border: 2.5px solid var(--arc-edge); border-radius: 16px; box-shadow: 0 4px 0 var(--arc-edge); padding: 8px 10px; }
:root[data-theme="dark"] .app .side-user { background: rgba(255, 255, 255, .07); }

/* ---------- top bar ---------- */
.app .topbar-wrap { top: 10px; }
.app .topbar { border-radius: 20px; padding: 8px 10px; gap: 10px; background: #fff; border: 2.5px solid var(--arc-edge); box-shadow: 0 5px 0 var(--arc-edge), 0 18px 26px -14px rgba(19, 33, 63, .4); }
:root[data-theme="dark"] .app .topbar { background: #14244a; }
.app .topbar h1 { font: 600 20px var(--font-display); }
.app .topbar .icon-btn { width: 42px; height: 42px; border-radius: 13px; background: var(--surface); border: 2.5px solid var(--arc-edge); box-shadow: 0 3px 0 var(--arc-edge); color: var(--arc-navy); position: relative; transition: transform .16s cubic-bezier(.3, 1.7, .5, 1), box-shadow .16s; }
:root[data-theme="dark"] .app .topbar .icon-btn { color: var(--ink); background: #1a2d5c; }
.app .topbar .icon-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--arc-edge); }
.app .topbar .icon-btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--arc-edge); transition-duration: .07s; }
.app .topbar .icon-btn .ico { transition: transform .35s cubic-bezier(.3, 1.8, .5, 1); }
.app .topbar .icon-btn:hover .ico { transform: scale(1.15) rotate(-8deg); }
.app .topbar .avatar { width: 38px; height: 38px; }
.app .topbar .count-badge { animation: nv-pop .5s cubic-bezier(.3, 1.8, .5, 1) both; }
.is-spinning .ico { animation-duration: .7s; }

/* ---------- click effects ---------- */
.rip-host { position: relative; overflow: hidden; }
.rip { position: absolute; border-radius: 50%; pointer-events: none; background: rgba(255, 255, 255, .75); transform: scale(0); animation: nv-rip .6s ease-out forwards; }
.btn-primary .rip, .xq-hot .rip, .nav-glider ~ .rip { background: rgba(255, 255, 255, .6); }
.coin-fx { position: fixed; z-index: 300; width: 16px; height: 16px; margin: -8px 0 0 -8px; pointer-events: none; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3b0 0 25%, #ffc935 26% 70%, #b97f00 71%); border: 2px solid #13213f; animation: coin-fly .75s cubic-bezier(.2, .8, .3, 1) forwards; }

/* ---------- route change: page cards rise in turn ---------- */
.app.enter .page > * { animation: pg-in .6s cubic-bezier(.2, 1.2, .4, 1) backwards; animation-delay: calc(var(--i, 0) * 55ms + 40ms); }
.app.enter .topbar h1 { animation: tb-in .5s cubic-bezier(.2, 1.3, .4, 1) backwards; }

@keyframes pg-in { from { opacity: 0; transform: translateY(26px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes tb-in { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes nv-pop { 0% { transform: scale(.4) rotate(-30deg); } 60% { transform: scale(1.25) rotate(8deg); } 100% { transform: none; } }
@keyframes nv-squash { 0% { transform: scale(1, 1); } 35% { transform: scale(1.03, .9); } 100% { transform: none; } }
@keyframes nv-rip { to { transform: scale(2.6); opacity: 0; } }
@keyframes coin-fly { 0% { transform: translate(0, 0) scale(.4); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1) rotate(var(--rot)); opacity: 0; } }

@media (min-width: 1024px) { .app .sidebar { transition: none; } }
@media (max-width: 1023px) { .side-scrim { animation: fade .3s ease; backdrop-filter: blur(2px); } }
@media (prefers-reduced-motion: reduce) {
  .app .nav a, .app .nav a .ico, .nav-glider.go, .app .topbar .icon-btn, .app .side-balance, .app .sidebar { transition: none; }
  .app.enter .page > *, .app.enter .topbar h1, .app .nav a[aria-current="page"] .ico, .nav-glider.go::after, .rip, .coin-fx { animation: none; }
  .coin-fx, .rip { display: none; }
}

/* ---------- brand: red lantern mark (custom HTML/SVG emoji, Chinese style) and a long product name ---------- */
.brand-mark.lantern:not(.has-logo) { background: none; box-shadow: none; border-radius: 0; width: 30px; height: 38px; }
.brand-mark.lantern svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 3px 0 rgba(19, 33, 63, .25)); transform-origin: 50% 0; transition: transform .4s cubic-bezier(.3, 1.8, .5, 1); }
.brand:hover .brand-mark.lantern svg { animation: lantern-sway 1.2s ease-in-out 1; }
.brand { line-height: 1.05; }
.app .sidebar .brand, .site-nav .brand { font-size: 15px; letter-spacing: .01em; gap: 8px; }
@keyframes lantern-sway { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(10deg); } 60% { transform: rotate(-7deg); } }
@media (prefers-reduced-motion: reduce) { .brand:hover .brand-mark.lantern svg { animation: none; } }
/* The product name is long: let it wrap to two lines instead of pushing the buttons off the bar. */
.brand { white-space: normal; min-width: 0; }
.site-nav .brand { max-width: 200px; }
@media (max-width: 1000px) { .site-nav .brand { font-size: 13px; max-width: 150px; } .site-nav .brand-mark.lantern { width: 24px; height: 31px; flex: none; } }