.fit-screen {
  --big-cell-was: 128px;
  --big-cell-18: 105px;
  --big-cell-h: 95.5px;
  --cards-trim: calc(var(--big-cell-was) - var(--big-cell-18));
  --cards-after: 0px;
  --below-wheel: calc(10px + var(--big-cell-h) + var(--cards-after) + var(--cube-nav-h, 0px));
  --wheel-min: 200px;
  min-height: 0;
  height: calc(var(--screen-h) - env(safe-area-inset-top) - var(--tabbar-h) - env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  overflow: visible;
  padding-top: calc(18px + var(--cards-trim));
  padding-bottom: 12px;
}

.fit-screen > .fit-fixed {
  flex: 0 0 auto;
}

.fit-flex {
  flex: 1 1 auto;
  min-height: calc(var(--wheel-min) + var(--below-wheel));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}

.fit-wheel-holder {
  width: max(var(--wheel-min), min(100%, calc(0.78 * var(--screen-h)), 420px));
  aspect-ratio: 1 / 1;
  flex: 0 1 auto;
}

@media (max-width: 849px) {
  .fit-flex { container-type: size; }
  .fit-wheel-holder { width: max(var(--wheel-min), min(100%, calc(0.78 * var(--screen-h)), 420px, 100cqh - var(--below-wheel))); }
}

.fit-screen .big-three { flex: 0 0 auto; margin-top: 10px; margin-bottom: var(--cards-after); }

@media (max-height: 700px) {
  .fit-screen {
    --big-cell-was: 113.3px;
    --big-cell-18: 93px;
    --big-cell-h: 85px;
    padding-top: calc(12px + var(--cards-trim));
  }
  .cc-value { font-size: 22px; }
  .cc-label { font-size: 8px; }
  .big-cell { padding: 4px 6px; gap: 2px; }
  .bg-glyph { margin-bottom: 2px; }
  .bg-sign { font-size: 14px; line-height: 17px; }
  .moon-badge { padding: 6px 10px 6px 6px; }
}

@media (max-height: 560px) {
  .fit-wheel-holder { width: max(var(--wheel-min), min(100%, calc(0.62 * var(--screen-h)), 340px, 100cqh - var(--below-wheel))); }
}