@font-face {
  font-family: 'Bowlby One';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('assets/fonts/BowlbyOne-Regular.woff2') format('woff2');
}

:root {
  --ink: #141414;
  --yel: #F5E52A;
  --shadow: #1d2a6b;
  --sky: #BBE5F1;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--sky);
  font-family: system-ui, sans-serif;
}

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

.letter {
  font-family: 'Bowlby One', sans-serif;
  color: var(--yel);
  -webkit-text-stroke: .07em var(--ink);
  paint-order: stroke fill;
  text-shadow: .07em .08em 0 var(--shadow);
}

/* ---------- stage / coordinate boxes ---------- */
#clip {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 1;
}
#stage {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 300ms linear;
  will-change: transform;
}
body.ready #stage { opacity: 1; }

#bg {
  position: absolute;
  left: 0; top: 0;
  width: 2272px; height: 960px;
  transform-origin: 0 0;
  will-change: transform;
}
#bg img { width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; }

#safe {
  position: absolute;
  left: 0; top: 0;
  width: 1376px; height: 768px;
  transform-origin: 0 0;
  will-change: transform;
}

.layerimg {
  position: absolute;
  left: 0; top: 0;
  width: 1376px; height: 768px;
  user-select: none;
  -webkit-user-drag: none;
}

/* ---------- hero ---------- */
#hero {
  position: absolute;
  left: 0; top: 0;
  width: 1376px; height: 768px;
  transform-origin: 688px 768px;
  transform: scale(.88);
  will-change: transform;
}
#heroInner {
  position: absolute;
  inset: 0;
  transform-origin: 688px 768px;
  animation: breathe 4s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.004); }
}
#hair {
  transform-origin: 676px 202px;
  will-change: transform;
}

/* ---------- thought bubble + dots ---------- */
#fxBubble { display: none; transform-origin: 880px 230px; }
#fxDot1 { display: none; transform-origin: 804px 279px; }
#fxDot2 { display: none; transform-origin: 840px 257px; }
#fxDot3 { display: none; transform-origin: 882px 232px; }

#flecks, #pile, #looseWrap { pointer-events: none; }

.fleck {
  position: absolute;
  background: #fff;
  border: 1.5px solid var(--ink);
  border-radius: 45% 55% 50% 50%;
  transform: translate(-50%, -50%);
}

/* ---------- title + letters ---------- */
#title {
  position: absolute;
  left: 0; top: 24px;
  width: 1376px;
  text-align: center;
  display: none;
  will-change: transform, opacity;
}
#title .ltr {
  display: inline-block;
  font-size: 118px;
  line-height: 1;
  letter-spacing: -.01em;
  white-space: nowrap;
  transform: skewX(-7deg);
}

.looseE, .pileE {
  position: absolute;
  left: 0; top: 0;
  font-size: 118px;
  line-height: 1;
  transform-origin: 0 0;
  will-change: transform, opacity;
}

/* ---------- HUD ---------- */
#hud {
  position: absolute;
  left: 52px; top: 582px;
}
#hud small {
  display: block;
  font-family: system-ui, sans-serif;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .08em;
  color: var(--ink);
  margin-bottom: 6px;
}
#thoughts { display: inline-block; font-size: 34px; line-height: 1; }
#attempts {
  font-family: system-ui, sans-serif;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .06em;
  color: var(--ink);
  margin-top: 6px;
}

/* ---------- CTA ---------- */
#ctaWrap {
  position: absolute;
  left: 0; top: 618px;
  width: 1376px;
  display: flex;
  justify-content: center;
  animation: bob 3.4s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
#cta {
  font-family: 'Bowlby One', sans-serif;
  font-size: 40px;
  line-height: 1;
  padding: 12px 44px 16px;
  background: var(--yel);
  color: var(--ink);
  border: 5px solid var(--ink);
  border-radius: 18px;
  box-shadow: 7px 8px 0 var(--shadow);
  cursor: pointer;
}
#cta:disabled { cursor: default; }
#cta:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }

/* ---------- flash ---------- */
#flash {
  position: fixed;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  z-index: 20;
}

/* ---------- header ---------- */
header {
  position: fixed;
  left: 0; right: 0; top: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 2.2vh 2.4vw;
  z-index: 30;
  pointer-events: none;
}
header .brand {
  font-size: calc(30px * var(--hk, 1));
  line-height: 1;
}
header nav {
  display: flex;
  gap: calc(12px * var(--hk, 1));
  align-items: center;
  pointer-events: none;
}
header nav > *, header nav .caWrap > * { pointer-events: auto; }

.chip {
  display: inline-flex;
  align-items: center;
  font-family: 'Bowlby One', sans-serif;
  font-size: calc(18px * var(--hk, 1));
  line-height: 1;
  text-decoration: none;
  color: var(--ink);
  background: #fff;
  border: calc(3px * var(--hk, 1)) solid var(--ink);
  border-radius: 12px;
  padding: .35em .8em .45em;
  box-shadow: calc(4px * var(--hk, 1)) calc(5px * var(--hk, 1)) 0 var(--shadow);
  cursor: pointer;
}
.chip.ca { background: var(--yel); }
.chip:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.chip[aria-disabled="true"], .chip:disabled {
  color: #8b8b8b;
  background: #e8e8e8;
  box-shadow: none;
  cursor: not-allowed;
}

#mute {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(36px * var(--hk, 1));
  height: calc(36px * var(--hk, 1));
  padding: 0;
  color: var(--ink);
  background: #fff;
  border: calc(3px * var(--hk, 1)) solid var(--ink);
  border-radius: 12px;
  box-shadow: calc(4px * var(--hk, 1)) calc(5px * var(--hk, 1)) 0 var(--shadow);
  cursor: pointer;
}
#mute:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
#mute svg { width: calc(20px * var(--hk, 1)); height: calc(20px * var(--hk, 1)); }
#mute .ic-off, #mute[aria-pressed="true"] .ic-on { display: none; }
#mute[aria-pressed="true"] .ic-off { display: block; }

.caWrap { position: relative; }
#copyStatus {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  margin-top: 6px;
  white-space: nowrap;
  font-family: 'Bowlby One', sans-serif;
  font-size: calc(14px * var(--hk, 1));
  color: var(--ink);
  background: var(--yel);
  border: 3px solid var(--ink);
  border-radius: 10px;
  padding: .2em .6em;
  opacity: 0;
  transition: opacity 150ms linear;
}
#copyStatus.show { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  #heroInner { animation: none; }
  #ctaWrap { animation: none; }
}