.reef-buddies-page { color-scheme: dark; font-family: 'Trebuchet MS', system-ui, sans-serif; color: #fff; background: #043448; margin: 0; min-height: 100svh; display: grid; place-items: center; }
#ningaloo-reef-buddies, #ningaloo-reef-buddies * { box-sizing: border-box; }
#ningaloo-reef-buddies { font-family: 'Trebuchet MS', system-ui, sans-serif; color: #fff; }
#ningaloo-reef-buddies { --ink: #05374c; --cream: #fff8da; --yellow: #ffdc57; position: relative; width: 100%; max-width: 1320px; height: 100vh; height: 100dvh; max-height: 960px; min-height: 280px; overflow: hidden; isolation: isolate; background: #168fbb; outline: none; user-select: none; -webkit-user-select: none; touch-action: none; }
#ningaloo-reef-buddies canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#ningaloo-reef-buddies { caret-color: transparent; }
#ningaloo-reef-buddies { cursor: default; }
#ningaloo-reef-buddies button { font: inherit; cursor: pointer; border: 0; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
#ningaloo-reef-buddies button:focus-visible { outline: 4px solid white; outline-offset: 5px; }
#ningaloo-reef-buddies button:disabled { cursor: wait; opacity: .6; }
#ningaloo-reef-buddies [hidden] { display: none !important; }
#ningaloo-reef-buddies .hud { position: absolute; z-index: 3; left: max(22px, env(safe-area-inset-left)); right: max(22px, env(safe-area-inset-right)); top: max(22px, env(safe-area-inset-top)); display: flex; align-items: flex-start; justify-content: space-between; pointer-events: none; }
#ningaloo-reef-buddies .best { padding: 10px 14px; border-radius: 13px; background: #03394de0; color: #fff8da; font-weight: 800; font-size: 14px; letter-spacing: .07em; }
#ningaloo-reef-buddies .best span { display: block; margin-top: 3px; font-size: 24px; letter-spacing: 0; }
#ningaloo-reef-buddies .score { position: absolute; top: 0; left: 50%; transform: translateX(-50%); font-weight: 900; font-size: clamp(40px, 6vw, 64px); line-height: 1; text-shadow: 0 3px 0 #075371, 0 0 15px #075371; }
#ningaloo-reef-buddies .hud-actions { display: flex; gap: 9px; pointer-events: auto; }
#ningaloo-reef-buddies .icon-button { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: #03394de0; color: white; box-shadow: 0 3px 0 #01304380; }
#ningaloo-reef-buddies .icon-button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#ningaloo-reef-buddies .screen { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); text-align: center; }
#ningaloo-reef-buddies .title-screen { background: linear-gradient(180deg, #034f7610, #01435b70); justify-content: flex-end; padding-bottom: max(28px, env(safe-area-inset-bottom)); gap: 12px; }
#ningaloo-reef-buddies .title-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; object-position: center 42%; }
#ningaloo-reef-buddies .title-picture { position: absolute; inset: 0; z-index: -2; }
#ningaloo-reef-buddies .title-screen::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #02384df5 0%, #03455aa0 15%, transparent 45%); z-index: -1; }
#ningaloo-reef-buddies .title-heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
#ningaloo-reef-buddies .tagline { margin: 0 0 4px; font-size: clamp(17px, 2.5vw, 22px); font-weight: 700; text-shadow: 0 2px 8px #02384d; }
#ningaloo-reef-buddies .primary { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-width: 224px; min-height: 58px; padding: 14px 30px; background: var(--yellow); color: var(--ink); border: 2px solid #fff0a2; border-radius: 16px; font-size: 20px; font-weight: 900; box-shadow: 0 5px 0 #ca9339, 0 10px 24px #01304340; transition: transform .12s, background .12s; }
#ningaloo-reef-buddies .primary:hover { background: #ffe67f; transform: translateY(-1px); }
#ningaloo-reef-buddies .primary:active { transform: translateY(3px); }
#ningaloo-reef-buddies .secondary { color: var(--cream); background: transparent; min-height: 46px; padding: 10px 20px; font-size: 16px; font-weight: 700; text-decoration: underline; text-underline-offset: 5px; }
#ningaloo-reef-buddies .quiet { margin: 4px 0 0; font-size: 14px; color: #d1f5f8; }
#ningaloo-reef-buddies .panel-screen { background: #032f4b78; backdrop-filter: blur(5px); }
#ningaloo-reef-buddies .panel { width: min(100%, 400px); padding: 30px 28px 24px; background: #064661f5; border: 2px solid #79d7dc88; border-radius: 28px; box-shadow: 0 20px 70px #002f4e60, inset 0 1px #c7feff40; }
#ningaloo-reef-buddies h2 { margin: 3px 0 10px; color: var(--cream); font-size: clamp(30px, 5vw, 40px); letter-spacing: -.04em; }
#ningaloo-reef-buddies .eyebrow { margin: 0 0 8px; color: #9ce8e4; text-transform: uppercase; font-size: 13px; letter-spacing: .16em; font-weight: 800; }
#ningaloo-reef-buddies .panel p { line-height: 1.55; }
#ningaloo-reef-buddies .results { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 24px 0; }
#ningaloo-reef-buddies .result { padding: 14px 4px; border-radius: 16px; background: #02324780; }
#ningaloo-reef-buddies .result dt { font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: #b6e7e9; }
#ningaloo-reef-buddies .result dd { margin: 4px 0 0; font-size: 40px; color: var(--yellow); font-weight: 900; }
#ningaloo-reef-buddies .panel .primary { width: 100%; min-width: 0; }
#ningaloo-reef-buddies .ready-screen { z-index: 2; justify-content: flex-end; padding-bottom: 20%; pointer-events: none; background: linear-gradient(0deg, #023e5260, transparent 50%); }
#ningaloo-reef-buddies .ready-screen h2 { text-shadow: 0 3px 0 #075371, 0 0 20px #075371; }
#ningaloo-reef-buddies .ready-screen p { background: #03394ded; padding: 10px 16px; border-radius: 12px; margin: 0; font-size: 16px; }
#ningaloo-reef-buddies .swim-hint { position: absolute; bottom: max(18px, env(safe-area-inset-bottom)); left: 0; right: 0; text-align: center; color: #064661; font-size: 14px; font-weight: 800; pointer-events: none; }
@media (max-aspect-ratio: 4/5) {
  #ningaloo-reef-buddies .title-art { inset: 0; height: 100%; object-fit: cover; object-position: center; background: transparent; }
  #ningaloo-reef-buddies .title-screen { padding-bottom: max(5%, env(safe-area-inset-bottom)); }
  #ningaloo-reef-buddies .title-screen::after { background: linear-gradient(0deg, #02384df5, #03455a70 30%, transparent 68%); }
  #ningaloo-reef-buddies .hud { left: 14px; right: 14px; top: max(16px, env(safe-area-inset-top)); }
  #ningaloo-reef-buddies .ready-screen { padding-bottom: 25%; }
}
@media (max-height: 500px) and (min-aspect-ratio: 4/5) {
  #ningaloo-reef-buddies .title-screen { padding-bottom: 16px; gap: 6px; }
  #ningaloo-reef-buddies .title-art { object-fit: cover; object-position: center top; }
  #ningaloo-reef-buddies .title-screen { align-items: flex-end; padding-right: 5%; }
  #ningaloo-reef-buddies .tagline { max-width: 210px; }
  #ningaloo-reef-buddies .panel { padding: 12px 22px; }
  #ningaloo-reef-buddies .panel h2 { font-size: 28px; }
  #ningaloo-reef-buddies .results { margin: 10px 0; }
  #ningaloo-reef-buddies .result { padding: 5px; }
  #ningaloo-reef-buddies .result dd { font-size: 28px; }
  #ningaloo-reef-buddies .ready-screen { padding-bottom: 8%; }
}
@media (prefers-reduced-motion: reduce) { #ningaloo-reef-buddies button { transition: none; } }
#ningaloo-reef-buddies .selection-screen { background: linear-gradient(#03394da8, #03394ded); gap: 12px; }
#ningaloo-reef-buddies .selection-screen h2 { margin: 0 0 14px; max-width: 650px; }
#ningaloo-reef-buddies .buddy-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; width: min(850px, 100%); }
#ningaloo-reef-buddies .buddy-card { position: relative; display: flex; flex-direction: column; align-items: center; padding: 18px 10px 22px; border: 2px solid #65bbcc70; border-radius: 22px; color: #fff8da; background: #07506ddb; min-width: 0; }
#ningaloo-reef-buddies .buddy-card:hover { background: #096681; }
#ningaloo-reef-buddies .buddy-card[aria-pressed="true"] { border-color: #ffdc57; background: #0c6680; box-shadow: inset 0 0 0 1px #ffdc57; }
#ningaloo-reef-buddies .buddy-card canvas { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 1.8; max-width: 260px; pointer-events: none; }
#ningaloo-reef-buddies .buddy-name { font-size: 21px; font-weight: 900; }
#ningaloo-reef-buddies .buddy-description { margin-top: 7px; font-size: 14px; color: #c5e9ee; }
#ningaloo-reef-buddies .chosen { position: absolute; top: 10px; right: 12px; background: #ffdc57; color: #05374c; width: 25px; height: 25px; border-radius: 50%; display: none; font-weight: 900; }
#ningaloo-reef-buddies [aria-pressed="true"] .chosen { display: grid; place-items: center; }
#ningaloo-reef-buddies .selection-note { margin: 4px 0 8px; color: #c5e9ee; font-size: 14px; }
#ningaloo-reef-buddies .selection-screen .primary { font-size: 18px; }
#ningaloo-reef-buddies .ready-screen .ready-buddy { background: transparent; color: #fff8da; text-shadow: 0 2px 5px #034154; text-transform: uppercase; font-weight: 900; letter-spacing: .12em; font-size: 14px; }
@media (max-width: 600px) and (min-height: 501px) {
  #ningaloo-reef-buddies .selection-screen { gap: 8px; padding: 18px; }
  #ningaloo-reef-buddies .selection-screen h2 { font-size: 29px; margin-bottom: 8px; max-width: 330px; }
  #ningaloo-reef-buddies .buddy-cards { grid-template-columns: 1fr; gap: 10px; max-width: 370px; }
  #ningaloo-reef-buddies .buddy-card { min-height: 100px; padding: 14px 30px 14px 46%; align-items: flex-start; justify-content: center; text-align: left; }
  #ningaloo-reef-buddies .buddy-card canvas { position: absolute; left: 0; top: 0; width: 45%; height: 100%; object-fit: contain; }
  #ningaloo-reef-buddies .buddy-name { font-size: 18px; }
  #ningaloo-reef-buddies .buddy-description { font-size: 13px; }
  #ningaloo-reef-buddies .chosen { top: 7px; right: 7px; width: 20px; height: 20px; font-size: 13px; }
}
@media (max-height: 500px) {
  #ningaloo-reef-buddies .selection-screen { gap: 5px; padding: 12px 24px; }
  #ningaloo-reef-buddies .selection-screen > .eyebrow { display: none; }
  #ningaloo-reef-buddies .selection-screen h2 { font-size: 27px; margin-bottom: 4px; }
  #ningaloo-reef-buddies .buddy-cards { max-width: 620px; gap: 10px; }
  #ningaloo-reef-buddies .buddy-card { padding: 3px 8px 8px; border-radius: 15px; }
  #ningaloo-reef-buddies .buddy-card canvas { max-height: 82px; width: 150px; }
  #ningaloo-reef-buddies .buddy-name { font-size: 16px; }
  #ningaloo-reef-buddies .buddy-description, #ningaloo-reef-buddies .selection-note { display: none; }
  #ningaloo-reef-buddies .selection-screen .primary { min-height: 46px; padding: 9px 24px; }
  #ningaloo-reef-buddies .selection-screen .secondary { min-height: 36px; padding: 6px 15px; }
}
#ningaloo-reef-buddies .coin-hud { position: absolute; top: 80px; left: 0; padding: 7px 11px; border-radius: 12px; background: #03394ded; color: #ffdc57; font-size: 21px; font-weight: 900; }
#ningaloo-reef-buddies .coin-hud small { display: block; color: #d4eeee; font-size: 10px; font-weight: 400; }
#ningaloo-reef-buddies .wallet { color: #ffdc57; margin: 2px 0; font-size: 18px; }
#ningaloo-reef-buddies .buddy-unlock { color: #ffe68b; font-size: 13px; margin-top: 9px; font-weight: 700; }
#ningaloo-reef-buddies .buddy-card:disabled { opacity: 1; background: #073b51ee; cursor: not-allowed; border-color: #679bad77; }
#ningaloo-reef-buddies .buddy-card:disabled canvas { opacity: .5; filter: saturate(.55); }
#ningaloo-reef-buddies .coin-result { color: #ffe68b; margin: 10px 0; font-size: 15px; }
#ningaloo-reef-buddies .unlock-message { color: #bdf5e8; font-size: 15px; margin: 8px 0 16px; }
#ningaloo-reef-buddies .unlock-message:empty { display: none; }
#ningaloo-reef-buddies .panel-screen { overflow-y: auto; justify-content: safe center; }
@media (max-height: 500px) {
  #ningaloo-reef-buddies .buddy-unlock { margin-top: 4px; font-size: 12px; }
  #ningaloo-reef-buddies .wallet { font-size: 14px; }
  #ningaloo-reef-buddies .coin-result, #ningaloo-reef-buddies .unlock-message { margin: 5px 0; font-size: 13px; }
  #ningaloo-reef-buddies .panel-screen .secondary { min-height: 32px; padding: 5px 12px; }
}
/* Site request 8 Sep 2026: no sound pill on the title and buddy-select screens; the in-game HUD keeps its mute icon. */
#ningaloo-reef-buddies .title-screen .menu-sound, #ningaloo-reef-buddies .selection-screen .menu-sound { display: none; }
#ningaloo-reef-buddies .menu-sound { position: absolute; top: max(16px, env(safe-area-inset-top)); right: 16px; min-height: 40px; border-radius: 12px; padding: 8px 12px; background: #03394de0; color: #fff8da; font-size: 14px; }
@media (max-height: 500px) { #ningaloo-reef-buddies .selection-screen .menu-sound { top: 5px; right: 6px; font-size: 12px; min-height: 30px; padding: 5px 8px; } }