/* 1.5.4: the story entrance and navigation stay available from the first intro. */
:root{--asoy-header-height:80px}
.compact-header{--header-brand-size:15.5px;--header-mark-size:32px;--header-brand-gap:8px;--header-title-size:calc(var(--header-brand-size) * 1.52);position:fixed;top:0;left:0;right:auto;width:var(--asoy-vv-width,100%);height:80px;min-height:80px;max-height:80px;box-sizing:border-box;transform-origin:0 0;transform:translate(var(--asoy-vv-x,0px),var(--asoy-vv-y,0px)) scale(var(--asoy-vv-inverse,1));z-index:2147483639;background:#14191ff7;overflow:visible}
html.intro-pending .compact-header{visibility:visible}
.compact-header .nav-wrap{width:min(1380px,calc(100% - 48px));height:100%;min-height:0;box-sizing:border-box;display:grid;grid-template-columns:max-content minmax(96px,230px) minmax(0,1fr) max-content;grid-template-rows:repeat(2,minmax(0,1fr));grid-template-areas:"brand music nav controls" "subtitle quicklinks nav controls";align-items:center;column-gap:12px;row-gap:0;padding-block:4px;position:static}
.compact-header .header-identity{display:contents}
.compact-header .header-identity>.brand{grid-area:brand;display:flex;align-items:center;min-width:0;margin:0;gap:var(--header-brand-gap);white-space:nowrap;align-self:center}
.compact-header .header-identity>.brand .mark{width:var(--header-mark-size);height:var(--header-mark-size);flex:none;font-size:24px}
.compact-header .header-identity>.brand .wordmark{position:relative;padding-bottom:3px;font-size:var(--header-brand-size);font-weight:700;letter-spacing:.035em;line-height:1.35}
.compact-header .header-identity>.brand .wordmark::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:#d6b46880;pointer-events:none}
.compact-header #headerMusicSlot{grid-area:music;min-width:0;width:100%;max-width:230px;align-self:center}
.compact-header .header-subtitle{grid-area:subtitle;position:relative;display:flex;align-items:center;min-width:0;min-height:30px;padding-left:calc(var(--header-mark-size) + var(--header-brand-gap));color:#efc66d;font:italic 600 var(--header-title-size)/1 Georgia,serif;letter-spacing:0;white-space:nowrap;text-decoration:none}
.compact-header .header-subtitle #asoyMini070{position:relative;inset:auto;display:block;flex:none;margin:0;color:inherit;font:inherit;letter-spacing:inherit;white-space:pre;word-spacing:normal;text-shadow:0 1px 3px #4b3000,0 0 12px #ffdc8044}
.compact-header .header-subtitle .asoy-mini-text{display:inline;white-space:pre;word-spacing:normal}
.compact-header .header-quick-links{grid-area:quicklinks;display:flex;align-items:center;justify-content:flex-start;gap:4px;min-width:0;white-space:nowrap}
.compact-header .header-quick-links .btn{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:3px 4px;border:0;border-radius:4px;background:transparent;color:#c0c8cb;font:11px/1.3 Arial,"Noto Sans KR",sans-serif;letter-spacing:0;white-space:nowrap;box-shadow:none}
.compact-header .header-quick-links .btn:hover{background:#ffffff0a;color:#f3d28a;transform:none}
.compact-header .header-subtitle:focus-visible,.compact-header .header-quick-links .btn:focus-visible{outline:2px solid #e3c081;outline-offset:2px}
.compact-header .mobile-menu{display:inline-flex;align-items:center;justify-content:center}
.compact-header .nav-links{display:none;position:absolute;grid-area:auto;inset:100% 0 auto;margin:0;padding:14px max(24px,calc((100% - 1380px)/2));max-height:calc(var(--asoy-vv-height,100dvh) - 92px);overflow:auto;background:#0b1420;border-bottom:1px solid var(--line);box-shadow:0 16px 25px #0003;white-space:normal}
.compact-header .nav-links.open{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:4px 24px;font-size:14px;justify-self:stretch}
.compact-header .nav-links>a{min-height:40px;padding:8px 0}
.compact-header .header-story-link{display:inline-flex;align-items:center;justify-content:center;flex:none;min-height:30px;padding:4px 10px;border:1px solid #c9a96788;border-radius:7px;background:linear-gradient(120deg,#d5b16716,#e8ca8326);color:#f2d799;font:600 12px/1.2 Arial,"Noto Sans KR",sans-serif;letter-spacing:0;text-decoration:none;white-space:nowrap;transition:background .18s,color .18s}
.compact-header .header-story-link:hover{background:#d9bc6830;color:#fff1c6}
.compact-header .header-story-link:focus-visible{outline:2px solid #eed69a;outline-offset:2px}
.compact-header .header-story-short,.compact-header .header-notice-label{display:none}
.compact-header .nav-links .header-notice-label{display:inline;margin-right:4px}
.compact-header .nav-links #introLang072 button{font-family:Arial,"Noto Sans KR",sans-serif!important}
.compact-header .nav-links #introLang072 .language-full{display:inline}
.compact-header .nav-links #introLang072 .language-short{display:none}
.compact-header .nav-controls{grid-area:controls;width:auto;min-width:0;display:flex;flex:none;align-items:center;justify-self:end;gap:6px;margin:0}
.compact-header .nav-controls .icon-btn{position:relative;min-width:28px;min-height:28px;padding:3px 5px;font-size:11px;border-radius:7px}
.compact-header .nav-controls .icon-btn svg{width:14px;height:14px}
.compact-header .nav-controls .icon-btn::after{content:"";position:absolute;inset:-2px;pointer-events:auto}
.compact-header .nav-controls #introLang072{position:static!important;inset:auto!important;padding:1px;gap:2px!important;transform:none!important}
.compact-header .nav-controls #introLang072 button{position:relative;min-height:22px!important;padding:3px 6px!important;font-family:Arial,"Noto Sans KR",sans-serif!important;font-size:10px!important}
.compact-header .nav-controls #introLang072 button::after{content:"";position:absolute;inset:-5px 0;pointer-events:auto}

/* The same controls remain in this slot while the entrance is playing. */
.compact-header #headerMusicSlot .music-home{width:100%;margin:0;padding:0}
.compact-header #headerMusicSlot .music-player{position:static;width:100%;border-top:0;font-size:11px}
.compact-header #headerMusicSlot .music-controls{min-height:32px;gap:5px;flex-wrap:nowrap;padding:0}
.compact-header #headerMusicSlot .music-toggle{width:32px;min-width:32px;min-height:32px;padding:0;justify-content:center}
.compact-header #headerMusicSlot #musicAction{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.compact-header #headerMusicSlot #musicIcon{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;font-size:15px}
.compact-header #headerMusicSlot .music-toggle-icon{width:26px;height:26px;flex:none}
.compact-header #headerMusicSlot .music-marquee{min-width:16px;flex:1;font-size:11px}
.compact-header #headerMusicSlot .music-status{font-size:11px;padding-bottom:2px}
.compact-header #headerMusicSlot .music-panel{position:absolute;top:100%;bottom:auto;left:auto;right:12px;width:min(350px,calc(100% - 24px));max-height:min(420px,calc(var(--asoy-vv-height,100dvh) - 92px));border-radius:0 0 10px 10px;overflow:auto}

.compact-header .header-intro-controls{grid-area:subtitle;display:flex;align-items:center;gap:7px;padding-left:calc(var(--header-mark-size) + var(--header-brand-gap));min-width:0}
.compact-header .header-intro-controls[hidden]{display:none!important}
.compact-header .header-intro-controls button{min-height:28px;padding:4px 7px;border:1px solid #d6b46855;border-radius:5px;background:#1a2028;color:#e9d7b0;font:11px/1.2 Arial,"Noto Sans KR",sans-serif;white-space:nowrap;cursor:pointer}
.compact-header .header-intro-controls button:disabled{opacity:.4;cursor:default}
.compact-header .header-intro-controls button:focus-visible{outline:2px solid #f2d48f;outline-offset:2px}
.compact-header.is-intro .header-subtitle{visibility:hidden;pointer-events:none}


@media(max-width:760px){
 .compact-header{--header-brand-size:13px;--header-mark-size:28px;--header-brand-gap:7px}
 .compact-header .nav-wrap{width:calc(100% - 24px);grid-template-columns:max-content minmax(0,1fr);grid-template-areas:"brand music" "subtitle controls";column-gap:8px}
 .compact-header #headerMusicSlot{justify-self:end}
 .compact-header .nav-links{padding:12px 20px}
 .compact-header .nav-links.open{grid-template-columns:repeat(2,minmax(0,1fr));gap:3px 18px;font-size:13px}
 .compact-header .header-story-link{min-height:28px;padding:4px 8px;font-size:11px}
 .compact-header .header-identity>.brand .wordmark{letter-spacing:.025em}
 .compact-header .header-identity>.brand .mark{font-size:22px}
 .compact-header .nav-controls .icon-btn{min-width:26px;min-height:26px;padding:2px 4px;font-size:10px}
 .compact-header .nav-controls .icon-btn svg{width:13px;height:13px}
 .compact-header .nav-controls .icon-btn::after{inset:-3px -2px}
 .compact-header .nav-controls #introLang072 button{min-width:24px!important;min-height:20px!important;padding:3px 4px!important;font-size:9.5px!important}
 .compact-header .nav-controls #introLang072 button::after{inset:-6px 0}
 .compact-header .nav-controls #introLang072 .language-full{display:none}
 .compact-header .nav-controls #introLang072 .language-short{display:inline}
 .compact-header .header-identity>.header-quick-links{display:none}
 .compact-header .nav-links>.header-quick-links{grid-area:auto;grid-column:1 / -1;order:3;display:flex;flex-wrap:wrap;gap:8px;border-top:1px solid #d6b46830;margin-top:5px;padding-top:10px}
 .compact-header .nav-links>.header-quick-links .btn{min-height:34px;font-size:12px;padding:5px 8px}
}
@media(max-width:520px){
 .compact-header{--header-brand-size:12.5px;--header-mark-size:26px;--header-brand-gap:6px}
 .compact-header .nav-wrap{width:calc(100% - 16px);grid-template-columns:repeat(12,minmax(0,1fr));grid-template-areas:none;column-gap:0}
 .compact-header .header-identity>.brand{grid-area:1 / 1 / 2 / 9;min-height:30px;padding-right:6px}
 .compact-header .header-identity>.brand .wordmark{letter-spacing:.01em}
 .compact-header #headerMusicSlot{grid-area:1 / 9 / 2 / 13;max-width:none}
 .compact-header .header-subtitle,.compact-header .header-intro-controls{grid-area:2 / 1 / 3 / 8;min-height:32px}
 .compact-header .nav-controls{grid-area:2 / 8 / 3 / 13;min-height:32px;justify-content:flex-end}
 .compact-header .header-story-link{min-height:28px;padding:4px 5px;font-size:10px}
 .compact-header .nav-links.open{grid-template-columns:minmax(0,1fr)}
 .compact-header .nav-links>#introLang072{order:1;position:static!important;inset:auto!important;transform:none!important;justify-self:start;align-self:center;margin:8px 0 0!important}
 .compact-header .nav-links>#noticeBtn{order:2;justify-self:start;min-height:36px;margin-top:4px}
 .compact-header .header-intro-controls{gap:5px;padding-left:0}
 .compact-header .header-intro-controls button{padding-inline:6px;font-size:10px}
 .compact-header #headerMusicSlot .music-controls{min-height:30px;gap:4px}
 .compact-header #headerMusicSlot .music-toggle{width:30px;min-width:30px;min-height:30px}
 .compact-header #headerMusicSlot .music-panel{right:8px;width:min(350px,calc(100% - 16px))}
}
@media(max-width:360px){
 .compact-header{--header-brand-size:12px}
 .compact-header .header-identity>.brand .wordmark{letter-spacing:0}
 .compact-header .nav-controls .icon-btn{padding-inline:4px}
}
/* A highly zoomed desktop can leave only 240 CSS pixels: put language in Menu. */
@media(max-width:300px){
 .compact-header{--header-brand-size:11px;--header-mark-size:24px;--header-brand-gap:5px}
 .compact-header .header-identity>.brand{grid-column:1 / 11;padding-right:0}
 .compact-header #headerMusicSlot{grid-column:11 / 13}
 .compact-header #headerMusicSlot .music-marquee{display:none}
 .compact-header .header-subtitle,.compact-header .header-intro-controls{grid-column:1 / 9}
 .compact-header .nav-controls{grid-column:9 / 13;gap:6px}
 .compact-header .header-intro-controls{gap:4px}
 .compact-header .header-intro-controls button{padding-inline:5px;font-size:10px}
}
.compact-header.header-ultra .header-story-full{display:none}
.compact-header.header-ultra .header-story-short{display:inline}
.compact-header.header-ultra .header-story-link{padding-inline:2px;font-size:9px}
body.intro-playing .compact-header #introLang072{position:static!important;inset:auto!important;transform:none!important}
body.intro-playing .compact-header #headerMusicSlot .music-compact-title{animation-play-state:running!important}
body.intro-playing .compact-header #headerMusicSlot .music-player:hover .music-compact-title,
body.intro-playing .compact-header #headerMusicSlot .music-player:focus-within .music-compact-title,
html.motion-off body.intro-playing .compact-header #headerMusicSlot .music-compact-title{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){body.intro-playing .compact-header #headerMusicSlot .music-compact-title{animation:none!important}}

/* The title is measured against the wordmark by header-viewport.js. */
@media(max-width:520px){.compact-header .nav-controls{gap:3px}}
@media(max-width:360px){
 .compact-header .nav-controls{gap:2px}
 .compact-header .nav-controls .icon-btn{min-width:24px;padding-inline:3px}
 .compact-header .nav-controls #introLang072 button{min-width:21px!important;padding-inline:3px!important}
}
@media(max-width:300px){.compact-header{--header-brand-size:10px}}