:root {
  --navy: #1B2033;
  --navy-dark: #10131f;
  --icon: #C9CCF5;
  --teal: #1ED1A0;
  --teal-lip: #11866a;
  --coral: #FF6B6B;
  --coral-lip: #b83a52;
  --card: #1E2436;
  --font: 'Oswald', 'Bebas Neue', 'Arial Narrow', 'Roboto Condensed', Impact, system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; }
body { font-family: var(--font); color: #fff; user-select: none; -webkit-user-select: none; touch-action: none; }
#app { position: fixed; inset: 0; }
#stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; }
.hidden { display: none !important; }
button { font-family: var(--font); cursor: pointer; border: 0; outline: none; }

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; pointer-events: none; }
#hud > * { pointer-events: auto; }
#levelLabel {
  position: absolute; left: 14px; top: calc(10px + env(safe-area-inset-top));
  font-weight: 700; font-size: 40px; letter-spacing: .5px; line-height: 1;
}
#hearts {
  position: absolute; left: 50%; top: calc(10px + env(safe-area-inset-top)); transform: translateX(-50%);
  background: var(--navy); border-radius: 22px; padding: 12px 22px; display: flex; gap: 14px;
  box-shadow: 0 5px 0 var(--navy-dark);
}
#hearts svg { width: 42px; height: 38px; display: block; transition: transform .2s; }
#hearts .heart path { fill: #FF4D5E; transition: fill .25s; }
#hearts .heart.lost path { fill: #050505; }
#hearts .heart.pop { animation: pop .45s ease; }
@keyframes pop { 0% { transform: scale(1); } 30% { transform: scale(1.35) rotate(-8deg); } 100% { transform: scale(1); } }

.top-right { position: absolute; right: 12px; top: calc(10px + env(safe-area-inset-top)); display: flex; gap: 10px; }
.icon-btn {
  width: 72px; height: 72px; border-radius: 12px; background: var(--navy);
  box-shadow: 0 5px 0 var(--navy-dark); display: grid; place-items: center; transition: transform .08s, filter .15s;
}
.icon-btn svg { width: 44px; height: 44px; fill: var(--icon); }
.icon-btn:active, .big-btn:active, #btnHint:active { transform: translateY(3px); }
.icon-btn:hover, #btnHint:hover { filter: brightness(1.25); }
.icon-btn.muted svg { opacity: .55; }

#btnHint {
  position: absolute; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom));
  background: var(--navy); color: #FFC94D; font-size: 22px; font-weight: 600; letter-spacing: 1px;
  padding: 10px 18px 10px 12px; border-radius: 12px; box-shadow: 0 5px 0 var(--navy-dark);
  display: flex; align-items: center; gap: 8px; transition: transform .08s, filter .15s, opacity .2s;
}
#btnHint svg { width: 28px; height: 28px; fill: #FFC94D; display: block; }
#btnHint[disabled] { opacity: .45; cursor: default; }

/* ---------- Title ---------- */
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4vh; background: #000; z-index: 10; }
#logo { width: min(520px, 86vw); height: auto; overflow: visible; }
.logo-txt { font-family: var(--font); font-weight: 700; font-size: 118px; }
.logo-line { fill: none; stroke-width: 15; stroke-linecap: round; stroke-linejoin: round; }
#titleLevel { font-size: 40px; font-weight: 600; letter-spacing: .5px; }
.big-btn {
  color: #fff; font-weight: 600; font-size: 42px; letter-spacing: 1px; border-radius: 8px;
  padding: 6px 0; width: 250px; transition: transform .08s, filter .15s;
}
.big-btn:hover { filter: brightness(1.08); }
.big-btn.teal { background: var(--teal); box-shadow: 0 6px 0 var(--teal-lip); }
.big-btn.coral { background: var(--coral); box-shadow: 0 6px 0 var(--coral-lip); }
#btnPlay { width: 250px; font-size: 46px; }
.logo-txt.small { font-size: 66px; font-weight: 600; }
.logo-line.thin { stroke-width: 9; }
.credit { position: absolute; font-size: 13px; color: rgba(255,255,255,.5); font-weight: 500; letter-spacing: .6px; white-space: nowrap; }
.credit a { color: rgba(255,255,255,.78); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.25); }
.credit a:hover { color: #fff; border-color: #fff; }
.title-credit { bottom: calc(12px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); }
.game-credit { left: 14px; bottom: calc(16px + env(safe-area-inset-bottom)); font-size: 12px; color: rgba(255,255,255,.4); }
#title.leaving { animation: fadeOut .25s ease forwards; }
@keyframes fadeOut { to { opacity: 0; } }

/* ---------- Modal ---------- */
#modal { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.55); z-index: 20; animation: fadeIn .2s ease; }
#modal .card {
  background: var(--card); border-radius: 16px; width: min(420px, 88vw); padding: 34px 30px 46px;
  display: flex; flex-direction: column; align-items: center; gap: 46px;
  box-shadow: 0 8px 0 #121625; animation: cardIn .35s cubic-bezier(.2,1.4,.4,1);
}
#modal h2 { margin: 0; font-size: 44px; font-weight: 600; letter-spacing: .5px; text-align: center; line-height: 1.1; }
#modal.failed .card { width: min(460px, 90vw); }
#modal.failed h2 { font-size: 52px; }
#modal.failed .big-btn { width: 270px; font-size: 44px; padding: 10px 0; }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes cardIn { from { transform: scale(.7); opacity: 0; } }

/* ---------- Small screens ---------- */
@media (max-width: 600px) {
  #levelLabel { font-size: 24px; top: calc(20px + env(safe-area-inset-top)); left: 10px; }
  #hearts { padding: 9px 11px; gap: 6px; border-radius: 14px; top: calc(12px + env(safe-area-inset-top)); }
  #hearts svg { width: 24px; height: 22px; }
  .icon-btn { width: 44px; height: 44px; border-radius: 10px; }
  .icon-btn svg { width: 27px; height: 27px; }
  .top-right { gap: 6px; right: 8px; top: calc(10px + env(safe-area-inset-top)); }
  #btnHint { right: 50%; transform: translateX(50%); bottom: calc(30px + env(safe-area-inset-bottom)); padding: 8px 16px 8px 10px; }
  .game-credit { left: 50%; transform: translateX(-50%); bottom: calc(7px + env(safe-area-inset-bottom)); font-size: 11px; }
  #btnHint:active { transform: translateX(50%) translateY(3px); }
  .big-btn { font-size: 36px; width: 220px; }
  #modal h2 { font-size: 38px; }
  #modal.failed h2 { font-size: 42px; }
}
@media (max-height: 520px) {
  .screen { gap: 2vh; }
  #logo { width: min(340px, 55vw); }
  .title-credit { bottom: 6px; }
}