:root {
  --u: 1;
  --ink: #2a2440;
  --outline: #2f2a52;
  --cream: #fffdf6;
  --pink: #ff5fa2;
  --pink-dark: #e64a8c;
  --lav: #b49be0;
  --lav-light: #d7c8f4;
  --blue: #8fc7e8;
}

* { box-sizing: border-box; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #bfe3f0;
}

body {
  font-family: "Trebuchet MS", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: var(--ink);
}

/* ---- background: covers viewport, safe area centered (JS drives --u) ---- */
#bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image: url("assets/background.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: calc(2304px * var(--u)) calc(1152px * var(--u));
}

/* ---- safe stage: 16:9, centered, contains all UI in safe coordinates ---- */
#safe {
  position: fixed;
  left: 50%;
  top: 50%;
  width: calc(1536px * var(--u));
  height: calc(864px * var(--u));
  transform: translate(-50%, -50%);
  z-index: 1;
}

/* ---- character group ---- */
#charWrap {
  position: absolute;
  inset: 0;
  z-index: 2;
  transform-origin: calc(532px * var(--u)) calc(638px * var(--u));
  will-change: transform;
}

#charWrap.wiggling {
  animation: wiggle 1.2s ease-in-out;
}

@keyframes wiggle {
  0%   { transform: none; }
  25%  { transform: rotate(-3deg) translateX(calc(-8px * var(--u))); }
  75%  { transform: rotate(3deg) translateX(calc(8px * var(--u))); }
  100% { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  #charWrap.wiggling { animation: none; }
  #ring.show .ring-stroke { animation: none; stroke-dashoffset: 0; }
  #sparkle.flash { animation: none; opacity: 0; }
  #faceFound { transition: none; }
}

#char, #faceFound {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

#faceFound {
  opacity: 0;
  transition: opacity 260ms ease;
}

#faceFound.on { opacity: 1; }

/* ---- contact shadow ---- */
#shadow {
  position: absolute;
  left: calc(412px * var(--u));
  top: calc(623px * var(--u));
  width: calc(240px * var(--u));
  height: calc(34px * var(--u));
  z-index: 1;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(28, 48, 84, 0.34) 0%,
    rgba(28, 48, 84, 0.16) 55%,
    rgba(28, 48, 84, 0) 72%);
  pointer-events: none;
}

/* ---- pearl ring + sparkle ---- */
#ring {
  position: absolute;
  left: calc(468px * var(--u));
  top: calc(435px * var(--u));
  width: calc(120px * var(--u));
  height: calc(120px * var(--u));
  z-index: 3;
  opacity: 0;
  pointer-events: none;
}

#ring.show { opacity: 1; }

#ring .ring-stroke {
  fill: none;
  stroke: #ff3b4f;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 308;
  stroke-dashoffset: 308;
}

#ring.show .ring-stroke {
  animation: drawring 400ms ease-out forwards;
}

@keyframes drawring {
  to { stroke-dashoffset: 0; }
}

#sparkle {
  position: absolute;
  left: calc(560px * var(--u));
  top: calc(430px * var(--u));
  width: calc(64px * var(--u));
  height: calc(64px * var(--u));
  z-index: 3;
  opacity: 0;
  pointer-events: none;
}

#sparkle.flash {
  opacity: 1;
  animation: flash 700ms ease-out forwards;
}

#sparkle::before,
#sparkle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: #fff;
  box-shadow: 0 0 calc(8px * var(--u)) rgba(255,255,255,0.95);
}

#sparkle::before {
  width: calc(6px * var(--u));
  height: calc(40px * var(--u));
  transform: translate(-50%, -50%);
}

#sparkle::after {
  width: calc(40px * var(--u));
  height: calc(6px * var(--u));
  transform: translate(-50%, -50%);
}

@keyframes flash {
  0%   { opacity: 0; transform: scale(0.3) rotate(0deg); }
  35%  { opacity: 1; transform: scale(1) rotate(45deg); }
  100% { opacity: 0; transform: scale(1.4) rotate(45deg); }
}

/* ---- wordmark ---- */
#wordmark {
  position: absolute;
  left: calc(68px * var(--u));
  top: calc(48px * var(--u));
  z-index: 4;
}

#wordmark .brand-line {
  display: flex;
  align-items: center;
  gap: calc(14px * var(--u));
}

#wordmark .brand {
  font-weight: 800;
  font-size: calc(58px * var(--u));
  letter-spacing: calc(2px * var(--u));
  line-height: 1;
  color: var(--ink);
  text-shadow: 0 calc(1px * var(--u)) 0 rgba(255,255,255,0.55);
}

#wordmark .ticker {
  font-size: calc(20px * var(--u));
  font-weight: 800;
  letter-spacing: calc(1px * var(--u));
  color: #fff;
  background: var(--pink);
  padding: calc(6px * var(--u)) calc(12px * var(--u));
  border-radius: calc(8px * var(--u));
  box-shadow: 0 calc(2px * var(--u)) 0 var(--pink-dark);
}

#wordmark .tagline {
  margin-top: calc(8px * var(--u));
  font-size: calc(15px * var(--u));
  font-weight: 700;
  letter-spacing: calc(3px * var(--u));
  color: #5b5680;
}

