:root { color-scheme:dark; background:#04182b; color:#eafaff; font-family:var(--font-readable); --mint:#8af4df; --muted:#adcadc; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:30px; }
body { margin:0; overflow-x:clip; background:radial-gradient(ellipse at 90% 35%,#12355670,transparent 45%),#04182b; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
img { display:block; max-width:100%; height:auto; }
button,a { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:2px solid var(--mint); outline-offset:5px; }
::selection { background:#8af4df; color:#04182b; }
.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; }
.skip-link { position:fixed; z-index:100; left:20px; top:10px; padding:14px 20px; background:#eafff9; color:#04273d; transform:translateY(-150%); border-radius:8px; }
.skip-link:focus { transform:translateY(0); }
.container { width:min(1200px,calc(100% - 80px)); margin-inline:auto; }
.overline { display:flex; align-items:center; gap:10px; color:var(--mint); font:500 10px var(--font-brand); text-transform:uppercase; letter-spacing:.19em; }
.overline::before { content:""; width:22px; height:1px; background:currentColor; }
.reef-hero { position:relative; isolation:isolate; min-height:815px; margin-top:-96px; padding-top:96px; overflow:hidden; }
.hero-environment { position:absolute; inset:0; z-index:-3; width:100%; height:100%; object-fit:cover; object-position:70% 35%; opacity:.78; }
.reef-hero::before { content:""; position:absolute; inset:0; z-index:-2; background:linear-gradient(90deg,#041c38f5 0%,#052b4bbb 34%,#06254b10 72%),linear-gradient(0deg,#04182b,transparent 40%,#04182b70); }
.reef-hero::after { content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(ellipse at 76% 44%,#2bf1f520,transparent 40%); }
.hero-inner { position:relative; min-height:616px; display:flex; align-items:center; }
.hero-copy { position:relative; z-index:3; width:51%; padding:30px 0 30px; }
.hero-copy .overline { margin:0 0 25px; }
.reef-title { width:240px; height:auto; margin:-18px 0 -5px -15px; filter:drop-shadow(0 0 22px #2e9dff4d); }
.hero-tagline { margin:15px 0 17px; max-width:510px; font-size:clamp(30px,3.2vw,45px); line-height:1.14; font-weight:600; letter-spacing:-.045em; }
.hero-description { max-width:405px; margin:0 0 26px; color:#c0d8e7; font-size:16px; line-height:1.75; text-wrap:pretty; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.platform-note { display:flex; align-items:center; gap:9px; color:#b1d0e0; font-size:11px; letter-spacing:.02em; margin:20px 0 0; }
.platform-note span { color:#85d7d5; }
.hero-creatures { position:absolute; width:64%; height:95%; right:-7%; top:5%; pointer-events:none; }
.hero-creatures::before { content:""; position:absolute; inset:12% 10%; border:1px solid #94f1ff23; border-radius:50%; box-shadow:0 0 110px #4098e230,inset 0 0 100px #57d7f117; }
.hero-creatures::after { content:""; position:absolute; inset:6% 5%; border:1px solid #94f1ff0d; border-radius:50%; }
.hero-delphis { position:absolute; width:57%; right:0; top:3%; transform:rotate(15deg); filter:drop-shadow(0 14px 30px #031a4170); animation:drift-delphis 8s ease-in-out infinite; }
.hero-dumu { position:absolute; width:47%; left:5%; bottom:0; transform:rotate(-16deg); filter:drop-shadow(0 10px 30px #2ca9cf40); animation:drift-dumu 7s ease-in-out infinite; }
.creature-label { position:absolute; right:1%; bottom:7%; display:flex; align-items:center; gap:13px; color:#bdefff; font-size:10px; letter-spacing:.15em; text-transform:uppercase; transform:rotate(-90deg); transform-origin:100% 100%; }
.creature-label::before { content:""; width:45px; height:1px; background:#bdefff80; }
.hero-bottom { position:relative; z-index:4; display:grid; grid-template-columns:1.25fr 1fr 1fr 1fr; align-items:center; gap:20px; padding:20px 30px; border-radius:18px; margin-top:0; }
.hero-bottom p { font-size:16px; font-weight:500; line-height:1.5; margin:0; }
.hero-bottom p span { display:block; color:#a1c5d8; font-size:12px; font-weight:400; }
.hero-detail { display:flex; align-items:center; gap:13px; padding-left:25px; border-left:1px solid #a7dcf422; }
.hero-detail svg { width:25px; height:25px; color:var(--mint); flex-shrink:0; stroke-width:1.3; }
.hero-detail strong { font-size:12px; font-weight:500; }
.hero-detail span { display:block; font-size:11px; color:#a8c9dc; margin-top:5px; }
section[id] { scroll-margin-top:35px; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:35px; margin-bottom:35px; }
h2 { font-weight:500; font-size:clamp(28px,3.2vw,43px); line-height:1.2; letter-spacing:-.035em; margin:15px 0 0; text-wrap:balance; }
.section-heading > p { max-width:320px; font-size:14px; line-height:1.8; color:var(--muted); margin:0; }
.world-section { padding:100px 0 90px; }
.world-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.world-card { position:relative; min-height:345px; border-radius:18px; overflow:hidden; border:1px solid #b1dfff28; }
.world-card > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s; }
.world-card:hover > img { transform:scale(1.05); }
.world-card::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,#04203df5,#041a3450 62%,transparent); }
.card-number { position:absolute; z-index:1; top:20px; left:20px; padding:7px 10px; border:1px solid #d7faff42; border-radius:7px; color:#dcfbff; font:300 10px var(--font-brand); background:#093b5555; backdrop-filter:blur(8px); }
.world-copy { position:absolute; z-index:1; bottom:25px; left:25px; right:25px; }
.world-copy h3 { margin:0 0 9px; font:500 17px var(--font-brand); }
.world-copy p { font-size:13px; line-height:1.75; color:#bad9ea; margin:0; }
.guardians { position:relative; display:grid; grid-template-columns:1.1fr 1fr; align-items:center; min-height:470px; padding:40px 65px; border-radius:24px; overflow:hidden; background:radial-gradient(ellipse at 25% 45%,#18577e80,transparent 65%),linear-gradient(130deg,#0b2e48,#102743); border:1px solid #9ac5ee30; }
.guardians::before { content:""; position:absolute; inset:0; background:url('/assets/reefrescue/footer.jpg') center/cover; opacity:.14; }
.guardian-art { position:relative; min-height:370px; }
.guardian-art img:first-child { position:absolute; width:58%; top:-25px; right:10%; transform:rotate(18deg); }
.guardian-art img:last-child { position:absolute; width:47%; left:0; bottom:-15px; transform:rotate(-15deg); }
.guardian-copy { position:relative; padding-left:20px; }
.guardian-copy p:not(.overline) { color:var(--muted); font-size:15px; line-height:1.8; margin:24px 0; }
.creature-tags { display:flex; gap:10px; }
.creature-tags span { padding:8px 15px; font-size:11px; border-radius:50px; color:#ccf6ee; border:1px solid #93fbe544; background:#79eacb0a; }
.media-section { padding:100px 0; }
.gallery-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.gallery-item { position:relative; display:block; border-radius:14px; overflow:hidden; background:#0b3556; border:1px solid #b0e2ff26; }
.gallery-item img { aspect-ratio:1285/594; width:100%; object-fit:cover; transition:transform .6s,filter .6s; }
.gallery-item:hover img { transform:scale(1.035); filter:brightness(1.12); }
.gallery-item span { position:absolute; bottom:12px; right:12px; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:#092e4bb3; border:1px solid #d0faff45; color:white; font-size:18px; }
.media-caption { margin:15px 0 0; color:#87aabd; font-size:11px; }
.download-section { position:relative; overflow:hidden; text-align:center; padding:80px 30px; border-radius:24px; border:1px solid #9cdaff33; background:linear-gradient(#062d4b99,#081b3bd9),url('/assets/reefrescue/bg2.jpg') center/cover; }
.download-section .overline { justify-content:center; }
.download-section p:not(.overline) { margin:20px auto 28px; color:#c0d9e8; font-size:15px; max-width:500px; line-height:1.7; }
.store-links { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:14px; }
.store-links a { display:block; border-radius:9px; transition:transform .2s; }
.store-links a:hover { transform:translateY(-4px); }
.store-links img { width:auto; height:48px; }
.download-section .release-note { margin:22px 0 0 !important; color:#b0cbdb !important; font-size:11px !important; max-width:none !important; }
.other-games { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:20px; margin:45px auto 0; color:#99b9cc; font-size:12px; }
.other-games a { color:#d1eaf3; padding:8px 0; border-bottom:1px solid #93cfd94d; }
.site-footer { display:flex; align-items:center; justify-content:space-between; gap:25px; padding:30px 0; margin-top:70px; border-top:1px solid #b0ddff20; font-size:11px; color:#87a9bf; }
.site-footer .site-brand { gap:9px; }
.site-footer .site-brand img { width:25px; height:30px; }
.site-footer .site-brand span { font-size:12px; }
.site-footer a:hover { color:var(--mint); }
.media-dialog { width:min(1100px,calc(100vw - 40px)); max-height:calc(100dvh - 40px); border:1px solid #9bdcff55; border-radius:18px; background:#062239; color:#eaffff; padding:54px 15px 15px; box-shadow:0 30px 100px #0009; }
.media-dialog::backdrop { background:#001120df; backdrop-filter:blur(12px); }
.media-dialog img,.media-dialog video { width:100%; max-height:calc(100dvh - 160px); object-fit:contain; border-radius:8px; }
.media-dialog[open] { display:flex; flex-direction:column; }
.media-dialog:not([open]) { display:none; }
.dialog-close { position:absolute; right:15px; top:9px; width:36px; height:36px; border-radius:50%; background:#ffffff10; border:1px solid #ffffff33; color:white; font-size:24px; cursor:pointer; }
.gallery-controls { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:12px; font-size:12px; }
.gallery-controls button { padding:8px 15px; border-radius:8px; border:1px solid #9bdcff44; color:#dcfbff; background:#ffffff09; cursor:pointer; }
body:has(dialog[open]) { overflow:hidden; }
/* Preview pages share the finished navigation and visual language. */
.preview-main { isolation:isolate; min-height:calc(100svh - 220px); position:relative; display:grid; align-items:center; padding:70px 0; }
.preview-main::before { content:""; position:absolute; inset:-96px 0 -80px; background:linear-gradient(90deg,#04182be6,#04182b44),var(--preview-image) center/cover; opacity:.7; z-index:-1; }
.preview-layout { display:grid; grid-template-columns:1.05fr 1fr; align-items:center; gap:50px; }
.preview-copy h1 { font:500 clamp(35px,5vw,64px)/1.15 var(--font-brand); letter-spacing:-.04em; margin:24px 0; }
.preview-copy > p:not(.overline) { color:#bed8e7; font-size:17px; line-height:1.8; max-width:460px; margin:0 0 28px; }
.preview-art { width:100%; filter:drop-shadow(0 10px 45px #00b3ff40); }
.preview-panel { border-radius:18px; padding:23px 27px; margin-top:30px; max-width:460px; }
.preview-panel strong { color:var(--mint); font-size:12px; }
.preview-panel p { color:#bed8e7; font-size:13px; margin:9px 0 0; line-height:1.7; }
.template-footer { margin-top:30px; }
@keyframes drift-delphis { 50% { transform:translateY(-14px) rotate(18deg); } }
@keyframes drift-dumu { 50% { transform:translateY(12px) rotate(-12deg); } }
@media(min-width:1500px) { .reef-hero { min-height:870px; } .hero-inner { min-height:665px; } .hero-creatures { right:-4%; width:65%; } }
@media(max-width:1000px) {
 .container { width:calc(100% - 48px); }
 .hero-copy { width:55%; } .hero-creatures { width:61%; right:-8%; top:15%; height:75%; }
 .hero-bottom { grid-template-columns:repeat(3,1fr); gap:10px; padding:24px 18px; } .hero-bottom > p { display:none; } .hero-detail { padding-left:16px; } .hero-detail:nth-child(2) { border-left:0; padding-left:0; }
 .world-grid { gap:15px; } .world-card { min-height:330px; } .world-copy { left:20px; right:20px; bottom:20px; } .world-copy h3 { font-size:14px; }
 .guardians { padding:30px; } .guardian-art { min-height:330px; } .guardian-copy { padding-left:0; }
 .preview-layout { gap:20px; }
}
@media(max-width:700px) {
 .container { width:calc(100% - 40px); }
 .reef-hero { margin-top:-80px; padding-top:80px; min-height:0; padding-bottom:5px; }
 .hero-environment { object-position:65% center; }
 .reef-hero::before { background:linear-gradient(0deg,#04182b,transparent 45%),linear-gradient(90deg,#041c38db,#052b4b50); }
 .hero-inner { min-height:0; display:flex; flex-direction:column; align-items:stretch; }
 .hero-copy { width:100%; padding:35px 0 0; }
 .hero-copy .overline { font-size:8px; margin-bottom:16px; }
 .reef-title { width:210px; margin-top:-12px; margin-bottom:-5px; }
 .hero-tagline { max-width:380px; font-size:34px; margin-top:8px; }
 .hero-description { max-width:380px; font-size:14px; margin-bottom:22px; }
 .glass-btn { padding:15px 19px; font-size:13px; }
 .hero-creatures { position:relative; width:min(420px,100%); height:330px; right:auto; top:auto; align-self:center; margin-top:4px; }
 .hero-delphis { width:56%; right:3%; top:0; } .hero-dumu { width:42%; left:4%; bottom:0; }
 .creature-label { font-size:8px; bottom:15%; }
 .hero-bottom { grid-template-columns:1fr; padding:16px 22px; gap:14px; margin-top:5px; }
 .hero-detail,.hero-detail:nth-child(2) { padding-left:0; border-left:0; } .hero-detail > div { display:flex; align-items:center; flex-wrap:wrap; column-gap:10px; } .hero-detail span { margin-top:0; } .hero-detail svg { width:21px; height:21px; }
 .world-section { padding:65px 0; } .section-heading { display:block; margin-bottom:25px; } .section-heading > p { max-width:100%; margin-top:18px; }
 .world-grid { grid-template-columns:1fr; gap:18px; } .world-card { min-height:330px; } .world-copy h3 { font-size:18px; } .world-copy p { max-width:330px; font-size:14px; }
 .guardians { grid-template-columns:1fr; padding:25px; } .guardian-art { min-height:320px; max-width:400px; width:100%; margin:auto; } .guardian-copy { padding-top:15px; }
 .media-section { padding:65px 0; } .gallery-grid { grid-template-columns:1fr; gap:16px; }
 .download-section { padding:50px 20px; } .store-links { gap:12px; } .store-links img { height:42px; }
 .site-footer { flex-wrap:wrap; justify-content:center; text-align:center; padding:25px 0; gap:18px; margin-top:45px; } .site-footer p { margin:0; }
 .other-games { gap:10px 18px; } .other-games span { flex-basis:100%; text-align:center; }
 .preview-main { padding:40px 0; } .preview-layout { grid-template-columns:1fr; gap:25px; } .preview-copy h1 { font-size:38px; } .preview-art { max-width:400px; margin:auto; } .preview-copy > p:not(.overline) { font-size:15px; }
 .preview-layout .preview-art { grid-row:2; } .preview-panel { margin-top:24px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none !important; transition:none !important; } }