.ocean-overlay { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 12px; background: rgba(2,14,22,.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.ocean-overlay[hidden] { display: none; }
.ocean-card { width: min(440px, calc((100svh - 156px) * .75), calc(100vw - 24px)); border: 1px solid #58c6be5c; border-radius: 8px; overflow: hidden; background: #072d36; color: #ecffff; box-shadow: 0 24px 90px #0008; font-family: inherit; }
.ocean-topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 57px; padding: 9px 14px; background: #082d35; }
.ocean-brand { margin: 0 0 2px; color: #8fddd2; font-size: 9px; font-weight: 700; letter-spacing: 0; }
.ocean-topbar h2 { font-size: 17px; line-height: 1.2; margin: 0; color: #fff; }
.ocean-toolbar { display: flex; gap: 7px; }
.ocean-icon { display: grid; place-items: center; width: 34px; height: 34px; padding: 7px; border: 1px solid #83d8d044; border-radius: 6px; color: #edffff; background: #12404a; cursor: pointer; }
.ocean-icon svg { display: block; width: 18px; height: 18px; }
.ocean-icon:disabled { opacity: .35; cursor: default; }
.ocean-stage { position: relative; width: 100%; aspect-ratio: 3/4; overflow: hidden; background: #007f8a; }
.ocean-canvas { display: block; width: 100%; height: 100%; touch-action: none; outline-offset: -4px; }
.ocean-hud { position: absolute; inset: 15px 16px auto; display: flex; justify-content: space-between; pointer-events: none; }
.ocean-hud p { margin: 0; color: #eeffff; font-size: 10px; font-weight: 700; text-shadow: 0 1px 4px #005766; }
.ocean-hud strong { display: block; margin-top: 2px; font-size: 27px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ocean-hud p:last-child { text-align: right; }
.ocean-menu { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; background: rgba(2,41,49,.16); text-align: center; }
.ocean-menu[hidden] { display: none; }
.ocean-menu h3 { max-width: 100%; margin: 0 0 20px; color: #fff; font-size: 27px; line-height: 1.2; text-shadow: 0 2px 8px #03404b; }
.ocean-result { margin: -7px 0 15px; color: #fff3a5; font-size: 19px; font-weight: 700; }
.ocean-action, .ocean-swim { min-height: 42px; border: 1px solid #fff3ae; border-radius: 6px; padding: 10px 22px; background: #ffe48d; color: #153d40; font-size: 14px; font-weight: 800; cursor: pointer; box-shadow: 0 4px 0 #cfac59, 0 7px 18px #003f4b40; }
.ocean-action:active, .ocean-swim:active { transform: translateY(2px); box-shadow: 0 2px 0 #cfac59; }
.ocean-bottom { min-height: 62px; padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ocean-bottom > span { color: #b8e1dc; font-size: 11px; }
.ocean-swim { display: flex; align-items: center; gap: 7px; min-height: 38px; padding: 8px 19px; font-size: 13px; box-shadow: 0 3px 0 #cfac59; }
.ocean-swim:disabled { opacity: .45; cursor: default; }
.ocean-swim svg { width: 16px; height: 16px; flex-shrink: 0; }
.ocean-overlay button:focus-visible, .ocean-canvas:focus-visible { outline: 2px solid #fff3ab; outline-offset: 3px; }
.parrot-cta .sign { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .ocean-overlay { backdrop-filter: none; } .ocean-action:active, .ocean-swim:active { transform: none; } }