/* Wspólny zestaw ekranów gier w jasnym motywie aplikacji (2026-11-01, wyciągnięty z Makao).
   Ekran gry dostaje klasę `kg` obok `ng` i składa się z tych samych części co w aplikacji
   (GameScaffold.kt, GameCard.kt, CardHand.kt): pasek z tytułem, dziennik ruchów, stół, miejsca rywali,
   talia i stos, „Twoje karty”, ręka i fioletowa akcja. Tokeny 1:1 z KarciakColors (jasny motyw).
   Kolory stołu ustawia gra: --table-a/--table-b (gradient), --table-ink (wzór i haft), --table-gold (napisy),
   --table-pattern (tło-wzór, domyślnie brak). */
.ng.kg{
  --bg:#F4F1FD;--panel:#FFFFFF;--panel-strong:#EEE9FB;--panel-active:#E4D9FC;--border:#D6CBF2;--border-faint:#E8E1F8;
  --text:#1F1633;--text-dim:#5B5370;--text-faint:#6E6688;--violet:#6D28D9;--violet-soft:#A78BFA;--pink:#DB2777;--pink-deep:#BE185D;
  --danger:#BA294A;--success:#17744F;--warning:#946008;--cyan:#08778B;
  --card-face:#F3EFE3;--card-edge:#CBC5B4;--card-red:#CE1F41;--card-black:#17202E;
  --table-a:#FFFFFF;--table-b:#EEE9FB;--table-ink:#6D28D9;--table-gold:#B86A12;--table-pattern:none;
  justify-content:flex-start;overflow-y:auto;background:var(--bg);color:var(--text)}
.ng.kg .ng-top{background:linear-gradient(180deg,rgba(244,241,253,.96),rgba(244,241,253,.8) 70%,transparent)}
.ng.kg .ng-exit{border-color:var(--border);background:var(--panel);color:var(--violet)}
.ng.kg .ng-exit:hover{border-color:var(--violet);background:var(--panel-strong)}
.ng.kg .ng-players.kg-hidden{display:none} /* gracze siedzą przy stole; lista zostaje dla pamięci nazw */
.kg-title{font-size:28px;font-weight:700;letter-spacing:-.4px;color:var(--text)}
.kg-tag{margin-left:auto;padding:6px 12px;border-radius:999px;background:var(--panel-strong);color:var(--violet);font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase}
/* podwójna klasa: globalne `.ng > div:not(.ng-top):not(.ng-ov){width:100%}` ma wyższą specyficzność */
/* Ekran gry mieści się w jednym widoku — bez przewijania (decyzja 1.11: przewijanie na telefonie męczy).
   Kolumna ma wysokość ekranu, wszystkie części mają stałą wysokość, a stół wypełnia to, co zostało.
   overflow-y:auto na .ng zostaje tylko jako zabezpieczenie na bardzo niskich ekranach. */
.ng.kg>.kg-layout.kg-layout{position:relative;width:min(100%,580px);height:calc(100svh - 76px);min-height:0;margin:68px auto 8px;padding:0 14px;display:flex;flex-direction:column;gap:10px}
.ng.kg>.kg-layout>*{flex:none}
.ng.kg>.kg-layout>.kg-table{flex:1 1 0;height:auto;min-height:110px}
/* stary kod dodaje 64 px pod grą na pasek emotek — w ekranach z zestawem emotki nie zasłaniają akcji */
.kg-label{font-size:12px;line-height:16px;font-weight:700;letter-spacing:.6px;text-transform:uppercase}

/* dziennik dwóch ostatnich ruchów (GameLogStrip) */
.kg-log{min-height:64px;padding:10px 16px;border-radius:18px;background:var(--panel);border:1px solid var(--border-faint);font-size:15px;line-height:1.5}
.kg-log p{margin:0}
.kg-log p:first-child:not(:only-child){color:var(--text-dim)}
.kg-log .r{color:var(--card-red)}
.kg-suit{display:inline-block;width:1em;height:1em;fill:currentColor;vertical-align:-2px}

