/* Compact Playfair navigation with solid, two-tone golden symbols. */
body[data-realm=playinterlude] .header{height:92px;padding-inline:3.6%;gap:clamp(12px,1.1vw,22px)}
body[data-realm=playinterlude] .header .brand{width:125px}
body[data-realm=playinterlude] .pi-header-logo{width:122px;height:80px}
body[data-realm=playinterlude] .main-nav{font-family:'Playfair Display',Georgia,serif;font-size:clamp(16px,1.18vw,21px);font-weight:700;letter-spacing:0;gap:clamp(10px,1vw,20px);color:#f5f0ed}
body[data-realm=playinterlude] .main-nav a{display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;text-shadow:0 2px 12px #020712b3;transition:color .18s ease}
body[data-realm=playinterlude] .main-nav a:hover,body[data-realm=playinterlude] .main-nav a[aria-current=page]{color:#f5dba6}
body[data-realm=playinterlude] .main-nav a:focus-visible,body[data-realm=playinterlude] .account-link:focus-visible{outline:1px solid #f5dba6;outline-offset:7px}
body[data-realm=playinterlude] .pi-nav-icon{flex:none;width:16px;height:16px;color:#d2b989;opacity:.9}
body[data-realm=playinterlude] .header-actions{gap:15px}
body[data-realm=playinterlude] .account-link{display:inline-flex;align-items:center;gap:7px;font-family:'Playfair Display',Georgia,serif;font-size:clamp(16px,1.18vw,21px);font-weight:700;white-space:nowrap;border:0;padding:10px 0;background:transparent;color:#f5f0ed}
body[data-realm=playinterlude] .account-link:hover{background:transparent;color:#f5dba6}
@media(min-width:1700px){body[data-realm=playinterlude] .main-nav{gap:20px}body[data-realm=playinterlude] .pi-nav-icon{width:18px;height:18px}body[data-realm=playinterlude] .header .brand{width:145px}body[data-realm=playinterlude] .pi-header-logo{width:136px}}
@media(min-width:1101px) and (max-width:1350px){body[data-realm=playinterlude] .header{gap:12px;padding-inline:3%}body[data-realm=playinterlude] .main-nav{font-size:15px;gap:10px}body[data-realm=playinterlude] .main-nav a{gap:5px}body[data-realm=playinterlude] .pi-nav-icon{width:16px;height:16px}body[data-realm=playinterlude] .header-actions{gap:12px}body[data-realm=playinterlude] .discord-button span{display:none}}
@media(max-width:1100px){body[data-realm=playinterlude] .header{height:80px;padding-inline:5%}body[data-realm=playinterlude] .pi-header-logo{height:72px;width:112px}body[data-realm=playinterlude] .main-nav{top:80px;gap:0;padding:16px 5%;background:#091522f7;border-bottom:1px solid #d6bf8b55}body[data-realm=playinterlude] .main-nav a{font-size:21px;justify-content:flex-start;gap:13px;min-height:50px}body[data-realm=playinterlude] .main-nav .pi-nav-icon{width:20px;height:20px}body[data-realm=playinterlude] .header-actions{margin-left:auto}body[data-realm=playinterlude] .account-link{font-size:18px}}
@media(max-width:480px){body[data-realm=playinterlude] .header{padding-inline:5%;gap:8px}body[data-realm=playinterlude] .header .brand{width:110px}body[data-realm=playinterlude] .pi-header-logo{width:108px}body[data-realm=playinterlude] .header-actions{gap:14px}body[data-realm=playinterlude] .account-link{font-size:16px;gap:6px}body[data-realm=playinterlude] .discord-button span{display:none}}
@media(max-width:1100px){body[data-realm=playinterlude] .main-nav.open{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 18px}body[data-realm=playinterlude] .main-nav a{width:100%;font-size:19px;padding:8px 0}body[data-realm=playinterlude] .main-nav a[aria-current=page]:after{right:35%}}
/* Event pennant sits on the upper-left edge of the Christmas feature. */
body[data-realm=playinterlude] .pi-festive-invite{position:relative;padding-top:55px}
.pi-event-flag{position:absolute;top:0;left:0;display:inline-flex;align-items:center;justify-content:center;min-width:92px;height:28px;padding:0 22px 0 15px;background:linear-gradient(100deg,#7b2338,#9a3449);clip-path:polygon(0 0,100% 0,calc(100% - 10px) 50%,100% 100%,0 100%);color:#ffe1a3;font:600 10px/1 var(--sans);letter-spacing:2.3px;box-shadow:inset 0 1px #edc67b99,inset 0 -1px #edc67b66}
body[data-realm=playinterlude] .pi-hero-logo{animation:pi-crest-breathe 6s ease-in-out infinite;transform-origin:50% 55%;will-change:transform,filter}
@keyframes pi-crest-breathe{0%,100%{transform:scale(1);filter:drop-shadow(0 3px 12px #02071066) drop-shadow(0 0 3px #dcb67a14)}50%{transform:scale(1.018);filter:drop-shadow(0 3px 15px #02071066) drop-shadow(0 0 14px #e6c17b52)}}
body[data-effects-paused=true] .pi-hero-logo{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){body[data-realm=playinterlude] .pi-hero-logo{animation:none;will-change:auto}}
@media(max-width:700px){body[data-realm=playinterlude] .pi-festive-invite{padding-top:47px}.pi-event-flag{min-width:80px;height:25px;font-size:9px}}
/* A soft frost-white haze for the Christmas navigation. */
body[data-realm=playinterlude] .header{isolation:isolate}
body[data-realm=playinterlude] .header:before{content:'';position:absolute;z-index:-1;pointer-events:none;left:2%;right:2%;top:50%;height:54px;transform:translateY(-50%) rotate(-.2deg);filter:blur(13px);background:radial-gradient(ellipse at 14% 48%,#f7f4ee36 0,transparent 25%),radial-gradient(ellipse at 38% 55%,#e5eef540 0,transparent 32%),radial-gradient(ellipse at 64% 43%,#fff9ed38 0,transparent 31%),radial-gradient(ellipse at 89% 50%,#e9f2fa36 0,transparent 28%),linear-gradient(90deg,transparent 1%,#e7eef51c 14%,#f5f3ed26 50%,#e7eef51c 88%,transparent 99%);border-radius:45% 38% 48% 35%;opacity:.95}
@media(max-width:1100px){body[data-realm=playinterlude] .header:before{height:40px;filter:blur(10px)}}

/* Keep Discord legible beside Account, with the same typographic rhythm. */
body[data-realm=playinterlude] .header .discord-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;color:#f2f4f7;font:700 clamp(16px,1.18vw,21px)/1.2 'Playfair Display',Georgia,serif;white-space:nowrap;text-shadow:0 2px 12px #020712b3}
body[data-realm=playinterlude] .header .discord-button svg{width:21px;height:21px;flex:none;color:#e1e9f2}
body[data-realm=playinterlude] .header .discord-button span{display:inline}
body[data-realm=playinterlude] .header .discord-button:hover{color:#f5dba6}
body[data-realm=playinterlude] .header .discord-button:hover svg{color:#f5dba6}
@media(min-width:1101px) and (max-width:1350px){body[data-realm=playinterlude] .header :is(.discord-button,.account-link){font-size:15px}body[data-realm=playinterlude] .header .discord-button{gap:6px}body[data-realm=playinterlude] .header .discord-button svg{width:19px;height:19px}}
@media(max-width:700px){body[data-realm=playinterlude] .header .discord-button span{display:none}body[data-realm=playinterlude] .header .discord-button{width:34px;min-width:34px}}