:root {
  --u: 2;
  --ink: #3a2440;
  --bg: #1d1426;
  --boy: #5ab4ff;
  --girl: #ff7eb6;
  --gold: #ffd84a;
  --mint: #8fe0c0;
  --lav: #c9b2ff;
  --px: calc(var(--u) * 1px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; height: 100%;
  background: var(--bg);
  color: #fff;
  font-family: 'Press Start 2P', ui-monospace, Menlo, Consolas, monospace;
  overflow: hidden;
  overscroll-behavior: none;
}
body { touch-action: none; user-select: none; -webkit-user-select: none; }
body.is-boy { background: #12304d; }
body.is-girl { background: #4a1530; }

button { font-family: inherit; cursor: pointer; }
.hidden { display: none !important; }
.dim { opacity: .75; }
.small { font-size: calc(var(--px) * 6); }

#app {
  position: fixed; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

#screen {
  position: relative;
  width: calc(var(--px) * 256);
  height: calc(var(--px) * 224);
  overflow: hidden;
  box-shadow: 0 0 0 calc(var(--px) * 2) #000, 0 calc(var(--px) * 4) calc(var(--px) * 20) rgba(0, 0, 0, .6);
  border-radius: calc(var(--px) * 2);
}

#game {
  display: block; width: 100%; height: 100%;
  image-rendering: pixelated; image-rendering: crisp-edges;
  background: #000;
}

/* text with a chunky SNES outline */
.outline, .hud, .banner, .reveal, .logo, .sub, .parents, .message, .help {
  text-shadow:
    var(--px) 0 0 var(--ink), calc(var(--px) * -1) 0 0 var(--ink),
    0 var(--px) 0 var(--ink), 0 calc(var(--px) * -1) 0 var(--ink),
    var(--px) var(--px) 0 var(--ink), calc(var(--px) * 2) calc(var(--px) * 2) 0 var(--ink);
}

/* ---------------------------------------------------------------- HUD */
.hud {
  position: absolute; left: 0; right: 0; top: calc(var(--px) * 8);
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 0 calc(var(--px) * 12);
  font-size: calc(var(--px) * 8);
  line-height: 1.3;
  pointer-events: none;
}
.hud > div { display: flex; flex-direction: column; }
.hud-c { flex-direction: row !important; align-items: center; gap: calc(var(--px) * 2); padding-top: calc(var(--px) * 4); }
.hud-r { align-items: flex-end; }
#hud-name { color: var(--gold); max-width: calc(var(--px) * 90); overflow: hidden; white-space: nowrap; text-overflow: clip; }
#hud-paci { width: calc(var(--px) * 12); height: calc(var(--px) * 12); image-rendering: pixelated; }

.skip {
  position: absolute; right: calc(var(--px) * 8); top: calc(var(--px) * 30);
  font-size: calc(var(--px) * 6); color: var(--ink); background: var(--gold);
  border: calc(var(--px) * 1) solid var(--ink); padding: calc(var(--px) * 3) calc(var(--px) * 4);
  box-shadow: 0 calc(var(--px) * 2) 0 var(--ink);
}

/* ---------------------------------------------------------------- banners */
.banner {
  position: absolute; left: 0; right: 0; top: 38%;
  text-align: center;
  font-size: calc(var(--px) * 12);
  line-height: 1.6;
  pointer-events: none;
}
.banner .small { display: block; margin-top: calc(var(--px) * 6); font-size: calc(var(--px) * 7); }
.banner.intro { top: 30%; }
.banner.intro .world { font-size: calc(var(--px) * 12); }
.banner.intro .dim { margin-top: calc(var(--px) * 48); }
.banner.clear { color: var(--gold); top: 30%; animation: pop .5s steps(5) both; font-size: calc(var(--px) * 14); }
.banner.ask { top: 18%; font-size: calc(var(--px) * 10); animation: wobble 1s steps(4) infinite; }
.banner.count { top: 10%; font-size: calc(var(--px) * 40); color: var(--gold); animation: pop .4s steps(4) both; }
.banner.pause { top: 44%; }

@keyframes pop { from { transform: scale(2.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes wobble { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(var(--px) * -3)); } }

/* ---------------------------------------------------------------- reveal */
.reveal {
  position: absolute; left: 0; right: 0; top: 8%;
  text-align: center; pointer-events: none;
  animation: pop .6s steps(6) both;
}
.reveal .its { font-size: calc(var(--px) * 12); }
.reveal .word { font-size: calc(var(--px) * 30); margin-top: calc(var(--px) * 6); }
.reveal .sis { font-size: calc(var(--px) * 8); margin-top: calc(var(--px) * 8); color: #fff; animation: pop .5s steps(5) 1.2s both; }
.reveal .word span { display: inline-block; animation: bounce 0.9s ease-in-out infinite; }
.reveal.boy .word { color: var(--boy); }
.reveal.girl .word { color: var(--girl); }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(calc(var(--px) * -8)); } }

/* ---------------------------------------------------------------- overlays */
.overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}

