:root {
  --ui-font: ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", "Arial", sans-serif;
  --ink: #284953;
  --pink: #bd5276;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #cbe5e4; color: var(--ink); font-family: var(--ui-font); -webkit-user-select: none; user-select: none; overscroll-behavior: none; }
#game { position: relative; width: 100%; height: 100%; height: 100dvh; overflow: hidden; touch-action: none; }
#world { display: block; width: 100%; height: 100%; outline: none; touch-action: none; }
.svg-definitions { position: absolute; overflow: hidden; }
header { position: absolute; z-index: 6; top: calc(env(safe-area-inset-top) + 18px); left: calc(env(safe-area-inset-left) + 22px); right: calc(env(safe-area-inset-right) + 22px); display: flex; direction: ltr; justify-content: space-between; align-items: center; height: 44px; pointer-events: none; }
.brand { position: absolute; top: 0; left: 50%; font-size: 18px; font-weight: 600; letter-spacing: 1px; line-height: 1; transform: translateX(-50%); transform-origin: center; transition: transform .35s ease-out, opacity .35s ease-out; }
#game[data-started="true"] .brand { transform: translateX(-50%) scale(.85); opacity: .8; }
button { font: inherit; border: 0; border-radius: 14px; background: #2b505a; color: #fff; padding: 13px 24px; min-height: 48px; font-size: 17px; font-weight: 500; cursor: pointer; touch-action: manipulation; }
button:active { transform: translateY(1px); }
button:focus-visible { outline: 3px solid #b84168; outline-offset: 4px; }
#sound-toggle { position: absolute; top: 46px; right: 0; display: grid; place-items: center; width: 44px; height: 44px; min-height: 44px; padding: 10px; border-radius: 50%; background: #ffffff7d; color: #34545a; border: 1px solid #ffffffb3; pointer-events: auto; }
#sound-toggle svg { width: 22px; height: 22px; }
.sound-slash { display: none; }
#sound-toggle[data-state="muted"] .sound-waves, #sound-toggle[data-state="locked"] .sound-waves, #sound-toggle[data-state="unavailable"] .sound-waves { display: none; }
#sound-toggle[data-state="muted"] .sound-slash, #sound-toggle[data-state="locked"] .sound-slash, #sound-toggle[data-state="unavailable"] .sound-slash { display: block; }
.hud { position: absolute; top: calc(env(safe-area-inset-top) + 64px); left: 0; right: 0; height: 44px; pointer-events: none; }
.score-block { position: absolute; left: 50%; transform: translateX(-50%); height: 44px; width: calc(100% - 224px); display: grid; place-items: center; }
.life-block { position: absolute; left: calc(env(safe-area-inset-left) + 22px); height: 44px; display: flex; align-items: center; }
#score { font-size: clamp(24px, 7.6vw, 30px); line-height: 1; font-weight: 500; font-variant-numeric: tabular-nums; text-align: center; }
#score[data-pop="true"] { animation: score-pop .32s ease-out; color: #9a3e62; }
#lives { display: flex; gap: 7px; height: 38px; align-items: center; direction: ltr; }
#lives svg { width: 25px; height: 34px; color: var(--pink); }
#lives svg[data-active="false"] { visibility: hidden; }
.balance-ui { position: absolute; top: calc(env(safe-area-inset-top) + 120px); width: min(240px, calc(100% - 48px)); left: 50%; transform: translateX(-50%); pointer-events: none; }
.balance-caption { display: flex; justify-content: center; align-items: center; font-size: 15px; min-height: 20px; margin-bottom: 6px; color: #47646d; }
.balance-track { height: 7px; border-radius: 10px; background: #375b651b; position: relative; direction: ltr; transition: background-color .25s; }
.stable-zone { position: absolute; width: 26%; height: 7px; left: 37%; background: #fff9; border-radius: 4px; }
#balance-marker { position: absolute; top: -4px; width: 5px; height: 15px; background: #335767; border-radius: 4px; left: 50%; transform: translateX(-50%); }
#balance-label:before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #648f7f; margin-left: 7px; vertical-align: middle; }
#game[data-balance="unstable"] #balance-label:before { background: #dd7894; }
#game[data-balance="unstable"] .balance-track { background: #dc6a8b38; }
#game[data-balance="critical"] .balance-track { background: #c94b6e60; animation: danger-pulse 1s ease-in-out infinite; }
#game[data-balance="critical"] #balance-label:before { background: #cb5572; }
#game[data-balance="critical"] .balance-caption { color: #984657; }
.stable-progress { height: 3px; margin-top: 7px; border-radius: 3px; overflow: hidden; opacity: 0; }
#game[data-balance="stable"] .stable-progress { opacity: 1; }
#stable-fill { display: block; width: 100%; height: 100%; background: #648f7f; border-radius: inherit; transform: scaleX(0); transform-origin: center; }
#milestone { position: absolute; top: 0; left: 0; right: 0; height: 20px; line-height: 20px; text-align: center; color: #963e5e; font-size: 15px; animation: milestone-in .2s ease-out; }
#lost-feather { position: absolute; width: 25px; height: 34px; color: var(--pink); pointer-events: none; z-index: 7; transform: translate(-50%, -50%); animation: feather-loss .75s ease-in-out forwards; }
#lost-feather svg { display: block; width: 100%; height: 100%; }
footer { position: absolute; bottom: calc(env(safe-area-inset-bottom) + 27px); left: calc(env(safe-area-inset-left) + 20px); right: calc(env(safe-area-inset-right) + 20px); text-align: center; pointer-events: none; color: #405b60; transition: opacity .25s; }
#hint { position: absolute; bottom: 56px; left: 0; right: 0; font-size: 14px; font-weight: 500; margin: 0; line-height: 1.4; }
#hint[hidden], #gesture-hint[hidden] { display: none; }
#gesture-hint { height: 80px; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 8px); }
body.fallen .balance-ui { opacity: 0; }
#joystick { display: block; position: absolute; bottom: 0; left: 50%; width: 140px; height: 40px; border: 1px solid #fff9; border-radius: 30px; transform: translateX(-50%); pointer-events: none; background: #ffffff18; direction: ltr; }
#thumb { position: absolute; left: calc(50% - 16px); top: 3px; width: 32px; height: 32px; border: 2px solid #fff; border-radius: 50%; background: #fff4; transform: translateX(0px); }
#result { position: absolute; inset: 0; display: grid; align-items: end; justify-items: center; text-align: center; padding: 20px 24px calc(env(safe-area-inset-bottom) + 24px); z-index: 5; pointer-events: none; }
#result[hidden], #error[hidden], #milestone[hidden], #lost-feather[hidden] { display: none; }
.result-inner { max-width: 320px; pointer-events: auto; }
#retry { min-width: 164px; display: inline-flex; align-items: center; justify-content: center; gap: 14px; }
.retry-icon { font-size: 24px; line-height: 1; font-weight: 400; }
#error { position: absolute; inset: 0; background: #cbe5e4; display: grid; place-content: center; text-align: center; padding: 30px; z-index: 10; }
#error p { line-height: 1.7; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@keyframes danger-pulse { 50% { box-shadow: 0 0 0 4px #c94b6e12; } }
@keyframes feather-loss {
  0% { opacity: 1; transform: translate(-50%, -50%) rotate(0deg); }
  45% { opacity: 1; transform: translate(calc(-50% + var(--feather-dx) * .48 + 12px), calc(-50% + var(--feather-dy) * .45)) rotate(-24deg); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--feather-dx)), calc(-50% + var(--feather-dy))) rotate(38deg); }
}
@keyframes score-pop { 50% { transform: scale(1.16); } }
@keyframes milestone-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media(max-width:360px) { #lives { gap: 5px; } #lives svg { width: 22px; height: 30px; } .life-block { left: calc(env(safe-area-inset-left) + 16px); } }
@media(max-height:640px) and (orientation:portrait) { header { top: calc(env(safe-area-inset-top) + 4px); } .hud { top: calc(env(safe-area-inset-top) + 50px); } .balance-ui { top: calc(env(safe-area-inset-top) + 92px); } .balance-caption { min-height: 18px; margin-bottom: 4px; font-size: 14px; } .stable-progress { margin-top: 4px; } #milestone { height: 18px; line-height: 18px; font-size: 14px; } footer { bottom: calc(env(safe-area-inset-bottom) + 18px); } }
@media(max-height:500px) and (orientation:landscape) {
  header { top: calc(env(safe-area-inset-top) + 12px); }
  .hud { top: calc(env(safe-area-inset-top) + 36px); }
  #sound-toggle { top: 24px; }
  #score { font-size: 26px; }
  #lives svg { width: 22px; height: 30px; }
  .balance-ui { top: calc(env(safe-area-inset-top) + 78px); left: calc(env(safe-area-inset-left) + 22px); transform: none; width: 170px; }
  footer { bottom: calc(env(safe-area-inset-bottom) + 12px); }
  #result { padding-bottom: calc(env(safe-area-inset-bottom) + 12px); }
}
@media(prefers-reduced-motion:reduce) { *, *:before, *:after { animation: none!important; transition: none!important; } }