/* ===== Header ===== */
header {
    position: relative;
    z-index: 20;
    background: var(--header-bg);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--header-border);
    text-align: center;
    padding: 1.2rem 1rem 1.2rem;
}

.header-wave {
    position: absolute;
    bottom: -1px; left: 0;
    width: 100%; height: 30px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 30'%3E%3Cpath d='M0,15 Q150,0 300,15 T600,15 T900,15 T1200,15 V30 H0Z' fill='var(--bg-body-1)' opacity='0.5'/%3E%3C/svg%3E") repeat-x;
    background-size: 600px 30px;
}

.header-sakura {
    position: absolute;
    top: 8px;
    font-size: 1.8rem;
    color: var(--text-pink);
    animation: float 4s ease-in-out infinite;
    filter: drop-shadow(0 0 8px rgba(244,114,182,0.5));
}
.header-sakura.left  { left: 20px; }
.header-sakura.right { right: 20px; animation-delay: 2s; }

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-8px) rotate(10deg); }
}

.title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 0 6px;
}

header h1 {
    margin: 0;
    font-size: 2.4rem;
    font-family: 'Mochiy Pop One', 'Kosugi Maru', 'ZCOOL KuaiLe', cursive;
    animation: title-glow 4s ease-in-out infinite;
    text-shadow: none;
}

.lang-globe {
    position: relative;
}
/* Pill rather than a circle: it carries the globe plus the active
   language's flag chip (#lang-globe-current), like the osu! site. */
.lang-globe-btn {
    height: 36px;
    padding: 0 10px;
    gap: 6px;
    border-radius: 18px;
    background: var(--lang-pill-bg);
    border: 1px solid var(--lang-pill-border);
    color: var(--lang-pill-text);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(var(--glass-blur));
    transition: border-color 0.25s, background 0.25s, box-shadow 0.25s, transform 0.2s;
}
.lang-globe-btn:hover,
.lang-globe.open .lang-globe-btn {
    background: rgba(var(--accent-pink-rgb),0.14);
    border-color: var(--accent-pink);
    box-shadow: 0 0 10px rgba(var(--accent-pink-rgb),0.30);
}
.lang-globe-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 160px;
    padding: 8px;
    border-radius: 14px;
    background: var(--bg-widget-panel);
    border: 1px solid var(--border-card);
    box-shadow: 0 8px 30px rgba(0,0,0,0.35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.25s, transform 0.25s, visibility 0.25s;
    z-index: 210;
}
.lang-globe.open .lang-globe-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

@keyframes title-glow {
    0%, 100% { filter: drop-shadow(0 0 14px rgba(244,114,182,0.45)); }
    50% { filter: drop-shadow(0 0 26px rgba(244,114,182,0.8)) drop-shadow(0 0 46px rgba(192,132,252,0.35)); }
}

/* Per-character bounce-in (js/header-anim.js splits the title into
   .char spans on load and on every language switch). */