.panel {
  background: rgba(36, 22, 54, .88);
  border: calc(var(--px) * 2) solid #fff;
  outline: calc(var(--px) * 1) solid var(--ink);
  box-shadow: inset 0 0 0 calc(var(--px) * 1) var(--ink), 0 calc(var(--px) * 3) 0 rgba(0, 0, 0, .35);
  border-radius: calc(var(--px) * 4);
  padding: calc(var(--px) * 8) calc(var(--px) * 10);
}

.title { justify-content: flex-start; padding-top: calc(var(--px) * 10); gap: calc(var(--px) * 4); background: linear-gradient(to bottom, rgba(29, 20, 38, 0) 0%, rgba(29, 20, 38, .15) 100%); }
.logo { text-align: center; line-height: 1.15; }
.logo .l1 { font-size: calc(var(--px) * 11); letter-spacing: calc(var(--px) * 2); }
.logo .l2 { font-size: calc(var(--px) * 18); }
.logo span { display: inline-block; animation: bob 1.6s steps(4) infinite; }
.logo .l1 { margin-bottom: calc(var(--px) * 3); }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(var(--px) * -2)); } }
.logo span:nth-child(5n+1) { color: var(--gold); animation-delay: 0s; }
.logo span:nth-child(5n+2) { color: var(--mint); animation-delay: .1s; }
.logo span:nth-child(5n+3) { color: var(--girl); animation-delay: .2s; }
.logo span:nth-child(5n+4) { color: var(--boy); animation-delay: .3s; }
.logo span:nth-child(5n+5) { color: var(--lav); animation-delay: .4s; }
.sub { font-size: calc(var(--px) * 6); color: #fff; }
.parents { font-size: calc(var(--px) * 7); color: var(--gold); min-height: 0; }
.playas { color: var(--mint); }
.parents:empty, .message:empty { display: none; }
.message { font-size: calc(var(--px) * 5); color: #fff; text-align: center; max-width: 90%; }

form.panel {
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--px) * 4);
  width: calc(var(--px) * 196);
  margin-top: calc(var(--px) * 2);
  padding: calc(var(--px) * 6) calc(var(--px) * 8);
}
label { font-size: calc(var(--px) * 6); color: var(--gold); }
input {
  font-family: inherit;
  font-size: max(16px, calc(var(--px) * 8));
  width: 100%;
  text-align: center; text-transform: uppercase;
  padding: calc(var(--px) * 3);
  color: var(--ink); background: #fff8ea;
  border: calc(var(--px) * 1) solid var(--ink);
  border-radius: calc(var(--px) * 2);
  outline: none;
  user-select: text; -webkit-user-select: text;
}
input:focus { box-shadow: 0 0 0 calc(var(--px) * 1) var(--gold); }

