[data-body="puzzle"] .miniboard { --minivh: 660px; --minicq: 196px; }
@container (max-height: 340px) {
  [data-body="puzzle"] .miniboard { --minicq: 178px; --minifloor: 60px; }
  [data-body="puzzle"] .puz-streak { padding: 2.2px 6.6px; margin-bottom: 4.4px; }
  [data-body="puzzle"] .puz-status { margin: 4.4px 0; }
}
@container (max-height: 220px) {
  [data-body="puzzle"] .miniboard { display: none; }
}
.puz-status { font-size: 12.1px; letter-spacing: 1.1px; color: var(--talisman); margin: 7.7px 0; min-height: 16.5px; text-align: center; }
.puz-status.good { color: var(--jade-lit); }
.puz-status.bad { color: var(--seal-bad); }
.puz-streak {
  display: flex; flex: none; align-items: center; justify-content: space-between;
  gap: 8.8px; padding: 4.4px 7.7px; margin-bottom: 7.7px;
  border: 1px solid var(--line); background: rgba(var(--seal-bg-0-rgb), .42);
}
.streak-now { display: flex; align-items: baseline; gap: 6.6px; }
.streak-now b { font-family: var(--han); font-size: 12.1px; color: var(--ash); font-weight: 400; }
.streak-now em {
  font-family: var(--display); font-style: normal; font-weight: 700;
  font-size: 15.4px; letter-spacing: 1.1px; color: var(--bone-dim); line-height: 1;
}
.streak-best { font-family: var(--mono); font-size: 9.9px; letter-spacing: 1.1px; color: rgba(var(--seal-fg-mute-rgb), .8); }
.streak-best i { font-style: normal; color: var(--talisman); }
.puz-streak.alight { border-color: rgba(var(--accent-rgb), .5); background: rgba(var(--accent-rgb), .12); }
.puz-streak.alight .streak-now em { color: #fff; text-shadow: 0 0 9px rgba(var(--accent-rgb), .7); }
.puz-streak.alight .streak-now b { color: var(--talisman); }
.combo {
  display: none; align-items: baseline; justify-content: center;
  gap: 8.8px; flex: none;
  padding: 3.3px 12.1px; min-width: 105.6px;
  border: 1px solid var(--line);
  background: rgba(var(--seal-bg-0-rgb), .55);
  white-space: nowrap;
}
.combo.open { display: flex; }
.player-strip:has(.combo.open) .clock { display: none; }
.combo b { font-family: var(--han); font-size: 14.3px; font-weight: 400; color: var(--ash); }
.combo em {
  font-family: var(--display); font-style: normal; font-weight: 700;
  font-size: 19.8px; letter-spacing: 1.1px; color: var(--bone-dim); line-height: 1;
}
.combo em i { font-style: normal; }
.combo.alight {
  border-color: rgba(var(--accent-rgb), .5);
  background: rgba(var(--accent-rgb), .14);
  box-shadow: 0 0 14px rgba(var(--accent-rgb), .28);
}
.combo.alight b { color: var(--talisman); }
.combo.alight em { color: #fff; text-shadow: 0 0 10px rgba(var(--accent-rgb), .7); }
@media (max-height: 800px) {
  .combo { min-width: 92.4px; padding: 2.2px 9.9px; gap: 7.7px; }
  .combo b { font-size: 13.2px; }
  .combo em { font-size: 17.6px; }
}
@media (max-width: 900px) {
  .combo { min-width: 86px; }
  .combo em { font-size: 18px; }
}
@media (max-width: 900px) and (orientation: landscape) {
  .combo { min-width: 66px; padding: 1px 8px; gap: 5px; }
  .combo b { font-size: 11px; }
  .combo em { font-size: 14px; }
}