header h1 .char {
    display: inline-block;
    background: linear-gradient(90deg, #f472b6, #e879f9, #a78bfa, #60a5fa, #f472b6);
    background-size: 500% 100%;
    background-position: calc(var(--char-index) * 8%) center;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 0;
    animation: title-char-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: calc(var(--char-index) * 0.045s);
}

@keyframes title-char-in {
    0%   { opacity: 0; transform: translateY(-14px) scale(0.5) rotate(-8deg); }
    60%  { opacity: 1; transform: translateY(3px) scale(1.05) rotate(2deg); }
    100% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
    header h1 .char {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

.lang-pill {
    background: var(--lang-pill-bg);
    border: 1px solid var(--lang-pill-border);
    color: var(--lang-pill-text);
    padding: 6px 12px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.85rem;
    text-align: left;
    backdrop-filter: blur(var(--glass-blur));
    transition: border-color 0.25s, background 0.25s, color 0.25s, box-shadow 0.25s, transform 0.2s;
    white-space: nowrap;
}
.lang-pill:hover {
    background: rgba(var(--accent-pink-rgb),0.14);
    border-color: var(--accent-pink);
    color: var(--text-pink);
    box-shadow: 0 0 10px rgba(244,114,182,0.30);
    transform: translateY(-1px);
}
.lang-pill.active {
    background: linear-gradient(135deg, rgba(var(--accent-pink-rgb),0.4), rgba(var(--accent-purple-rgb),0.4));
    border-color: rgba(244,114,182,0.6);
    color: var(--text);
    box-shadow: 0 0 14px rgba(244,114,182,0.40);
}
/* Kosugi Maru (the site's main font) draws Cyrillic as full-width glyphs,
   so "Русский" came out twice as wide as the other names. Noto Sans TC is
   already loaded and has normal proportional Cyrillic. */
.lang-pill[data-lang="ru"] {
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
}

/* Inline-SVG flags, copied from the osu! site (css/base.css) so both
   sites' language menus look the same. Emoji flags don't render on
   Windows (they show as letter pairs like "CN"), so these are drawn as
   ~3:2 SVG chips. Mirrored in the header #lang-globe-current button by
   applyLang(). */
.flag {
    display: inline-block;
    width: 21px;
    height: 14px;
    flex: none;
    border-radius: 2px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.15) inset;
    vertical-align: -2px;
}
.lang-pill .flag { margin-right: 7px; }
#lang-globe-current .flag { vertical-align: -3px; }
.flag--tw { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Cpath fill='%23FE0000' d='M0 0h60v40H0z'/%3E%3Cpath fill='%23000095' d='M0 0h30v20H0z'/%3E%3Ccircle cx='15' cy='10' r='6.2' fill='%23fff'/%3E%3Cpath fill='%23000095' d='M15 3l1.6 5.4 4-4-2.4 5 5.4-1.6-5 2.6 5 2.6-5.4-1.6 2.4 5-4-4L15 17l-1.6-5.4-4 4 2.4-5L6.4 12l5-2.6-5-2.6 5.4 1.6-2.4-5 4 4z'/%3E%3Ccircle cx='15' cy='10' r='3.4' fill='%23fff'/%3E%3C/svg%3E"); }
.flag--cn { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Cpath fill='%23DE2910' d='M0 0h60v40H0z'/%3E%3Cg fill='%23FFDE00'%3E%3Cpath d='M10 4l1.76 5.42h5.7l-4.61 3.35 1.76 5.42L10 15.26l-4.61 3.35 1.76-5.42L2.54 9.84h5.7z'/%3E%3Cpath d='M21 4l.7 2.05 2.16.02-1.74 1.28.65 2.06L21 8.16l-1.77 1.27.65-2.06-1.74-1.28 2.16-.02z' transform='rotate(24 21 7)'/%3E%3Cpath d='M25 9l.7 2.05 2.16.02-1.74 1.28.65 2.06L25 13.16l-1.77 1.27.65-2.06-1.74-1.28 2.16-.02z' transform='rotate(46 25 12)'/%3E%3Cpath d='M25 16l.7 2.05 2.16.02-1.74 1.28.65 2.06L25 20.16l-1.77 1.27.65-2.06-1.74-1.28 2.16-.02z' transform='rotate(70 25 19)'/%3E%3Cpath d='M21 21l.7 2.05 2.16.02-1.74 1.28.65 2.06L21 25.16l-1.77 1.27.65-2.06-1.74-1.28 2.16-.02z' transform='rotate(94 21 24)'/%3E%3C/g%3E%3C/svg%3E"); }
.flag--gb { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Cpath fill='%23012169' d='M0 0h60v40H0z'/%3E%3Cpath stroke='%23fff' stroke-width='9' d='M0 0l60 40M60 0L0 40'/%3E%3Cpath stroke='%23C8102E' stroke-width='4' d='M0 0l60 40M60 0L0 40'/%3E%3Cpath stroke='%23fff' stroke-width='14' d='M30 0v40M0 20h60'/%3E%3Cpath stroke='%23C8102E' stroke-width='8' d='M30 0v40M0 20h60'/%3E%3C/svg%3E"); }
.flag--jp { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Cpath fill='%23fff' d='M0 0h60v40H0z'/%3E%3Ccircle cx='30' cy='20' r='12' fill='%23BC002D'/%3E%3C/svg%3E"); }
.flag--kr { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Cpath fill='%23fff' d='M0 0h60v40H0z'/%3E%3CclipPath id='k'%3E%3Ccircle cx='30' cy='20' r='9'/%3E%3C/clipPath%3E%3Ccircle cx='30' cy='20' r='9' fill='%23CD2E3A'/%3E%3Cg clip-path='url(%23k)'%3E%3Cpath fill='%230047A0' d='M21 20a4.5 4.5 0 0 1 9 0 4.5 4.5 0 0 0 9 0v9H21z'/%3E%3C/g%3E%3Cg stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M12 9l4-3M13 11l4-3M14 13l4-3'/%3E%3Cpath d='M42 31l4-3M43 33l4-3M44 35l4-3'/%3E%3Cpath d='M42 9l4 3M43 7l4 3M44 5l4 3'/%3E%3Cpath d='M12 31l4 3M13 33l4 3M14 35l4 3'/%3E%3C/g%3E%3C/svg%3E"); }
.flag--ru { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Cpath fill='%23fff' d='M0 0h3v2H0z'/%3E%3Cpath fill='%230039A6' d='M0 .667h3v1.333H0z'/%3E%3Cpath fill='%23D52B1E' d='M0 1.333h3v.667H0z'/%3E%3C/svg%3E"); }
.flag--fr { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Cpath fill='%23fff' d='M0 0h3v2H0z'/%3E%3Cpath fill='%23002654' d='M0 0h1v2H0z'/%3E%3Cpath fill='%23CE1126' d='M2 0h1v2H2z'/%3E%3C/svg%3E"); }
.flag--es { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Cpath fill='%23AA151B' d='M0 0h3v2H0z'/%3E%3Cpath fill='%23F1BF00' d='M0 .5h3v1H0z'/%3E%3C/svg%3E"); }
.flag--de { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Cpath d='M0 0h3v2H0z'/%3E%3Cpath fill='%23D00' d='M0 .667h3v1.333H0z'/%3E%3Cpath fill='%23FFCE00' d='M0 1.333h3v.667H0z'/%3E%3C/svg%3E"); }

.subtitle-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.subtitle {
    color: var(--text-pink);
    opacity: 0.7;
    font-size: 0.88rem;
    letter-spacing: 3px;
    margin-bottom: 0;
}

.subtitle-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}