/* Číselná pyramida – celé se vejde do čtverce (rozměry v cqw = % šířky čtverce) */
.py-box { width: min(100%, 640px, calc(100dvh - 190px)); aspect-ratio: 1; margin: 0 auto; container-type: size; }
.py { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 2cqw 0 1cqw; }

.py-tri { display: flex; flex-direction: column; align-items: center; gap: 1cqw; width: 100%; }
.py-row { display: flex; justify-content: center; gap: 1cqw; width: 100%; }
.py-cell {
  --cw: calc((92cqw - (var(--n) - 1) * 1cqw) / var(--n));
  width: var(--cw); height: calc(46cqw / var(--n) - 1cqw);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font: 700 calc(46cqw / var(--n) * .52) / 1 var(--font-print);
  color: var(--ink); background: var(--card);
  border: .6cqw solid var(--ink); border-radius: 1.4cqw; padding: 0; position: relative;
  transition: background .12s, border-color .12s, transform .12s;
}
button.py-cell { cursor: pointer; }
.py-cell.given { background: var(--vowel); }
.py-cell.empty { background: var(--card); border-style: dashed; border-color: var(--muted); }
.py-cell.filled { background: var(--card); }
.py-cell.sel { border-color: var(--accent); background: var(--card); box-shadow: 0 0 0 .8cqw color-mix(in srgb, var(--accent) 28%, transparent); transform: scale(1.04); z-index: 1; }
.py-cell .old { opacity: .35; }
.py-cell.ok { background: var(--good-bg); border-color: var(--good); animation: py-pop .35s; }
.py-cell.bad { background: var(--bad-bg); border-color: var(--bad); animation: py-shake .35s; }
.py-cell small { position: absolute; bottom: .2cqw; font: 700 calc(46cqw / var(--n) * .24) / 1 var(--font-ui); color: var(--bad); }
@keyframes py-pop { 50% { transform: scale(1.1); } }
@keyframes py-shake { 25% { transform: translateX(-.8cqw); } 75% { transform: translateX(.8cqw); } }

.py-panel { width: 100%; height: 46cqw; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 1.6cqw; }
.py-msg { font-size: 3.4cqw; color: var(--muted); font-weight: 600; text-align: center; min-height: 1.3em; }
.py-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2cqw; width: 66cqw; }
.py-key {
  height: 9.5cqw; font: 700 6cqw / 1 var(--font-print); color: var(--ink);
  background: var(--card); border: .5cqw solid var(--line); border-bottom-width: .8cqw; border-radius: 2cqw;
}
.py-key:active:not(:disabled) { transform: translateY(.5cqw); border-bottom-width: .5cqw; }
.py-key.del { background: var(--bad-bg); border-color: var(--bad); color: var(--bad); }
.py-key.okk { background: var(--good-bg); border-color: var(--good); color: var(--good); }
.py-key:disabled { opacity: .4; }
.py-big {
  width: 92cqw; height: 17cqw; font: 700 6.4cqw / 1 var(--font-ui);
  color: var(--accent-ink); background: var(--accent); border: 0; border-radius: 4cqw; margin-bottom: 1cqw;
}
.py-big.submit { background: var(--good); color: #fff; }
.py-result { display: flex; flex-direction: column; align-items: center; gap: 2cqw; width: 100%; }
.py-result .py-msg { font-size: 6cqw; color: var(--ink); }
.py-result.good .py-msg { color: var(--good); }
.py-score { font-size: 5cqw; font-weight: 700; }
.py-time { font-size: 4.2cqw; color: var(--muted); font-weight: 600; }

/* uvnitř hry: čtverec vyplní dostupné místo */
#pyr-area { position: absolute; inset: 0; container-type: size; display: flex; align-items: center; justify-content: center; transition: opacity .35s .2s; }
#pyr-area .py-box { width: min(100cqw, 100cqh); max-width: none; margin: 0; }
#pyr-area[hidden] { display: none; }

/* přepínač obtížnosti na samostatné stránce */
.py-levels { display: flex; gap: 10px; justify-content: center; margin: 4px 0 10px; }
.py-levels button { flex: 1; max-width: 240px; padding: 10px 14px; font: inherit; font-weight: 700; background: var(--card); border: 3px solid var(--line); border-radius: 16px; color: var(--ink); }
.py-levels button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.py-levels small { display: block; font-weight: 400; opacity: .85; }

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