@charset "utf-8";

/* ============================================================================
   PIP  |  design system
   ----------------------------------------------------------------------------
   Reading: browser arcade game for casual desktop + mobile players.
   Language: "golden hour storybook". Hand-rolled Canvas 2D world, self-hosted
   display type, physics-driven juice. Deliberately not pixel-art retro and
   deliberately not neon synthwave: both are the default reach for this genre.

   Dials:  DESIGN_VARIANCE 8  |  MOTION_INTENSITY 9  |  VISUAL_DENSITY 3

   COLOUR ROLES (documented, three roles, each used identically everywhere)
     1. ink / cream ............ structure and all reading surfaces
     2. coral  #ff6b4a ......... THE brand accent. The bird, and every primary CTA.
                                 Nothing else. Never used for obstacles.
     3. jade   #3f9e6e ......... gameplay semantics ONLY. Obstacles. A player must
                                 be able to separate "danger" from "me" in 100ms,
                                 so danger gets its own locked hue.
     (gold appears only as medal tinting, a warm neighbour of the accent.)

   RADIUS SYSTEM (documented rule, not a free-for-all)
     panels .......... 28px
     controls ........ 999px (every button, every chip, every icon button)
     illustrated world 10px (pipes) - part of the drawing, not the interface

   CONTRAST
     Primary button is coral with ink text (6.1:1). Cream on coral is 2.7:1 and
     is therefore banned here. The game background animates through four sky
     phases from bright day to night, so any text sitting directly on the world
     gets an explicit scrim (see .screen--ready::before and .hud::before) rather
     than a hope that the sky stays dark.
   ========================================================================= */

/* ---------------------------------------------------------------- fonts --- */
@font-face {
  font-family: "Gabarito";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../assets/fonts/gabarito-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Gabarito";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../assets/fonts/gabarito-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/outfit-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/outfit-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------- tokens --- */
:root {
  --ink-900: #14131b;
  --ink-800: #1e1c28;
  --ink-700: #2b2839;
  --ink-600: #3b3750;

  --cream: #fdf6ec;
  --cream-70: rgba(253, 246, 236, 0.7);
  --cream-50: rgba(253, 246, 236, 0.5);
  --cream-14: rgba(253, 246, 236, 0.14);
  --cream-08: rgba(253, 246, 236, 0.08);

  --coral-400: #ff8a63;
  --coral-500: #ff6b4a;
  --coral-600: #e8502f;

  --jade-500: #3f9e6e;

  --r-panel: 28px;
  --r-control: 999px;

  --shadow-panel: 0 26px 60px -18px rgba(10, 9, 15, 0.7),
    0 2px 0 0 rgba(253, 246, 236, 0.07) inset;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --font-display: "Gabarito", "Trebuchet MS", system-ui, sans-serif;
  --font-ui: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;

  --pad-top: max(18px, env(safe-area-inset-top, 0px));
  --pad-bottom: max(18px, env(safe-area-inset-bottom, 0px));

  /* Written every frame by the game loop so the interface shakes with the world. */
  --shake-x: 0px;
  --shake-y: 0px;
  --shake-r: 0deg;
}

/* ---------------------------------------------------------------- reset --- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--ink-900);
  color: var(--cream);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

button { font: inherit; color: inherit; }

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

:focus-visible {
  outline: 3px solid var(--coral-400);
  outline-offset: 3px;
  border-radius: var(--r-control);
}

/* ----------------------------------------------------------------- shell --- */
.app {
  position: relative;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
}

.stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.ui {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  transform: translate3d(var(--shake-x), var(--shake-y), 0) rotate(var(--shake-r));
  will-change: transform;
}

.ui > * { pointer-events: auto; }

/* ------------------------------------------------------------------- HUD --- */
.hud {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  padding: var(--pad-top) clamp(14px, 4vw, 26px) 0;
  transform: translateZ(0);
  opacity: 0;
  visibility: hidden;
  transition: opacity 260ms var(--ease-out), visibility 260ms;
}

/* Readability scrim. The sky animates from bright day to night, so the cream
   numerals need a guaranteed floor to sit on rather than a lucky background. */
.hud::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 240px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 19, 27, 0.62), rgba(20, 19, 27, 0));
  opacity: 0;
  transition: opacity 400ms var(--ease-out);
}

