/* Keep the fixed header centered on the same layout width whether or not the
   current page is tall enough to need a vertical scrollbar. */
html {
    scrollbar-gutter: stable;
}

#pk-nav {
    position: fixed;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9998;
    display: flex;
    gap: 1px;
    max-width: calc(100vw - 32px);
    overflow-x: auto;
    background: #111;
    border: 1px solid #222;
    padding: 3px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.7rem;
    line-height: 1.5;
    scrollbar-width: none;
    transition: transform 0.25s ease, opacity 0.25s ease, border-color 0.2s;
}
#pk-nav:hover { border-color: #e87b35; }
body.pk-scrolled-down #pk-nav { transform: translate(-50%, -150%); opacity: 0; pointer-events: none; }
#pk-nav::-webkit-scrollbar { display: none; }

#pk-nav a {
    display: block;
    flex: none;
    color: #999;
    text-decoration: none;
    white-space: nowrap;
    padding: 6px 10px;
    letter-spacing: 0.4px;
    transition: color 0.2s, background 0.2s;
}
#pk-nav a:hover { color: #e87b35; background: #161616; }
#pk-nav a.pk-nav-active { color: #0a0a0a; background: #cd412b; }
#pk-nav a.pk-nav-active:hover { color: #0a0a0a; background: #cd412b; }

#pk-nav a.pk-nav-discord:hover { color: #5865f2; }

.pk-nav-icon {
    width: 16px;
    height: 16px;
    vertical-align: -3px;
    fill: currentColor;
}

.pk-nav-badge {
    display: inline-block;
    margin-left: 5px;
    padding: 1px 4px;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #0a0a0a;
    -webkit-text-fill-color: #0a0a0a;
    background: #e87b35;
    vertical-align: 1px;
}
@media (prefers-reduced-motion: reduce) {
    #pk-nav { transition: none; }
    .pk-falling-bird { display: none; }
}

#pk-brand {
    position: fixed;
    top: 14px;
    left: 16px;
    z-index: 9998;
    background: #111;
    border: 1px solid #222;
    padding: 6px 10px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.7rem;
    line-height: 1.5;
    color: #cd412b;
    font-weight: 700;
    letter-spacing: 0.3px;
    white-space: nowrap;
    user-select: none;
    cursor: pointer;
    transition: border-color 0.2s;
}
#pk-brand:hover, #pk-brand:focus-visible { border-color: #e87b35; }
#pk-brand b { color: #e87b35; font-weight: 700; }

.pk-falling-bird {
    position: fixed;
    z-index: 10002;
    pointer-events: none;
    animation-name: pk-bird-fall;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}
@keyframes pk-bird-fall {
    from { transform: translate(0, 0) rotate(0deg); opacity: 1; }
    to   { transform: translate(var(--pk-bird-drift), 100vh) rotate(var(--pk-bird-rot)); opacity: 0.9; }
}

.pk-chirp-bird { cursor: pointer; }
.pk-chirp-hop { animation: pk-chirp-hop 0.4s ease-out; }
@keyframes pk-chirp-hop {
    0%   { transform: translateY(0) scale(1); }
    30%  { transform: translateY(-6px) scale(1.05, 0.95); }
    55%  { transform: translateY(0) scale(0.95, 1.05); }
    100% { transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .pk-chirp-hop { animation: none; }
}

#pk-status {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding-left: 8px;
    border-left: 1px solid #262626;
    color: #999;
    font-weight: 400;
    letter-spacing: 0;
}
.pk-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 6px;
    background: #4dff88;
    box-shadow: 0 0 5px #4dff88;
    animation: pk-dot-pulse 2s ease-in-out infinite;
}
.pk-dot.loading { background: #e87b35; box-shadow: 0 0 5px #e87b35; }
.pk-dot.error { background: #ff4d4d; box-shadow: 0 0 5px #ff4d4d; animation: none; }
@keyframes pk-dot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

@media (max-width: 640px) {
    /* Brand and auth share the top row, pinned to opposite edges. The nav
       pill drops to its own row below instead of competing with both for
       the same horizontal space, which is what caused the overlap. */
    #pk-nav { top: 46px; max-width: calc(100vw - 16px); font-size: 0.62rem; padding: 3px; }
    #pk-nav a { padding: 5px 8px; }
    #pk-brand { top: 8px; left: 8px; padding: 5px 8px; font-size: 0.62rem; }
}

#pk-season-layer {
    display: none;
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 9997;
}
body.pk-theme-snow #pk-season-layer,
body.pk-theme-easter #pk-season-layer { display: block; }

.pk-snowflake,
.pk-egg {
    position: absolute;
    top: -14px;
    animation-name: pk-season-fall, pk-season-sway;
    animation-timing-function: linear, ease-in-out;
    animation-iteration-count: infinite, infinite;
}
.pk-snowflake {
    background: #fff;
    border-radius: 50%;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5));
}
.pk-egg {
    border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
    box-shadow: inset -3px -3px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.25);
}
@keyframes pk-season-fall {
    from { transform: translateY(-14px); }
    to   { transform: translateY(110vh); }
}
@keyframes pk-season-sway {
    0%, 100% { margin-left: 0; }
    50%      { margin-left: 22px; }
}
@media (prefers-reduced-motion: reduce) {
    #pk-season-layer { display: none !important; }
}