:root {
  --plum: #8A5A7A;
  --pink: #F28B95;
  --chip: rgba(255, 255, 255, 0.86);
  --chip-line: rgba(138, 90, 122, 0.18);
  --night-chip: rgba(42, 46, 96, 0.72);
  --gutter: max(12px, env(safe-area-inset-left));
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #FAD9D3;
  font: 500 15px/1.3 "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  color: var(--plum);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

body.night { background: #1C2150; }

#stage { position: fixed; inset: 0; touch-action: none; }
#stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#bg-night { opacity: 0; transition: opacity 1.2s ease; }
body.night #bg-night { opacity: 1; }

button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

#menu {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--chip);
  box-shadow: 0 2px 10px rgba(138, 90, 122, 0.15);
  transition: background 1.2s ease;
}
#menu button {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px 0 11px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  transition: background 0.2s, color 0.2s;
}
#menu button:hover { background: rgba(242, 139, 149, 0.15); }
#menu button[aria-pressed="true"] { background: var(--pink); color: #fff; }
#menu button:focus-visible, #pad button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

body.night #menu { background: var(--night-chip); color: #E9E3F6; }

#hint {
  position: fixed;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  margin: 0;
  padding: 9px 16px;
  max-width: calc(100% - 32px);
  border-radius: 999px;
  background: var(--chip);
  box-shadow: 0 2px 10px rgba(138, 90, 122, 0.15);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
#hint.gone { opacity: 0; }
body.night #hint { background: var(--night-chip); color: #E9E3F6; }

/* The satisfying button: does nothing much, very nicely. Moves up out of the way of the driving buttons. */
#satisfy {
  position: fixed;
  left: max(20px, env(safe-area-inset-left));
  bottom: max(22px, env(safe-area-inset-bottom));
  width: 62px;
  height: 62px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  /* The drooling face on a fuchsia rim, with a darker fuchsia side so it looks pressable. */
  background: #EC3F9E url("satisfy.svg?v=c3320b07") center / 100% no-repeat;
  box-shadow: 0 0 0 4px #EC3F9E, 0 6px 0 4px #A8156A, 0 9px 16px 4px rgba(142, 18, 87, 0.3);
  transition: transform 0.08s ease, box-shadow 0.08s ease, opacity 0.3s ease, bottom 0.3s ease;
}
#satisfy:active, #satisfy.pressed {
  transform: translateY(5px);
  box-shadow: 0 0 0 4px #EC3F9E, 0 1px 0 4px #A8156A, 0 3px 6px 4px rgba(142, 18, 87, 0.3);
}
#satisfy[aria-disabled="true"] { opacity: 0.55; cursor: default; }
#satisfy:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* The words are always in the page (invisible), so their font and layout are ready before the first press and the
   flight starts without a stutter. It's on its own layer for the same reason. */
#satisfy-text {
  position: fixed;
  left: max(16px, env(safe-area-inset-left));
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + 84px);
  margin: 0;
  /* A curly script from the device's own fonts: no download. */
  font: 700 25px/1.3 "Segoe Script", "Snell Roundhand", "Apple Chancery", "Brush Script MT", "Dancing Script", cursive;
  color: #D81B84;
  text-shadow: 0 1px 0 #fff, 0 0 10px rgba(255, 255, 255, 0.9);
  white-space: nowrap;
  pointer-events: none;
  transform-origin: 0 100%;
  opacity: 0;
  will-change: translate, scale, rotate, opacity;
}
/* Separate animations for moving, growing, swaying and fading, each on its own property with one easing from start
   to finish, so nothing changes speed with a jolt. The words drift off slowly and are gone (5.5 s) before the
   movement would have finished; the button comes back as soon as they've faded. */
#satisfy-text.poof {
  animation:
    poof-move 8s cubic-bezier(0.45, 0.05, 0.4, 1) forwards,
    poof-grow 8s cubic-bezier(0.45, 0, 0.55, 1) forwards,
    poof-sway 8s ease-in-out forwards,
    poof-fade 5.5s linear forwards;
}
@keyframes poof-move { from { translate: 0 16px; } to { translate: min(300px, 55vw) -220px; } }
@keyframes poof-grow { from { scale: 0.7; } to { scale: 2.6; } }
@keyframes poof-sway { 0% { rotate: -6deg; } 35% { rotate: 3deg; } 70% { rotate: -5deg; } 100% { rotate: -2deg; } }
@keyframes poof-fade { 0% { opacity: 0; } 10% { opacity: 1; } 38% { opacity: 1; } 100% { opacity: 0; } }

/* Glitter: little four-pointed stars that twinkle and drift around the words, only while they fly. */
#satisfy-text .glitter {
  position: absolute;
  width: var(--s);
  height: var(--s);
  background: var(--c);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  opacity: 0;
}
#satisfy-text.poof .glitter { animation: twinkle var(--d) ease-in-out var(--delay) infinite; }
@keyframes twinkle {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.2) rotate(0deg); }
  50%  { opacity: 1; transform: translate(calc(var(--dx) / 2), calc(var(--dy) / 2)) scale(1) rotate(90deg); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.2) rotate(180deg); }
}

/* Horn and lights for phones and tablets: see-through, so the snow and cars show behind them */
#pad {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  display: flex;
  gap: 12px;
}
#pad[hidden] { display: none; }
#pad button {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(138, 90, 122, 0.45);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  color: rgba(138, 90, 122, 0.9);
  touch-action: none;
  transition: background 0.15s, color 0.15s, transform 0.08s;
}
#pad button svg { width: 28px; height: 28px; stroke-width: 2.4; }
#pad button:active { transform: scale(0.92); }
#pad button.on, #pad button:active { background: rgba(242, 139, 149, 0.55); border-color: rgba(242, 139, 149, 0.9); color: #fff; }
body.night #pad button { background: rgba(255, 255, 255, 0.1); border-color: rgba(233, 227, 246, 0.5); color: rgba(233, 227, 246, 0.9); }
body.night #pad button.on, body.night #pad button:active { background: rgba(242, 139, 149, 0.5); border-color: rgba(242, 139, 149, 0.9); color: #fff; }

@media (max-width: 480px) {
  #hint { bottom: calc(max(18px, env(safe-area-inset-bottom)) + 84px); }  /* clear of the satisfying button */
  #menu button { padding: 0 11px; }
  #menu button span { display: none; }
}

@media (min-width: 900px) and (min-height: 700px) {
  #pad button { width: 68px; height: 68px; }
}

.noscript { position: fixed; inset: auto 0 40% 0; text-align: center; }