/* Root variables — ported from the Angular component's :host block so
   the copied app.css (which references var(--navy) etc.) works outside
   Angular's shadow-DOM emulation. */
:root {
  --navy:    #0B2D71;
  --blue:    #0066B2;
  --sky:     #009DD9;
  --deep:    #003653;
  --teal:    #00708C;
  --cyan:    #00B2BD;
  --olive:   #444B0D;
  --green:   #769231;
  --lime:    #B2CC34;
  --brown:   #711B00;
  --orange:  #E5601F;
  --amber:   #FAAB18;
  --wine:    #58001C;
  --magenta: #97002E;
  --red:     #E21836;
  --plum:    #3A0D36;
  --purple:  #751269;
  --pink:    #BA3093;
  --slate:   #6B6D6F;
  --gray:    #8C8F93;
  --mist:    #DBDCDD;
  --fs-xs:   11px;
  --fs-base: 14px;
  --fs-md:   20px;
  --fs-lg:   26px;

  /* ── Design tokens (added for the UI consistency pass) ──────────
     Spacing, radius, elevation and control heights were previously
     ad-hoc: 30+ padding values, 14 radii and 49 distinct shadows. */
  --fs-2xs:  10px;
  --fs-sm:   13px;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   18px;
  --r-xl:   22px;
  --r-pill: 999px;

  /* Navy-tinted elevation derived from the existing palette. */
  --el-1: 0 1px 2px rgba(0,22,44,0.16), 0 2px 8px rgba(0,22,44,0.10);
  --el-2: 0 2px 6px rgba(0,22,44,0.20), 0 8px 20px rgba(0,22,44,0.16);
  --el-3: 0 6px 14px rgba(0,22,44,0.24), 0 18px 40px rgba(0,22,44,0.22);

  --ctl-sm: 36px;
  --ctl-md: 40px;
  --ctl-lg: 44px;
}

/* Global reset, restored verbatim from the Angular project's global
   stylesheet. app.css is authored against border-box. */
* { box-sizing: border-box; }

html, body { min-height: 100%; margin: 0; }

body {
  background: #003653;
  color: #DBDCDD;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; }
button { touch-action: manipulation; }

/* Ports of the four Angular animation triggers that were declared in
   app.component.ts (tileList, groupReveal, endgameReveal, toast). All use
   compositor-only properties so no frame can trigger layout or paint. */
.anim-enter-tile {
  animation: anim-enter-tile 220ms ease-out both;
  animation-delay: calc(var(--stagger-index, 0) * 25ms);
}
@keyframes anim-enter-tile {
  from { opacity: 0; transform: translate3d(0, 12px, 0) scale(.94); }
  to   { opacity: 1; transform: translate3d(0, 0, 0)    scale(1);   }
}

/* Cluster reveal: fade + slight rise. The previous scaleY(0.15) squash
   read as a flash and distorted the text mid-animation. */
.anim-group-reveal {
  animation: anim-group-reveal 340ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes anim-group-reveal {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0);    }
}

.anim-endgame-reveal {
  animation: anim-endgame-reveal 480ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes anim-endgame-reveal {
  from { opacity: 0; transform: translate3d(0, 18px, 0) scale(0.97); }
  to   { opacity: 1; transform: translate3d(0, 0, 0)    scale(1);    }
}

.anim-toast-in  { animation: anim-toast-in  220ms ease-out both; }
.anim-toast-out { animation: anim-toast-out 170ms ease-in  both; }
@keyframes anim-toast-in {
  from { opacity: 0; transform: translate3d(-50%, -18px, 0) scale(.84); }
  to   { opacity: 1; transform: translate3d(-50%, 0, 0)     scale(1);   }
}
@keyframes anim-toast-out {
  from { opacity: 1; transform: translate3d(-50%, 0, 0)     scale(1);  }
  to   { opacity: 0; transform: translate3d(-50%, -10px, 0) scale(.9); }
}

/* Utility so we can hide sections without changing the [hidden]
   attribute semantics that assistive tech relies on. */
[hidden] { display: none !important; }