@font-face{font-family:ASR;src:url('assets/game-ui-smooth.ttf') format('truetype');font-weight:100 1000;font-display:swap}*{box-sizing:border-box}html{min-height:100%;scroll-behavior:smooth}body{margin:0;min-height:100vh;background:#092748;color:white;font:16px/1.5 Arial,sans-serif}.menu-background{position:fixed;inset:0;z-index:-1;background:linear-gradient(to bottom,#043a9b20 0%,#052d6870 40%,#031322 80%),url('assets/backgrounds/menu-checkers.webp') center top/cover no-repeat,url('assets/home-menu/sky.png') center/cover no-repeat}.menu-background:after{content:"";position:absolute;inset:32% 0 0;background:linear-gradient(to bottom,transparent,#001423 70%),url('assets/backgrounds/seaside.webp') center 12%/auto 210px no-repeat;opacity:.8}a{color:inherit}.skip{position:absolute;top:-100px;left:15px;background:#ffe775;color:#042555;padding:12px;z-index:50}.skip:focus{top:15px}header{text-align:center;padding:30px 20px 15px}.game-logo{width:min(390px,70vw);height:auto;filter:drop-shadow(0 6px 4px #001124)}h1{font:18px/1.25 ASR,Arial,sans-serif;margin:10px 0 0;letter-spacing:1px;text-shadow:2px 3px #00112a}main{max-width:1160px;margin:auto;padding:0 42px}.sonic-says{position:relative;max-width:850px;margin:15px auto 38px;display:flex;align-items:center;gap:22px;padding:20px 28px 35px;overflow:hidden;border:3px solid #eafaff;border-radius:16px;background:#0962db url('assets/menu-card.png') center/cover;box-shadow:0 6px 0 #0007}.sonic-portrait{flex-shrink:0;width:80px;height:80px;image-rendering:auto}.sonic-says h2{font:25px/1.25 ASR,Arial,sans-serif;color:#ffe775;text-shadow:2px 3px #072048;margin:0 0 8px}.sonic-says p{font-weight:bold;font-size:17px;line-height:1.45;text-shadow:1px 2px #08234e;margin:0;max-width:670px}.welcome-bar{position:absolute;inset:auto 0 0;height:17px;background:linear-gradient(90deg,#a30000,#ec2531);border-top:3px solid white}.section-title{margin:0 0 20px;font:28px/1.2 ASR,Arial,sans-serif;color:#ffe775;text-shadow:2px 3px #01172c;padding:0 2px 8px;background:url('assets/menu-green-trail.png') left bottom/100% 14px no-repeat;border-bottom:2px solid #ffe775}.mode-tiles{display:grid;grid-template-columns:1fr 1.18fr 1fr;gap:30px;align-items:center;padding:12px 0 35px}.menu-tile{display:block;position:relative;min-width:0;text-decoration:none;border-radius:17px;isolation:isolate;transition:transform .16s,filter .16s;filter:drop-shadow(0 6px 4px #0008);-webkit-box-reflect:below 8px linear-gradient(transparent 65%,#ffffff1a)}.tile-art{display:block;width:100%;height:auto;aspect-ratio:384/217;object-fit:fill}.tile-label{position:absolute;left:3.2%;right:3.2%;bottom:5.4%;font:clamp(13px,1.7vw,22px)/1.05 ASR,Arial,sans-serif;color:#fff;text-shadow:2px 2px #460808;white-space:nowrap;z-index:2}.menu-tile:is(:hover,:focus-visible){transform:scale(1.06);filter:drop-shadow(0 0 5px #ffe775) drop-shadow(0 4px 4px #001124);outline:3px solid #ffe775;outline-offset:5px}.menu-tile:is(:hover,:focus-visible) .tile-label{color:#ffe775}.record-clock{position:absolute;height:74%;width:auto;left:50%;top:2%;transform:translateX(-50%);filter:drop-shadow(5px 6px 4px #0007)}.menu-description{min-height:45px;margin:0 0 26px;color:#e5f4ff;font-size:15px;text-shadow:1px 2px #001328}.community-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:25px;padding:6px 0 32px}.community-tiles .tile-label{font-size:clamp(12px,1.35vw,17px)}.quick-links{display:flex;gap:15px;flex-wrap:wrap;justify-content:center;margin:15px 0}.quick-links a{font:13px/1.3 ASR,Arial,sans-serif;padding:11px 17px;text-decoration:none;border:1px solid #a1dbff;border-radius:8px;background:#0957a4 url('assets/menu-card.png') center/cover;min-height:44px}.quick-links a:is(:hover,:focus-visible){color:#ffe775;outline:3px solid #ffe775;outline-offset:3px}.menu-help{display:flex;justify-content:flex-end;gap:25px;margin:28px 0 20px;color:#d0e6f6;font-size:12px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}footer{padding:15px 20px 28px;text-align:center;color:#b4ccdf;font-size:11px}footer p{margin:5px}@media(max-width:700px){header{padding:24px 15px 10px}h1{font-size:14px}main{padding:0 22px}.sonic-says{padding:16px 18px 29px;gap:14px;margin-bottom:30px}.sonic-portrait{width:56px;height:56px}.sonic-says h2{font-size:20px}.sonic-says p{font-size:14px}.section-title{font-size:24px}.mode-tiles{grid-template-columns:1fr;max-width:340px;margin:auto;gap:25px;padding-bottom:24px}.featured-tile{grid-row:1}.menu-tile{-webkit-box-reflect:unset}.tile-label{font-size:21px}.community-tiles{grid-template-columns:repeat(2,1fr);gap:24px 18px}.community-tiles .tile-label{font-size:clamp(10px,2.9vw,19px)}.menu-description{text-align:center;font-size:14px}.menu-help{justify-content:center;flex-wrap:wrap;gap:8px;text-align:center}.menu-background:after{background-size:auto 130px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.menu-tile{transition:none}.menu-tile:is(:hover,:focus-visible){transform:none}}
/* Original in-game dialog artwork supplied by the site owner. */
.sonic-says{display:block;min-height:300px;padding:36px 42px;border:0;border-radius:12px;background:transparent url('assets/home-menu/welcome-blue.png') center/100% 100% no-repeat;overflow:hidden}
.sonic-says>div:not(.welcome-bar){position:relative;width:100%}
.sonic-says h2{font-size:32px;line-height:1.2;letter-spacing:1px;text-shadow:2px 3px #081129;margin-bottom:22px}
.sonic-says p{font-size:22px;line-height:1.5;text-shadow:2px 2px #071227;font-weight:bold;max-width:650px}
.welcome-bar{display:none}
@media(max-width:700px){.sonic-says{min-height:290px;padding:28px 28px}.sonic-says h2{font-size:23px;letter-spacing:0;margin-bottom:18px}.sonic-says p{font-size:16px;line-height:1.5}}

/* Game-style mode carousel: hover stays still; selection moves the chosen tile to the centre. */
.mode-tiles.carousel-ready{display:block;position:relative;height:310px;perspective:1000px;margin:auto;max-width:1000px}
.carousel-ready .menu-tile{position:absolute;width:29%;top:10px;left:35.5%;transition:transform .32s ease,filter .18s ease;transform-origin:center;outline-offset:4px}
.carousel-ready .mode-centre{transform:translateX(0) scale(1.02);z-index:3;filter:drop-shadow(0 0 4px #ffe775) drop-shadow(0 6px 5px #0008)}
.carousel-ready .mode-left{transform:translateX(-112%) scale(.72) rotateY(12deg);z-index:1}
.carousel-ready .mode-right{transform:translateX(112%) scale(.72) rotateY(-12deg);z-index:1}
.carousel-ready .menu-tile:is(:hover,:focus-visible){filter:drop-shadow(0 0 6px #ffe775);outline:2px solid #ffe775}
.mode-controls{position:absolute;inset:auto 0 0;z-index:5;display:flex;align-items:center;justify-content:center;gap:18px;margin:0}.mode-controls button,.open-mode{border:2px solid #c2edff;background:#074791;color:#fff;border-radius:7px;min-height:44px;padding:10px 18px;font:14px/1.3 ASR,Arial,sans-serif;text-decoration:none;cursor:pointer}.mode-controls :is(button,a):focus-visible{outline:3px solid #ffe775;outline-offset:4px}.mode-controls :is(button,a):hover{color:#ffe775}
.menu-background{animation:menu-sky-drift 28s ease-in-out infinite alternate}@keyframes menu-sky-drift{from{background-position:center top,45% top,center}to{background-position:center top,55% top,53% center}}
.menu-loading[hidden]{display:none}.menu-loading{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;justify-content:center;padding:6vw;background:linear-gradient(0deg,#001425ed,transparent 70%),url('assets/backgrounds/seaside.webp') center/cover;animation:menu-loading-in .28s ease-out}.loading-tip{max-width:850px;width:100%;margin:auto;padding:48px;background:url('assets/home-menu/welcome-blue.png') center/100% 100%;color:#fff}.loading-tip h2{font:28px/1.2 ASR,Arial,sans-serif;color:#ffe775;text-shadow:2px 3px #001728}.loading-tip p{font:bold 22px/1.5 Arial,sans-serif;text-shadow:1px 2px #001728}.loading-footer{display:flex;align-items:center;justify-content:space-between;border-bottom:3px solid #ffe775;padding:16px 0;color:#ffe775;font:25px/1.3 ASR,Arial,sans-serif}.loading-dots{position:relative;width:64px;height:64px;animation:loading-spin 1.2s linear infinite}.loading-dots i{position:absolute;width:11px;height:11px;left:26px;top:26px;border:2px solid white;border-radius:50%;background:#ffc72c;transform:rotate(calc(var(--dot)*45deg)) translateY(-24px);opacity:calc(.3 + var(--dot)*.1)}@keyframes loading-spin{to{transform:rotate(360deg)}}@keyframes menu-loading-in{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:scale(1)}}
@media(max-width:700px){.mode-tiles.carousel-ready{height:200px;max-width:none}.carousel-ready .menu-tile{width:39%;left:30.5%;top:8px}.carousel-ready .mode-centre{transform:scale(1)}.carousel-ready .mode-left{transform:translateX(-93%) scale(.6) rotateY(12deg)}.carousel-ready .mode-right{transform:translateX(93%) scale(.6) rotateY(-12deg)}.carousel-ready .tile-label{font-size:clamp(12px,3vw,20px)}.mode-controls{gap:8px}.mode-controls button,.open-mode{padding:10px;font-size:11px}.loading-tip{padding:28px}.loading-tip h2{font-size:22px}.loading-tip p{font-size:16px}.loading-footer{font-size:16px}.loading-dots{transform:scale(.8)}}
@media(prefers-reduced-motion:reduce){.menu-background,.menu-loading,.loading-dots{animation:none}.carousel-ready .menu-tile{transition:none}}

.secret-title-logo{display:inline-block;padding:0;border:0;background:transparent;cursor:pointer;line-height:0}.secret-title-logo:focus-visible{outline:3px solid #ffe775;outline-offset:6px;border-radius:6px}

/* Leave the checker overlay and seaside scenery still; drift only the sky. */
@keyframes menu-sky-drift{from{background-position:center top,center top,47% center}to{background-position:center top,center top,53% center}}

.menu-background.motion-enabled{animation:menu-sky-drift 56s ease-in-out infinite alternate!important}
.menu-background.motion-paused{animation-play-state:paused!important}
.home-flag-checkers{position:absolute;inset:0;width:100%;height:100%;opacity:.52;pointer-events:none;mask-image:linear-gradient(#0008,transparent 78%)}
.home-flag-checkers canvas{display:block;width:100%;height:100%}
.menu-background.home-flag-ready{background-image:linear-gradient(to bottom,#043a9b20 0%,#052d6870 40%,#031322 80%),none,url('assets/home-menu/sky.png')}
.game-settings-dialog .display-background-controls{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.game-settings-dialog .display-background-controls+small{display:block;margin:0 6px 12px}

/* Blend the fixed scenery strip into the sky without exposing its cropped edge. */
.menu-background:after{inset:32% 0 auto;height:210px;background:url('assets/backgrounds/seaside.webp') center/auto 100% no-repeat;mask-image:linear-gradient(to bottom,transparent,#000 15%,#000 60%,transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 15%,#000 60%,transparent)}
@media(max-width:700px){.menu-background:after{height:130px;background-size:auto 100%}}

.mode-wip{position:absolute;top:3px;left:4px;right:4px;z-index:3;padding:3px 5px;border:1px solid #b9e3ff;border-radius:5px;background:#031e3be8;color:#ffe775;text-align:center;font:bold clamp(8px,.75vw,10px)/1.15 Arial,sans-serif;letter-spacing:.3px;text-shadow:1px 1px #001124}.mode-controls .open-mode[aria-disabled=true]{opacity:.72;cursor:default;text-align:center;font-size:11px}.mode-controls .open-mode[aria-disabled=true]:hover{color:#fff}

.carousel-ready .mode-hidden{opacity:0;visibility:hidden;pointer-events:none;transform:scale(.4);z-index:0}