@font-face{font-family:RSChat;src:url('assets/runescape-bold-12.ttf') format('truetype');font-style:normal;font-weight:400;font-display:block}
.welcome-stage h1.chat-wave,.crt-on .welcome-stage h1.chat-wave{
  font-family:RSChat,var(--pixel);font-size:clamp(40px,4.5vw,72px);font-weight:400;
  line-height:1.3;letter-spacing:0;color:#ffff00;text-shadow:2px 2px 0 #000;
  max-width:100%;padding:.12em 0;overflow:visible;
}
.wave-word{display:inline-block;white-space:nowrap}
.wave-letter{display:inline-block;animation:chat-wave 1.8s ease-in-out infinite;animation-delay:calc(var(--i) * -143ms)}
@keyframes chat-wave{0%,100%{transform:translateY(-.12em)}50%{transform:translateY(.12em)}}
@media(max-width:650px){.welcome-stage h1.chat-wave{font-size:40px}}
@media(max-width:360px){.welcome-stage h1.chat-wave{font-size:36px}}
@media(prefers-reduced-motion:reduce){.wave-letter{animation:none;transform:none}}

/* Under the logo on desktop; under the destination links on mobile. */
.welcome-header .halloween-countdown{
 position:relative;grid-row:2;justify-self:center;
 width:max-content;max-width:min(420px,76vw);margin:0;padding:4px 0;
 font:400 24px/1.35 RSChat,var(--pixel);
 color:#ffff00;letter-spacing:0;text-align:center;white-space:normal;text-shadow:2px 2px 0 #000;
 pointer-events:none;
}
.welcome-header .halloween-countdown[hidden]{display:none}
@media(max-width:650px){
 .welcome-page .welcome-header nav{position:relative}
 .welcome-header .halloween-countdown{grid-row:3;font-size:clamp(20px,5.6vw,24px);margin-top:0}
 /* Holiday messages sit below the links without changing the header height,
    so the Enter button stays at the same position with or without a message. */
 html[data-welcome-theme="christmas"] .welcome-header .halloween-countdown{
  position:absolute;grid-area:auto;top:100%;left:50%;transform:translateX(-50%);margin-top:15px;
 }
}