/* Gra „Rolkarz” (/gra, assets/js/gra.js). */
.gra { margin-bottom: 60px; }
.gra-game { position: relative; border: 2px solid var(--czern); border-radius: var(--r-l); overflow: hidden; background: #17141f; color: #f4f1ea; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.gra-nojs { margin: 0; padding: 22px 24px; background: var(--lila); color: var(--czern); }
.gra-stage { position: relative; }
.gra-canvas { display: block; width: 100%; outline: none; }
.gra-hud { position: absolute; inset: 12px 14px auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; pointer-events: none; font: 500 .82rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: #cfc8dc; }
.gra-hud__m { font: 800 1.9rem/1 var(--display); letter-spacing: .02em; color: var(--zolty); }
.gra-hud__best { margin-left: auto; }
.gra-over { position: absolute; inset: 0; display: grid; place-items: center; padding: 14px; background: rgba(15, 13, 20, .72); }
.gra-over[hidden] { display: none; }
.gra-over__box { display: grid; justify-items: center; gap: 10px; max-width: 520px; text-align: center; }
.gra-over__title { margin: 0; font: 800 clamp(2.2rem, 6vw, 3.6rem)/1 var(--display); text-transform: uppercase; color: var(--zolty); }
.gra-over__big { margin: 0; font: 800 clamp(2.4rem, 7vw, 4rem)/1 var(--display); color: var(--zolty); }
.gra-over__rec { margin: 0; padding: 3px 10px; border-radius: 99px; background: var(--zolty); color: var(--czern); font: 700 .8rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.gra-over__msg { margin: 0; font-size: 1.05rem; }
.gra-over__small { margin: 0; font-size: .85rem; color: #cfc8dc; }
.gra-over__ok { margin: 0; padding: 10px 14px; border-left: 4px solid #5fe3a1; background: rgba(95, 227, 161, .12); text-align: left; }
.gra-over__tiers { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-size: .95rem; }
.gra-over__tiers b { color: var(--zolty); }
.gra-claim { display: grid; gap: 8px; width: 100%; text-align: left; }
.gra-claim label { font-weight: 600; }
.gra-claim__row { display: flex; gap: 8px; }
.gra-claim__row input { flex: 1 1 auto; min-width: 0; min-height: 46px; padding: 0 12px; border: 2px solid #f4f1ea; border-radius: var(--r); background: #fff; color: var(--czern); font: inherit; }
.gra-claim__nl { display: flex; gap: 8px; align-items: flex-start; font-weight: 400 !important; font-size: .85rem; color: #cfc8dc; }
.gra-claim__nl input { margin-top: 3px; accent-color: var(--zolty); }
.gra-claim__msg { margin: 0; min-height: 1.2em; color: #ffb4ab; font-size: .9rem; }
.gra-claim__msg:empty { display: none; }
.gra-claim__hint { margin: 0; font-size: .8rem; color: #cfc8dc; }
.gra-claim--rank { padding-top: 10px; border-top: 1px solid #3a2f52; }
.gra-over__ok a { color: var(--zolty); font-weight: 700; }
.gra-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.gra-game .btn--line { background: transparent; color: #f4f1ea; border-color: #f4f1ea; }
.gra-game .btn--line:hover { background: #f4f1ea; color: var(--czern); }
.gra-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px 40px; margin-top: 28px; }
.gra-info h2 { font-size: 1.6rem; margin-bottom: 10px; }
.gra-tiers { display: grid; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.gra-tiers li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border: 1.5px solid var(--linia-2); border-radius: var(--r); }
.gra-tiers strong { font: 800 1.25rem/1.1 var(--display); }
.gra-tiers span { font-weight: 700; color: var(--fiolet); }
.gra-rules { display: grid; gap: 6px; padding-left: 18px; color: var(--tekst-2); }
.foot__game { margin: 10px 0 0; font-size: .92rem; }
.foot__game a { color: var(--zolty); font-weight: 700; }
/* wąska plansza (telefon, baner na stronie głównej) albo okno wyniku wyższe niż plansza: okno idzie pod planszę zamiast na nią — klasy ustawia gra.js */
.gra-game.is-narrow .gra-over, .gra-game.is-below .gra-over { position: static; padding: 18px 16px 22px; background: #17141f; border-top: 1px solid #2a2338; }
/* ranking graczy (/gra#ranking) */
.gra-rank { margin-top: 32px; scroll-margin-top: 90px; }
.gra-rank h2 { font-size: 1.6rem; margin-bottom: 12px; }
.gra-rank__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px 40px; }
.gra-rank h3 { margin: 0 0 8px; font: 800 1.2rem/1.2 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.gra-rank__list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.gra-rank__list li { display: grid; grid-template-columns: 2.2em minmax(0, 1fr) auto; align-items: baseline; gap: 10px; padding: 8px 14px; border: 1.5px solid var(--linia-2); border-radius: var(--r); }
.gra-rank__n { font: 800 1.15rem/1 var(--display); color: var(--tekst-2); }
.gra-rank__list li:nth-child(-n+3) .gra-rank__n { color: var(--fiolet); }
.gra-rank__nick { font-weight: 600; overflow-wrap: anywhere; }
.gra-rank__list strong { font: 800 1.2rem/1 var(--display); white-space: nowrap; }
.gra-rank__list li.is-me { border-color: var(--zolty); background: var(--zamow-tlo); }
.gra-rank__empty { margin: 0; padding: 12px 14px; border: 1.5px dashed var(--linia-2); border-radius: var(--r); color: var(--tekst-2); }
.gra-rank__note { margin: 12px 0 0; font-size: .88rem; color: var(--tekst-2); }
@media (max-width: 600px) {
  .gra-hud__best { margin-left: 0; }
  .gra-claim__row { flex-direction: column; }
}