/* Sails of Sydney — overlay UI. System fonts only (no font files). */
:root { --ink: #fff6e8; --glass: rgba(18, 16, 22, 0.46); --line: rgba(255, 240, 215, 0.22); --gold: #ffc27a; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0c0e14; color: var(--ink);
  font: 500 13px/1.3 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-user-select: none; user-select: none; touch-action: none; }
#view, #view canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
body:not(.ready) #bar, body:not(.ready) #hint { opacity: 0; }

#title { position: fixed; left: max(18px, env(safe-area-inset-left)); top: max(14px, env(safe-area-inset-top)); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55); pointer-events: none; }
#title b { display: block; font: 600 21px/1.1 ui-serif, "Iowan Old Style", "Palatino Linotype", Georgia, serif; letter-spacing: 0.01em; }
#title span { opacity: 0.82; font-size: 12px; letter-spacing: 0.02em; }

#caption { position: fixed; left: 50%; top: 13%; transform: translate(-50%, 8px); max-width: min(88vw, 640px); text-align: center; padding: 9px 16px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 14px; opacity: 0; transition: opacity 0.45s, transform 0.45s; pointer-events: none; text-wrap: balance; }
#caption b { color: var(--gold); font-weight: 650; }
#caption.show { opacity: 1; transform: translate(-50%, 0); }

#bar { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; gap: 6px; align-items: center; padding: 6px;
  border-radius: 14px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: opacity 0.4s; max-width: calc(100vw - 16px); }
#bar button { appearance: none; border: 1px solid transparent; background: rgba(255, 255, 255, 0.07); color: var(--ink); font: inherit; padding: 8px 11px; border-radius: 9px; cursor: pointer; white-space: nowrap; display: flex; align-items: center; gap: 7px; }
#bar button:hover { background: rgba(255, 255, 255, 0.15); }
#bar button.on { background: rgba(255, 194, 122, 0.24); border-color: rgba(255, 194, 122, 0.6); }
#bar button:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
#bar i { font: 600 10px/1 ui-monospace, Menlo, monospace; padding: 3px 5px; border-radius: 4px; background: rgba(255, 255, 255, 0.14); font-style: normal; }
#bar .sep { width: 1px; height: 22px; background: var(--line); margin: 0 3px; }
#bSphere { background: rgba(255, 194, 122, 0.2) !important; border-color: rgba(255, 194, 122, 0.45) !important; }
body.rec #bRec { background: rgba(255, 90, 70, 0.4); border-color: rgba(255, 120, 100, 0.8); }

#hint { position: fixed; left: 50%; bottom: calc(max(16px, env(safe-area-inset-bottom)) + 58px); transform: translateX(-50%); padding: 5px 12px; border-radius: 999px; background: rgba(10, 10, 14, 0.38);
  font-size: 12px; opacity: 0.92; transition: opacity 0.8s; pointer-events: none; white-space: nowrap; max-width: 96vw; overflow: hidden; text-overflow: ellipsis; }
#hint.hide { opacity: 0; }
#hint .flying, body.fly #hint .orbit { display: none; }
body.fly #hint .flying { display: inline; }
body.fly #hint { opacity: 0.92; }
#hint .touch { display: none; font-style: normal; }
@media (pointer: coarse) { #hint .touch { display: inline; } }

#stat { position: fixed; right: max(14px, env(safe-area-inset-right)); top: max(14px, env(safe-area-inset-top)); font: 500 11px/1 ui-monospace, Menlo, monospace; opacity: 0.6; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); pointer-events: none; }
#credit { position: fixed; right: max(14px, env(safe-area-inset-right)); bottom: max(8px, env(safe-area-inset-bottom)); font-size: 11px; opacity: 0.72; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7); pointer-events: none; }
#fail { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; background: #0c0e14; font-size: 15px; }
#fail[hidden] { display: none; }

body.noui #bar, body.noui #hint, body.noui #stat, body.noui #title { display: none; }
/* recording camera: a clean frame (title, caption and credit stay; any key or click on the canvas ends it) */
body.rec #hint, body.rec #stat, body.rec #bar { opacity: 0; pointer-events: none; }

/* phones: two rows of buttons, key badges hidden, credit above the bar */
@media (max-width: 720px) {
  #bar { flex-wrap: wrap; justify-content: center; gap: 5px; width: calc(100vw - 16px); }
  #bar .sep { display: none; }
  #bar i { display: none; }
  #bar button { padding: 9px 10px; font-size: 12.5px; }
  #hint { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 104px); font-size: 11px; white-space: normal; text-align: center; border-radius: 12px; }
  #credit { left: 0; right: 0; bottom: auto; top: calc(max(14px, env(safe-area-inset-top)) + 46px); text-align: left; padding-left: max(18px, env(safe-area-inset-left)); font-size: 10px; }
  #stat { font-size: 10px; max-width: 46vw; text-align: right; line-height: 1.3; }
  #title b { font-size: 18px; }
  #caption { top: 12.5%; border-radius: 14px; font-size: 13px; max-width: 78vw; padding: 7px 12px; }
}