/* One desktop header for the home and library. The visual renewal can happen here. */
.service-header {
  position:relative;z-index:10;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:22px;
  height:70px;margin:25px 2.6vw 0;padding:0 23px;border:1px solid #fff9;border-radius:27px;
  background:#fffdf9fa;box-shadow:0 3px 12px #6a451d0a;
  font-family:system-ui,-apple-system,'Apple SD Gothic Neo',sans-serif;font-size:14px;line-height:1.25;color:#392d23;
}
.service-header--overlay {position:absolute;top:25px;left:2.6vw;right:2.6vw;margin:0}
.service-header a {box-sizing:border-box;color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.service-header a:focus-visible {outline:3px solid #50814b;outline-offset:4px;border-radius:12px}
.service-header__brand {display:flex;align-items:center;gap:12px;flex-shrink:0}
.service-header__wordmark strong {display:block;font-size:25px;font-weight:800;letter-spacing:-1.1px;line-height:1.15;color:#493325}
.service-header__wordmark em {font-style:normal;color:#29713b}
.service-header__wordmark small {display:block;font-size:8px;font-weight:500;letter-spacing:3.4px;margin-top:6px;color:#7c6f61;line-height:1.25}
.service-header__face {position:relative;display:block;flex-shrink:0;width:42px;height:42px;border-radius:48% 50% 42% 44%;background:radial-gradient(circle at 30% 24%,#fff6bc,#f4cf69 70%);box-shadow:inset -2px -4px 5px #ceaa4033,0 3px 5px #c3a56730}
.service-header__face::before,.service-header__face::after {content:'';position:absolute;width:3px;height:5px;top:17px;background:#6b5738;border-radius:50%}
.service-header__face::before {left:12px}.service-header__face::after {right:12px}
.service-header__face i {position:absolute;width:8px;height:5px;top:23px;left:17px;border-bottom:1.5px solid #6b5738;border-radius:0 0 50% 50%}
.service-header__nav {display:flex;align-items:center;justify-content:center;gap:9px;padding:0;margin:0;border:0;background:none}
.service-header__link {display:flex;align-items:center;gap:8px;min-height:46px;padding:11px 12px;border:1px solid transparent;border-radius:15px;font-size:14px;font-weight:650;white-space:nowrap;transition:background-color .16s ease,border-color .16s ease,color .16s ease}
.service-header__link svg {display:block;width:20px;height:20px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.service-header__link[data-service-route='library'] svg {color:#3d7944}
.service-header__link[data-service-route='community'] svg {color:#e36440}
.service-header__link[data-service-route='ranking'] svg {color:#bc7e18}
.service-header__link[data-service-route='games'] svg {color:#8d73ba}
.service-header__link[data-service-route='report'] svg {color:#3c91a2}
.service-header__link:hover {background:#f4f3e9}
.service-header__link[aria-current='page'] {border-color:#e0ebd7;background:#edf4e5;color:#2f6d36}
.service-header__account {display:flex;align-items:center;gap:15px;flex-shrink:0;font-size:12px;font-weight:600;white-space:nowrap}
.service-header__profile {display:flex;align-items:center;gap:9px;min-height:44px;border-radius:12px}
.service-header__profile:hover {color:#2f6d36}
.service-header__avatar {display:grid;place-items:center;box-sizing:border-box;width:32px;height:32px;border:1px solid #d7b56f;border-radius:50%;background:linear-gradient(120deg,#fff2b1,#e6bc64);font-size:21px;font-style:italic;color:#81713a}
.service-header .service-header__logout {display:flex;align-items:center;justify-content:center;min-height:40px;padding:10px 15px;border:1px solid #e4d6c3;border-radius:25px;color:#897e70;font-weight:500;transition:background-color .16s ease}
.service-header__logout:hover {background:#f4f0e6}
@media(prefers-reduced-motion:reduce) {.service-header__link,.service-header__logout {transition:none}}