/* ---- help balloon ---- */
#balloon {
  position: absolute;
  left: calc(908px * var(--u));
  top: calc(170px * var(--u));
  width: calc(590px * var(--u));
  z-index: 4;
  background: var(--cream);
  border: calc(3px * var(--u)) solid var(--outline);
  border-radius: calc(20px * var(--u));
  min-height: calc(380px * var(--u));
  box-shadow: 0 calc(18px * var(--u)) calc(38px * var(--u)) rgba(20, 30, 70, 0.30);
}

/* left-pointing triangular tail aimed toward Clitty (outline + fill) */
#balloon::before {
  content: "";
  position: absolute;
  left: calc(-30px * var(--u));
  top: calc(150px * var(--u));
  width: 0;
  height: 0;
  border-right: calc(30px * var(--u)) solid var(--outline);
  border-top: calc(23px * var(--u)) solid transparent;
  border-bottom: calc(23px * var(--u)) solid transparent;
}

#balloon::after {
  content: "";
  position: absolute;
  left: calc(-26px * var(--u));
  top: calc(150px * var(--u));
  width: 0;
  height: 0;
  border-right: calc(26px * var(--u)) solid var(--cream);
  border-top: calc(20px * var(--u)) solid transparent;
  border-bottom: calc(20px * var(--u)) solid transparent;
}

#balloonTitle {
  display: flex;
  align-items: center;
  gap: calc(10px * var(--u));
  background: var(--lav-light);
  border-bottom: calc(2px * var(--u)) solid var(--outline);
  border-radius: calc(16px * var(--u)) calc(16px * var(--u)) 0 0;
  padding: calc(12px * var(--u)) calc(20px * var(--u));
}

#balloonTitle .title-dot {
  width: calc(14px * var(--u));
  height: calc(14px * var(--u));
  background: var(--pink);
  border-radius: 50%;
  box-shadow: 0 0 calc(4px * var(--u)) var(--pink);
}

#balloonTitle .title-text {
  font-weight: 800;
  font-size: calc(19px * var(--u));
  letter-spacing: calc(1px * var(--u));
  color: var(--ink);
}

#balloonBody {
  padding: calc(30px * var(--u)) calc(38px * var(--u)) calc(26px * var(--u));
}

#question {
  margin: 0 0 calc(24px * var(--u));
  font-size: calc(27px * var(--u));
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}

#question .q1 { display: block; }
#question .q2 { display: block; margin-top: calc(10px * var(--u)); }

#question .search {
  font-size: calc(30px * var(--u));
  font-weight: 800;
  line-height: 1.25;
}

#question .dots {
  font-size: calc(30px * var(--u));
  font-weight: 800;
  line-height: 1.25;
  display: inline-block;
  min-width: 1.2em;
  letter-spacing: calc(2px * var(--u));
}

#btnHelp {
  font-family: inherit;
  width: 100%;
  font-size: calc(24px * var(--u));
  font-weight: 800;
  letter-spacing: calc(0.5px * var(--u));
  color: #1b2a52;
  background: linear-gradient(180deg, var(--pink) 0%, var(--pink-dark) 100%);
  border: calc(2px * var(--u)) solid var(--outline);
  border-radius: calc(12px * var(--u));
  padding: calc(17px * var(--u)) calc(22px * var(--u));
  cursor: pointer;
  box-shadow: calc(5px * var(--u)) calc(5px * var(--u)) 0 var(--outline);
}

#btnHelp:hover { filter: brightness(1.05); }
#btnHelp:active { transform: translateY(calc(2px * var(--u))); }
#btnHelp:focus-visible {
  outline: calc(3px * var(--u)) solid #1b4f9c;
  outline-offset: calc(3px * var(--u));
}
#btnHelp[disabled] {
  cursor: default;
  filter: grayscale(0.4) brightness(0.92);
}

#status {
  margin: calc(16px * var(--u)) 0 0;
  min-height: calc(26px * var(--u));
  font-size: calc(18px * var(--u));
  font-weight: 600;
  color: #6a6480;
}

#hint {
  margin: calc(8px * var(--u)) 0 0;
  font-size: calc(15px * var(--u));
  font-weight: 700;
  letter-spacing: calc(2px * var(--u));
  color: #9a94b2;
}

/* ---- launch actions (FOUND only) ---- */
#actions {
  margin-top: calc(22px * var(--u));
  display: flex;
  flex-wrap: wrap;
  gap: calc(12px * var(--u));
}

#actions[hidden] { display: none; }

.launch {
  font-family: inherit;
  font-size: calc(17px * var(--u));
  font-weight: 700;
  color: var(--ink);
  background: #f3eefb;
  border: calc(1.5px * var(--u)) solid #cfc3e8;
  border-radius: calc(10px * var(--u));
  padding: calc(10px * var(--u)) calc(14px * var(--u));
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: calc(8px * var(--u));
}

.launch .hint {
  font-size: calc(12px * var(--u));
  letter-spacing: calc(1px * var(--u));
  color: #fff;
  background: #9aa0b5;
  padding: calc(2px * var(--u)) calc(6px * var(--u));
  border-radius: calc(4px * var(--u));
}

.launch:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.launch:not(:disabled):hover { background: #e9e1f7; }
.launch:focus-visible {
  outline: calc(3px * var(--u)) solid #1b4f9c;
  outline-offset: calc(2px * var(--u));
}

#btnStart {
  color: #fff;
  background: #5c54b8;
  border-color: #5c54b8;
}
#btnStart:hover { background: #4b44a3; }