/* stół */
.kg-table{position:relative;isolation:isolate;height:clamp(320px,100svh - 430px,600px);border-radius:26px;overflow:hidden;
  background:var(--table-pattern),radial-gradient(120% 90% at 50% 45%,var(--table-a),var(--table-b))}
.kg-table::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 50% at 50% 50%,rgba(255,45,74,.28),transparent 70%);opacity:0;transition:opacity .5s}
.kg-table.hot::before{opacity:1}
.kg-zig{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.kg-zig path{fill:none;stroke:var(--table-ink);stroke-opacity:.35;stroke-width:1.5}
.kg-in{position:absolute;inset:20px 14px 10px;display:grid;grid-template-rows:auto 1fr 44px}
.kg-table.shake{animation:kgShake .42s}
@keyframes kgShake{20%{transform:translateX(14px)}40%{transform:translateX(-12px)}60%{transform:translateX(8px)}80%{transform:translateX(-4px)}}

/* rząd kafelków graczy nad stołem (PlayerStatusRow): awatar, nazwa, szczegół i „• TWOJA TURA” */
.kg-players{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px}
.kg-pcard{display:flex;flex-direction:column;gap:6px;min-width:0;padding:12px;border-radius:18px;background:var(--panel);border:1px solid var(--border-faint)}
.kg-pcard.active{background:var(--panel-active);border:1.5px solid var(--violet)}
.kg-pcard-head{display:flex;align-items:center;gap:10px;min-width:0}
.kg-pcard .kg-av{width:40px;height:40px;font-size:19px}
.kg-pcard.active .kg-av{box-shadow:0 0 0 3px #FFC94A}
.kg-pcard b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:17px;font-weight:700}
.kg-pcard small{color:var(--text-dim);font-size:14px}
.kg-pcard i{font-style:normal;color:var(--violet);font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase}
.kg-pcard.dead{opacity:.5}
.kg-players.many .kg-pcard{padding:8px;align-items:center;text-align:center}
.kg-players.many .kg-pcard-head{flex-direction:column;gap:4px}
.kg-players.many .kg-pcard b{font-size:14px;max-width:100%}
.kg-players.many .kg-pcard small{font-size:12px}

/* panel statusu (GameStatusPanel): mała etykieta w kolorze marki i czytelny opis pod spodem */
.kg-statusbox{padding:12px 16px;border-radius:18px;background:var(--panel-strong)}
.kg-statusbox .kg-label{display:block;color:var(--violet)}
.kg-statusbox strong{display:block;font-size:18px;line-height:1.35;font-weight:700}

/* jasny stół (GameTableSurface w jasnym motywie): biel → lawenda, delikatna poświata akcentu, opcjonalna grafika */
.kg-table.surface{border:1px solid var(--border);background:radial-gradient(70% 60% at 50% 50%,color-mix(in srgb,var(--table-ink) 13%,transparent),transparent 70%),linear-gradient(180deg,#FFFFFFF7,#EEE9FBFA)}
.kg-table.surface .kg-art{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:contain;pointer-events:none}

/* rywale: awatar, nazwa, liczba kart i wachlarz rewersów */
.kg-rivals{display:flex;justify-content:space-evenly;gap:8px;--fan-h:72px;--fan-overlap:-.62}
.kg-seat{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.kg-seat-head{display:flex;align-items:center;gap:10px}
.kg-av{position:relative;flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#EDE4FF,#FCE7F3);font-size:22px;font-weight:700;color:var(--violet);cursor:pointer}
.kg-av::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:3px solid transparent}
.kg-turn .kg-av::after{border-color:var(--pink);animation:kgTurn 1.2s ease-in-out infinite}
@keyframes kgTurn{50%{transform:scale(1.08);opacity:.6}}
.kg-seat-name{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;font-size:16px;line-height:1.2;color:var(--pink-deep)}
.kg-seat-count{color:var(--table-ink);font-size:15px;opacity:.85}
.kg-stop{position:absolute;left:50%;top:50%;translate:-50% -50%;rotate:-14deg;padding:2px 6px;border:2px solid var(--danger);border-radius:6px;background:#fff;color:var(--danger);font-size:11px;font-weight:700;letter-spacing:1px}
.kg-fan{display:flex;justify-content:center;height:var(--fan-h)}
.kg-fan .pc{--cw:calc(var(--fan-h) * .716);margin-left:calc(var(--cw) * var(--fan-overlap));transform-origin:50% 120%;box-shadow:0 2px 6px rgba(120,40,60,.16)}
.kg-fan .pc:first-child{margin-left:0}
.kg-rivals.many{--fan-h:54px;--fan-overlap:-.8}
.kg-rivals.many .kg-seat-head{flex-direction:column;gap:4px;text-align:center}
.kg-rivals.many .kg-seat-head br{display:none}
.kg-rivals.many .kg-seat-name{max-width:80px;font-size:14px}
.kg-rivals.many .kg-seat-count{margin-left:4px;font-size:14px}
.kg-rivals.many .kg-av{width:38px;height:38px;font-size:18px}

/* środek stołu: talia i stos */
.kg-center{display:flex;align-items:center;justify-content:center;gap:calc(var(--cc) * .3);--cc:clamp(84px,22vw,128px)}
.kg-deck{display:flex;flex-direction:column;align-items:center;gap:10px;border:0;padding:0;background:none;cursor:pointer;font:inherit}
.kg-deck:disabled{cursor:default}
.kg-deck-stack{position:relative;width:calc(var(--cc) * .9);aspect-ratio:63/88}
.kg-deck-stack .pc{--cw:calc(var(--cc) * .9);position:absolute;inset:0}
.kg-deck-stack .pc:nth-child(1){translate:-6px 6px;rotate:-3deg}
.kg-deck-stack .pc:nth-child(2){translate:-3px 3px;rotate:-1.5deg}
.kg-deck:not(:disabled):hover .kg-deck-stack .pc:last-child{translate:0 -4px}
.kg-deck .kg-label{color:var(--table-gold)}
.kg-pile-wrap{position:relative}
.kg-pile{position:relative;width:var(--cc);aspect-ratio:63/88}
.kg-pile .pc{--cw:var(--cc);position:absolute;inset:0;box-shadow:0 6px 16px rgba(120,30,50,.18)}

/* plakietki przy stosie: .tr — prawy górny róg (żądanie), .tl — lewy górny (kara) */
.kg-badge{position:absolute;z-index:5;display:grid;place-items:center;border-radius:50%;background:#fff;box-shadow:0 4px 12px rgba(120,30,50,.2);font-weight:700}
.kg-badge.tr{right:-18px;top:-18px;width:46px;height:46px;border:2px solid var(--table-gold);color:var(--card-black);font-size:18px}
.kg-badge.tr.r{color:var(--card-red)}
.kg-badge.tr .kg-suit{width:24px;height:24px}
.kg-badge.tl{left:-24px;top:-30px;width:52px;height:52px;background:linear-gradient(180deg,#FF7A8F,#E11D48);color:#fff;font-size:19px;border:2px solid #fff;animation:kgPop .35s}
@keyframes kgPop{from{scale:.4}70%{scale:1.15}}

/* komunikat pod stosem */
.kg-status{place-self:center;padding:5px 14px;border-radius:999px;background:rgba(255,255,255,.95);border:1px solid;font-weight:700;font-size:15px;text-align:center}
.kg-status.warn{color:#9A5B00;border-color:rgba(148,96,8,.5)}
.kg-status.pen{color:#C0162F;border-color:rgba(255,84,112,.5)}
.kg-status.ok{color:var(--success);border-color:rgba(23,116,79,.4)}
.kg-status:empty{display:none}

/* okrzyk na stole („MAKAO!”, „SNAP!”…) */
.kg-shout{position:absolute;inset:0;z-index:20;display:grid;place-items:center;pointer-events:none}
.kg-shout b{font-size:clamp(48px,12vw,64px);font-weight:700;color:var(--table-gold);rotate:-6deg;text-shadow:0 6px 20px rgba(120,60,0,.25);animation:kgShout 1.5s forwards}
.kg-shout.them b{color:#FF4D6A}
@keyframes kgShout{0%{scale:.6;opacity:0}15%{scale:1.1;opacity:1}75%{opacity:1}100%{scale:1.1;opacity:0}}

/* ja i ręka */
.kg-me{display:flex;align-items:center;gap:12px;padding:2px 4px 0}
.kg-me .kg-av{width:52px;height:52px;border:4px solid #E7CDB5}
.kg-me .kg-label{color:var(--text-dim);font-size:14px}
.kg-hand{display:flex;justify-content:center;align-items:flex-end;min-height:calc(var(--hw) * 1.4 + 14px);padding:12px 6px 2px;--hw:clamp(62px,17vw,96px)}
.kg-hand .pc{--cw:var(--hw);flex:none;margin-left:var(--step,6px);transition:translate .18s,box-shadow .18s;cursor:pointer}
.kg-hand .pc:first-child{margin-left:0}
/* obwódka jako outline: border zjadałby szerokość karty i na telefonie zmieniał jej układ */
.kg-hand .pc.on{outline:3px solid var(--violet);outline-offset:-2px}
.kg-hand .pc.on:hover,.kg-hand .pc.on:focus-visible{translate:0 -10px;box-shadow:0 10px 22px rgba(109,40,217,.28);z-index:2}
.kg-hand .pc.sel{translate:0 -14px;outline:3px solid var(--pink);outline-offset:-2px;z-index:2}
.kg-hand .pc.off{cursor:default}
.kg-hand .pc.off::after{content:'';position:absolute;inset:0;border-radius:inherit;background:rgba(244,241,253,.42)}

/* ręka jako siatka (Blef, Kierki): liczbę kolumn i szerokość karty ustawia GameKit.fitGrid, żeby się zmieściła */
.kg-grid{display:grid;grid-template-columns:repeat(var(--g-cols,7),var(--g-w,minmax(0,1fr)));justify-content:center;gap:6px}
.kg-grid .pc{--cw:72px;width:100%;transition:translate .15s}
.kg-grid .pc:not(:disabled){cursor:pointer}
.kg-grid .pc:disabled{cursor:default}
.kg-grid .pc.on{outline:3px solid var(--violet);outline-offset:-2px}
.kg-grid .pc.on:hover,.kg-grid .pc.on:focus-visible{translate:0 -6px;box-shadow:0 10px 22px rgba(109,40,217,.25)}
.kg-grid .pc.off::after{content:'';position:absolute;inset:0;border-radius:inherit;background:rgba(244,241,253,.42)}
.kg-grid .pc.sel{outline:3px solid var(--pink);outline-offset:-2px;translate:0 -6px}

/* przyciski akcji (GameActionRow) */
.kg-actions{display:grid;gap:10px;padding-top:4px}
.kg-actions.row{grid-template-columns:1fr 1fr}
.kg-btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;padding:0 24px;border:0;border-radius:999px;font:700 15px/1 inherit;font-family:inherit;letter-spacing:.8px;text-transform:uppercase;cursor:pointer;transition:transform .12s,filter .12s}
.kg-btn:active{transform:scale(.97)}
.kg-btn[hidden]{display:none}
.kg-btn.primary{background:var(--violet);color:#fff;box-shadow:0 8px 22px rgba(109,40,217,.28)}
.kg-btn.primary:hover{filter:brightness(1.08)}
.kg-btn.primary:disabled{background:var(--panel-active);color:var(--text-faint);box-shadow:none;cursor:default;filter:none}
.kg-btn.danger{background:var(--danger);color:#fff}
.kg-btn.pulse{animation:kgPulse .52s ease-in-out infinite alternate}
.kg-btn.danger:disabled{background:var(--panel-strong);color:var(--text-faint);animation:none}
.kg-btn.ghost{min-height:48px;background:var(--panel);color:var(--violet);border:1.5px solid var(--border)}
.kg-btn.ghost:disabled{color:var(--text-faint);cursor:default}
@keyframes kgPulse{to{scale:1.04}}

/* okno wyboru nad ekranem gry (kolor, wartość, karty do wymiany…) */
.kg-overlay{position:absolute;inset:0;z-index:30;display:grid;place-items:center;padding:18px;background:rgba(244,241,253,.6);backdrop-filter:blur(3px)}
.kg-overlay[hidden]{display:none}
.kg-sheet{width:min(100%,420px);padding:24px;border-radius:22px;background:var(--panel);border:1px solid var(--border);box-shadow:0 18px 48px rgba(91,33,182,.16);text-align:center;animation:kgRise .25s}
@keyframes kgRise{from{translate:0 14px;opacity:0}}
.kg-sheet h3{margin:4px 0 6px;font-size:22px}
.kg-sheet p{margin:0 0 14px;color:var(--text-dim);font-size:15px}
.kg-sheet .kg-label{color:var(--violet)}
.kg-sheet .kg-btn.ghost{margin-top:12px}
.kg-choices{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.kg-choices button{display:grid;place-items:center;gap:4px;aspect-ratio:1;border-radius:18px;border:1.5px solid var(--border);background:var(--card-face);cursor:pointer;font:700 12px inherit;font-family:inherit;color:var(--text-dim)}
.kg-choices button .kg-suit{width:34px;height:34px;color:var(--card-black)}
.kg-choices button.r .kg-suit{color:var(--card-red)}
.kg-choices button:hover,.kg-choices button.rec{border-color:var(--violet);box-shadow:0 0 0 3px rgba(109,40,217,.28)}
.kg-choices.ranks button{aspect-ratio:auto;height:54px;font-size:20px;color:var(--card-black)}

/* karta — talia „classic” (CardSkins.kt), rewers „Klasyczny” ze sklepu */
:where(.kg) .pc{--cw:90px;position:relative;display:block;width:var(--cw);aspect-ratio:63/88;padding:0;border-radius:calc(var(--cw) * .12);border:1px solid var(--card-edge);
  background:var(--card-face);container-type:inline-size;font-family:inherit;user-select:none;-webkit-user-select:none}
:where(.kg) .pc.red{color:var(--card-red)}
:where(.kg) .pc.black{color:var(--card-black)}
:where(.kg) .pc.joker{color:var(--violet)}
.kg .pc-idx{position:absolute;left:6cqw;top:5cqw;display:flex;flex-direction:column;align-items:center;font-weight:700;font-size:17cqw;line-height:1;letter-spacing:-.06em}
.kg .pc-idx .kg-suit{width:13cqw;height:13cqw;margin-top:1cqw}
.kg .pc-idx.end{left:auto;top:auto;right:6cqw;bottom:5cqw;rotate:180deg}
.kg .pc-pips{position:absolute;inset:18cqw 20cqw}
.kg .pc-pips i{position:absolute;translate:-50% -50%;line-height:0}
.kg .pc-pips i.flip{rotate:180deg}
.kg .pc-pips .kg-suit{width:20cqw;height:20cqw}
.kg .pc-ace{position:absolute;inset:0;display:grid;place-items:center}
.kg .pc-ace .kg-suit{width:46cqw;height:46cqw}
.kg .pc-ace b{font-size:40cqw}
.kg .pc-court{position:absolute;inset:16cqw 17cqw;display:grid;place-items:center;border:1px solid var(--card-edge);border-radius:4cqw;overflow:hidden}
.kg .pc-court img{width:100%;height:100%;object-fit:contain}
/* figury mają własne barwy w każdym kolorze, jak w aplikacji (CourtArt.tinted = false) */
/* karta Piotrusia (GameCard.PiotrusFace): duże „P” i napis w kolorze czerwonym talii */
:where(.kg) .pc.maid{color:var(--card-red)}
.kg .pc.maid .pc-ace{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2cqw}
.kg .pc.maid .pc-ace b{font-size:46cqw;font-weight:900;line-height:1}
.kg .pc.maid .pc-ace small{font-size:12cqw;font-weight:900;letter-spacing:.02em}
.kg .pc.maid .pc-idx{font-weight:900}
.kg .pc-big{display:none}
@container (max-width:60px){
  .kg .pc-pips,.kg .pc-ace,.kg .pc-court,.kg .pc-idx{display:none}
  .kg .pc-big{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4cqw;font-weight:700;font-size:34cqw;line-height:1;letter-spacing:-.06em}
  .kg .pc-big .kg-suit{width:34cqw;height:34cqw}
}
:where(.kg) .pc.back{background:url(/shop-assets/talie/card_back_classic.svg) center/100% 100% no-repeat}
/* rewers w locie — w <body>, poza .ng (globalne `.ng > div {width:100%}` rozciągało go na cały ekran) */
.kg-flying{position:fixed;z-index:100;margin:0;pointer-events:none;border-radius:12%/8.6%;border:1px solid #CBC5B4;
  background:url(/shop-assets/talie/card_back_classic.svg) center/100% 100% no-repeat}

@media(max-width:600px){
  .kg-title{font-size:22px}
  .ng.kg>.kg-layout.kg-layout{height:calc(100svh - 66px);margin:58px auto 8px;padding:0 10px;gap:8px}
  .kg-log{min-height:0;font-size:14px}
  .kg-hand{--hw:clamp(54px,min(17vw,11svh),96px)}
  .kg-btn{min-height:50px}
  .kg-statusbox{padding:10px 14px}
  .kg-statusbox strong{font-size:16px}
  .kg-pcard{padding:8px 10px;gap:4px}
  .kg-pcard .kg-av{width:34px;height:34px;font-size:16px}
  .kg-pcard b{font-size:15px}
  .kg-pcard small{font-size:13px}
}
/* Telefon: dok przy stole (rzucanki, emotki, czat) stoi w górnym pasku gry, żeby nie zasłaniał przycisków
   akcji przy dolnej krawędzi — pasek zostawia mu miejsce po prawej (3 × 40 px + odstępy). */
@media(max-width:720px){
  .ng.kg .ng-top{padding-right:148px}
}
@media(max-height:700px){
  .ng.kg>.kg-layout.kg-layout{gap:6px}
  .kg-log{padding:6px 12px;font-size:13px;line-height:1.35}
  .kg-btn{min-height:46px}
}
/* Telefon w poziomie (np. 844×390): pojedyncza kolumna miała sumę minimalnych wysokości większą niż ekran
   i 21 gier wymagało przewijania. Układ to kolumnowy flex z zawijaniem i dwiema niezależnymi kolumnami:
   po lewej główna część gry (stół lub plansza, klasa kg-main) i ewentualnie ręka-siatka pod nią (kg-grid ma
   tam pełną szerokość), po prawej gracze, status i akcje. Pseudo-element o wysokości 100% wymusza przejście
   do prawej kolumny. Dok emotek przechodzi do górnego paska (game-overlays.css), więc niczego nie zasłania. */
@media(orientation:landscape) and (max-height:500px){
  .ng.kg .ng-top{padding:6px 148px 6px 14px}
  .kg-title{font-size:20px}
  .kg-tag{padding:4px 10px;font-size:11px}
  .ng.kg>.kg-layout.kg-layout{height:calc(100svh - 58px);margin:52px auto 6px;padding:0 12px;gap:6px}
  .ng.kg>.kg-layout.kg-layout:has(>.kg-main){width:min(100%,1040px);flex-flow:column wrap;align-content:stretch;column-gap:12px}
  .ng.kg>.kg-layout:has(>.kg-main)>*{order:3;width:calc(46% - 12px);min-width:0}
  .ng.kg>.kg-layout:has(>.kg-main)::after{content:'';order:2;flex:0 0 100%;width:0}
  .ng.kg>.kg-layout:has(>.kg-main)>:is(.kg-main,.kg-grid,.kg-label:has(+.kg-grid)){order:1;width:calc(54% - 12px)}
  .ng.kg>.kg-layout>.kg-main.kg-main{order:0;flex:1 1 0;height:auto;min-height:0;max-height:none;margin:0}
  /* szeroka plansza (Mahjong, Tryktrak): 70% na planszę, wąska kolumna na status i przyciski */
  .ng.kg>.kg-layout.kg-wide:has(>.kg-main)>*{width:calc(30% - 12px)}
  .ng.kg>.kg-layout.kg-wide>.kg-main.kg-main{width:calc(70% - 12px)}
  .kg-statusbox{padding:6px 12px}
  .kg-statusbox strong{font-size:15px}
  .kg-log{min-height:0;padding:6px 12px;font-size:13px;line-height:1.35}
  /* dziennik bierze tylko miejsce, które zostało — zerowa baza nie przerzuca reszty kolumny do kolejnej */
  .ng.kg>.kg-layout:has(>.kg-main)>.kg-log{flex:1 1 0;min-height:34px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
  .kg-pcard{padding:5px 8px;gap:2px}
  .kg-pcard .kg-av{width:28px;height:28px;font-size:14px}
  .kg-pcard b{font-size:14px}
  .kg-pcard small{font-size:12px}
  .kg-btn{min-height:42px}
  .kg-hand{--hw:clamp(46px,7vw,64px)}
  /* talia i stos na stole: od wysokości ekranu, nie szerokości (22vw dawało 128 px i karty wychodziły pod stół) */
  .kg-center{--cc:clamp(56px,20svh,92px)}
}
/* pole planszy z klawiatury (K.keyGrid): wyraźna obwódka tylko przy nawigacji klawiszami */
.ng.kg .kg-key:focus{outline:none}
.ng.kg .kg-key:focus-visible{outline:3px solid var(--violet);outline-offset:-3px;z-index:5}
@media(prefers-reduced-motion:reduce){.ng.kg *{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* bęben rewolweru i jego losowanie (RevolverCylinder.kt) — Karciak, Próg Fortuny */
.kg-cyl{display:block;width:var(--cyl,26px);height:var(--cyl,26px);flex:none}
.kg-revolver{position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:12px;text-align:center;
  background:rgba(244,241,253,.92);backdrop-filter:blur(2px);animation:kgRevIn .3s both;container-type:size}
.kg-revolver .kg-label{color:var(--text-dim)}
.kg-revolver .kg-cyl{--cyl:min(148px,45cqh,60cqw)}
.kg-revolver b{font-size:18px;font-weight:700}
.kg-revolver small{font-size:13px;color:var(--text-faint)}
.kg-revolver.doom{background:rgba(255,228,233,.94)}
.kg-revolver.safe{background:rgba(225,245,236,.94)}
.kg-revolver.doom .kg-label,.kg-revolver.doom small{color:var(--danger)}
.kg-revolver.safe .kg-label,.kg-revolver.safe small{color:var(--success)}
.kg-revolver.doom small,.kg-revolver.safe small{font-size:24px;font-weight:800}
.kg-revolver .kg-cyl.hit{animation:kgPunch .38s}
.kg-revolver.out{animation:kgRevOut .3s both}
@keyframes kgRevIn{from{opacity:0}}
@keyframes kgRevOut{to{opacity:0}}
@keyframes kgPunch{30%{transform:scale(1.14)}}