.hud[data-visible="true"] { opacity: 1; visibility: visible; }
.hud[data-visible="true"]::before { opacity: 1; }

.hud__rail { display: flex; padding-top: 6px; }
.hud__rail:last-child { justify-content: flex-end; }

/* ------------------------------------------------------------- controls --- */
.icon-btn {
  position: relative;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--cream-14);
  border-radius: var(--r-control);
  background: rgba(20, 19, 27, 0.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--cream);
  cursor: pointer;
  transition: background 160ms, transform 140ms var(--ease-out), border-color 160ms;
}
.icon-btn:hover { background: rgba(20, 19, 27, 0.62); border-color: var(--cream-50); }
.icon-btn:active { transform: scale(0.93); }

.icon-btn__glyph {
  position: relative;
  display: block;
  width: 22px;
  height: 22px;
  color: currentColor;
}

/* Geometric glyphs. Built from rectangles, polygons and bordered arcs, so
   nothing here is a guessed-at icon path. */
.icon-btn__glyph[data-icon="pause"]::before,
.icon-btn__glyph[data-icon="pause"]::after {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  width: 5px;
  border-radius: 2px;
  background: currentColor;
}
.icon-btn__glyph[data-icon="pause"]::before { left: 4px; }
.icon-btn__glyph[data-icon="pause"]::after { right: 4px; }

.icon-btn__glyph[data-icon="sound"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 15px;
  height: 11px;
  background: currentColor;
  clip-path: polygon(0 26%, 34% 26%, 100% 0, 100% 100%, 34% 74%, 0 74%);
}
.icon-btn__glyph[data-icon="sound"]::after {
  content: "";
  position: absolute;
  right: 0;
  top: 4px;
  width: 9px;
  height: 15px;
  border: 2.5px solid currentColor;
  border-left: 0;
  border-radius: 0 var(--r-control) var(--r-control) 0;
  transition: all 180ms var(--ease-out);
}
.icon-btn[aria-pressed="false"] .icon-btn__glyph[data-icon="sound"]::after {
  right: -2px;
  top: 10px;
  width: 24px;
  height: 3px;
  border: 0;
  border-radius: 2px;
  background: currentColor;
  transform: rotate(-44deg);
}

/* ---------------------------------------------------------------- score --- */
.score {
  grid-column: 2;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(3rem, 8.4vw, 4.6rem);
  line-height: 1;
  color: var(--cream);
  letter-spacing: -0.02em;
  /* A 0.5 scrim is not enough when a white cloud drifts behind the numerals:
     measured 1.8:1. paint-order keeps the stroke behind the fill so the glyph
     is not thinned, and the outline gives the cream something dark to sit on
     no matter what the sky is doing. */
  paint-order: stroke fill;
  -webkit-text-stroke: 6px rgba(20, 19, 27, 0.62);
  text-shadow: 0 4px 0 rgba(20, 19, 27, 0.28), 0 12px 30px rgba(20, 19, 27, 0.5);
}

.score__digits { display: flex; }

.digit {
  position: relative;
  width: 0.6em;
  height: 1em;
  overflow: hidden;
}
.digit__col {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 480ms var(--ease-spring);
}
.digit__col > span {
  flex: none;
  height: 1em;
  display: grid;
  place-items: center;
}
.digit--enter { animation: digitIn 420ms var(--ease-spring) both; }
@keyframes digitIn {
  from { transform: translateY(-0.62em) scale(0.6); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* ---------------------------------------------------------------- screens --- */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: var(--pad-top) clamp(18px, 6vw, 40px) var(--pad-bottom);
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms var(--ease-out), visibility 300ms;
}
.screen.is-active { opacity: 1; visibility: visible; }

.screen[hidden] { display: none; }

.screen--ready {
  justify-content: space-between;
  align-items: center;
  text-align: center;
  padding-top: clamp(28px, 9vh, 84px);
  padding-bottom: clamp(24px, 7vh, 68px);
}

/* Scrim that guarantees the ready copy reads over all four sky phases and
   simultaneously pushes focus to the bird bobbing in the middle band. */
.screen--ready::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(20, 19, 27, 0.72) 0,
    rgba(20, 19, 27, 0.64) 220px,
    rgba(20, 19, 27, 0.5) 300px,
    rgba(20, 19, 27, 0.1) 430px,
    rgba(20, 19, 27, 0.26) 70%,
    rgba(20, 19, 27, 0.74) 100%
  );
}

