/* Reserve the expanded flow height while the fixed header genuinely becomes shorter. */
:root { --wcys-admin-offset:0px; --wcys-header-expanded-inner:102px; --wcys-header-compact-inner:66px; --wcys-header-height:103px; --wcys-header-bottom:103px; }
html { scroll-padding-top:calc(var(--wcys-admin-offset) + var(--wcys-header-height) + 14px); }
.js .site-header-shell { height:calc(var(--wcys-header-expanded-inner) + 1px); }
.js .site-header-shell.is-game-header-shell { height:calc(var(--wcys-header-compact-inner) + 1px); }
.site-header { position:relative; top:auto; z-index:60; isolation:isolate; transition:background-color 200ms ease,box-shadow 200ms ease,border-color 200ms ease; }
.js .site-header { position:fixed; top:var(--wcys-admin-offset); left:0; right:var(--wcys-nav-scrollbar-gap,0px); }
.site-header.is-scrolled { --wcys-header-inner-height:var(--wcys-header-compact-inner); background:#fffef9; border-bottom-color:#ccd5c4; box-shadow:0 6px 24px #273b3218; }
.site-header .header-inner { position:relative; flex-wrap:nowrap; gap:18px; min-height:var(--wcys-header-inner-height,var(--wcys-header-expanded-inner)); }
.site-header.is-scrolled .header-inner { padding-block:7px; }
.site-header .header-navigation { gap:15px; }
.site-header .site-nav,.site-header .site-nav ul { gap:17px; }
.site-header .brand { max-width:400px; gap:12px; }
.site-header .brand .logo-mark { width:58px; height:58px; }
.site-header .brand .logo-mark,.site-header .brand-copy { transform-origin:left center; transition:transform 200ms ease; }
.site-header.is-scrolled .brand .logo-mark { width:44px; height:44px; }
.site-header.is-scrolled .brand .brand-name { font-size:22px; }
.site-header.is-scrolled .brand-subtitle { display:none; }
.site-header .brand .brand-name { font-family:var(--wcys-font); font-size:25px; font-weight:700; letter-spacing:-.02em; }
.site-header .brand-subtitle { font-size:11.5px; font-weight:500; color:#607456; }
.site-header .site-nav > a,.site-header .site-nav li > a { font-size:.82rem; }
.site-header .wcys-family-nav { min-height:44px; max-width:148px; font-size:.78rem; line-height:1.25; text-decoration:none; }
.site-header [data-family-nav-label] { overflow:hidden; text-overflow:ellipsis; }
.site-header .wcys-family-nav svg { flex:none; }
.site-header .wcys-language-trigger { gap:6px; max-width:130px; }
.site-header .wcys-language-trigger bdi { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.site-header .music-trigger { max-width:140px; }
.site-header .music-trigger-label { max-width:82px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mobile-nav-heading,.nav-backdrop { display:none; }
.nav-games { flex:none; }
.nav-games > summary { display:flex; align-items:center; justify-content:center; gap:9px; min-height:44px; padding:9px 16px; border:1px solid transparent; border-radius:100px; background:#eaf0e1; color:#355740; font-size:.84rem; font-weight:750; cursor:pointer; list-style:none; }
.nav-games > summary::-webkit-details-marker { display:none; }
.nav-games > summary svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8; transition:transform 200ms ease; }
.nav-games[open] > summary { background:#dce7d0; border-color:#c7d6ba; }
.nav-games[open] > summary svg { transform:rotate(180deg); }
.nav-games > summary:focus-visible { outline:3px solid #8a510e; outline-offset:5px; }
.nav-games-panel { position:absolute; top:calc(100% - 5px); right:0; width:min(650px,calc(100vw - 64px)); padding:24px; border:1px solid #dce3d2; border-radius:25px; background:var(--wcys-surface); box-shadow:0 20px 50px #273b3224; }
@media (min-width:1101px) and (hover:hover) and (pointer:fine) {
  .nav-games > summary:hover { background:#e1ead5; border-color:#cad9bd; }
  .nav-games-panel::before { content:""; position:absolute; inset-inline:0; bottom:100%; height:24px; }
  .site-header.is-scrolled .nav-games-panel::before { height:6px; }
}
.nav-games-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:15px; }
.nav-games-heading p { font-size:.79rem; font-weight:650; color:#6a785e; }
.site-header .nav-games-heading a { display:inline-flex; align-items:center; gap:9px; min-height:44px; padding:0; color:#365a43; font-size:.78rem; font-weight:700; line-height:1.4; text-decoration:none; white-space:normal; }
.nav-category-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.site-header .nav-category { display:flex; flex-direction:column; gap:9px; min-width:0; min-height:164px; padding:21px; border:1px solid #e6d293; border-radius:19px; background:var(--wcys-yellow,#ffe49b); color:#524321; line-height:1.45; text-decoration:none; white-space:normal; transition:box-shadow 180ms ease,border-color 180ms ease; }
.site-header .nav-category-difference { background:var(--wcys-blue,#dceff8); border-color:#c9dee9; color:#345564; }
.site-header .nav-category:hover { border-color:currentColor; box-shadow:inset 0 0 0 1px currentColor; }
.site-header .nav-category[aria-current=page] { border-color:currentColor; box-shadow:inset 0 0 0 2px currentColor; }
.nav-category strong { font-family:var(--wcys-heading-font); font-size:1.05rem; line-height:1.25; }
.nav-category-description { font-size:.76rem; font-weight:400; }
.nav-category-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:7px; font-size:.76rem; font-weight:750; }
.site-header a[aria-current=page] { text-decoration-thickness:2px; }
@media (min-width:1101px) and (max-width:1280px) {
  .site-header .header-inner { gap:12px; }
  .site-header .brand { max-width:400px; gap:10px; }
  .site-header .brand .logo-mark { width:56px; height:56px; }
  .site-header .header-navigation,.site-header .site-nav,.site-header .site-nav ul { gap:11px; }
  .site-header .music-trigger { width:44px; height:44px; padding:0; flex:none; }
  .site-header .music-trigger-icon { width:44px; height:44px; }
  .site-header .music-trigger-label,.site-header .music-equalizer { display:none; }
  .site-header .wcys-family-nav { max-width:120px; }
}
@media (max-width:1100px) {
  :root { --wcys-header-expanded-inner:76px; --wcys-header-compact-inner:64px; }
  .site-header .header-inner { padding-block:10px; gap:9px; }
  .site-header.is-scrolled .header-inner { padding-block:6px; }
  .site-header .header-inner > .brand { order:0; flex:1 1 0; max-width:100%; min-width:0; }
  .site-header .brand .logo-mark { width:48px; height:48px; }
  .site-header .nav-toggle { display:grid; order:2; flex:0 0 44px; margin:0; }
  .site-header .header-inner .music-trigger { order:1; flex:0 0 44px; width:44px; min-width:44px; max-width:44px; height:44px; margin:0; padding:0; border:0; }
  .site-header .music-trigger-icon { width:44px; height:44px; }
  .site-header .music-trigger-label,.site-header .music-equalizer { display:none; }
  .site-header .header-navigation { flex:0 0 100%; width:100%; margin:0; flex-direction:column; align-items:stretch; gap:16px; }
  .site-header .header-inner:has(.header-navigation:not(.is-open)) { flex-wrap:wrap; }
  .js .site-header .header-navigation { display:none; }
  .js .site-header .header-navigation.is-open { display:flex; position:fixed; z-index:3; top:var(--wcys-header-bottom); bottom:0; right:0; width:min(470px,100%); max-height:calc(100dvh - var(--wcys-header-bottom)); padding:18px 24px max(24px,env(safe-area-inset-bottom)); overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; background:var(--wcys-bg); border-inline-start:1px solid var(--wcys-line); box-shadow:-12px 18px 36px #273b3220; }
  .site-header .mobile-nav-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; }
  .mobile-nav-heading strong { font-size:1rem; }
  .mobile-nav-close { display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid var(--wcys-line); border-radius:50%; background:#f1f0e7; color:var(--wcys-ink); font-size:1.6rem; }
  .site-header .nav-backdrop:not([hidden]) { display:block; position:fixed; z-index:2; inset:var(--wcys-header-bottom) 0 0; background:#273b3240; }
  .site-header .site-nav,.site-header .site-nav ul { align-items:stretch; flex-direction:column; gap:4px; }
  .nav-games > summary { justify-content:space-between; padding-inline:16px; border-radius:14px; font-size:1rem; }
  .nav-games-panel { position:static; width:100%; padding:16px 0 10px; border:0; border-radius:0; background:transparent; box-shadow:none; }
  .nav-games-heading { gap:8px; margin-bottom:9px; }
  .nav-games-heading p { font-size:.74rem; }
  .site-header .nav-games-heading a { min-height:44px; font-size:.73rem; }
  .nav-category-grid { gap:10px; }
  .site-header .nav-category { min-height:180px; padding:15px; }
  .nav-category strong { font-size:.97rem; }
  .nav-category-description { font-size:.73rem; }
  .site-header .site-nav > a,.site-header .site-nav li > a { min-height:46px; padding:6px 12px; font-size:.97rem; white-space:normal; overflow-wrap:anywhere; }
  .site-header .wcys-family-nav { max-width:none; min-height:48px; padding:10px 12px; border-top:1px solid var(--wcys-line); font-size:.94rem; }
  .site-header .header-navigation > .language-switcher { align-self:stretch; padding-inline:4px; }
  .site-header .wcys-language-trigger { max-width:100%; min-height:48px; }
  .site-header .wcys-language-trigger bdi { overflow:visible; white-space:normal; }
  body.menu-open { overflow:hidden; }
}
@media (max-width:600px) {
  :root { --wcys-header-expanded-inner:66px; --wcys-header-compact-inner:58px; }
  .site-header .header-inner { padding-block:10px; gap:7px; }
  .site-header.is-scrolled .header-inner { padding-block:7px; }
  .site-header .brand { gap:7px; }
  .site-header .brand .logo-mark { width:44px; height:44px; }
  .site-header .brand .brand-name { font-size:19.5px; max-width:none; }
  .site-header .brand-subtitle { display:none; }
  .site-header.is-scrolled .brand { min-height:44px; }
  .site-header.is-scrolled .brand .logo-mark { width:44px; height:44px; }
  .site-header.is-scrolled .brand .brand-name { font-size:19.5px; }
  .js .site-header .header-navigation.is-open { padding-inline:18px; border-inline-start:0; }
}
@media (max-width:360px) {
  .nav-category-grid { grid-template-columns:minmax(0,1fr); }
  .site-header .nav-category { min-height:0; }
}
@media (prefers-reduced-motion:reduce) { .site-header,.site-header .brand .logo-mark,.site-header .brand-copy,.nav-games > summary svg,.site-header .nav-category { transition:none; } }
@media print { .site-header-shell { display:none!important; } }
/* Header music is one direct, icon-only toggle for the existing shared audio element. */
.site-header .header-inner .music-trigger[data-toggle-site-music]{display:inline-flex;align-items:center;justify-content:center;gap:0;flex:0 0 44px;width:44px;height:44px;min-width:44px;max-width:44px;min-height:44px;padding:0;border:1px solid #d7be79;border-radius:50%;background:var(--wcys-yellow,#ffe49b);color:#36533f}
.site-header .music-trigger[data-toggle-site-music] .music-trigger-icon{width:42px;height:42px;background:transparent;color:inherit}
.site-header [data-toggle-site-music] svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.site-header [data-toggle-site-music] .site-music-stop{display:none;fill:currentColor;stroke:none}
.site-header .header-inner [data-toggle-site-music].is-playing{border-color:#b6a05f;background:var(--wcys-yellow,#ffe49b);color:#294b36;box-shadow:inset 0 0 0 1px #b6a05f55}
.site-header [data-toggle-site-music].is-playing .site-music-note{display:none}.site-header [data-toggle-site-music].is-playing .site-music-stop{display:block}
@media(hover:hover){.site-header .header-inner .music-trigger[data-toggle-site-music]:hover{border-color:#b6a05f;background:var(--wcys-yellow,#ffe49b);color:#294b36}}
/* The native profile link keeps its destination; the desktop card explains the family space. */
.nav-profile{flex:none}.site-header .nav-profile>.wcys-family-nav{padding:8px 11px;border-radius:100px}.nav-profile.is-open>.wcys-family-nav{background:#e9efdf;color:#355740}
.nav-profile-panel{position:absolute;z-index:3;top:calc(100% - 5px);right:0;width:min(375px,calc(100vw - 64px));padding:24px;border:1px solid #dce3d2;border-radius:24px;background:var(--wcys-surface);box-shadow:0 20px 50px #273b3224}
.nav-profile-panel h2{margin:0 0 18px;font-size:1.12rem;line-height:1.3;letter-spacing:-.02em}.nav-profile-panel ul{display:grid;gap:12px;margin:0 0 20px;padding:0;list-style:none}.nav-profile-panel li{position:relative;padding-left:19px;color:#607157;font-size:.84rem;line-height:1.5}.nav-profile-panel li::before{content:'';position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:#b5c99b}
.site-header .nav-profile-cta{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:46px;padding:10px 15px;border:1px solid #d2dfc2;border-radius:14px;background:#e9f0df;color:#355740;font-size:.84rem;font-weight:700;line-height:1.4;text-decoration:none}.site-header .nav-profile-cta:hover{border-color:#b8cba6;background:#e0ebd2}.nav-profile-cta>span{font-size:1.2rem}
@media(min-width:1101px){.nav-profile-panel::before{content:'';position:absolute;inset-inline:0;bottom:100%;height:20px}.site-header.is-scrolled .nav-profile-panel::before{height:3px}}
.site-music-control{position:relative;flex:0 0 44px;width:44px;height:44px}
.site-music-hint{position:absolute;z-index:4;top:calc(100% + 14px);right:0;display:grid;gap:7px;width:300px;max-width:calc(100vw - 36px);padding:17px 19px;border:1px solid #dce3d2;border-radius:17px;background:var(--wcys-surface);box-shadow:0 10px 30px #273b321a;color:#5f7155;line-height:1.5;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-3px);transition:opacity .16s,visibility .16s,transform .16s}
.site-music-hint::before{content:'';position:absolute;right:16px;top:-6px;width:10px;height:10px;border-top:1px solid #dce3d2;border-left:1px solid #dce3d2;background:var(--wcys-surface);transform:rotate(45deg)}.site-music-hint strong{color:#35533c;font-size:.82rem;font-weight:700}.site-music-hint>span{font-size:.76rem}
.site-music-control:has(>[data-toggle-site-music]:focus-visible) .site-music-hint{opacity:1;visibility:visible;transform:none}
@media(hover:hover) and (pointer:fine){.site-music-control:hover .site-music-hint{opacity:1;visibility:visible;transform:none}}
.site-music-control.is-hint-dismissed .site-music-hint{opacity:0;visibility:hidden;transform:translateY(-3px)}
@media(max-width:1100px){.site-header .nav-profile{width:100%}.site-header .nav-profile>.wcys-family-nav{width:100%;max-width:none;border-radius:0}.nav-profile-panel{display:none!important}.site-header .site-music-control{order:1;margin:0;flex:0 0 44px}}
@media(max-width:600px){.site-music-hint{position:fixed;top:calc(var(--wcys-header-bottom) + 10px);left:18px;right:18px;width:auto;max-width:none}.site-music-hint::before{right:67px}}
@media(prefers-reduced-motion:reduce){.site-music-hint{transition:none}}