@font-face{font-family:Highline Tide;src:url(HighlineTide.woff2) format('woff2');font-display:swap}
@font-face{font-family:Barlow;src:url(BarlowMedium.woff2) format('woff2');font-display:swap;font-weight:100 900}
:root{color-scheme:dark;--cream:#fff0d7;--sea:#07363b;--red:#e24b35}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--sea);color:var(--cream);font:16px Barlow,system-ui,sans-serif;overscroll-behavior:none}
#game{position:fixed;inset:0;width:100%;height:100%;height:100dvh;overflow:hidden}
#game:fullscreen{width:100%;height:100%;margin:0}
#unity-canvas{position:absolute;inset:0;width:100%;height:100%}
/* Keep engine startup and its HUD behind the established opaque poster. */
#game:not(.entered) #unity-canvas{opacity:0;pointer-events:none}
/* Render edge to edge. Only controls use the notch and Home indicator insets. */
:root{--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px)}
#highline-safe-area{position:absolute;inset:0;visibility:hidden;pointer-events:none;padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left)}
canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}
#loading{position:absolute;inset:0;background:#07363b;isolation:isolate}
.keyart,.ocean-motion,.shade{position:absolute;inset:0;pointer-events:none}
.keyart{width:100%;height:100%;object-fit:contain}
#hero-motion{position:absolute;inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;opacity:0;transition:none}
.motion-ready #hero-motion{opacity:1}
.shade{background:linear-gradient(0deg,#062d33 0%,#062d33ed 9%,#062d33b3 24%,#062d3300 54%)}
.launch{position:absolute;left:max(4%,var(--safe-left));right:max(4%,var(--safe-right));bottom:max(6%,calc(var(--safe-bottom) + 12px));display:grid;grid-template-columns:1fr clamp(220px,32%,620px);align-items:center;gap:clamp(16px,1.5vw,40px)}
h2{font:clamp(28px,3.5vw,52px)/1.12 Highline Tide,Georgia,serif;margin:0;font-weight:400;letter-spacing:-.025em}
.launch h2{font:500 clamp(22px,2.8vw,64px)/1.2 Barlow,system-ui,sans-serif;letter-spacing:.045em}
.ready{text-align:right;min-width:0}#status{margin:0 0 clamp(12px,.7vw,20px);font-size:clamp(12px,1.2vw,28px);color:#d3e7de;line-height:1.35}
progress{width:100%;height:clamp(4px,.3vw,8px);display:block;appearance:none;border:0;background:#65968b;margin:16px 0}progress::-webkit-progress-bar{background:#65968b}progress::-webkit-progress-value{background:var(--cream)}
button{font:clamp(20px,1.3vw,42px) Highline Tide,Georgia,serif;background:var(--cream);color:#07363b;border:0;border-radius:clamp(5px,.3vw,9px);min-height:clamp(52px,4.2vw,108px);width:100%;padding:.75em 1.3em;cursor:pointer;box-shadow:0 clamp(3px,.2vw,5px) 0 var(--red);transition:background .18s,transform .18s}
button:hover{background:#fff9e9;transform:translateY(-1px)}button:focus-visible{outline:3px solid var(--red);outline-offset:5px}button:active{transform:translateY(2px)}
.entering .launch{opacity:0;transform:translateY(5px);transition:opacity .14s,transform .2s}.entering{pointer-events:none}
#entry-swell{position:absolute;inset:0;z-index:4;background:#07363b;pointer-events:none;visibility:hidden}
#entry-swell.sweeping{visibility:visible;pointer-events:auto;animation:entry-dissolve .24s ease-in-out both}
@keyframes entry-dissolve{0%,100%{opacity:0}50%{opacity:1}}
/* Start-shell type and the start control scale with the viewport width from
   phones (clamp minimums match the previous fixed sizes) up to 4K television
   distance; the layout, colours and motion are unchanged. */
/* The shell settles in with the artwork rather than snapping into place, and the
   start action carries the same bright-rail highlight as the wordmark. Nothing
   here moves a layout box after it has landed, so touch targets stay put. */
@keyframes launch-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes launch-fade{from{opacity:0}to{opacity:1}}
/* The start action never travels vertically: it appears when Unity finishes
   loading, and a short viewport has no room to give a 44px target back. */
@keyframes enter-arrive{from{opacity:0;transform:scale(.972)}to{opacity:1;transform:none}}
@keyframes enter-sheen{0%{transform:translateX(-130%)}24%{transform:translateX(130%)}100%{transform:translateX(130%)}}
@keyframes tide{to{background-position:200% 0}}
@keyframes mark-breathe{50%{opacity:.62}}
.launch h2{animation:launch-rise .66s cubic-bezier(.2,.75,.3,1) .16s both}
.ready{animation:launch-rise .66s cubic-bezier(.2,.75,.3,1) .28s both}
#enter{position:relative;overflow:hidden;animation:enter-arrive .5s cubic-bezier(.2,.8,.3,1)}
#enter::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,#fff0 42%,rgba(255,255,255,.66) 50%,#fff0 58%);transform:translateX(-130%);animation:enter-sheen 6.4s ease-in-out 1.4s infinite}
progress::-webkit-progress-value{background:linear-gradient(90deg,var(--cream),#fff,var(--cream));background-size:200% 100%;animation:tide 2.2s linear infinite}
.rotate-mark{animation:mark-breathe 4.2s ease-in-out infinite}
[hidden],#loading[hidden],#enter[hidden]{display:none!important}
#rotate{display:none;position:absolute;inset:0;place-content:center;gap:20px;text-align:center;background:#07363bf5;padding:32px;z-index:3}
#rotate h2{font-size:36px}
.rotate-mark{font:42px Highline Tide,Georgia,serif;color:#fff0d7}
.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}
@media(max-height:400px){.launch{gap:16px;grid-template-columns:1fr 34%}h2{font-size:28px}button{font-size:17px;min-height:46px;padding:12px 16px}#status{margin-bottom:8px}
.launch h2,.ready{animation-name:launch-fade}}
@media(prefers-reduced-motion:reduce){#hero-motion{opacity:0}.motion-ready .keyart{visibility:visible}button,.entering .launch{transition:none}#entry-swell{display:none}
.launch h2,.ready,#enter,#enter::after,progress::-webkit-progress-value,.rotate-mark{animation:none}#enter::after{display:none}}
/* Portrait menus stay usable; gameplay rotation is synchronized with Unity. */

/* Fade only after the destination frame is ready. The complete poster
   covers engine startup, shader work and any fullscreen resize. */
#loading.entering{opacity:0;transition:opacity .18s ease-out}
@media(prefers-reduced-motion:reduce){#loading.entering{transition:none}}

#entry-hint{max-width:30em;margin:.65em 0 0 auto;font:500 clamp(13px,1.05vw,22px)/1.4 Barlow,system-ui,sans-serif;color:#fff0d7}#enter[hidden]~#entry-hint{display:none}