/* Mini gra „Dobij do 90” (js/gra.js) na /404 i /gra: plansza w kształcie telefonu, ekran ma stałe kolory zmyślonej piekarni
   w obu motywach (jak zrzut strony), wysokość zarezerwowana z góry (bez przesunięć układu, także bez JS). */
.gra { position: relative; width: min(100%, 25rem); margin: 0 auto; border-radius: var(--r-tel); background: #050505; padding: .6rem;
  box-shadow: 0 0 0 2px #2f2e29, var(--cien-obiekt); }
.gra-ekran { position: relative; border-radius: calc(var(--r-tel) - .5rem); overflow: clip; background: #fbfaf6; color: #121210;
  height: clamp(32rem, calc(100svh - 9rem), 42rem); display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; font-family: var(--font); }
.pd .gra .gra-bez-js, .gra .gra-bez-js { margin: 0; padding: 2rem 1.5rem; font-size: 1rem; line-height: 1.5; color: #3a3935; align-self: center; text-align: center; }
.gra-pasek { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .8rem 1rem .5rem; font: 600 var(--drobny)/1.2 var(--mono); }
.gra-czas { font-variant-numeric: tabular-nums; }
.gra-waga { padding: 0 1rem .65rem; }
.gra-tor { height: .5rem; background: #e4e3de; border-radius: 4px; overflow: hidden; }
.gra-tor-pasek { height: 100%; width: 6%; background: #121210; transition: width .25s, background-color .25s; }
.gra-tor-pasek.ciezka { background: #b3261e; }
.gra-waga-opis { display: flex; justify-content: space-between; font: var(--drobny)/1.3 var(--mono); color: #5f5e59; margin-top: .4rem; font-variant-numeric: tabular-nums; }
.gra-niebo { position: relative; overflow: clip; touch-action: manipulation; }
.gra-el { position: absolute; left: 0; top: 0; border: 0; cursor: pointer; font: 700 .95rem/1.15 var(--font); padding: .6rem .9rem; border-radius: var(--r-sm);
  min-height: 44px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; will-change: transform;
  box-shadow: 0 6px 16px -8px rgb(0 0 0 / .35); }
.gra-el small { font: 600 var(--drobny)/1 var(--mono); }
.gra-el.zle { background: #fbe4df; color: #7a1610; outline: 2px dashed #c9776c; outline-offset: -2px; }
.gra-el.dobre { background: #eef8d0; color: #2c3d00; }
.gra-el:focus-visible { outline: 3px solid #121210; outline-offset: 2px; box-shadow: 0 0 0 6px #c8f03c; }
.gra-el.ciete { pointer-events: none; animation: gra-ciecie .32s ease-in forwards; }
.gra-el.ciete::after { content: ""; position: absolute; left: 45%; top: -20%; bottom: -20%; width: 10px; background: #c8f03c; transform: skewX(-19deg); }
@keyframes gra-ciecie { to { opacity: 0; transform: var(--poz) scale(.85) rotate(-6deg); } }
.gra-strona { border-top: 1px solid #e4e3de; padding: .6rem .75rem .9rem; display: flex; flex-wrap: wrap; gap: .4rem; min-height: 6rem; align-content: flex-start; background: #fff; }
.gra-strona .k { font: 600 var(--drobny)/1 var(--mono); padding: .35rem .5rem; border-radius: var(--r-xs); }
.gra-strona .k.d { background: #eef8d0; color: #2c3d00; }
.gra-strona .k.z { background: #fbe4df; color: #7a1610; }
.gra-strona .pusta { font-size: var(--drobny); line-height: 1.4; color: #5f5e59; }
.gra-nakladka { position: absolute; inset: 0; background: rgb(251 250 246 / .97); display: grid; place-items: center; padding: 1.5rem; text-align: center; z-index: 5; }
.gra-nakladka[hidden] { display: none; }
.gra-nakladka-w { display: grid; gap: .9rem; justify-items: center; max-width: 19rem; }
.pd .gra .gra-nakladka h3, .gra .gra-nakladka h3 { margin: 0; font-weight: 850; font-stretch: 112%; font-size: 1.6rem; line-height: 1.05; letter-spacing: -.02em; text-wrap: balance; color: #121210; }
.pd .gra .gra-nakladka p, .gra .gra-nakladka p { margin: 0; color: #3a3935; line-height: 1.45; font-size: 1rem; }
.gra-przycisk { position: relative; overflow: hidden; isolation: isolate; font: 750 1rem/1 var(--font); border: 0; border-radius: var(--r-sm);
  padding: .9rem 1.4rem; min-height: 48px; cursor: pointer; background: #121210; color: #fbfaf6; }
.gra-przycisk::before { content: ""; position: absolute; inset: -4px -35%; z-index: -1; background: #c8f03c; transform: translateX(-112%) skewX(-19deg);
  transition: transform .45s var(--krzywa); }
.gra-przycisk:hover { color: #121210; }
.gra-przycisk:hover::before { transform: translateX(0) skewX(-19deg); }
.gra-przycisk:focus-visible { outline: 3px solid #121210; outline-offset: 2px; box-shadow: 0 0 0 6px #c8f03c; }
.gra-pierscien { width: 8rem; height: 8rem; }
.gra-pierscien circle { fill: none; stroke-width: 10; }
.gra-pierscien .tor { stroke: #e4e3de; }
.gra-pierscien .luk { stroke: #4f6b00; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 1s var(--krzywa); }
.gra-pierscien.srednio .luk { stroke: #9a5b00; }
.gra-pierscien.zle .luk { stroke: #b3261e; }
.gra-pierscien text { font: 850 34px var(--font); fill: #121210; text-anchor: middle; dominant-baseline: central; }
.pd .gra .gra-nakladka .gra-dane, .gra .gra-nakladka .gra-dane { font: var(--drobny)/1.5 var(--mono); color: #3a3935; font-variant-numeric: tabular-nums; }
.pd .gra .gra-nakladka a, .gra .gra-nakladka a { color: #121210; font-weight: 700; text-underline-offset: .2em; }
@media (prefers-reduced-motion: reduce) {
  .gra-el.ciete { animation-duration: .01s; }
  .gra-pierscien .luk, .gra-przycisk::before, .gra-tor-pasek { transition: none; }
}
.pd .gra-zasady { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .6rem; max-width: 31em; }
.pd .gra-zasady li { margin: 0; line-height: 1.5; }
.pd .gra-dalej { margin: 1.5rem 0 0; }