/* Herald · Cascade — dark theme, right-side HUD column. Built from
   light: dark fills stay clear on the additive display, brighter cells
   pop. */

.c-stack { display: flex; flex-direction: column; gap: 6px; height: 100%; }

.c-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
  padding: 2px 0;
}

.c-board {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(18, 1fr);
  gap: 2px;
  height: 100%;
  max-height: 100%;
  aspect-ratio: 10 / 18;
  padding: 7px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--line);
}
.c-cell { border-radius: 3px; }

/* Right-side HUD column. */
.c-side {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 132px;
  align-self: stretch;
  padding: 2px 0;
}

.c-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 8px 6px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
}
.c-chip-k {
  font-size: 10px;
  font-weight: 800;
  color: var(--text-muted, rgba(255,255,255,0.55));
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.c-chip-v {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary, #fff);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

/* Score chip — bigger, yellow accent. */
.c-chip-score .c-chip-v {
  font-size: 32px;
  color: #ffd23c;
  text-shadow: 0 0 12px rgba(255,210,60,0.35);
}

/* Best + Level side-by-side. */
.c-side-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.c-side-row .c-chip { padding: 7px 4px 8px; gap: 0; }
.c-side-row .c-chip-v { font-size: 20px; }

/* Next chip with mini 4×4 grid. */
.c-chip-next { align-items: center; gap: 6px; }
.c-next {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 2px;
  width: 72px;
  height: 72px;
}
.c-ncell { border-radius: 2px; }

/* Tetromino palette — bright so it reads on the additive screen. */
.c-p1 { background: #52d9ff; }            /* I */
.c-p2 { background: #ffd166; }            /* O */
.c-p3 { background: #b06bff; }            /* T */
.c-p4 { background: #34d399; }            /* S */
.c-p5 { background: #ff6b81; }            /* Z */
.c-p6 { background: #6aa8ff; }            /* J */
.c-p7 { background: #ff8f6a; }            /* L */

/* subtle sheen on filled cells */
.c-cell[class*="c-p"], .c-ncell[class*="c-p"] {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35),
              inset 0 -2px 0 rgba(0,0,0,0.18);
}

.c-over {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 14px;
  background: var(--iri), var(--frost-1);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--frost-border);
  box-shadow: var(--frost-inset), var(--frost-shadow);
}
.c-over.hidden { display: none; }
.c-over-t { font-size: 26px; font-weight: 800; color: var(--text-primary); }
.c-over-s { font-size: 15px; font-weight: 600; color: var(--text-secondary); margin-top: -4px; }

.c-foot {
  flex-shrink: 0;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 2px 0;
}