/* =========================================================
   CINEMATIC UI — tło HUD, poświata, przejścia, ekran przyciągający
   Wszystko jest wyłączane przez prefers-reduced-motion (main.css)
   ========================================================= */

/* ===== tło HUD ===== */
.hud-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hud-grid {
  position: absolute; inset: -2px;
  background:
    linear-gradient(rgba(59,228,255,.055) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(59,228,255,.055) 1px, transparent 1px) 0 0 / 48px 48px,
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(125,155,69,.16), transparent 70%),
    radial-gradient(ellipse 70% 50% at 50% 110%, rgba(59,228,255,.10), transparent 70%),
    var(--bg);
  mask-image: radial-gradient(ellipse 90% 80% at 50% 45%, #000 50%, transparent 100%);
}
.hud-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.65) 100%); }
.hud-scan {
  position: absolute; left: 0; right: 0; height: 18vh; top: -20vh;
  background: linear-gradient(180deg, transparent, rgba(59,228,255,.06) 60%, rgba(59,228,255,.14) 98%, transparent);
  animation: scan 9s linear infinite;
}
@keyframes scan { to { transform: translateY(140vh); } }

/* narożniki "celownika" na kartach */
.meal::before, .meal::after {
  content: ""; position: absolute; width: 22px; height: 22px; pointer-events: none;
  border: 2px solid rgba(59,228,255,.55);
}
.meal::before { top: 8px; left: 8px; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
.meal::after { right: 8px; bottom: 8px; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }

/* ===== wejście kart ===== */
.meal, .topbar, .dock { animation: rise .8s var(--ease-out) both; }
.meal { animation-delay: calc(.12s + var(--i) * .12s); }
.dock { animation-delay: .36s; }
@keyframes rise {
  from { opacity: 0; transform: translateY(26px) scale(.98); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* ===== przechodząca poświata (sweep) na przyciskach 3D ===== */
.btn3d::after {
  content: "";
  position: absolute; inset: -40% auto -40% -60%;
  width: 45%;
  z-index: 1;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-18deg) translateX(0);
  opacity: 0;
  pointer-events: none;
}
/* przyciski oceny dostają falę poświaty kolejno, co kilka sekund — widać z daleka */
.rate .btn3d::after { animation: sweep 6s ease-in-out infinite; }
.rate .btn3d:nth-child(2)::after { animation-delay: .18s; }
.rate .btn3d:nth-child(3)::after { animation-delay: .36s; }
.meal[data-meal="danie"] .rate .btn3d::after { animation-delay: .9s; }
.meal[data-meal="danie"] .rate .btn3d:nth-child(2)::after { animation-delay: 1.08s; }
.meal[data-meal="danie"] .rate .btn3d:nth-child(3)::after { animation-delay: 1.26s; }
.rate.has-choice .btn3d::after { animation: none; }
@keyframes sweep {
  0%, 70% { opacity: 0; transform: skewX(-18deg) translateX(0); }
  72% { opacity: 1; }
  92% { opacity: 1; transform: skewX(-18deg) translateX(380%); }
  100% { opacity: 0; transform: skewX(-18deg) translateX(380%); }
}

/* rozbłysk po wybraniu */
.btn3d.burst::before {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit;
  background: radial-gradient(circle at var(--bx, 50%) var(--by, 50%), rgba(255,255,255,.9), transparent 60%);
  animation: burst .55s var(--ease-out) forwards;
  pointer-events: none;
}
@keyframes burst { from { opacity: 1; transform: scale(.4); } to { opacity: 0; transform: scale(1.6); } }

/* pulsowanie zaznaczenia */
.rate .btn3d.sel { animation: selGlow 2.4s ease-in-out infinite; }
@keyframes selGlow {
  50% { filter: brightness(1.12); }
}

/* ===== status karty: zachęta "przyłóż kartę" ===== */
body.state-idle .card-status { animation: beacon 2.4s ease-in-out infinite; }
body.state-idle .nfc-ring { animation: ringPulse 2.4s ease-in-out infinite; }
@keyframes beacon {
  0%, 100% { box-shadow: 0 0 0 0 rgba(59,228,255,.0), 0 0 22px rgba(59,228,255,.12); }
  50% { box-shadow: 0 0 0 6px rgba(59,228,255,.10), 0 0 46px rgba(59,228,255,.35); }
}
@keyframes ringPulse { 50% { transform: scale(1.08); border-color: var(--cyan); } }

body.state-ready .card-status {
  border-color: rgba(185,242,75,.6);
  background: linear-gradient(180deg, rgba(185,242,75,.14), rgba(185,242,75,.03));
}
body.state-ready .nfc-ring { color: var(--lime); border-color: var(--lime); background: radial-gradient(circle, rgba(185,242,75,.28), transparent 70%); }
body.state-ready #cardTitle { color: var(--lime); }

/* ===== WYŚLIJ ===== */
/* karta przyłożona, ankieta niekompletna: spokojna fala poświaty, bez pulsu */
.send:not(:disabled)::after { animation: sweep 4.2s ease-in-out infinite; }

/* gotowy do wysłania: zielony puls (drop-shadow podąża za kształtem "nadgryzienia") */
@property --bite { syntax: "<length>"; inherits: true; initial-value: 0px; }
.send-zone .send {
  --bite: 0px;
  --bite-x: calc(100% - clamp(10px, 1.1vw, 16px));
  --bite-y: 4px;
  transition: --bite .45s var(--ease-spring), transform .09s var(--ease-out), box-shadow .09s, filter .2s;
}
.send-zone.ready .send {
  --bite: clamp(15px, 1.7vw, 26px);
  /* trzy zachodzące koła w prawym górnym rogu = ślad zębów */
  -webkit-mask:
    radial-gradient(circle at var(--bite-x) var(--bite-y), transparent var(--bite), #000 calc(var(--bite) + 1px)),
    radial-gradient(circle at calc(var(--bite-x) - var(--bite) * 1.45) calc(var(--bite-y) - var(--bite) * .5), transparent calc(var(--bite) * .62), #000 calc(var(--bite) * .62 + 1px)),
    radial-gradient(circle at calc(var(--bite-x) + var(--bite) * .55) calc(var(--bite-y) + var(--bite) * 1.35), transparent calc(var(--bite) * .62), #000 calc(var(--bite) * .62 + 1px));
  -webkit-mask-composite: source-in, source-in;
  mask:
    radial-gradient(circle at var(--bite-x) var(--bite-y), transparent var(--bite), #000 calc(var(--bite) + 1px)),
    radial-gradient(circle at calc(var(--bite-x) - var(--bite) * 1.45) calc(var(--bite-y) - var(--bite) * .5), transparent calc(var(--bite) * .62), #000 calc(var(--bite) * .62 + 1px)),
    radial-gradient(circle at calc(var(--bite-x) + var(--bite) * .55) calc(var(--bite-y) + var(--bite) * 1.35), transparent calc(var(--bite) * .62), #000 calc(var(--bite) * .62 + 1px));
  mask-composite: intersect;
}
/* zielony puls rysowany pod przyciskiem (.send-bite::before) — wycięcie zostaje czyste */
.send-zone.ready .send-bite::before { animation: readyPulse 1.6s ease-in-out infinite; }
.send-zone.ready .send::after { animation: sweep 2.6s ease-in-out infinite; }
@keyframes readyPulse {
  0%, 100% { box-shadow: 0 12px 22px rgba(0,0,0,.5), 0 0 0 0 transparent; }
  50%      { box-shadow: 0 12px 22px rgba(0,0,0,.5), 0 0 30px 6px var(--ready-glow); }
}
.send-zone.ready .send-txt { animation: readyText 1.6s ease-in-out infinite; }
@keyframes readyText { 50% { transform: scale(1.05); } }
.send-zone.sending .send { animation: launch .55s var(--ease-out) forwards; }
@keyframes launch {
  0%   { transform: translateY(6px) scale(.97); }
  45%  { transform: translateY(-4px) scale(1.04); filter: brightness(1.5); }
  100% { transform: translateY(0) scale(1); filter: brightness(1.1); }
}

/* ===== prowadzenie: następny krok pulsuje ===== */
.step.next::before {
  content: ""; position: absolute; inset: -5px; z-index: 0; pointer-events: none;
  border-radius: calc(var(--r-sm) + 5px);
  border: 2px solid var(--guide);
  animation: guide 1.9s ease-in-out infinite;
}
@keyframes guide {
  0%, 100% { opacity: .25; box-shadow: 0 0 0 0 transparent; }
  50%      { opacity: 1;   box-shadow: 0 0 22px 2px var(--guide); }
}
.klasa.next::before { inset: -3px; border-radius: calc(var(--r) + 3px); }

/* ===== brakujące pole ===== */
.step.need { animation: shake .42s cubic-bezier(.36,.07,.19,.97) both; }
.step.need::before {
  content: ""; position: absolute; inset: -5px; z-index: 0; pointer-events: none;
  border-radius: calc(var(--r-sm) + 5px);
  border: 3px solid var(--need);
  animation: needPulse .9s ease-in-out 3;
}
.klasa.need::before { inset: -3px; border-radius: calc(var(--r) + 3px); }
@keyframes needPulse { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 26px 4px color-mix(in srgb, var(--need) 70%, transparent); } }
@keyframes shake {
  10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px); } 40%, 60% { transform: translateX(7px); }
}

/* ===== wybór klasy: wybuch ===== */
.klasa-row .btn3d::after { animation: sweep 6s ease-in-out infinite; animation-delay: calc(1.7s + var(--k, 0) * .15s); }
.klasa-row.has-choice .btn3d::after { animation: none; }
.klasa-btn.boom { animation: boom .5s var(--ease-spring); }
@keyframes boom {
  0%   { transform: translateY(2px) scale(1); }
  30%  { transform: translateY(0) scale(1.14); filter: brightness(1.6); }
  60%  { transform: translateY(2px) scale(.96); }
  100% { transform: translateY(2px) scale(1); }
}
.klasa-btn.sel b { animation: digitPulse 2.2s ease-in-out infinite; }
@keyframes digitPulse { 50% { transform: scale(1.12); } }

/* ===== drobne pulsy nadające dynamikę ===== */
/* narożniki celownika "oddychają" */
.meal::before, .meal::after { animation: bracket 3.2s ease-in-out infinite; }
.meal[data-meal="danie"]::before, .meal[data-meal="danie"]::after { animation-delay: 1.6s; }
@keyframes bracket { 50% { border-color: var(--cyan); box-shadow: 0 0 12px rgba(59,228,255,.45); } }
/* czytnik gotowy: kropka "na żywo" */
.reader-chip[data-state="ok"] i { animation: live 1.6s ease-in-out infinite; }
@keyframes live { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--lime) 70%, transparent); } 50% { box-shadow: 0 0 0 6px transparent; } }
/* średnia dnia delikatnie migocze */
.stars-num { animation: twinkle 4s ease-in-out infinite; display: inline-block; }
@keyframes twinkle { 50% { transform: scale(1.08); text-shadow: 0 0 12px rgba(255,184,63,.7); } }

/* ===== błysk NFC ===== */
.flash {
  position: fixed; inset: 0; z-index: 55; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at var(--fx, 70%) var(--fy, 6%), rgba(185,242,75,.45), rgba(59,228,255,.12) 35%, transparent 65%);
}
.flash.go { animation: flash .9s var(--ease-out); }
@keyframes flash { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }

.card-status.confirm .nfc-ring { animation: confirmRing .7s var(--ease-spring); }
@keyframes confirmRing { 0% { transform: scale(.7); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* ===== gwiazdki ===== */
.star .fill { transition: width 1.1s var(--ease-out); }
.stars.animate .star { animation: starPop .5s var(--ease-spring) both; animation-delay: calc(var(--s) * 70ms); }
@keyframes starPop { from { transform: scale(.3) rotate(-30deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* ===== toast ===== */
.toast.show .toast-ring circle { stroke-dasharray: 150; stroke-dashoffset: 150; animation: draw .6s .05s var(--ease-out) forwards; }
.toast.show .toast-ring path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .4s .45s var(--ease-out) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.toast.show p { animation: rise .6s .15s var(--ease-out) both; }

/* ===== przejście do trybu pisania ===== */
body.kb-open .comment { animation: rise .4s var(--ease-out); }
.app.dim { filter: blur(3px) brightness(.5); transition: filter .3s; }

/* ===== EKRAN PRZYCIĄGAJĄCY (po bezczynności) ===== */
.attract {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  padding: 4vh 4vw;
  background:
    radial-gradient(ellipse 60% 50% at 50% 45%, rgba(59,228,255,.14), transparent 70%),
    radial-gradient(ellipse at center, rgba(6,8,12,.82), rgba(6,8,12,.97));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden;
  transition: opacity .6s, visibility .6s;
  cursor: pointer;
}
body.attract-on .attract { opacity: 1; visibility: visible; }
.attract-core { display: grid; justify-items: center; text-align: center; gap: clamp(10px, 2.4vh, 28px); }

.radar { position: relative; width: clamp(140px, 26vh, 280px); aspect-ratio: 1; display: grid; place-items: center; color: var(--cyan); }
.radar span {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--cyan);
  opacity: 0;
  animation: radar 3s var(--ease-out) infinite;
}
.radar span:nth-child(2) { animation-delay: 1s; }
.radar span:nth-child(3) { animation-delay: 2s; }
.radar svg {
  width: 46%; height: 46%;
  filter: drop-shadow(0 0 18px rgba(59,228,255,.8));
  animation: ringPulse 1.5s ease-in-out infinite;
}
.radar::before {
  content: ""; position: absolute; inset: 22%; border-radius: 50%;
  background: radial-gradient(circle, rgba(59,228,255,.32), rgba(59,228,255,.04) 70%);
  border: 2px solid rgba(59,228,255,.7);
  box-shadow: 0 0 60px rgba(59,228,255,.45), inset 0 0 30px rgba(59,228,255,.3);
}
@keyframes radar { 0% { transform: scale(.45); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }

.attract-kicker { font-family: var(--mono); font-size: clamp(12px, 1.5vw, 18px); letter-spacing: .3em; color: var(--lime); }
.attract-title {
  font-size: clamp(44px, 10vw, 150px);
  font-weight: 900;
  line-height: 1;
  padding-top: .12em;
  letter-spacing: -.01em;
  display: flex; flex-wrap: wrap; justify-content: center; column-gap: .25em;
  background: linear-gradient(100deg, #e9f6fb 0%, #e9f6fb 38%, var(--cyan) 46%, #fff 50%, var(--cyan) 54%, #e9f6fb 62%, #e9f6fb 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: titleSweep 4.5s linear infinite;
  filter: drop-shadow(0 0 30px rgba(59,228,255,.25));
}
@keyframes titleSweep { from { background-position: 100% 0; } to { background-position: -50% 0; } }
.attract-sub { font-size: clamp(16px, 2.2vw, 30px); color: var(--muted); max-width: 32ch; }
.attract-stats { display: flex; gap: clamp(14px, 4vw, 60px); margin-top: 1vh; }
.attract-stats div { display: grid; justify-items: center; gap: 2px; padding: 10px 18px; border-top: 2px solid var(--line-strong); min-width: 9ch; }
.attract-stats strong { font-family: var(--mono); font-size: clamp(26px, 4vw, 54px); color: var(--amber); }
.attract-stats small { font-size: clamp(11px, 1.2vw, 16px); letter-spacing: .16em; color: var(--muted); text-transform: uppercase; }

/* ostatnie 10 s sesji: status karty zmienia się na bursztynowy */
body.state-ready .card-status.hurry { border-color: rgba(255,184,63,.75); background: linear-gradient(180deg, rgba(255,184,63,.16), rgba(255,184,63,.03)); }
body.state-ready .card-status.hurry .nfc-ring { color: var(--amber); border-color: var(--amber); }
body.state-ready .card-status.hurry #cardTitle { color: var(--amber); }

/* =========================================================
   WYGASZACZ v2: wielki zegar hh:mm:ss:sss + słoneczny błysk co 10 s
   ========================================================= */
.attract { overflow: hidden; }
.attract-core { width: min(100%, 1500px); gap: clamp(8px, 2vh, 24px); position: relative; z-index: 1; }
.attract-kicker { font-size: clamp(13px, 1.7vw, 22px); letter-spacing: .42em; }

.big-clock {
  display: grid; justify-items: center; gap: clamp(2px, .8vh, 10px);
  /* min. 1/4 ekranu: szerokość ~85% i wysokość ~25% widoku */
  --cw: .64em;
  font-size: min(14.6vw, 27vh);
  line-height: 1;
}
.bc-day {
  font-size: clamp(16px, .2em, 40px);
  font-weight: 800; letter-spacing: .32em; color: var(--amber);
  text-shadow: 0 0 18px rgba(255,184,63,.45);
  animation: rise .9s var(--ease-out) both;
}
.bc-time {
  display: flex; align-items: center;
  font-family: var(--mono); font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #f4fbff;
  /* poświata na całym zegarze (filter, nie text-shadow — nie przycina się do pól cyfr) */
  filter: drop-shadow(0 0 .14em rgba(59,228,255,.6)) drop-shadow(0 .04em 0 rgba(0,0,0,.6));
}
.bc-grp { display: inline-flex; }
.bc-sep { width: .34em; text-align: center; color: var(--cyan); opacity: .9; animation: sepBlink 1s steps(2) infinite; transform: translateY(-.06em); }
@keyframes sepBlink { 50% { opacity: .25; } }

/* cyfra hh / mm / ss: stara odjeżdża w górę z rozmyciem, nowa wjeżdża z dołu ze sprężyną */
.bc-dg { position: relative; display: inline-block; width: var(--cw); height: 1.08em; }
.bc-dg i {
  position: absolute; inset: 0; display: grid; place-items: center; font-style: normal;
}
.bc-dg i.in  { animation: dgIn .62s var(--ease-spring) both; }
.bc-dg i.out { animation: dgOut .5s var(--ease-out) both; }
@keyframes dgIn  { from { transform: translateY(85%) scale(.8); filter: blur(6px); opacity: 0; } to { transform: none; filter: none; opacity: 1; } }
@keyframes dgOut { to { transform: translateY(-85%) scale(1.15); filter: blur(8px); opacity: 0; } }
/* błysk światła przy każdej zmianie cyfry */
.bc-dg::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
}
.bc-dg.hit::after { animation: dgHit .55s var(--ease-out); }
@keyframes dgHit { 0% { opacity: .9; transform: translateY(-60%); } 100% { opacity: 0; transform: translateY(60%); } }
/* godziny i minuty — mocniejsza poświata, ich zmiana to wydarzenie */
.bc-grp[data-u="h"] .bc-dg.hit, .bc-grp[data-u="m"] .bc-dg.hit { animation: dgBoom .9s var(--ease-out); }
@keyframes dgBoom { 0% { filter: brightness(1.9) drop-shadow(0 0 .2em var(--amber)); } 100% { filter: none; } }

/* milisekundy: karuzela — taśmy cyfr przewijają się w pionie */
.bc-ms { font-size: .62em; color: var(--amber); align-self: center; filter: drop-shadow(0 0 .2em rgba(255,184,63,.55)); }
.bc-sep-ms { font-size: .62em; color: var(--amber); }
.bc-reel {
  position: relative; display: inline-block; width: var(--cw); height: 1.1em; overflow: hidden;
  mask-image: linear-gradient(transparent, #000 28%, #000 72%, transparent);
  -webkit-mask-image: linear-gradient(transparent, #000 28%, #000 72%, transparent);
}
.bc-strip { position: absolute; left: 0; right: 0; top: 0; display: grid; will-change: transform; }
.bc-strip i { height: 1.1em; display: grid; place-items: center; font-style: normal; }
.bc-reel[style*="--r:1"] .bc-strip { filter: blur(.4px); }
.bc-reel[style*="--r:2"] .bc-strip { filter: blur(1.2px); opacity: .85; }

.attract-cta { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 3vw, 48px); }
.attract-cta .radar { width: clamp(96px, 17vh, 190px); }
.attract-words { display: grid; gap: clamp(4px, 1vh, 12px); text-align: left; }
.attract .attract-title { font-size: clamp(32px, 5.6vw, 96px); justify-content: flex-start; }
.attract .attract-sub { font-size: clamp(16px, 2vw, 30px); color: #dfeaf0; max-width: none; }
.attract-nonfc { display: none; font-size: clamp(13px, 1.4vw, 20px); color: var(--muted); }
body:not(.has-reader) .attract-nonfc { display: block; }

/* słońce: co 10 s lekki błysk żółto-pomarańczowo-biały od lewego dolnego do prawego górnego rogu */
.sun-sweep { position: absolute; inset: -50%; pointer-events: none; z-index: 2; mix-blend-mode: screen; opacity: 0; }
.sun-sweep::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 26%;
  transform: translateY(-50%) rotate(40deg);
  background: linear-gradient(180deg,
    transparent 0%, rgba(255,140,30,.07) 22%, rgba(255,196,64,.18) 38%,
    rgba(255,250,235,.36) 50%, rgba(255,196,64,.18) 62%, rgba(255,140,30,.07) 78%, transparent 100%);
  filter: blur(18px);
}
body.attract-on .sun-sweep { animation: sunSweep 10s linear infinite; animation-delay: 1.2s; }
@keyframes sunSweep {
  0%   { transform: translate(-38%, 38%); opacity: 0; }
  2%   { opacity: 1; }
  15%  { transform: translate(38%, -38%); opacity: 1; }
  17%  { transform: translate(42%, -42%); opacity: 0; }
  100% { transform: translate(42%, -42%); opacity: 0; }
}

/* pion (tablet / telefon): milisekundy pod zegarem, większe cyfry */
@media (orientation: portrait) {
  .big-clock { font-size: min(20vw, 15vh); }
  .bc-time { flex-wrap: wrap; justify-content: center; row-gap: .05em; }
  .bc-sep-ms { display: none; }
  .bc-ms { flex-basis: 100%; justify-content: center; font-size: .6em; }
  .attract-cta { flex-direction: column; text-align: center; }
  .attract-words { text-align: center; }
  .attract .attract-title { justify-content: center; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .attract-cta .radar { display: none; }
  .attract-stats { display: none; }
}

/* =========================================================
   STRZAŁKA DO CZYTNIKA — gdzie przyłożyć kartę (panel: górny / dolny / lewy / prawy bok)
   ========================================================= */
.reader-arrow {
  --ra: var(--cyan);
  position: fixed; z-index: 60; pointer-events: none;
  display: grid; justify-items: center; gap: 6px;
  opacity: 0; visibility: hidden; transition: opacity .5s, visibility .5s;
  color: var(--ra);
}
/* widoczna: wygaszacz i okno identyfikacji — tylko gdy czytnik jest podłączony */
body.has-reader.attract-on .reader-arrow,
body.has-reader.ident-on .reader-arrow { opacity: 1; visibility: visible; }

.ra-chevs { display: grid; justify-items: center; }
.ra-chevs i {
  display: block; width: clamp(34px, 5vmin, 64px); aspect-ratio: 2 / 1;
  margin-top: calc(clamp(34px, 5vmin, 64px) * -.18);
  background: currentColor;
  clip-path: polygon(0 0, 50% 62%, 100% 0, 100% 38%, 50% 100%, 0 38%);
  filter: drop-shadow(0 0 10px currentColor);
  opacity: .15;
  animation: chev 1.2s var(--ease-out) infinite;
}
.ra-chevs i:nth-child(2) { animation-delay: .18s; }
.ra-chevs i:nth-child(3) { animation-delay: .36s; }
@keyframes chev { 0%, 100% { opacity: .12; } 35% { opacity: 1; } }
.ra-label {
  font-family: var(--mono); font-size: clamp(11px, 1.3vmin, 15px); letter-spacing: .28em;
  padding: 5px 12px; border-radius: 999px; white-space: nowrap;
  color: #031016; background: var(--ra); box-shadow: 0 0 22px color-mix(in srgb, var(--ra) 70%, transparent);
}
/* snop światła przy krawędzi ekranu — tam jest czytnik */
.ra-beam {
  position: absolute; width: clamp(180px, 30vmin, 360px); height: clamp(60px, 9vmin, 110px);
  background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--ra) 55%, transparent), transparent 70%);
  animation: beam 1.2s ease-in-out infinite;
}
@keyframes beam { 50% { opacity: .45; } }

.reader-arrow[data-side="dol"]   { left: 50%; bottom: max(6px, env(safe-area-inset-bottom)); transform: translateX(-50%); grid-template-areas: "label" "chev"; }
.reader-arrow[data-side="gora"]  { left: 50%; top: 6px; transform: translateX(-50%); grid-template-areas: "chev" "label"; }
.reader-arrow[data-side="lewo"]  { left: 6px; top: 50%; transform: translateY(-50%); grid-template-columns: auto auto; grid-template-areas: "chev label"; align-items: center; }
.reader-arrow[data-side="prawo"] { right: 6px; top: 50%; transform: translateY(-50%); grid-template-columns: auto auto; grid-template-areas: "label chev"; align-items: center; }
.reader-arrow .ra-chevs { grid-area: chev; }
.reader-arrow .ra-label { grid-area: label; }
.reader-arrow[data-side="dol"]   .ra-chevs { animation: bobD 1.2s ease-in-out infinite; }
.reader-arrow[data-side="gora"]  .ra-chevs { transform: rotate(180deg); animation: bobU 1.2s ease-in-out infinite; }
.reader-arrow[data-side="lewo"]  .ra-chevs { transform: rotate(90deg);  animation: bobL 1.2s ease-in-out infinite; }
.reader-arrow[data-side="prawo"] .ra-chevs { transform: rotate(-90deg); animation: bobR 1.2s ease-in-out infinite; }
@keyframes bobD { 50% { transform: translateY(10px); } }
@keyframes bobU { 0%, 100% { transform: rotate(180deg); } 50% { transform: rotate(180deg) translateY(10px); } }
@keyframes bobL { 0%, 100% { transform: rotate(90deg); }  50% { transform: rotate(90deg) translateY(10px); } }
@keyframes bobR { 0%, 100% { transform: rotate(-90deg); } 50% { transform: rotate(-90deg) translateY(10px); } }
.reader-arrow[data-side="dol"]   .ra-beam { bottom: -20px; left: 50%; translate: -50% 0; }
.reader-arrow[data-side="gora"]  .ra-beam { top: -20px; left: 50%; translate: -50% 0; rotate: 180deg; }
.reader-arrow[data-side="lewo"]  .ra-beam { left: -20px; top: 50%; translate: -35% -50%; rotate: 90deg; }
.reader-arrow[data-side="prawo"] .ra-beam { right: -20px; top: 50%; translate: 35% -50%; rotate: -90deg; }

/* =========================================================
   OKNO IDENTYFIKACJI — karta albo numer karty
   ========================================================= */
.ident {
  position: fixed; inset: 0; z-index: 55;
  display: grid; place-items: center; padding: 3vh 3vw;
  background: radial-gradient(ellipse at center, rgba(6,8,12,.72), rgba(6,8,12,.94));
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s;
}
body.ident-on .ident { opacity: 1; visibility: visible; }
.ident-card {
  position: relative; width: min(960px, 100%); max-height: 100%; overflow: auto;
  display: grid; gap: clamp(10px, 2vh, 22px); justify-items: center; text-align: center;
  padding: clamp(18px, 3.4vh, 40px) clamp(16px, 3vw, 44px);
  border-radius: calc(var(--r) * 1.4);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line-strong);
  box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(59,228,255,.12), 0 0 60px rgba(59,228,255,.12);
  transform: translateY(24px) scale(.96); transition: transform .45s var(--ease-spring);
}
body.ident-on .ident-card { transform: none; }
.ident-close {
  position: absolute; top: 12px; right: 12px; width: 48px; height: 48px; border-radius: 50%;
  font-size: 20px; color: var(--muted); background: rgba(255,255,255,.06); border: 1px solid var(--line);
}
.ident-kicker { font-family: var(--mono); letter-spacing: .3em; font-size: clamp(11px, 1.2vw, 15px); color: var(--lime); }
.ident-title { font-size: clamp(22px, 3.2vw, 44px); font-weight: 900; line-height: 1.05; }
.ident-title span { color: var(--cyan); }
.ident-grid { display: grid; grid-template-columns: 1fr auto 1.25fr; align-items: center; gap: clamp(12px, 2.4vw, 36px); width: 100%; }
body:not(.has-reader) .ident-grid { grid-template-columns: 1fr; }
body:not(.has-reader) .ident-tap, body:not(.has-reader) .ident-or { display: none; }
body:not(.has-reader) .ident-title br, body:not(.has-reader) .ident-title { font-size: clamp(22px, 3vw, 40px); }
.ident-tap { display: grid; justify-items: center; gap: 8px; }
.ident-tap strong { font-size: clamp(18px, 2vw, 26px); letter-spacing: .08em; }
.ident-tap small { color: var(--muted); font-size: clamp(13px, 1.3vw, 17px); }
.radar.mini { width: clamp(110px, 18vh, 190px); }
.ident-or { display: grid; place-items: center; align-self: stretch; position: relative; }
.ident-or::before { content: ""; position: absolute; top: 6%; bottom: 6%; width: 1px; background: var(--line-strong); }
.ident-or span { position: relative; padding: 8px 4px; background: var(--panel); font-family: var(--mono); letter-spacing: .2em; color: var(--muted); font-size: 13px; }

.ident-num { display: grid; gap: clamp(10px, 1.6vh, 16px); justify-items: center; }
.pin { display: flex; gap: clamp(8px, 1vw, 14px); }
.pin-box {
  width: clamp(48px, 6.4vmin, 76px); aspect-ratio: 4 / 5; border-radius: var(--r-sm);
  display: grid; place-items: center;
  font-family: var(--mono); font-weight: 800; font-size: clamp(28px, 4.4vmin, 50px);
  background: var(--input-bg); border: 2px solid var(--line-strong); color: var(--text);
  transition: border-color .2s, box-shadow .2s;
}
.pin-box.caret { border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(59,228,255,.16); animation: caretGlow 1.1s ease-in-out infinite; }
@keyframes caretGlow { 50% { box-shadow: 0 0 0 4px rgba(59,228,255,.04); } }
.pin-box.filled { border-color: rgba(59,228,255,.7); }
.pin-box.pop { animation: pinPop .32s var(--ease-spring); }
@keyframes pinPop { from { transform: scale(1.25); } }
.pin[data-state="error"] { animation: shake .45s; }
.pin[data-state="error"] .pin-box { border-color: var(--red); }
.pin[data-state="ok"] .pin-box { border-color: var(--lime); box-shadow: 0 0 18px rgba(185,242,75,.5); color: var(--lime); }
@keyframes shake { 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } }

.numpad { display: grid; grid-template-columns: repeat(3, clamp(64px, 9.5vmin, 96px)); gap: clamp(6px, 1vmin, 12px); }
.numpad button {
  aspect-ratio: 1; border-radius: var(--r-sm);
  font-family: var(--mono); font-size: clamp(24px, 3.6vmin, 38px); font-weight: 800; color: var(--text);
  background: linear-gradient(180deg, var(--steel-1), var(--steel-2));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 5px 0 var(--steel-edge), inset 0 1px 0 rgba(255,255,255,.12);
  transition: transform .08s, box-shadow .08s;
}
.numpad button:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--steel-edge); }
.numpad .np-ok { background: linear-gradient(180deg, var(--ready-1), var(--ready-2)); color: #0b1a04; box-shadow: 0 5px 0 var(--ready-edge); font-size: clamp(18px, 2.6vmin, 28px); }
.numpad .np-back { font-size: clamp(20px, 3vmin, 30px); color: var(--muted); }
.ident-msg { min-height: 1.4em; font-size: clamp(14px, 1.5vw, 19px); color: var(--muted); }
.ident-msg[data-kind="error"] { color: var(--red); font-weight: 700; }

@media (orientation: portrait), (max-width: 760px) {
  .ident-grid { grid-template-columns: 1fr; }
  .ident-or { align-self: auto; }
  .ident-or::before { top: 50%; bottom: auto; left: 10%; right: 10%; width: auto; height: 1px; }
  .radar.mini { width: clamp(80px, 12vh, 130px); }
}

/* status karty na górze: wyraźna podpowiedź, że można podać numer */
body.state-idle:not(.no-number) #cardSub { color: var(--text); }
.ident-kicker { padding: 0 52px; }
@media (max-width: 520px) { .ident-kicker { letter-spacing: .14em; } .ident-close { width: 40px; height: 40px; top: 8px; right: 8px; } }

/* =========================================================
   WYGASZACZ v3: zegar mniejszy, w lewym górnym rogu (margines 2% szerokości ekranu),
   czytelny — ostre cyfry na ciemnej płytce; środek ekranu dla „OCEŃ DZISIEJSZY OBIAD”
   ========================================================= */
.big-clock {
  position: absolute; top: 2vw; left: 2vw; z-index: 3;
  justify-items: start; gap: .1em;
  font-size: clamp(30px, 4.6vw, 84px);
  padding: .16em .3em .12em;
  border-radius: .18em;
  background: rgba(4, 7, 10, .72);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 40px rgba(0,0,0,.45);
}
.bc-day { font-size: max(12px, .24em); letter-spacing: .22em; text-shadow: none; padding-left: .08em; }
.bc-time { color: #ffffff; filter: none; text-shadow: none; }
.bc-sep { width: .3em; color: var(--cyan); animation: none; opacity: .85; }
.bc-ms, .bc-sep-ms { font-size: .7em; filter: none; }
.bc-reel[style*="--r:1"] .bc-strip, .bc-reel[style*="--r:2"] .bc-strip { filter: none; opacity: 1; }
.bc-dg i.in  { animation: dgIn .5s var(--ease-spring) both; }
@keyframes dgIn { from { transform: translateY(70%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes dgOut { to { transform: translateY(-70%); opacity: 0; } }
.bc-grp[data-u="h"] .bc-dg.hit, .bc-grp[data-u="m"] .bc-dg.hit { animation: dgBoom .8s var(--ease-out); }
@keyframes dgBoom { 0% { color: var(--amber); } 100% { color: inherit; } }

/* środek: radar nad napisem, jak wcześniej */
.attract-core { padding-top: clamp(40px, 9vh, 120px); }
.attract-cta { flex-direction: column; text-align: center; gap: clamp(10px, 2.4vh, 26px); }
.attract-cta .radar { width: clamp(130px, 24vh, 260px); }
.attract-words { text-align: center; justify-items: center; }
.attract .attract-title { font-size: clamp(40px, 8vw, 140px); justify-content: center; }
.attract .attract-sub { font-size: clamp(16px, 2.2vw, 32px); }

@media (orientation: portrait) {
  .big-clock { font-size: clamp(26px, 7vw, 72px); }
  .bc-time { flex-wrap: nowrap; }
  .bc-sep-ms { display: inline; }
  .bc-ms { flex-basis: auto; font-size: .7em; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .big-clock { font-size: clamp(22px, 3.6vw, 44px); }
  .attract-core { padding-top: 56px; }
}
/* v3 — czytelność: stara cyfra nie nachodzi na nową, dwukropki wyśrodkowane */
.bc-dg { overflow: hidden; }
.bc-dg i.out { animation: dgOut .28s ease-in both; }
.bc-sep { display: inline-grid; place-items: center; height: 1.08em; overflow: hidden; }
.attract .attract-title { font-size: clamp(36px, 6.2vw, 120px); }
.attract-cta .radar { width: clamp(110px, 19vh, 220px); }
body.has-reader[data-reader="dol"] .attract-core { padding-bottom: clamp(70px, 12vh, 130px); }
/* dwukropek rysowany kropkami — ostry w każdej czcionce */
.bc-sep { position: relative; display: inline-block; width: .32em; height: 1.08em; color: transparent !important; overflow: visible; --dot: var(--cyan); }
.bc-sep::before, .bc-sep::after { content: ""; position: absolute; left: 50%; width: .12em; height: .12em; border-radius: 50%; background: var(--dot); transform: translateX(-50%); }
.bc-sep::before { top: .34em; } .bc-sep::after { top: .66em; }
.bc-sep-ms { --dot: var(--amber); }
body[data-skin="moro"] .bc-sep { --dot: var(--beret-hi); }
body[data-skin="moro"] .bc-sep-ms { --dot: #ff8a9b; }

/* =========================================================
   v4 — COMMENTS: zakładka na ekranie oceny + wstęga z lewego dolnego rogu
   ========================================================= */
html, body { overflow-x: hidden; max-width: 100vw; }
.comment-tab {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr);
  column-gap: 12px; row-gap: 4px; align-items: center; text-align: left;
  min-height: clamp(64px, 9vh, 110px); padding: clamp(10px, 1.2vh, 16px) var(--pad);
  border-radius: var(--r); background: var(--panel); border: 1px solid var(--line-strong); color: var(--text);
  overflow: hidden; isolation: isolate;
}
.comment-tab::before { /* lekka smuga z lewego dolnego rogu — zapowiedź wstęgi */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background: linear-gradient(45deg, rgba(255,255,255,.12), transparent 40%);
}
.ct-label {
  grid-column: 1; justify-self: start;
  font-size: clamp(16px, calc(.8vw + 1vh), 26px); font-weight: 900; letter-spacing: .18em; text-transform: uppercase;
  color: #ffffff; transform-origin: left center;
  animation: ctBreath 3.2s ease-in-out infinite;
}
@keyframes ctBreath {
  0%, 100% { transform: scale(1); text-shadow: 0 0 0 rgba(255,255,255,0); }
  50%      { transform: scale(1.06); text-shadow: 0 0 14px rgba(255,255,255,.75), 0 0 28px rgba(255,255,255,.35); }
}
.ct-preview {
  grid-column: 1; align-self: start; font-size: clamp(13px, calc(.5vw + .8vh), 18px); color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.comment-tab.filled .ct-preview { color: var(--text); }
.comment-tab.filled .ct-label { animation-duration: 5s; }
.ct-go {
  grid-column: 2; grid-row: 1 / span 2; width: clamp(44px, 5.4vh, 64px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.25);
}
.ct-go svg { width: 50%; }
.comment-tab:active { transform: translateY(2px); }

.ribbon {
  position: fixed; z-index: 45;
  left: max(2vw, 10px); right: max(2vw, 10px); top: max(2vh, 10px);
  bottom: calc(var(--kb-h, 50dvh) + max(1.4vh, 8px));
  visibility: hidden; pointer-events: none;
  clip-path: polygon(0 100%, 0 100%, 0 100%, 0 100%, 0 100%);
}
body.ribbon-on .ribbon { visibility: visible; pointer-events: auto; animation: ribbonIn .85s cubic-bezier(.2, .9, .25, 1) forwards; }
body.ribbon-closing .ribbon { visibility: visible; animation: ribbonOut .42s ease-in forwards; }
@keyframes ribbonIn {
  0%   { clip-path: polygon(0 100%, 0 100%, 0 100%, 0 100%, 0 100%); }
  50%  { clip-path: polygon(0 0, 0 0, 100% 100%, 100% 100%, 0 100%); }
  100% { clip-path: polygon(0 0, 100% 0, 100% 0, 100% 100%, 0 100%); }
}
@keyframes ribbonOut {
  0%   { clip-path: polygon(0 0, 100% 0, 100% 0, 100% 100%, 0 100%); }
  50%  { clip-path: polygon(0 0, 0 0, 100% 100%, 100% 100%, 0 100%); }
  100% { clip-path: polygon(0 100%, 0 100%, 0 100%, 0 100%, 0 100%); }
}
.ribbon-in {
  position: absolute; inset: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: clamp(8px, 1.4vh, 16px);
  padding: clamp(12px, 2vh, 24px) clamp(14px, 2vw, 28px);
  border-radius: var(--r);
  background:
    linear-gradient(135deg, rgba(255,255,255,.07), transparent 35%),
    linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 30px 80px rgba(0,0,0,.65), inset 0 0 0 1px rgba(59,228,255,.12);
}
/* świetlista krawędź wstęgi — przejeżdża po przekątnej razem z rozwinięciem */
.ribbon-edge {
  position: absolute; z-index: 2; left: -50%; top: -50%; width: 200%; height: 200%; pointer-events: none; opacity: 0;
  background: linear-gradient(135deg, transparent 46%, rgba(255,255,255,.0) 47%, rgba(255,255,255,.85) 50%, rgba(59,228,255,.5) 51.5%, transparent 54%);
}
body.ribbon-on .ribbon-edge { animation: ribbonEdge .85s cubic-bezier(.2, .9, .25, 1) forwards; }
@keyframes ribbonEdge { 0% { opacity: 1; transform: translate(-50%, 50%); } 85% { opacity: .9; } 100% { opacity: 0; transform: translate(50%, -50%); } }
.ribbon-head { display: flex; align-items: center; gap: 14px; }
.ribbon-head h2 { flex: 1; font-size: clamp(20px, 2.4vw, 34px); letter-spacing: .18em; text-transform: uppercase; color: #fff; }
.ribbon-done { min-height: 52px; padding: 0 22px; font-size: clamp(15px, 1.6vw, 22px); }
.chips-wrap { display: grid; gap: 8px; }
.chips-lbl { font-size: clamp(14px, 1.5vw, 20px); font-weight: 800; letter-spacing: .06em; color: var(--amber); }
.chips { display: flex; flex-wrap: wrap; gap: clamp(6px, 1vw, 12px); }
.chip {
  --chip-hot: #ffb83f;
  position: relative; min-height: clamp(48px, 6.4vh, 66px); padding: 0 clamp(14px, 1.8vw, 24px);
  border-radius: 999px; font-weight: 800; font-size: clamp(15px, calc(.7vw + .9vh), 22px); color: var(--text);
  background: linear-gradient(180deg, var(--steel-1), var(--steel-2));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 4px 0 var(--steel-edge), 0 8px 16px rgba(0,0,0,.35);
  transition: transform .1s, box-shadow .2s, background .2s, color .2s;
  animation: rise .45s var(--ease-out) both; animation-delay: calc(.35s + var(--i, 0) * 45ms);
}
.chip:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--steel-edge); }
.chip.on {
  color: #1d1000;
  background: radial-gradient(circle at 50% 30%, #fff3c4, #ffc04a 45%, #ff7a1a);
  border-color: #fff;
  box-shadow: 0 4px 0 #8a3c00, 0 0 0 3px rgba(255,255,255,.65), 0 0 28px rgba(255,170,40,.85);
}
.chip.blast { animation: chipBlast .55s var(--ease-spring); }
@keyframes chipBlast { 0% { transform: scale(.85); } 35% { transform: scale(1.18); filter: brightness(1.6); } 100% { transform: scale(1); filter: none; } }
.ribbon textarea {
  width: 100%; height: 100%; min-height: 56px; resize: none;
  padding: 12px 14px; border-radius: var(--r-sm);
  background: var(--input-bg); color: var(--text); border: 1px solid var(--line-strong);
  font: inherit; font-size: clamp(18px, 2.2vw, 30px); line-height: 1.3;
}
body.ribbon-on .keyboard { z-index: 47; }
body.ribbon-on .reader-arrow, body.ribbon-on .test-ribbon { display: none; }
@media (max-height: 640px) { .chips-wrap .chips-lbl { display: none; } .chip { min-height: 42px; } }

/* zachęta do wysłania po komentarzu */
.send-zone.invite .send-bite { animation: invite .9s var(--ease-spring) 4; }
@keyframes invite { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.06); filter: brightness(1.25) drop-shadow(0 0 22px var(--ready-glow)); } }

/* ===== KADRA (nauczyciel, dyrektor) — piąty przycisk przy klasach ===== */
.kadra-btn { display: grid; grid-template-rows: auto minmax(0, 1fr); justify-items: center; align-content: center; gap: 2px; padding: 4px 2px; }
.kadra-lbl { font-size: clamp(10px, calc(.45vw + .6vh), 14px); font-weight: 900; letter-spacing: .14em; position: relative; z-index: 2; }
.kadra-ico { width: auto; height: clamp(30px, calc(1.2vw + 2.6vh), 58px); position: relative; z-index: 2; }
.kadra-btn.sel .kadra-ico { animation: digitPulse 2.2s ease-in-out infinite; }

/* ===== identyfikacja: zakładki, telefon + imię ===== */
.ident-tabs { display: inline-flex; gap: 6px; padding: 5px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid var(--line); }
.ident-tabs[hidden] { display: none; }
.ident-tabs button { min-height: 46px; padding: 0 20px; border-radius: 999px; font-weight: 800; font-size: clamp(14px, 1.4vw, 18px); color: var(--muted); }
.ident-tabs button.on { color: #031016; background: var(--cyan); box-shadow: 0 0 18px rgba(59,228,255,.45); }
.ident-step { font-size: clamp(14px, 1.4vw, 18px); font-weight: 700; color: var(--muted); letter-spacing: .06em; }
.pin.tel { gap: clamp(3px, .6vw, 8px); }
.pin.tel .pin-box { width: clamp(28px, 4.6vmin, 52px); font-size: clamp(20px, 3.4vmin, 36px); }
.pin.tel .pin-box:nth-child(3n):not(:last-child) { margin-right: clamp(6px, 1vw, 14px); }
.name-box {
  min-width: min(360px, 80vw); min-height: clamp(54px, 7vmin, 72px); display: flex; align-items: center; justify-content: center; gap: 2px;
  padding: 0 16px; border-radius: var(--r-sm); background: var(--input-bg); border: 2px solid var(--cyan);
  font-size: clamp(24px, 4vmin, 40px); font-weight: 800;
}
.name-box[hidden] { display: none; }
.caret-bar { width: 3px; height: 1.1em; background: var(--cyan); animation: sepBlink 1s steps(2) infinite; }
.letterpad { display: grid; gap: 6px; }
.letterpad[hidden] { display: none; }
.lp-row { display: flex; gap: 6px; justify-content: center; }
.letterpad button {
  flex: 0 0 clamp(30px, 6.6vmin, 58px); height: clamp(40px, 7vmin, 60px); border-radius: 10px;
  font-weight: 800; font-size: clamp(16px, 2.8vmin, 26px); color: var(--text);
  background: linear-gradient(180deg, var(--steel-1), var(--steel-2)); box-shadow: 0 4px 0 var(--steel-edge);
}
.letterpad button:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--steel-edge); }
.letterpad .w2 { flex-basis: clamp(60px, 13vmin, 116px); }
.letterpad .w3 { flex-basis: clamp(80px, 17vmin, 150px); background: linear-gradient(180deg, var(--ready-1), var(--ready-2)); color: #0b1a04; box-shadow: 0 4px 0 var(--ready-edge); }
.numpad[hidden] { display: none; }
.pin[hidden] { display: none; }
.remember { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--muted); min-height: 44px; }
.remember[hidden] { display: none; }
.remember input { width: 24px; height: 24px; accent-color: var(--cyan); }
body.ident-nomanual .ident-num, body.ident-nomanual .ident-or { display: none; }
body.ident-nomanual .ident-grid { grid-template-columns: 1fr; }
body:not(.has-reader) .ident-tap, body:not(.has-reader) .ident-or { display: none; }
body:not(.has-reader) .ident-grid { grid-template-columns: 1fr; }
.known-user #cardTitle { letter-spacing: .02em; }

/* ===== wygaszacz: zamiast błysku — powolny, ledwo widoczny „oddech” ekranu; napis lekko wychodzi do ucznia ===== */
.sun-sweep { display: none; }
.attract-glow {
  position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(255,255,255,.10), rgba(59,228,255,.06) 45%, transparent 75%);
}
body.attract-on .attract-glow { animation: glowBreath var(--puls, 7s) ease-in-out infinite; }
@keyframes glowBreath { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
body.attract-on .attract .attract-title { animation: titleSweep 4.5s linear infinite, titleBreath var(--puls, 7s) ease-in-out infinite; }
@keyframes titleBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
body.no-puls .attract-glow, body.no-puls .attract .attract-title { animation: titleSweep 4.5s linear infinite !important; }
body.no-puls .attract-glow { animation: none !important; opacity: 0; }
body[data-skin="moro"] .attract-glow { background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(255,255,255,.12), rgba(210,58,82,.08) 45%, transparent 75%); }

/* ===== pion (tablet, laptop obrócony): linia COMMENTS + WYŚLIJ dwa razy wyższa, oceny skalują się same ===== */
@media (max-aspect-ratio: 1/1) and (min-width: 561px) {
  .comment-tab { min-height: clamp(128px, 15vh, 210px); }
  .send { min-height: clamp(128px, 15vh, 192px); }
  .send-txt { font-size: clamp(34px, 5vw, 64px); }
  .klasa-btn { min-height: clamp(64px, 7vh, 96px); }
}
@media (max-width: 560px) {
  .comment-tab { min-height: 110px; }
  .action-bar .send { min-height: 84px; }
  .action-bar .klasa-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .kadra-ico { height: 24px; }
  .ribbon { left: 8px; right: 8px; top: 8px; }
  .chip { min-height: 44px; font-size: 15px; padding: 0 14px; }
}

/* =========================================================
   v5 — paleta skórek, awatary („Kto dziś głosuje?”), tryby efektów, wyłącznik odblasków
   ========================================================= */
/* COMMENTS + paleta w lewym dolnym rogu */
.comment-wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(8px, 1vw, 14px); align-items: stretch; min-width: 0; }
.palette-btn {
  align-self: end; width: clamp(56px, 7vh, 76px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.22), rgba(255,255,255,.04) 60%), var(--panel-2);
  border: 2px solid rgba(255,255,255,.35);
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
  animation: palettePulse 2.6s ease-in-out infinite;
}
.palette-btn svg { width: 64%; }
@keyframes palettePulse {
  0%, 100% { transform: scale(1); box-shadow: 0 6px 18px rgba(0,0,0,.45), 0 0 0 0 rgba(255,255,255,.35); }
  50%      { transform: scale(1.07); box-shadow: 0 6px 18px rgba(0,0,0,.45), 0 0 0 10px rgba(255,255,255,0); }
}
.palette-btn.spin svg { animation: paletteSpin .7s var(--ease-spring); }
@keyframes paletteSpin { from { transform: rotate(-200deg) scale(.6); } to { transform: none; } }
body[data-skin="moro"] .palette-btn { border-color: var(--beret-hi); background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.2), rgba(138,22,40,.35) 70%), #1b2014; }

/* awatar zamiast ikonki ludzika (ten sam okrąg) */
.round-btn { position: relative; overflow: hidden; }
.round-btn .top-avatar { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.round-btn.has-avatar svg { visibility: hidden; }
.round-btn.has-avatar { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.25), 0 0 18px rgba(255,255,255,.45); }
.round-btn.land { animation: avLand .6s var(--ease-spring); }
@keyframes avLand { 0% { transform: scale(.6); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
.av-fly { position: fixed; z-index: 95; object-fit: cover; pointer-events: none; box-shadow: 0 0 0 4px #fff, 0 0 40px rgba(255,255,255,.8); }

/* okno „Kto dziś głosuje?” — karuzela */
.avpick {
  position: fixed; inset: 0; z-index: 57; display: grid; place-items: center; padding: 3vh 0;
  background: radial-gradient(ellipse at center, rgba(6,8,12,.78), rgba(6,8,12,.95));
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s;
}
body.avpick-on .avpick { opacity: 1; visibility: visible; }
.avpick-in { width: 100%; display: grid; justify-items: center; gap: clamp(10px, 2.4vh, 26px); text-align: center; }
.avpick-kicker { font-family: var(--mono); letter-spacing: .4em; color: var(--lime); font-size: clamp(12px, 1.4vw, 16px); }
.avpick h2 { font-size: clamp(32px, 6vw, 84px); font-weight: 900; line-height: 1; animation: titleBreath 3s ease-in-out infinite; }
.avpick-hint { color: var(--muted); font-size: clamp(14px, 1.6vw, 20px); padding: 0 16px; }
.carousel { position: relative; width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 0 max(8px, 2vw); }
.car-track {
  display: flex; gap: clamp(12px, 2vw, 28px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: clamp(24px, 4vh, 40px) calc(50% - clamp(70px, 11vw, 130px)); touch-action: pan-x;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.car-track::-webkit-scrollbar { display: none; }
.av-tile {
  --d: 0; flex: 0 0 clamp(140px, 22vw, 260px); aspect-ratio: 1; scroll-snap-align: center; border-radius: 22%;
  padding: 0; overflow: hidden; position: relative;
  border: 3px solid rgba(255,255,255,.25);
  transform: scale(calc(1 - var(--d) * .28)); opacity: calc(1 - var(--d) * .45);
  transition: transform .15s linear, opacity .15s linear, box-shadow .3s, border-color .3s;
  box-shadow: 0 14px 30px rgba(0,0,0,.5);
  animation: rise .5s var(--ease-out) both; animation-delay: calc(var(--i) * 60ms);
}
.av-tile img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.av-tile.cur { border-color: var(--cyan); }
/* wybrany: podświetlenie i białe lśnienie dookoła */
.av-tile.chosen {
  border-color: #fff; transform: scale(1.12); opacity: 1; z-index: 2;
  animation: avGlow 1s ease-in-out infinite;
}
.av-tile.chosen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); animation: avShine 1s ease-in-out infinite; }
@keyframes avGlow { 0%, 100% { box-shadow: 0 0 0 4px rgba(255,255,255,.9), 0 0 30px 6px rgba(255,255,255,.7); } 50% { box-shadow: 0 0 0 7px rgba(255,255,255,.6), 0 0 60px 16px rgba(255,255,255,.9); } }
@keyframes avShine { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
.avpick.locked .av-tile:not(.chosen) { opacity: .25; filter: grayscale(.6); }
.car-nav { width: clamp(44px, 5vw, 64px); aspect-ratio: 1; border-radius: 50%; font-size: clamp(26px, 3vw, 40px); color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.25); }
body[data-skin="moro"] .avpick-kicker { color: #fff; }
body[data-skin="moro"] .av-tile.cur { border-color: var(--beret-hi); }

/* podziękowanie z awatarem w okręgu */
.toast-ring { position: relative; }
.toast-avatar { position: absolute; inset: 6%; width: 88%; height: 88%; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--lime), 0 0 24px rgba(185,242,75,.6); animation: avLand .7s var(--ease-spring); }
.toast.with-avatar .toast-ring svg { opacity: 0; }
.toast.with-avatar .toast-ring { width: clamp(84px, 13vh, 140px); }

/* tryb efektów 2: przyciski ocen i COMMENTS wybuchają jak „Mam ochotę na” */
.rate .btn3d.blast, .comment-tab.blast { animation: chipBlast .6s var(--ease-spring); }
.rate .btn3d.blast.sel { box-shadow: 0 calc(var(--depth) - 2px) 0 var(--edge), 0 0 0 3px #fff, 0 0 46px 10px color-mix(in srgb, var(--c1) 85%, transparent); }
.comment-tab.blast { box-shadow: 0 0 0 3px #fff, 0 0 50px 10px rgba(255,255,255,.6); }

/* wyłącznik odblasków (panel → USTAWIENIA): bez przelatujących błysków na przyciskach i polach oceny */
body.no-glare .btn3d::after,
body.no-glare .rate .btn3d::after,
body.no-glare .klasa-row .btn3d::after,
body.no-glare .send::after,
body.no-glare .send-zone.ready .send::after { animation: none !important; opacity: 0 !important; }
body.no-glare .hud-scan { display: none; }
body.no-glare .meal::before, body.no-glare .meal::after { animation: none; }

/* telefon: mniejsze COMMENTS, paleta obok */
@media (max-width: 560px) {
  .comment-tab { min-height: 72px; padding: 8px 12px; }
  .comment-tab .ct-preview { -webkit-line-clamp: 1; font-size: 13px; }
  .comment-tab .ct-label { font-size: 15px; }
  .comment-tab .ct-go { width: 40px; }
  .palette-btn { width: 60px; align-self: center; }
  .av-tile { flex-basis: 46vw; }
  .car-nav { display: none; }
  .carousel { grid-template-columns: 1fr; }
  .car-track { padding: 24px calc(50% - 23vw); }
}
@media (max-aspect-ratio: 1/1) and (min-width: 561px) {
  .comment-tab { min-height: clamp(96px, 10vh, 150px); }
  .palette-btn { width: clamp(68px, 7vh, 90px); }
}

/* =========================================================
   v1.7 — ikona COMMENTS: bomba (Obecna) / granat (Moro), efekt 3D „wychodzi do użytkownika”
   ========================================================= */
.comment-tab .ct-go {
  position: relative; overflow: visible; perspective: 300px;
  width: clamp(58px, 7.2vh, 88px);
  background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.38), rgba(255,255,255,.08) 45%, rgba(0,0,0,.35) 100%);
  border: 2px solid rgba(255,255,255,.55);
  box-shadow: inset 0 -6px 12px rgba(0,0,0,.45), inset 0 4px 8px rgba(255,255,255,.25), 0 6px 16px rgba(0,0,0,.45), 0 0 0 4px rgba(255,255,255,.06);
  animation: ctRing 2.4s ease-in-out infinite;
}
.comment-tab .ct-go::after { /* cień „pod” wychodzącym obiektem */
  content: ""; position: absolute; left: 22%; right: 22%; bottom: 14%; height: 12%; border-radius: 50%;
  background: rgba(0,0,0,.55); filter: blur(4px); animation: ctShadow 2.4s ease-in-out infinite;
}
.ct-icon {
  position: relative; z-index: 1; width: 92%; height: 92%; object-fit: contain; pointer-events: none;
  transform-origin: 50% 80%;
  filter: drop-shadow(0 6px 5px rgba(0,0,0,.55)) drop-shadow(0 0 10px rgba(255,255,255,.18));
  animation: ctPop 2.4s cubic-bezier(.34,1.56,.64,1) infinite;
}
@keyframes ctPop {
  0%, 100% { transform: translate3d(0, 4%, 0) scale(1) rotate(-6deg); }
  45%      { transform: translate3d(0, -14%, 40px) scale(1.32) rotate(5deg); }
  60%      { transform: translate3d(0, -10%, 30px) scale(1.26) rotate(2deg); }
}
@keyframes ctShadow { 0%, 100% { transform: scale(1); opacity: .6; } 45% { transform: scale(.65); opacity: .3; } }
@keyframes ctRing {
  0%, 100% { box-shadow: inset 0 -6px 12px rgba(0,0,0,.45), inset 0 4px 8px rgba(255,255,255,.25), 0 6px 16px rgba(0,0,0,.45), 0 0 0 4px rgba(255,255,255,.06); }
  45%      { box-shadow: inset 0 -6px 12px rgba(0,0,0,.45), inset 0 4px 8px rgba(255,255,255,.25), 0 10px 22px rgba(0,0,0,.5), 0 0 0 9px rgba(255,255,255,.12), 0 0 26px 6px rgba(120,200,255,.35); }
}
.comment-tab:hover .ct-icon, .comment-tab:active .ct-icon { animation-duration: .9s; }
.comment-tab.filled .ct-icon { animation-duration: 4s; }
body[data-skin="moro"] .comment-tab .ct-go {
  background: radial-gradient(circle at 35% 28%, rgba(214,220,170,.5), rgba(96,106,58,.55) 50%, rgba(28,32,16,.9) 100%);
  border-color: rgba(214,206,150,.7);
}
body[data-skin="moro"] .comment-tab .ct-go { animation-name: ctRingMoro; }
@keyframes ctRingMoro {
  0%, 100% { box-shadow: inset 0 -6px 12px rgba(0,0,0,.5), inset 0 4px 8px rgba(255,255,230,.25), 0 6px 16px rgba(0,0,0,.5), 0 0 0 4px rgba(214,206,150,.08); }
  45%      { box-shadow: inset 0 -6px 12px rgba(0,0,0,.5), inset 0 4px 8px rgba(255,255,230,.25), 0 10px 22px rgba(0,0,0,.55), 0 0 0 9px rgba(214,206,150,.16), 0 0 26px 6px rgba(255,190,80,.35); }
}
@media (max-width: 600px) { .comment-tab .ct-go { width: 52px; } }
@media (prefers-reduced-motion: reduce) { .ct-icon, .comment-tab .ct-go, .comment-tab .ct-go::after { animation: none; } }
/* obiekt może „wyjść” poza pole COMMENTS */
.comment-tab { overflow: visible; }
.comment-tab::before { border-radius: inherit; }
.ct-preview { overflow: hidden; }
.ct-icon { width: 84%; height: 84%; }

/* =========================================================
   v1.7 — SKINY z obrazami: tło WYŚLIJ, tapeta, wygaszacz L/P, gwiazdki z obrazka, pociski (Skin 2)
   ========================================================= */
/* tapeta tła ekranu (Wygląd → Skiny → Tapeta tła) */
body.has-wall .hud-bg { background: linear-gradient(rgba(6,8,12,.6), rgba(6,8,12,.78)), var(--wall-img) center / cover no-repeat; }
body[data-skin="moro"].has-wall .hud-bg { background: linear-gradient(rgba(16,20,11,.55), rgba(16,20,11,.75)), var(--wall-img) center / cover no-repeat; }

/* tło przycisku WYŚLIJ: obraz skinu + kolor stanu (zablokowany / w toku / gotowy) jako półprzezroczysta warstwa */
body.has-send-img .send-zone .send {
  --ink: #ffffff;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--c1) 40%, rgba(0,0,0,.2)), color-mix(in srgb, var(--c2) 55%, rgba(0,0,0,.45))),
    var(--send-img) center / cover no-repeat;
  text-shadow: 0 2px 6px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.9);
}
body.has-send-img .send-zone .send:disabled {
  background: linear-gradient(rgba(8,11,14,.5), rgba(8,11,14,.7)), var(--send-img) center / cover no-repeat;
}
body.has-send-img .send-zone.ready .send {
  --ink: #ffffff;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ready-1) 58%, transparent), color-mix(in srgb, var(--ready-2) 72%, transparent)),
    var(--send-img) center / cover no-repeat;
}

/* średnia dnia: gwiazdki z obrazka (ułamkowe wypełnienie) */
.stars { --sw: clamp(18px, 2.2vw, 30px); }
.stars .si { position: relative; display: block; width: var(--sw); aspect-ratio: 1; }
.stars .si::before {
  content: ""; position: absolute; inset: 0;
  background: var(--rate-img) center / contain no-repeat;
  filter: grayscale(1) brightness(.6); opacity: .32;
}
.stars .si i { position: absolute; top: 0; bottom: 0; left: 0; width: 0; overflow: hidden; transition: width 1.1s var(--ease-out); }
.stars .si b {
  position: absolute; top: 0; bottom: 0; left: 0; width: var(--sw);
  background: var(--rate-img) center / contain no-repeat;
  filter: drop-shadow(0 0 4px rgba(255,184,63,.45));
}
.stars.animate .si { animation: starPop .5s var(--ease-spring) both; animation-delay: calc(var(--s) * 70ms); }

/* Skin 2: pociski — całe, stojące pionowo obok siebie (liczba = zaokrąglona średnia), bez gwiazdek */
.stars.bullets .stars-row { gap: clamp(2px, .35vw, 6px); align-items: flex-end; min-height: clamp(30px, 3.6vw, 52px); }
.stars .bullet {
  display: block; height: clamp(30px, 3.6vw, 52px); aspect-ratio: 119 / 360; flex: none;
  background: var(--rate-img) center / contain no-repeat;
  filter: drop-shadow(0 3px 3px rgba(0,0,0,.7));
}
.stars.animate .bullet { animation: bulletIn .5s var(--ease-spring) both; animation-delay: calc(var(--s) * 90ms); }
@keyframes bulletIn { from { transform: translateY(-45%) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.stars.bullets .stars-num, body[data-skin="moro"] .stars.bullets .stars-num {
  color: #000000; text-shadow: none;
  background: rgba(228, 218, 168, .94); border-radius: 6px; padding: .08em .42em;
  box-shadow: 0 2px 6px rgba(0,0,0,.55); animation: none;
}

/* wygaszacz: obrazy po lewej i prawej (w pionie: dolny i górny), przenikające się albo zanikające w przezroczystość */
.attract-art { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.attract-art[hidden] { display: none; }
.attract-art .aa { position: absolute; top: 0; height: 100%; width: 62%; object-fit: cover; opacity: .8; }
.attract-art .aa[hidden] { display: none; }
.attract-art .aa-l { left: 0; object-position: left center;
  -webkit-mask-image: linear-gradient(to right, #000 40%, transparent 100%); mask-image: linear-gradient(to right, #000 40%, transparent 100%); }
.attract-art .aa-r { right: 0; object-position: right center;
  -webkit-mask-image: linear-gradient(to left, #000 40%, transparent 100%); mask-image: linear-gradient(to left, #000 40%, transparent 100%); }
.attract-art.both .aa-l { animation: aaFade 16s ease-in-out infinite; }
.attract-art.both .aa-r { animation: aaFade 16s ease-in-out -8s infinite; }
.attract-art:not(.both) .aa { animation: aaDrift 20s ease-in-out infinite alternate; }
@keyframes aaFade { 0%, 100% { opacity: .9; } 50% { opacity: .35; } }
@keyframes aaDrift { from { transform: scale(1); opacity: .8; } to { transform: scale(1.05); opacity: .62; } }
@media (orientation: portrait) {
  .attract-art .aa { left: 0; right: 0; width: 100%; height: 58%; }
  .attract-art .aa-l { top: auto; bottom: 0; object-position: center bottom;
    -webkit-mask-image: linear-gradient(to top, #000 40%, transparent 100%); mask-image: linear-gradient(to top, #000 40%, transparent 100%); }
  .attract-art .aa-r { top: 0; object-position: center top;
    -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 100%); mask-image: linear-gradient(to bottom, #000 40%, transparent 100%); }
}
.attract .big-clock, .attract .attract-core { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .attract-art .aa { animation: none !important; } }

/* powrót do panelu (monitorek) — boczna zakładka po lewej */
.panel-return {
  position: fixed; z-index: 60; left: 0; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 10px 12px 8px; border-radius: 0 14px 14px 0;
  background: rgba(10,16,22,.9); border: 1px solid var(--line-strong); border-left: 0;
  color: var(--text); font: 800 11px/1 var(--mono, monospace); letter-spacing: .14em; text-decoration: none;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.panel-return svg { width: 26px; height: 26px; color: var(--cyan); }
.panel-return[hidden] { display: none; }
body.attract-on .panel-return { display: none; }

/* =========================================================
   v1.8 — odliczanie „Szama za:”, alarm (drgawki na komputerze, okno OK na telefonie)
   ========================================================= */
/* odliczanie do obiadu: w ostatniej minucie cyfry czerwienieją jak w zapalniku */
body.countdown #bcDay { color: var(--amber); }
body.countdown-hot .big-clock .bc-grp, body.countdown-hot .big-clock .bc-sep { color: #ff3b30 !important; text-shadow: 0 0 24px rgba(255,59,48,.7); animation: hotBlink 1s steps(2) infinite; }
@keyframes hotBlink { 50% { opacity: .55; } }

/* komputer/kiosk: wygaszacz delikatnie drży przez minutę */
body.alarm-shake .attract { animation: alarmShake .42s linear infinite; }
@keyframes alarmShake {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  20% { transform: translate(-3px, 1px) rotate(-.25deg); }
  40% { transform: translate(3px, -2px) rotate(.25deg); }
  60% { transform: translate(-2px, 2px) rotate(-.15deg); }
  80% { transform: translate(2px, -1px) rotate(.15deg); }
}
@media (prefers-reduced-motion: reduce) { body.alarm-shake .attract { animation-duration: 1.2s; } }

/* telefon: okno alarmu z przyciskiem OK (wibracje trwają do naciśnięcia) */
.alarm { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(circle, rgba(120,10,10,.55), rgba(6,8,12,.94) 70%); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.alarm.show { opacity: 1; visibility: visible; }
.alarm-in { display: grid; justify-items: center; gap: 14px; text-align: center; }
.alarm-ico { width: clamp(110px, 32vw, 180px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; color: #fff;
  background: radial-gradient(circle at 35% 30%, #ff6b5f, #b3140c); box-shadow: 0 0 0 8px rgba(255,59,48,.25), 0 0 60px rgba(255,59,48,.65); }
.alarm.show .alarm-ico { animation: alarmRing .5s ease-in-out infinite; }
.alarm-ico svg { width: 62%; }
@keyframes alarmRing { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
.alarm h2 { font-size: clamp(42px, 12vw, 96px); font-weight: 900; letter-spacing: .06em; color: #fff; }
.alarm p { font-size: clamp(16px, 4.4vw, 24px); color: #ffd9d6; }
.alarm-ok { min-width: min(70vw, 320px); min-height: 72px; font-size: 28px; }
.haptic-tap { position: fixed; left: -100px; top: 0; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

/* =========================================================
   v1.8.3 — TELEFON: wszystko na jednym ekranie (ZUPA, II DANIE, klasa, COMMENTS, WYŚLIJ)
   Analiza: pasek „Głosujesz…/Podaj numer” zajmował ~130 px i na telefonie nie jest potrzebny (numer i imię podaje się
   przy wysyłaniu). Usuwamy go, a odzyskane miejsce dajemy przyciskom: COMMENTS (kwadratowy) i WYŚLIJ (okrągły) obok siebie
   na dole — duże, w zasięgu kciuka. Zapamiętany użytkownik widzi tylko cienką linię „Głosujesz jako …” (dotknij = zmień).
   ========================================================= */
/* WYŚLIJ wszędzie: zaokrąglone krawędzie, wyraźna obwódka i puls — nie zlewa się z tłem */
.send-zone .send, body[data-skin="moro"] .send-zone .send { border-radius: 22px; outline: 2px solid rgba(255,255,255,.55); outline-offset: -2px; }
.send-zone .send-bite::before { border-radius: 22px; animation: sendIdle 2.4s ease-in-out infinite; }
@keyframes sendIdle {
  0%, 100% { box-shadow: 0 12px 22px rgba(0,0,0,.5), 0 0 0 0 color-mix(in srgb, var(--cyan) 0%, transparent); }
  50%      { box-shadow: 0 12px 22px rgba(0,0,0,.5), 0 0 0 5px color-mix(in srgb, var(--cyan) 35%, transparent), 0 0 26px color-mix(in srgb, var(--cyan) 35%, transparent); }
}
body[data-skin="moro"] .send-zone .send-bite::before { animation-name: sendIdleMoro; }
@keyframes sendIdleMoro {
  0%, 100% { box-shadow: 0 12px 22px rgba(0,0,0,.5), 0 0 0 0 rgba(255,255,255,0); }
  50%      { box-shadow: 0 12px 22px rgba(0,0,0,.5), 0 0 0 5px rgba(255,255,255,.3), 0 0 26px rgba(220,20,60,.35); }
}
.send-zone.ready .send-bite::before { animation: readyPulse 1.6s ease-in-out infinite; }

@media (max-width: 560px) and (orientation: portrait) {
  body { overflow: hidden; }
  .app {
    height: 100dvh; min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 8px; padding: max(6px, env(safe-area-inset-top)) 10px max(8px, env(safe-area-inset-bottom));
  }
  body.demo .app { padding-bottom: calc(30px + env(safe-area-inset-bottom)); }
  /* pasek górny: tytuł + ikony; „Głosujesz / Podaj numer” znika */
  .topbar { grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
  .brand h1 { font-size: 17px; white-space: nowrap; }
  .brand-mark { height: 30px; }
  .brand-kicker { font-size: 10px; letter-spacing: .1em; }
  .round-btn { width: 44px; height: 44px; }
  .card-status { display: none; }
  body.known-user .card-status, body.state-ready .card-status {
    display: flex; grid-column: 1 / -1; grid-row: 2; min-height: 0; padding: 2px 4px; gap: 6px;
    background: none; border: 0; box-shadow: none; justify-content: flex-start;
  }
  body.known-user .card-status .nfc-ring, body.state-ready .card-status .nfc-ring { display: none; }
  body.known-user #cardTitle, body.state-ready #cardTitle { font-size: 12px; letter-spacing: .06em; }
  body.known-user #cardSub, body.state-ready #cardSub { font-size: 11px; }
  /* dwa posiłki dzielą wysokość po równo */
  .meals { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; gap: 8px; min-height: 0; }
  .meal { grid-template-rows: auto minmax(34px, 1fr) auto auto; gap: clamp(4px, .8dvh, 8px); padding: 8px 10px; }
  .meal > .rate { grid-row: 2; }
  .meal > .tri[data-key="przyprawa"] { grid-row: 3; }
  .meal > .tri[data-key="solonosc"] { grid-row: 4; }
  .rate-label { display: none; }
  .meal-head { gap: 8px; }
  .meal-icon { width: clamp(28px, 4.6dvh, 42px); }
  .meal-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .meal-title h2 { font-size: clamp(17px, 2.6dvh, 22px); }
  .stars { --sw: 15px; gap: 5px; }
  .stars-num { font-size: 13px; }
  .stars.bullets .stars-row, .stars .bullet { min-height: 0; height: clamp(22px, 3.4dvh, 30px); }
  .rate .btn3d { min-height: 0; height: 100%; font-size: clamp(12px, 1.8dvh, 15px); padding: 0 4px; --depth: 4px; }
  .tri { grid-template-columns: 30% 1fr; grid-template-rows: auto; align-items: center; gap: 6px; }
  .tri-label { font-size: 10px; letter-spacing: .05em; }
  .tri-track { min-height: clamp(28px, 4.4dvh, 40px); }
  .tri-track button { font-size: 10.5px; }
  /* dół: klasa (cały rząd), pod nią: paleta | COMMENTS (kwadratowy) | WYŚLIJ (okrągły) */
  .app .dock {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "klasa klasa klasa" "pal com send";
    gap: 8px 10px; align-items: center; padding: 0; animation: none;
  }
  .dock .comment-wrap, .dock .action-bar { display: contents; }
  .dock .klasa { grid-area: klasa; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 8px; padding: 0; background: none; border: 0; box-shadow: none; }
  .dock .klasa-label { font-size: 11px; letter-spacing: .06em; max-width: 5.2em; line-height: 1.1; }
  .dock .klasa-btn { min-height: clamp(44px, 6dvh, 54px); }
  .dock .klasa-btn b { font-size: 20px; }
  .dock .klasa-btn span { font-size: 8.5px; }
  .dock .palette-btn { grid-area: pal; width: 46px; align-self: center; }
  .dock .comment-tab {
    grid-area: com; height: clamp(86px, 12dvh, 108px); min-height: 0; border-radius: 16px; padding: 8px 10px;
    grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr);
  }
  .dock .comment-tab .ct-label { font-size: 15px; letter-spacing: .12em; }
  .dock .comment-tab .ct-preview { -webkit-line-clamp: 2; font-size: 12px; }
  .dock .comment-tab .ct-go { width: 50px; }
  .dock .send-zone { grid-area: send; }
  .dock .send-bite, .dock .send-bite::before { border-radius: 50%; }
  .dock .send-zone .send, body[data-skin="moro"] .dock .send-zone .send {
    width: clamp(92px, 13dvh, 112px); height: clamp(92px, 13dvh, 112px); min-height: 0; padding: 0;
    border-radius: 50%; outline-offset: -3px; outline-width: 3px;
    grid-template-columns: 1fr; grid-template-rows: auto auto; place-content: center; justify-items: center; row-gap: 2px; text-align: center;
  }
  .dock .send-lock { grid-row: auto; width: 18px; }
  .dock .send-txt { font-size: clamp(16px, 2.4dvh, 20px); letter-spacing: .06em; }
  .dock .send-hint, .dock .send-progress { display: none !important; }
  .dock .send-zone.ready .send { --bite: 13px; --bite-x: calc(100% - 16px); --bite-y: 16px; }
  .test-ribbon { font-size: 9px; }
}

/* TELEFON POZIOMO: posiłki obok siebie, na dole jeden rząd: paleta | COMMENTS | klasa | WYŚLIJ (okrągły) */
@media (max-height: 520px) and (orientation: landscape) {
  body { overflow: hidden; }
  .app { height: 100dvh; min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto; gap: 6px; padding: 6px max(10px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
  .topbar { grid-template-columns: minmax(0, 1fr) auto; grid-auto-flow: column; }
  .topbar .reader-chip { display: none; }
  .topbar .round-tools { grid-row: 1; }
  .brand h1 { font-size: 16px; }
  .brand-mark { height: 26px; }
  .round-btn { width: 40px; height: 40px; }
  .card-status { display: none; }
  .meals { grid-template-columns: 1fr 1fr; gap: 8px; }
  .meal { grid-template-rows: auto minmax(30px, 1fr) auto auto; gap: 4px; padding: 6px 8px; }
  .meal > .rate { grid-row: 2; }
  .meal > .tri[data-key="przyprawa"] { grid-row: 3; }
  .meal > .tri[data-key="solonosc"] { grid-row: 4; }
  .rate-label { display: none; }
  .meal-icon { width: 26px; }
  .meal-title { display: flex; align-items: center; gap: 8px; }
  .meal-title h2 { font-size: 16px; }
  .stars { --sw: 13px; }
  .stars.bullets .stars-row, .stars .bullet { min-height: 0; height: 22px; }
  .rate .btn3d { min-height: 0; height: 100%; font-size: 12px; --depth: 3px; }
  .tri { grid-template-columns: 30% 1fr; grid-template-rows: auto; align-items: center; gap: 6px; }
  .tri-label { font-size: 10px; }
  .tri-track { min-height: 26px; }
  .tri-track button { font-size: 10px; }
  .app .dock {
    display: grid; grid-template-columns: auto minmax(0, .9fr) minmax(0, 1.5fr) auto;
    grid-template-areas: "pal com klasa send"; gap: 8px; align-items: center; padding: 0; animation: none;
  }
  .dock .comment-wrap, .dock .action-bar { display: contents; }
  .action-bar { position: static; }
  .dock .palette-btn { grid-area: pal; width: 42px; }
  .dock .comment-tab { grid-area: com; height: 62px; min-height: 0; border-radius: 14px; padding: 6px 10px; }
  .dock .comment-tab .ct-preview { display: none; }
  .dock .comment-tab .ct-label { font-size: 13px; }
  .dock .comment-tab .ct-go { width: 40px; grid-row: 1; }
  .dock .klasa { grid-area: klasa; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 8px; padding: 0; background: none; border: 0; box-shadow: none; }
  .dock .klasa-label { font-size: 10px; max-width: 5em; line-height: 1.1; }
  .dock .klasa-btn { min-height: 46px; }
  .dock .send-zone { grid-area: send; }
  .dock .send-bite, .dock .send-bite::before { border-radius: 50%; }
  .dock .send-zone .send, body[data-skin="moro"] .dock .send-zone .send {
    width: 72px; height: 72px; min-height: 0; padding: 0; border-radius: 50%; outline-width: 3px; outline-offset: -3px;
    grid-template-columns: 1fr; place-content: center; justify-items: center; text-align: center;
  }
  .dock .send-lock { grid-row: auto; width: 15px; }
  .dock .send-txt { font-size: 14px; letter-spacing: .04em; }
  .dock .send-hint, .dock .send-progress { display: none !important; }
  .dock .send-zone.ready .send { --bite: 10px; --bite-x: calc(100% - 12px); --bite-y: 12px; }
}

/* ikona wyników dla ucznia — okrągła, pulsująca */
.res-btn { display: grid; place-items: center; color: var(--lime); border-color: color-mix(in srgb, var(--lime) 55%, transparent);
  animation: resPulse 2.2s ease-in-out infinite; text-decoration: none; }
.res-btn[hidden] { display: none; }
.res-btn svg { width: 50%; height: 50%; }
@keyframes resPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--lime) 55%, transparent); transform: scale(1); }
  50% { box-shadow: 0 0 0 9px transparent, 0 0 18px color-mix(in srgb, var(--lime) 45%, transparent); transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) { .res-btn { animation: none; } }

/* podpis budzika na wygaszaczu: „SZAMA ZA:” na górze, obok dzień tygodnia i data (bez roku) */
#bcDay .bc-lbl { color: var(--amber); font-weight: 900; letter-spacing: .18em; }
#bcDay .bc-date { margin-left: .9em; color: var(--muted); font-weight: 700; letter-spacing: .18em; }
body[data-skin="moro"] #bcDay .bc-date { color: #d9d4bd; }

/* telefon z NFC (Android): wąski pasek „PRZYŁÓŻ KARTĘ · do tyłu telefonu” pod tytułem — dotknięcie włącza NFC */
@media (max-width: 900px) {
  body.phone-nfc .card-status {
    display: flex; grid-column: 1 / -1; grid-row: 2; min-height: 0; padding: 3px 6px; gap: 8px;
    background: none; border: 0; box-shadow: none; justify-content: flex-start; animation: none;
  }
  body.phone-nfc .card-status .nfc-ring { display: grid; width: 22px; height: 22px; flex: none; }
  body.phone-nfc .card-status .nfc-ring svg { width: 14px; height: 14px; }
  body.phone-nfc #cardTitle { font-size: 12px; letter-spacing: .06em; }
  body.phone-nfc #cardSub { display: block; font-size: 11px; }
  body.phone-nfc .card-status-txt { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
  body.phone-nfc.state-idle .card-status .nfc-ring { animation: beacon 2.4s ease-in-out infinite; border-radius: 50%; }
}

/* COMMENTS na telefonie: pole tekstu o połowę niższe, klawisze 2× wyższe, mikrofon do dyktowania */
@media (max-width: 560px) and (orientation: portrait) {
  .ribbon-in { grid-template-rows: auto auto minmax(0, .5fr); }
  .keyboard { --kh: calc(var(--key) * 1.9); }
  .kb-rows { grid-auto-rows: var(--kh); }
  .kb-row .btn3d { height: var(--kh); font-size: calc(var(--key) * .6); }
  .kb-row .small { font-size: 13px; }
  .ribbon-done { min-height: 60px; padding: 0 26px; font-size: 19px; }
}
.ta-wrap { position: relative; min-height: 0; }
.ta-wrap textarea { padding-right: 64px; }
.mic-btn {
  position: absolute; right: 8px; bottom: 8px; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.25), transparent 60%), var(--panel-3);
  border: 2px solid rgba(255,255,255,.4); box-shadow: 0 4px 12px rgba(0,0,0,.45);
}
.mic-btn svg { width: 26px; height: 26px; }
.mic-btn[hidden] { display: none; }
.mic-btn.on { background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.35), transparent 60%), #d8342b; border-color: #fff; animation: micPulse 1.1s ease-in-out infinite; }
@keyframes micPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,80,70,.6); } 50% { box-shadow: 0 0 0 12px rgba(255,80,70,0); } }
.ta-wrap { height: 100%; }
@media (max-width: 560px) and (orientation: portrait) { .ribbon-in { align-content: start; } }
@media (max-width: 560px) and (orientation: portrait) {
  /* wstęga COMMENTS dopasowana do treści — pole tekstu o połowę niższe niż wcześniej */
  .ribbon-in { bottom: auto; grid-template-rows: auto auto clamp(110px, 17dvh, 170px); }
}

/* =========================================================
   TELEFON PIONOWO (v2.0): jeden duży kafelek oceny na cały obszar ZUPA + II DANIE.
   Po prawej dwa wysuwane „języki” (ikona + napis) przełączają ZUPA ⇄ II DANIE. Tylko telefon w pionie.
   ========================================================= */
.meal-tabs { display: none; }
@media (max-width: 560px) and (orientation: portrait) {
  .meals { position: relative; display: block; overflow: hidden; min-height: 0; }
  .meal {
    position: absolute; inset: 0; height: auto;
    grid-template-rows: auto minmax(64px, 1fr) auto auto; gap: 10px; padding: 12px 12px 12px;
    transition: transform .42s var(--ease-out), opacity .3s ease;
  }
  .meal:not(.m-on) { opacity: 0; transform: translateX(calc(var(--dir, 1) * 18%)) scale(.98); pointer-events: none; visibility: hidden;
    transition: transform .42s var(--ease-out), opacity .25s ease, visibility 0s linear .42s; }
  /* nagłówek: duży tytuł po lewej, miejsce na języki po prawej */
  .meal-head { min-height: 96px; padding-right: 128px; align-items: center; }
  .meal-icon { width: 54px; }
  .meal-title { flex-direction: column; align-items: flex-start; gap: 4px; }
  .meal-title h2 { font-size: 26px; line-height: 1; }
  .rate .btn3d { font-size: 17px; }
  .tri { grid-template-columns: 1fr; gap: 4px; }
  .tri-label { font-size: 11px; letter-spacing: .08em; }
  .tri-track { min-height: clamp(44px, 6dvh, 54px); height: clamp(44px, 6dvh, 54px); }
  .tri-track button { font-size: 13px; }

  /* języki — wychodzą z prawej krawędzi ekranu */
  .meal-tabs {
    display: grid; gap: 8px; justify-items: end;
    position: absolute; z-index: 6; top: 12px; right: -10px;   /* -10px: wychodzą spod krawędzi */
  }
  .mt {
    --c: var(--cyan);
    display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 22px 0 4px;
    border-radius: 999px 0 0 999px; color: var(--text); text-align: left;
    background: linear-gradient(180deg, var(--panel-3), var(--panel-2));
    border: 1px solid var(--line-strong); border-right: 0;
    box-shadow: 0 6px 16px rgba(0,0,0,.45);
    transition: padding .35s var(--ease-out), background .3s, box-shadow .3s, border-color .3s, transform .2s;
    position: relative;
  }
  .mt:active { transform: translateX(3px); }
  .mt-ico { width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center;
    background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.18); }
  .mt-ico svg { width: 30px; height: 30px; }
  .mt-txt { display: grid; line-height: 1.05; overflow: hidden; max-width: 0; opacity: 0; white-space: nowrap;
    transition: max-width .35s var(--ease-out), opacity .25s; }
  .mt-txt small { font-size: 9px; letter-spacing: .2em; color: var(--muted); font-weight: 700; }
  .mt-txt b { font-size: 15px; letter-spacing: .04em; }
  /* aktywny język — wysunięty, z napisem i podświetleniem w kolorze akcentu */
  .mt.on {
    padding-right: 26px; border-color: color-mix(in srgb, var(--c) 70%, transparent);
    background: linear-gradient(90deg, color-mix(in srgb, var(--c) 30%, var(--panel-3)), color-mix(in srgb, var(--c) 12%, var(--panel-2)));
    box-shadow: 0 8px 22px rgba(0,0,0,.5), 0 0 22px color-mix(in srgb, var(--c) 40%, transparent);
  }
  .mt.on .mt-ico { border-color: var(--c); box-shadow: 0 0 10px color-mix(in srgb, var(--c) 60%, transparent); }
  .mt.on .mt-txt { max-width: 120px; opacity: 1; }
  /* nieaktywny: sama ikona; pulsuje, dopóki uczeń tam nie zajrzał */
  .mt:not(.on).todo { animation: mtNudge 1.8s ease-in-out infinite; }
  @keyframes mtNudge { 0%, 100% { transform: none; box-shadow: 0 6px 16px rgba(0,0,0,.45); }
    50% { transform: translateX(-6px); box-shadow: 0 6px 16px rgba(0,0,0,.45), 0 0 18px color-mix(in srgb, var(--c) 55%, transparent); } }
  /* ocena wybrana: zielony znaczek przy ikonie */
  .mt.done .mt-ico::after { content: "✓"; position: absolute; left: 30px; top: 2px; width: 16px; height: 16px; border-radius: 50%;
    display: grid; place-items: center; font-size: 11px; font-weight: 900; color: #0b1a05; background: var(--lime); }
  .mt.need { --c: var(--red); border-color: var(--red); animation: mtNeed .6s ease-in-out 3; }
  @keyframes mtNeed { 50% { transform: translateX(-8px); } }
  /* skórka moro: kolory skórki zamiast cyjanu */
  body[data-skin="moro"] .mt { --c: #e4daa8; background: linear-gradient(180deg, rgba(40,46,28,.96), rgba(22,26,15,.96)); border-color: rgba(228,218,168,.35); }
  body[data-skin="moro"] .mt.on { --c: #f1e7b5; }
}
@media (prefers-reduced-motion: reduce) { .mt, .mt-txt, .meal { transition: none !important; } .mt.todo, .mt.need { animation: none !important; } }

/* mikrofon: przytrzymaj = nagrywa, puść = koniec */
.mic-btn { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.mic-hint { position: absolute; right: 66px; bottom: 22px; font-size: 12px; color: var(--muted); pointer-events: none; transition: opacity .2s; }
.mic-btn.on + .mic-hint { color: #ff8a80; }
.mic-hint { display: none; }
.ta-wrap:has(textarea:placeholder-shown) .mic-btn:not([hidden]) + .mic-hint, .mic-btn.on + .mic-hint { display: block; }