.guess { display: flex; gap: calc(var(--px) * 6); width: 100%; }
.g {
  flex: 1;
  font-size: calc(var(--px) * 7);
  padding: calc(var(--px) * 4) 0;
  color: #fff;
  border: calc(var(--px) * 1) solid var(--ink);
  border-radius: calc(var(--px) * 3);
  box-shadow: 0 calc(var(--px) * 2) 0 var(--ink);
  opacity: .55;
  transition: transform .08s;
  text-shadow: var(--px) var(--px) 0 var(--ink);
}
.g.boy { background: var(--boy); }
.g.girl { background: var(--girl); }
.g.sel { opacity: 1; transform: translateY(calc(var(--px) * -1)); outline: calc(var(--px) * 1) solid #fff; }

.btn.start {
  font-size: calc(var(--px) * 8);
  padding: calc(var(--px) * 4) calc(var(--px) * 12);
  color: var(--ink); background: var(--gold);
  border: calc(var(--px) * 1) solid var(--ink);
  border-radius: calc(var(--px) * 3);
  box-shadow: 0 calc(var(--px) * 2) 0 var(--ink);
}
.btn.start:active, .g:active { transform: translateY(var(--px)); box-shadow: 0 var(--px) 0 var(--ink); }
.btn.start:disabled { opacity: .6; }
.msg { font-size: calc(var(--px) * 5); color: #ffb0b0; text-align: center; line-height: 1.5; min-height: calc(var(--px) * 5); }
.help { font-size: calc(var(--px) * 5); color: #fff; margin-top: auto; margin-bottom: calc(var(--px) * 6); }
body.touch .help.keys { display: none; }

/* results */
.results { justify-content: flex-end; padding-bottom: calc(var(--px) * 8); animation: rise .5s steps(5) both; }
@keyframes rise { from { transform: translateY(40%); opacity: 0; } to { transform: none; opacity: 1; } }
.results .panel {
  width: calc(var(--px) * 236);
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--px) * 5);
  text-align: center; font-size: calc(var(--px) * 6); line-height: 1.6;
}
.you b { color: var(--gold); }
.you .boy { color: var(--boy); }
.you .girl { color: var(--girl); }
.you .win { color: var(--gold); font-size: calc(var(--px) * 8); }
.you .lose { color: #fff; font-size: calc(var(--px) * 7); }
.tally { width: 100%; }
.bar { display: flex; height: calc(var(--px) * 8); border: calc(var(--px) * 1) solid #fff; background: #000; }
.b-boy { background: var(--boy); transition: width 1s steps(10); width: 0; }
.b-girl { background: var(--girl); transition: width 1s steps(10); width: 0; margin-left: auto; }
.tally-l { display: flex; justify-content: space-between; font-size: calc(var(--px) * 5); margin-top: calc(var(--px) * 2); }
.tally-l span:first-child { color: var(--boy); }
.tally-l span:last-child { color: var(--girl); }
.winners { font-size: calc(var(--px) * 5); max-height: calc(var(--px) * 34); overflow: hidden; }
.winners .lbl { color: var(--gold); margin-bottom: calc(var(--px) * 2); }
.winners span { white-space: nowrap; margin: 0 calc(var(--px) * 2); }

/* ---------------------------------------------------------------- sound */
.mute {
  position: fixed; right: 12px; top: calc(12px + env(safe-area-inset-top));
  width: 40px; height: 40px;
  font-size: 14px; color: #fff;
  background: rgba(255, 255, 255, .12); border: 2px solid rgba(255, 255, 255, .4); border-radius: 8px;
  z-index: 5;
}

/* ---------------------------------------------------------------- touch controls */
.touch-ui { display: none; }
body.touch .touch-ui {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; max-width: 560px; height: 190px;
  padding: 10px 22px calc(10px + env(safe-area-inset-bottom));
}
body.touch:not(.portrait) .touch-ui {
  position: fixed; left: 0; right: 0; bottom: 0; max-width: none; height: auto;
  padding: 0 calc(16px + env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
  pointer-events: none;
}
body.touch:not(.portrait) .touch-ui > * { pointer-events: auto; opacity: .8; }

.dpad {
  position: relative;
  width: 150px; height: 80px;
  display: flex; align-items: center; justify-content: space-between;
  background: #2c2238; border: 3px solid #4d3d61; border-radius: 40px;
  box-shadow: 0 5px 0 #0e0914;
  touch-action: none;
}
.dpad .arr { flex: 1; text-align: center; font-size: 28px; color: #bba8d6; line-height: 80px; }
.dpad[data-dir="l"] .arr.l, .dpad[data-dir="r"] .arr.r { color: #fff; text-shadow: 0 0 10px #fff; }

.ab { display: flex; gap: 14px; align-items: center; transform: rotate(-12deg); }
.tbtn {
  width: 74px; height: 74px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font-size: 22px; color: #fff;
  border: 3px solid rgba(0, 0, 0, .35);
  box-shadow: 0 5px 0 #0e0914;
  touch-action: none;
}
.tbtn small { font-size: 7px; opacity: .85; }
.tbtn.a { background: #e8504a; margin-top: -26px; }
.tbtn.b { background: #f2b630; }
.tbtn.on { transform: translateY(4px); box-shadow: 0 1px 0 #0e0914; filter: brightness(1.2); }