.screen--center {
  justify-content: center;
  align-items: center;
}
.screen--scrim::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(20, 19, 27, 0.5);
  animation: scrimIn 340ms var(--ease-out) both;
}
@keyframes scrimIn { from { opacity: 0; } to { opacity: 1; } }

/* ------------------------------------------------------------- wordmark --- */
.ready__top,
.ready__bottom {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* A shrink-to-fit flex column inside a centred column collapses to its
     content width, which silently defeated .btn--wide and rendered the primary
     CTA 94px wide instead of 300px. Give these blocks a definite width. */
  width: 100%;
  max-width: 380px;
}

.wordmark {
  display: flex;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(4.4rem, 21vw, 9.5rem);
  line-height: 0.86;
  letter-spacing: -0.045em;
  color: var(--cream);
  paint-order: stroke fill;
  -webkit-text-stroke: 7px rgba(20, 19, 27, 0.5);
  text-shadow: 0 6px 0 rgba(20, 19, 27, 0.22), 0 22px 46px rgba(20, 19, 27, 0.45);
}
.wordmark > span {
  display: block;
  animation: letterBob 3.4s ease-in-out infinite;
}
.wordmark > span:nth-child(2) { animation-delay: 0.12s; }
.wordmark > span:nth-child(3) { animation-delay: 0.24s; }

@keyframes letterBob {
  0%, 100% { transform: translateY(0); }
  46% { transform: translateY(-0.055em); }
}

.lede {
  margin: 0.85rem 0 0;
  max-width: 30ch;
  font-size: clamp(0.95rem, 3.6vw, 1.1rem);
  font-weight: 500;
  line-height: 1.45;
  color: var(--cream);
  text-shadow: 0 1px 2px rgba(20, 19, 27, 0.9), 0 3px 14px rgba(20, 19, 27, 0.8);
}

.ready__bottom { gap: 14px; }

/* ----------------------------------------------------------------- chips --- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin: 0;
  padding: 0.5em 1.05em;
  border: 1px solid var(--cream-14);
  border-radius: var(--r-control);
  background: rgba(20, 19, 27, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--cream-70);
}
.chip b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1em;
  color: var(--cream);
}

/* --------------------------------------------------------------- buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 1.9rem;
  border: 0;
  border-radius: var(--r-control);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.06rem;
  letter-spacing: 0.005em;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 150ms var(--ease-out), box-shadow 200ms var(--ease-out),
    background 180ms, color 180ms, border-color 180ms;
}
.btn--wide { width: 100%; max-width: 300px; }
.btn:active { transform: translateY(2px) scale(0.985); }

/* ink on coral. Measured from the rendered button, coral-500 gave 4.38:1 for a
   17px label, just under AA for normal text. The fill therefore uses the
   lighter tint of the SAME accent (coral-400), which measures 7.9:1 against
   ink. The bird keeps coral-500; this is one hue at two lightnesses, not a
   second accent colour. cream on any coral is ~2.7:1 and stays banned. */
.btn--primary {
  background: var(--coral-400);
  color: var(--ink-900);
  box-shadow: 0 5px 0 0 var(--coral-600), 0 16px 34px -12px rgba(232, 80, 47, 0.8);
}
.btn--primary:hover {
  background: #ffa387;
  box-shadow: 0 5px 0 0 var(--coral-600), 0 20px 44px -12px rgba(232, 80, 47, 0.95);
}
.btn--primary:active { box-shadow: 0 2px 0 0 var(--coral-600), 0 8px 18px -10px rgba(232, 80, 47, 0.7); }

.btn--quiet {
  background: transparent;
  color: var(--cream);
  box-shadow: inset 0 0 0 1.5px var(--cream-14);
}
.btn--quiet:hover { background: var(--cream-08); box-shadow: inset 0 0 0 1.5px var(--cream-50); }

