* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --panel: rgba(18, 20, 58, 0.84);
  --line: rgba(160, 190, 255, 0.28);
  --accent: #00c2e0;
  --text: #eef3ff;
  --muted: #b3bddf;
  --reserve: 78px;
  --stage-w: min(100vw - 20px, calc((100dvh - var(--reserve)) * 16 / 9));
}
@media (pointer: coarse) {
  :root { --reserve: 220px; }
}
@media (pointer: coarse) and (orientation: landscape) {
  :root { --reserve: 64px; }
}

html, body { min-height: 100%; }
body {
  background: radial-gradient(1200px 600px at 50% -10%, #2a2470 0%, #0b0f2e 60%, #070a20 100%);
  color: var(--text);
  font-family: Nunito, system-ui, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-height: 100dvh;
  padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  overflow-x: hidden;
}
button { font-family: inherit; }

.bar { width: var(--stage-w); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hub-back {
  display: inline-flex; align-items: center;
  font: 700 .88rem Nunito, sans-serif; color: #00d4ff; text-decoration: none;
  padding: 8px 14px; border: 1px solid #2a3a4a; border-radius: 999px; background: #1a2430; box-shadow: 0 2px 10px #0006;
}
.hub-back:hover { color: #7af0ff; border-color: #00a8cc; }
.tag {
  font: 800 .72rem Nunito, sans-serif; letter-spacing: .08em; text-transform: uppercase;
  color: #ffd54f; border: 1px solid rgba(255, 213, 79, .45); padding: 4px 10px; border-radius: 999px;
}

.stage-wrap { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.stage {
  position: relative; width: var(--stage-w); aspect-ratio: 16 / 9;
  border-radius: 16px; overflow: hidden; background: #0f1640;
  box-shadow: 0 20px 60px #000a, 0 0 0 1px rgba(255, 255, 255, .06);
  user-select: none; -webkit-user-select: none; touch-action: none;
}
#game { position: absolute; inset: 0; }
#game canvas { display: block; }
.vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(ellipse at 50% 45%, transparent 60%, rgba(8, 4, 30, .45) 100%);
}

/* HUD */
.hud {
  position: absolute; left: 0; right: 0; top: 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 8px;
  padding: 1.4%; pointer-events: none;
}
.hud[hidden] { display: none; }
.hud > * { pointer-events: auto; }
.hud-left { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.pill {
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
  padding: clamp(3px, .6vw, 5px) clamp(7px, 1.4vw, 12px); font: 800 clamp(11px, 1.6vw, 17px) Nunito, sans-serif; backdrop-filter: blur(6px);
}
.star-ico { color: #ffd54f; }
.hearts { display: flex; gap: 4px; }
.hearts[hidden] { display: none; }
.heart svg { width: clamp(20px, 2.6vw, 30px); height: auto; fill: #ff5a6e; stroke: #1b1640; stroke-width: 1.6; filter: drop-shadow(0 2px 3px #0006); }
.heart.empty svg { fill: rgba(255, 255, 255, .15); }
.word {
  display: flex; gap: clamp(3px, .6vw, 6px); padding: 6px 10px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; backdrop-filter: blur(6px);
}
.word span {
  width: clamp(17px, 3vw, 36px); height: clamp(21px, 3.6vw, 42px); display: grid; place-items: center;
  border-radius: 8px; background: rgba(255, 255, 255, .08);
  font: 800 clamp(15px, 2.4vw, 26px) 'Baloo 2', Nunito, sans-serif; color: rgba(255, 255, 255, .45);
}
.word span.done { background: linear-gradient(#ffe58a, #ffb300); color: #6a3600; }
.word span.next { color: #fff; box-shadow: 0 0 0 2px #7af0ff inset; animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 2px #7af0ff inset, 0 0 14px #7af0ff; } }
.hud-right { display: flex; gap: 6px; }
.hud-btn {
  width: clamp(26px, 4.4vw, 46px); height: clamp(26px, 4.4vw, 46px); border-radius: clamp(8px, 1.2vw, 12px);
  border: 1px solid var(--line); background: var(--panel); color: var(--text);
  font-size: clamp(12px, 2vw, 20px); font-weight: 800; cursor: pointer; backdrop-filter: blur(6px);
}
.hud-right { gap: clamp(3px, .6vw, 6px); }
.word { padding: clamp(3px, .6vw, 6px) clamp(5px, 1vw, 10px); }
.hud-btn:hover { border-color: var(--accent); }
.hud-btn.on { background: #0b5f73; border-color: var(--accent); }

/* Robot radio */
.radio {
  position: absolute; left: 50%; top: calc(3% + clamp(34px, 4.6vw, 52px)); z-index: 6;
  transform: translate(-50%, -12px); opacity: 0; pointer-events: none;
  transition: opacity .22s, transform .22s;
  display: flex; align-items: center; gap: 10px; max-width: min(92%, 660px);
  background: var(--panel); border: 1px solid rgba(122, 240, 255, .5); border-radius: 18px;
  padding: 7px 10px 7px 8px; box-shadow: 0 8px 30px #0008; backdrop-filter: blur(6px);
}
.radio.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.radio img { width: clamp(40px, 5vw, 58px); height: auto; flex: none; }
.radio-name { font: 800 .7rem Nunito, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #7af0ff; }
.radio-text { font: 700 clamp(13px, 1.9vw, 19px)/1.3 Nunito, sans-serif; }
.radio-replay {
  flex: none; width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, .06); color: var(--text); cursor: pointer; font-size: 16px;
}

/* Overlays */
.overlay {
  position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; padding: 3%;
  background: rgba(8, 10, 34, .5); backdrop-filter: blur(3px);
}
.overlay[hidden] { display: none; }
.card {
  width: min(560px, 100%); max-height: 100%; overflow: auto; text-align: center;
  background: linear-gradient(180deg, rgba(44, 38, 118, .96), rgba(18, 20, 58, .96));
  border: 1px solid var(--line); border-radius: 22px; padding: clamp(14px, 3vw, 28px);
  box-shadow: 0 20px 60px #000a; display: flex; flex-direction: column; align-items: center; gap: clamp(8px, 1.4vw, 12px);
}
.portraits { display: flex; align-items: flex-end; gap: 4px; }
.portraits img { height: clamp(52px, 9vw, 96px); width: auto; filter: drop-shadow(0 6px 10px #0008); }
h1, h2 { font: 800 clamp(22px, 3.6vw, 36px)/1.05 'Baloo 2', Nunito, sans-serif; }
.sub { color: var(--muted); font-weight: 700; font-size: clamp(13px, 1.7vw, 16px); }
.note { color: var(--muted); font-size: clamp(12px, 1.5vw, 14px); margin-top: -4px; }
.controls { color: var(--muted); font-size: clamp(11px, 1.4vw, 13px); line-height: 1.45; }
.seg { display: inline-flex; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); border-radius: 999px; padding: 3px; gap: 2px; }
.seg button {
  border: 0; background: transparent; color: var(--muted); font-weight: 800;
  font-size: clamp(12px, 1.6vw, 15px); padding: 7px 14px; border-radius: 999px; cursor: pointer;
}
.seg button.on { background: #ffe082; color: #1a237e; }
.play {
  font: 800 clamp(18px, 2.4vw, 22px) 'Baloo 2', Nunito, sans-serif; padding: 10px 36px; border-radius: 999px; border: 0;
  background: linear-gradient(#34e0f5, #0096b8); color: #fff; cursor: pointer;
  box-shadow: 0 5px 0 #006f88, 0 10px 24px #0008;
}
.play:active { transform: translateY(3px); box-shadow: 0 2px 0 #006f88, 0 6px 16px #0008; }
.ghost {
  font-weight: 800; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, .06); color: var(--text); cursor: pointer;
}
.row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; align-items: center; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; width: 100%; }
.stats div { background: rgba(255, 255, 255, .06); border: 1px solid var(--line); border-radius: 12px; padding: 8px; }
.stats dt { color: var(--muted); font-size: 12px; font-weight: 700; }
.stats dd { font: 800 clamp(18px, 2.6vw, 24px) 'Baloo 2', Nunito, sans-serif; }
.ask { font-weight: 800; color: #ffe082; }

/* Tuning panel */
.tune {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 12; width: min(340px, 88%); overflow: auto;
  background: rgba(12, 14, 44, .95); border-left: 1px solid var(--line); padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.tune[hidden] { display: none; }
.tune-head { display: flex; justify-content: space-between; align-items: center; font-size: 17px; }
.tune-head button { border: 0; background: none; color: var(--text); font-size: 18px; cursor: pointer; }
.tune-note { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.tune-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; font-size: 13px; font-weight: 700; }
.tune-row output { font-variant-numeric: tabular-nums; color: #7af0ff; }
.tune-row input { grid-column: 1 / -1; width: 100%; accent-color: #26d7f0; }
.tune-actions button {
  flex: 1; font-weight: 800; font-size: 12.5px; padding: 8px 10px; border-radius: 10px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .06); color: var(--text); cursor: pointer;
}

/* Touch controls */
.touch { display: none; width: var(--stage-w); justify-content: space-between; align-items: center; gap: 16px; padding: 0 4px; user-select: none; -webkit-user-select: none; }
@media (pointer: coarse) {
  .touch { display: flex; }
}
@media (pointer: coarse) and (orientation: landscape) {
  .touch { position: fixed; left: 0; right: 0; bottom: max(8px, env(safe-area-inset-bottom)); width: 100%; padding: 0 max(14px, env(safe-area-inset-left)); pointer-events: none; z-index: 20; }
  .touch button { pointer-events: auto; opacity: .82; }
}
.touch-left, .touch-right { display: flex; align-items: center; gap: clamp(5px, 1.6vw, 12px); }
.touch button {
  touch-action: none; width: clamp(46px, 14vw, 76px); height: clamp(46px, 14vw, 76px); border-radius: 50%;
  border: 2px solid #3d5a75; background: #1a2430; color: #9fd6ff; font: 800 clamp(20px, 6vw, 28px) Nunito, sans-serif;
  box-shadow: 0 4px 16px #0008;
}
.touch button.small { width: clamp(36px, 10vw, 56px); height: clamp(36px, 10vw, 56px); font-size: 18px; }
.touch button.on { transform: scale(.94); background: #24384c; }
.touch .jump-btn { width: clamp(58px, 18vw, 96px); height: clamp(58px, 18vw, 96px); border-color: #00a8cc; background: #0b3a4a; color: #7af0ff; font-size: clamp(26px, 8vw, 36px); }
.touch .robot-btn { border-color: #69f0ae; background: #0b3a2a; color: #b9f6ca; }
.coop .touch .robot-btn { display: none; }
.touch .friend-btn { display: none; border-color: #ffb07c; background: #4a2416; color: #ffd470; }
.has-power .touch .friend-btn { display: inline-block; }
[data-power="shield"] .touch .friend-btn { border-color: #e0a26a; background: #3e2a14; color: #ffd8a0; }
[data-power="bubble"] .touch .friend-btn { border-color: #7ad8ff; background: #12324a; color: #c8f2ff; }

/* Small screens: menus cover the whole page instead of the small 16:9 stage. */
.rotate-tip { display: none; color: #7af0ff; font-weight: 800; font-size: 13px; }
@media (pointer: coarse) and (orientation: portrait) {
  .rotate-tip { display: block; }
}
@media (max-width: 720px), (max-height: 500px) {
  .overlay { position: fixed; z-index: 30; }
  .tune { position: fixed; z-index: 31; }
}
/* Portrait phones: the game is small, so the Robot's messages go in the free space below the buttons. */
@media (max-width: 720px) and (orientation: portrait) {
  .radio {
    position: fixed; top: auto; bottom: max(18px, env(safe-area-inset-bottom));
    width: min(92vw, 440px); max-width: none; transform: translate(-50%, 12px);
  }
  .radio.show { transform: translate(-50%, 0); }
  .radio-text { font-size: 16px; }
}

/* ── Game additions ─────────────────────────────────────────────────────── */
.hud-mid { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.friends { display: flex; gap: clamp(3px, .6vw, 6px); padding: clamp(2px, .4vw, 4px) clamp(6px, 1vw, 10px); background: var(--panel); border: 1px solid var(--line); border-radius: 999px; backdrop-filter: blur(6px); }
.friend { width: clamp(24px, 3.4vw, 40px); height: clamp(24px, 3.4vw, 40px); border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.06); border: 0; padding: 0; color: inherit; cursor: default; pointer-events: auto; touch-action: manipulation; }
.friend.found { cursor: pointer; }
.friend.on { box-shadow: 0 0 0 2px #ffd54f inset, 0 0 0 3px #fff, 0 0 14px rgba(255, 213, 79, .8); transform: scale(1.08); }
.friend img { width: 92%; height: auto; filter: grayscale(1) brightness(.55); opacity: .6; }
.friend.found { background: rgba(255, 213, 79, .25); box-shadow: 0 0 0 2px #ffd54f inset; }
.friend.found img { filter: none; opacity: 1; }
.word[hidden] { display: none; }
.radio-name { min-height: 1em; }
.radio[data-who="nova"] { border-color: rgba(255, 176, 124, .7); }
.radio[data-who="nova"] .radio-name { color: #ffb07c; }
.radio { cursor: pointer; }
.level-title {
  position: absolute; left: 50%; top: 38%; z-index: 4; transform: translate(-50%, -50%) scale(.96); opacity: 0;
  font: 800 clamp(22px, 4.4vw, 46px) 'Baloo 2', Nunito, sans-serif; color: #fff; text-shadow: 0 3px 0 #1b1640, 0 8px 24px #000a;
  pointer-events: none; white-space: nowrap;
}
.level-title.show { animation: titleCard 2.4s ease forwards; }
@keyframes titleCard { 0% { opacity: 0; transform: translate(-50%, -40%) scale(.96); } 15%, 75% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -56%) scale(1); } }
.toast {
  position: absolute; left: 50%; bottom: 6%; z-index: 7; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: linear-gradient(#ffe58a, #ffb300); color: #5a2a00; border: 2px solid #1b1640; border-radius: 16px;
  padding: 8px 18px; font: 800 clamp(14px, 2vw, 20px) 'Baloo 2', Nunito, sans-serif; box-shadow: 0 8px 26px #0009;
}
.toast.show { animation: toast 4s ease forwards; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, 20px); } 10%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, 10px); } }
.menu-friends { display: none; }
#menu .card { gap: clamp(7px, 1.2vw, 11px); }

/* The ending card */
.ending .card { text-align: center; }
.end-stars { font-size: clamp(28px, 6vw, 44px); color: #ffd54f; letter-spacing: .2em; text-shadow: 0 0 18px rgba(255, 213, 79, .8); }
.end-count { font: 800 clamp(1rem, 2.4vw, 1.3rem) Nunito, sans-serif; color: #ffe9a8; margin-top: 6px; }

/* The yes / no question before a rocket or the tower */
.question { z-index: 11; }
.question .card { width: min(460px, 100%); }
.question h2 { font-size: clamp(22px, 3.4vw, 32px); }
.question .row button { min-width: 8em; }
@media (pointer: coarse) { .question .note { display: none; } }