/* ------------------------------------------------------------------
   AIIMS · Population of India board

   Sizing is driven by HEIGHT, not width. On a 16:9 board 1vh ≈ 0.5625vw,
   so min(Xvh, Yvw) keeps the board full on wide screens without ever
   overflowing narrow ones. Every row grows to fill the frame — that is
   what stops the dead space at top and bottom.

   Palette  jet #000000 · brass #C9A02E · red #FF1414
            blue #2E86DE · blue-dim #1B4E85 · paper #FFFFFF
   ------------------------------------------------------------------ */

:root {
  --jet:       #000000;
  --brass:     #C9A02E;
  --brass-dim: #7A5F16;
  --red:       #FF1414;
  --blue:      #2E86DE;
  --blue-dim:  #1B4E85;
  --paper:     #FFFFFF;
  --steel:     #9AA6B8;

  --digit-size: clamp(26px, min(19vh, 8.6vw), 460px);
  --digit-h: 1.16em;
  --digit-w: .70em;
}

/* The dial that scales the whole board. */
html { font-size: clamp(11px, min(2.05vh, 1.16vw), 46px); }

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  background: #000;
  color: var(--paper);
  font-family: Archivo, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.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;
}

/* --- board ------------------------------------------------------- */

.board {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--jet);
  border: 2px solid var(--brass-dim);
  border-radius: .4rem;
  margin: .4rem;
  overflow: hidden;
}

/* --- header ------------------------------------------------------ */

.crest {
  flex: none;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .55rem 1.2rem;
  border-bottom: 2px solid var(--brass);
}

.crest__seal { height: 7.4rem; width: auto; flex: none; }

.crest__names { flex: 1; text-align: center; padding-right: 3rem; }

.crest__en {
  margin: 0;
  font-size: 3.5rem;
  font-weight: 800;
  font-stretch: 82%;
  letter-spacing: .004em;
  line-height: 1;
  text-transform: uppercase;
}

.crest__hi {
  margin: .06em 0 0;
  font-family: "Noto Sans Devanagari", system-ui, sans-serif;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: .03em;
}

/* --- body -------------------------------------------------------- */

.body {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: stretch;       /* both columns run the full height */
  padding: 1rem 1.1rem 1rem .4rem;
  gap: 1.1rem;
}

.flag {
  flex: none;
  width: 23%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .5rem 1.8rem .5rem .5rem;
  border-right: 2px solid var(--brass);
  min-height: 0;
}

/* fill the column vertically — this is what makes the flag read big */
.flag object {
  width: 100%;
  height: 100%;
  pointer-events: none;          /* the board is not interactive */
}

.panel {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;   /* spreads the slack top, middle and bottom */
  gap: .5rem;
}

/* --- banner ------------------------------------------------------ */

.banner {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .9rem;
}

.banner__lead {
  flex: 1;
  height: .5rem;
  max-width: 8rem;
  background:
    radial-gradient(circle at .25rem 50%, var(--brass) .25rem, transparent .26rem),
    linear-gradient(90deg, transparent 0 .55rem, var(--brass) .55rem 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%, 100% 2px;
  background-position: 0 0, 0 50%;
}

.banner__lead--r { transform: scaleX(-1); }

.banner__text {
  margin: 0;
  font-size: 3.9rem;
  font-weight: 800;
  font-stretch: 82%;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1;
  padding: .24em 1.2em;
  border: 2px solid var(--brass);
  border-radius: .5rem;
  white-space: nowrap;
}

/* --- count ------------------------------------------------------- */

/* grows to absorb whatever height is left, so nothing is stranded */
.count {
  flex: none;                   /* hugs the number instead of stretching */
  min-height: 0;
  border: 2px solid var(--brass);
  border-radius: .7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .3rem .9rem;
}

.odometer {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--digit-size);
  font-weight: 800;
  font-stretch: 82%;
  line-height: 1;
  height: var(--digit-h);
  color: var(--red);
  user-select: none;
}

.odometer__loading {
  font-size: .14em;
  font-weight: 700;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--steel);
}

.digit {
  height: var(--digit-h);
  width: var(--digit-w);
  overflow: hidden;
  position: relative;
  flex: none;
}

.reel {
  display: block;
  transition: transform .4s cubic-bezier(.22, 1, .3, 1);
  will-change: transform;
}

.reel span {
  display: block;
  height: var(--digit-h);
  line-height: var(--digit-h);
  text-align: center;
}

.sep {
  flex: none;
  width: .32em;
  height: var(--digit-h);
  line-height: var(--digit-h);
  text-align: center;
  transform: translateY(-.09em);
}

/* --- date / time tiles ------------------------------------------- */

.tiles { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.tile {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.75rem 1.3rem;
  border: 2px solid var(--blue);
  border-radius: .6rem;
}

.tile__icon { flex: none; width: 4.8rem; height: 4.8rem; }
.tile__icon svg { width: 100%; height: 100%; display: block; }

.tile__bar { flex: none; width: 2px; align-self: stretch; background: var(--blue-dim); }

.tile__body { display: flex; flex-direction: column; line-height: 1; min-width: 0; }

.tile__label {
  font-size: 2rem;
  font-weight: 800;
  font-stretch: 82%;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.tile__label em {
  font-style: normal;
  font-size: .58em;
  letter-spacing: .16em;
  color: var(--steel);
  margin-left: .5em;
}

.tile__value {
  margin-top: .1em;
  font-size: 4.5rem;
  font-weight: 800;
  font-stretch: 82%;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

/* --- narrow / portrait ------------------------------------------- */

@media (max-width: 900px), (orientation: portrait) {
  body { overflow: auto; }
  html { font-size: clamp(12px, 3.4vw, 26px); }
  .board { height: auto; min-height: calc(100% - .8rem); }
  .crest { flex-direction: column; gap: .6rem; padding: .9rem; text-align: center; }
  .crest__seal { height: 4.6rem; }
  .crest__names { padding-right: 0; }
  .crest__en { font-size: 1.55rem; }
  .crest__hi { font-size: 1.25rem; }
  .body { flex-direction: column; padding: 1rem; gap: 1rem; }
  .flag { width: 100%; height: 34vh; border-right: 0;
          border-bottom: 2px solid var(--brass); padding: 0 0 .9rem; }
  .banner__lead { display: none; }
  .banner__text { font-size: 1.5rem; white-space: normal; }
  .count { flex: none; padding: .5rem; }
  .tiles { grid-template-columns: 1fr; }
  :root { --digit-size: clamp(24px, 8.8vw, 60px); }
}

@media (prefers-reduced-motion: reduce) { .reel { transition: none; } }