/* ---------------------------------------------------------------- panels --- */
.panel {
  position: relative;
  z-index: 1;
  width: min(100%, 380px);
  padding: 26px 24px 24px;
  border: 1px solid var(--cream-14);
  border-radius: var(--r-panel);
  background: linear-gradient(180deg, rgba(43, 40, 57, 0.86), rgba(20, 19, 27, 0.92));
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: var(--shadow-panel);
  text-align: center;
  animation: panelIn 440ms var(--ease-spring) both;
}
@keyframes panelIn {
  from { transform: translateY(22px) scale(0.94); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.panel--compact { width: min(100%, 320px); }

.panel__title {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.7rem;
  letter-spacing: -0.02em;
  color: var(--cream);
}
.panel__title--over { margin-bottom: 14px; }

.panel__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

/* ---------------------------------------------------------------- result --- */
.result {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 20px;
  text-align: left;
}

.medal { display: flex; flex-direction: column; align-items: center; gap: 7px; }

.medal__disc {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: var(--r-control);
  overflow: hidden;
  background: conic-gradient(from 205deg, var(--m1), var(--m2) 32%, var(--m3) 55%, var(--m2) 78%, var(--m1));
  box-shadow: inset 0 0 0 3px rgba(20, 19, 27, 0.24),
    inset 0 -9px 16px rgba(20, 19, 27, 0.34),
    inset 0 9px 14px rgba(255, 255, 255, 0.24),
    0 12px 22px -8px rgba(10, 9, 15, 0.75);
}
.medal__rings {
  position: absolute;
  inset: 11px;
  border-radius: var(--r-control);
  background: repeating-radial-gradient(
    circle at 50% 50%,
    rgba(20, 19, 27, 0.14) 0 1.5px,
    rgba(255, 255, 255, 0.12) 1.5px 3.5px
  );
  -webkit-mask: radial-gradient(circle, transparent 0 34%, #000 36%);
  mask: radial-gradient(circle, transparent 0 34%, #000 36%);
}
.medal__sheen {
  position: absolute;
  top: -60%;
  left: -130%;
  width: 60%;
  height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent);
  transform: rotate(20deg);
  animation: sheen 900ms 380ms var(--ease-out) both;
}
@keyframes sheen {
  from { left: -130%; }
  to { left: 170%; }
}

.medal[data-tier="none"]     { --m1: #5a5668; --m2: #3b3750; --m3: #7a7590; }
.medal[data-tier="bronze"]   { --m1: #c97f4c; --m2: #8f5530; --m3: #eeb98c; }
.medal[data-tier="silver"]   { --m1: #cfdae3; --m2: #93a4b3; --m3: #ffffff; }
.medal[data-tier="gold"]     { --m1: #f7c94e; --m2: #c98a12; --m3: #fff3bd; }
.medal[data-tier="platinum"] { --m1: #d6f7ff; --m2: #74b9d4; --m3: #ffffff; }

.medal[data-tier="none"] .medal__sheen { animation: none; opacity: 0; }

.medal__tier {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--cream-70);
}

.result__stats { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.result__row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.result__row dt {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cream-50);
}
.result__row dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
}

.badge-new {
  margin: 16px 0 0;
  padding: 0.5em 1em;
  border-radius: var(--r-control);
  background: var(--coral-500);
  color: var(--ink-900);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.84rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  animation: badgePop 620ms var(--ease-spring) both;
}
@keyframes badgePop {
  0% { transform: scale(0.5) rotate(-7deg); opacity: 0; }
  60% { transform: scale(1.08) rotate(1.5deg); opacity: 1; }
  100% { transform: none; }
}

/* ------------------------------------------------------------- responsive --- */
@media (max-height: 620px) {
  .wordmark { font-size: clamp(3.2rem, 15vw, 5.5rem); }
  .lede { margin-top: 0.5rem; font-size: 0.92rem; }
  .panel { padding: 20px 20px 18px; }
  .medal__disc { width: 68px; height: 68px; }
  .panel__title { font-size: 1.45rem; margin-bottom: 12px; }
}
@media (max-width: 420px) {
  .panel { padding: 22px 18px 18px; }
  .result { gap: 16px; }
  .medal__disc { width: 72px; height: 72px; }
  .result__row dd { font-size: 1.7rem; }
}

/* -------------------------------------------------------- reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .wordmark > span { animation: none; }
  .medal__sheen { display: none; }
  .ui { transform: none !important; }
}

@media (prefers-reduced-transparency: reduce) {
  .panel {
    background: var(--ink-800);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .icon-btn,
  .chip {
    background: var(--ink-800);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}