/* Karta Idealna – wygląd karty, okna i przycisków (kolory z assets/style.css) */
:root{--gold:#F5C542}
.kpalm,.khouse{display:block;width:100%;height:100%}
.kp-bg{fill:var(--accent)}
.kp-fg{fill:#fff}

/* ----- przycisk w dolnym pasku (telefon) ----- */
.mbar .mcard{position:relative;flex:1.1;color:var(--ink);font-weight:600}
.mcard .mc-i{display:block;width:50px;height:50px;margin:-25px auto 0;border-radius:50%;background:var(--panel);padding:3px;box-shadow:0 0 0 1px var(--line),0 6px 16px rgba(0,0,0,.55)}
.mbar .mcard .mc-i svg{display:block;width:100%;height:100%}
.mcard .mc-l{margin-top:1px}
.kb-badge{position:absolute;top:2px;left:calc(50% + 12px);pointer-events:none}
.kbadge{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:20px;padding:0 6px;border-radius:999px;background:#fff;color:#000;
  font:700 11px/1 var(--f-body);box-shadow:0 0 0 2px var(--panel)}
.kbadge.gift{background:var(--gold);width:24px;height:24px;padding:0;color:#000}
.kbadge.gift svg,.kcp-i svg,.ki.gift svg{width:15px;height:15px;fill:currentColor}
.mcard.pulse .mc-i{animation:kpulse 1.8s ease-out infinite}
@keyframes kpulse{0%{box-shadow:0 0 0 1px var(--line),0 0 0 0 color-mix(in srgb,var(--accent) 70%,transparent)}70%{box-shadow:0 0 0 1px var(--line),0 0 0 12px transparent}100%{box-shadow:0 0 0 1px var(--line),0 0 0 0 transparent}}

/* ----- przycisk w panelu bocznym (komputer) ----- */
.cardbtn{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:1px solid color-mix(in srgb,var(--accent) 55%,var(--line));border-radius:14px;
  background:color-mix(in srgb,var(--accent) 10%,var(--panel));color:var(--ink);cursor:pointer;text-align:left}
.cardbtn:hover{border-color:var(--accent)}
.cardbtn .kb-ico{width:40px;height:40px;flex:none}
.cardbtn .kb-t{flex:1;min-width:0;display:flex;flex-direction:column}
.cardbtn .kb-t b{font-weight:600}
.cardbtn small{color:var(--ink-2);font-size:13px}
.cardbtn small b,.kstrip small b{color:var(--ink)}
.gold{color:var(--gold)!important}
.kb-go,.ks-go{color:var(--accent);font-size:22px;line-height:1}
@media (max-width:860px){.cardbtn{display:none}}

/* ----- pasek w dymku stacji ----- */
.kstrip{display:flex;align-items:center;gap:10px;width:100%;margin-top:10px;padding:8px 10px;border:1px solid color-mix(in srgb,var(--accent) 50%,var(--line));
  border-radius:12px;background:color-mix(in srgb,var(--accent) 12%,#000);color:var(--ink);cursor:pointer;text-align:left;font:inherit}
.kstrip .ks-ico{width:32px;height:32px;flex:none}
.kstrip .ks-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.kstrip .ks-t b{font-size:13.5px}
.kstrip small{font-size:12px;color:var(--ink-2)}

/* ----- okno karty ----- */
.kdlg{width:min(440px,calc(100% - 24px));height:min(780px,calc(100% - 24px));padding:0;overflow:hidden}
.kdlg[open]{display:flex;flex-direction:column}
.khead{flex:none;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;padding:8px 6px;border-bottom:1px solid var(--line)}
.khead h2{margin:0;text-align:center;font:600 17px/1.2 var(--f-body)}
.kx{width:40px;height:40px;border:0;background:none;color:var(--ink);font-size:30px;line-height:1;cursor:pointer;border-radius:10px}
#kBack{color:var(--accent);font-size:34px}
#kBack[hidden]{display:block!important;visibility:hidden}
.kx:hover{background:var(--panel-2)}
.kbody{flex:1;min-height:0;overflow-y:auto;padding:16px 18px calc(20px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:14px;-webkit-overflow-scrolling:touch}
.kbody:focus{outline:none}
.kbody h3{margin:0;font:700 24px/1.2 var(--f-body)}
.kbody h4{margin:0;font:500 12px/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ksub{margin:0;color:var(--ink-2);font-size:14.5px}
.ksub b{color:var(--ink)}
.center{text-align:center}
.ksmall{margin:0;text-align:center;color:var(--muted);font-size:14px}
.klink{background:none;border:0;padding:0;color:var(--accent);text-decoration:underline;text-underline-offset:2px;font:inherit;cursor:pointer}
.klink[disabled]{color:var(--muted);text-decoration:none;cursor:default}
.kerr{margin:0;color:#ff6b9f;font-size:14px}
.kalert{margin:0;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--accent) 16%,#000);border:1px solid var(--accent);font-size:14px}
.kbtn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:var(--panel-2);
  color:var(--ink);font:600 16px/1.2 var(--f-body);cursor:pointer}
.kbtn.pri{background:var(--accent);border-color:var(--accent);color:#fff}
.kbtn.danger{background:transparent;color:#ff6b9f;border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.kbtn.busy,.kbtn[disabled]{opacity:.6;cursor:progress}
.kbtn svg{width:22px;height:22px}
.kform{display:flex;flex-direction:column;gap:14px;flex:1}
.kfoot{margin-top:auto;display:flex;flex-direction:column;gap:12px;padding-top:6px}
.kfl{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--ink-2)}
.kfl i,.kck i{color:var(--muted);font-style:normal}
.kfl input{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:12px;background:#000;color:var(--ink);font:16px var(--f-body)}
.kfl input:focus{border-color:var(--accent);outline:none}
.kck{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--ink-2);cursor:pointer}
.kck input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--accent);flex:none}
.kcons{display:flex;flex-direction:column;gap:12px}
.kotp{width:100%;padding:14px;border:1px solid var(--accent);border-radius:14px;background:#000;color:var(--ink);text-align:center;font:700 32px/1 ui-monospace,Menlo,monospace;letter-spacing:.18em}
.krow{display:flex;gap:8px}
.krow input{flex:1;min-width:0;text-transform:uppercase;font-family:ui-monospace,Menlo,monospace;letter-spacing:.12em}
.krow .kbtn{width:auto}

/* powitanie */
.kintro{display:flex;flex-direction:column;gap:14px;flex:1;text-align:center}
.klogo{width:96px;height:96px;margin:6px auto 0}
.klead{margin:0;color:var(--ink-2)}
.krew,.khow,.khist ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;text-align:left}
.krew li{display:flex;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--panel-2)}
.krew li>span:last-child{display:flex;flex-direction:column}
.krew small{color:var(--ink-2);font-size:13.5px}
.ki{width:34px;height:34px;flex:none;display:block}
.ki.gift{display:grid;place-items:center;border-radius:50%;background:var(--gold);color:#000}
.khow{counter-reset:k;gap:6px}
.khow li{counter-increment:k;display:flex;gap:10px;align-items:baseline;color:var(--ink-2);font-size:14px}
.khow li::before{content:counter(k);flex:none;width:22px;height:22px;border-radius:50%;background:var(--panel-2);border:1px solid var(--line);display:grid;place-items:center;font-size:12px;font-weight:600;color:var(--ink)}
.kpend{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:14px;border:1px dashed var(--accent);background:color-mix(in srgb,var(--accent) 10%,#000);text-align:left}
.kpend svg{width:34px;height:34px;flex:none}
.kpend span{display:flex;flex-direction:column}
.kpend small{color:var(--ink-2);font-size:13px}
.kwelcome{text-align:center}
.kwelcome .kfl{text-align:left}
.kparty{font-size:46px;line-height:1}
.kquote{margin:0 auto;padding:8px 14px;border-radius:12px;background:var(--accent);color:#fff;font-weight:600;max-width:340px;text-align:center}
.kfirst{display:flex;gap:12px;align-items:center;padding:12px;border:1px solid color-mix(in srgb,var(--accent) 50%,var(--line));border-radius:14px;background:color-mix(in srgb,var(--accent) 8%,#000);text-align:left}
.kfirst svg{width:40px;height:40px;flex:none}
.kfirst span{display:flex;flex-direction:column}
.kfirst small{color:var(--ink-2)}

/* karta jak w bankowości – wymiary z projektu 856×540 */
.kcardwrap{display:flex;flex-direction:column;gap:6px}
.kcard{position:relative;display:block;width:100%;aspect-ratio:856/540;padding:0;border:0;border-radius:14px;overflow:hidden;background:#000;cursor:pointer;
  container-type:inline-size;box-shadow:0 10px 30px rgba(0,0,0,.6);color:#fff;text-align:left}
.kc-bg,.kc-txt{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.kc-qr{position:absolute;left:8.41%;top:37.96%;width:13.08%}
.kc-qr svg{display:block;width:100%;height:auto}
.kc-data{position:absolute;left:8.41%;right:8.41%;top:66%;display:flex;align-items:flex-end;gap:4.2cqw;font:700 2.92cqw/1.1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.06em;text-shadow:0 1px 6px #000;white-space:nowrap}
.kc-data small{display:block;font-size:1.3cqw;color:#ccc;letter-spacing:.16em;margin-bottom:.4cqw;text-transform:uppercase}
.kc-own{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.kc-od{text-align:right}
.kc-q{position:absolute;left:8.41%;right:8.41%;top:79.5%;font:italic 700 3.3cqw/1.2 "Courier New",ui-monospace,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kc-q b{color:var(--accent)}
.khint{margin:0;text-align:center;color:var(--muted);font-size:13px}
.kscan{padding:16px}

/* kupony */
.kcp{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border-radius:14px;border:1px solid var(--gold);background:color-mix(in srgb,var(--gold) 12%,#000);color:var(--ink);cursor:pointer;text-align:left;font:inherit}
.kcp>span:nth-child(2){flex:1;display:flex;flex-direction:column}
.kcp small{color:var(--gold);font-size:12.5px}
.kcp b{font-size:16px}
.kcp-i{width:38px;height:38px;flex:none;border-radius:50%;background:var(--gold);color:#000;display:grid;place-items:center}
.kcp-i svg{width:20px;height:20px}
.kcp .ks-go{color:var(--gold)}

/* palmy i domki */
.kprog{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--panel-2)}
.kp-h{display:flex;justify-content:space-between;align-items:baseline}
.kp-h>b{font-size:18px}
.kp-h span{color:var(--muted);font-size:16px}
.kp-h span b{color:var(--accent);font-size:26px}
.kdots{display:grid;grid-template-columns:repeat(5,1fr);gap:10px 8px}
.kdots.many{grid-template-columns:repeat(6,1fr)}
.kdot{position:relative;display:grid;place-items:center;aspect-ratio:1;border-radius:50%;border:1.5px dashed #444;color:#666;font-size:13px}
.kdot.tier{border-color:color-mix(in srgb,var(--gold) 70%,#444)}
.kdot.on{border:0}
.kdot.on svg{width:100%;height:100%}
.kdot small{position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);font-size:9.5px;color:var(--muted);white-space:nowrap}
.kdot i{font-style:normal}
.kdots:has(.kdot.on){margin-bottom:6px}
.kbar{height:6px;border-radius:9px;background:#2a2a2a;overflow:hidden}
.kbar i{display:block;height:100%;background:var(--accent);border-radius:9px}
.khist{display:flex;flex-direction:column;gap:10px}
.khist li{display:flex;gap:12px;align-items:center}
.khist li .ki{width:30px;height:30px}
.khist li>span:last-child{display:flex;flex-direction:column;min-width:0}
.khist small{color:var(--muted);font-size:13px}
.kmenu{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;padding-top:6px;font-size:14px}
.kmenu .klink{color:var(--muted)}

/* skaner */
.kscanv{display:flex;flex-direction:column;gap:14px}
.kvid{position:relative;aspect-ratio:1;border-radius:18px;overflow:hidden;background:#111}
.kvid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kframe{position:absolute;inset:12%}
.kframe i{position:absolute;width:22%;height:22%;border:4px solid var(--accent)}
.kframe i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0;border-radius:14px 0 0 0}
.kframe i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0;border-radius:0 14px 0 0}
.kframe i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0;border-radius:0 0 0 14px}
.kframe i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0;border-radius:0 0 14px 0}
.kvmsg{position:absolute;left:12px;right:12px;bottom:12px;margin:0;padding:8px 10px;border-radius:10px;background:rgba(0,0,0,.75);text-align:center;font-size:14px}
.kmanual{display:flex;flex-direction:column;gap:8px}

/* po zeskanowaniu */
.kdone{display:flex;flex-direction:column;gap:12px;flex:1;text-align:center}
.kcheck{width:84px;height:84px;margin:10px auto 0;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center}
.kcheck svg{width:48px;height:48px}
.kbig{margin:4px 0 0;font:700 28px/1 var(--f-body);color:var(--muted)}
.kbig b{font-size:72px;color:var(--accent)}
.kcp.big{padding:16px}

/* kupon i pokaz kodu */
.kcoupon{display:flex;flex-direction:column;gap:8px;align-items:center;padding:18px 14px;border:2px dashed var(--accent);border-radius:18px;text-align:center}
.kc-h{margin:0;display:flex;gap:6px;align-items:center;color:var(--accent);font-weight:600;font-size:14px}
.kc-h svg{width:18px;height:18px;fill:currentColor}
.kcoupon h3{font-size:26px}
.kqrbig{width:min(260px,78%);margin:6px auto;background:#fff;border-radius:16px;padding:6px}
.kqrbig svg{display:block;width:100%;height:auto}
.kc-code{margin:0;text-align:center;font:700 22px/1 ui-monospace,Menlo,monospace;letter-spacing:.14em}
.kcoupon.used,.kcoupon.expired{border-color:var(--line);filter:grayscale(1);opacity:.6}
.kshow{display:flex;flex-direction:column;gap:12px}
.kreg{font-size:14px;color:var(--ink-2);line-height:1.55}
.kreg p{margin:0 0 10px}
.kdanger{display:flex;flex-direction:column;gap:10px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}

@media (max-width:860px){
  .kdlg{width:100%;height:100%;height:100dvh;max-width:none;max-height:none;margin:0;border:0;border-radius:0}
  .khead{padding-top:calc(8px + env(safe-area-inset-top))}
}
.karta-open .ticker{visibility:hidden}
.lite .mcard .mc-i{box-shadow:0 0 0 1px var(--line)}
.lite .kcard{box-shadow:none}
@media (prefers-reduced-motion:reduce){.mcard.pulse .mc-i{animation:none}}

/* palmy za kwotę + lista nagród */
.krules{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:14px;background:color-mix(in srgb,var(--accent) 12%,#000);border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line))}
.krules small{color:var(--ink-2);font-size:13px}
.klogo.sm{width:72px;height:72px;margin-top:4px}
.khint.left{text-align:left}
.krewards{display:flex;flex-direction:column;gap:8px}
.krw{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--panel-2);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.krw.ok{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 10%,#000)}
.krw-c{flex:none;width:52px;display:flex;flex-direction:column;align-items:center;line-height:1}
.krw-c b{font-size:22px;color:var(--accent)}
.krw.ok .krw-c b{color:var(--gold)}
.krw-c small{font-size:11px;color:var(--muted)}
.krw-t{flex:1;min-width:0;display:flex;flex-direction:column}
.krw-t small{color:var(--muted);font-size:12.5px}
.krw-go{color:var(--accent);font-size:20px}
.krw.ok .krw-go{font-size:14px;font-weight:600;color:#000;background:var(--gold);padding:6px 10px;border-radius:999px}
.kbig b{font-size:64px}
.kpink{color:var(--accent);font-weight:600}

/* różowy obrys karty */
.kcard{box-shadow:0 0 0 2px var(--accent),0 10px 30px rgba(0,0,0,.6)}
.lite .kcard{box-shadow:0 0 0 2px var(--accent)}
.krew .kgrp{display:block;padding:6px 2px 0;border:0;background:none;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.kprog .krewards{margin-top:4px}