/* ——————————————————————————————————————————
   /buzz-picks — scena „strona komiksu” (js/picks/comic.js)
   Rama strony (.pk), kadry-odpowiedzi (.frame), pieczątki diety,
   rozmiar kubka z ceną, akcje pod paragonem.
   —————————————————————————————————————————— */

@keyframes rise { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes frame-in { from { transform: rotate(var(--tilt, 0deg)) scale(0.7); opacity: 0; } to { transform: rotate(var(--tilt, 0deg)); opacity: 1; } }
@keyframes stamp { from { transform: rotate(-14deg) scale(1.8); opacity: 0; } to { transform: rotate(-4deg) scale(1); opacity: 1; } }

/* ——— rama: strona z zeszytu ——— */
.pk {
  position: relative; max-width: 1000px;
  display: grid; gap: 18px; padding: 0 0 18px;
  background: var(--cream-hi); border: 4px solid var(--ink); box-shadow: 14px 14px 0 var(--ink);
}
.pk::before {                          /* raster w rogu, jak zeszyt z kiosku */
  content: ""; position: absolute; inset: 0 0 auto auto; width: 40%; height: 220px; pointer-events: none;
  background: radial-gradient(var(--amber) 2px, transparent 2.5px) 0 0 / 12px 12px;
  -webkit-mask: linear-gradient(225deg, #000 10%, transparent 70%); mask: linear-gradient(225deg, #000 10%, transparent 70%);
}
.pk__head {
  position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--amber); border-bottom: 4px solid var(--ink); padding: 10px 20px;
}
.pk__brand, .pk__count { margin: 0; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; }
.pk__count { font-weight: 500; white-space: nowrap; background: var(--ink); color: var(--amber); padding: 4px 10px; }
.pk__trail, .pk__stage, .pk__out { position: relative; margin-inline: 20px; }
.pk__stage { border: 3px solid var(--ink); padding: clamp(16px, 3vw, 28px); background: var(--cream); }

/* ——— ścieżka odpowiedzi ——— */
.pk__trail {
  list-style: none; margin-block: 0; padding: 0 0 16px; border-bottom: 3px dashed var(--ink);
  display: flex; flex-wrap: wrap; gap: 8px;
}
.pk__trail:empty { display: none; }
.pk__cell { display: grid; place-items: center; min-height: 58px; min-width: 96px; padding: 6px; border: 3px solid var(--ink); }
.pk__cellword {
  font-family: var(--font-display); font-weight: 900; font-size: 0.86rem; line-height: 1.1; text-align: center;
  background: var(--cream-hi); color: var(--ink); padding: 3px 7px; border: 2px solid var(--ink);
}

/* ——— krok ——— */
.pk__step { animation: rise 360ms var(--ease) both; }
.pk__caption {
  display: inline-block; margin: 0; padding: 6px 12px; background: var(--amber); border: 2px solid var(--ink); color: var(--ink);
  font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.06em;
}
.pk__ask { font-family: var(--font-display); font-weight: 900; font-size: var(--step-3); line-height: 1.02; margin: 12px 0 18px; letter-spacing: -0.02em; }
.pk__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 44%), 1fr)); gap: 14px; }
@media (min-width: 700px) {            /* sześć kadrów = 3 × 2, nie 4 + 2 */
  .pk__grid:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, 1fr); }
}
.pk__out:not(:empty) { margin-top: 12px; }
.pk__out .result__actions { display: block; }

/* ——— kadr ——— */
.frame {
  position: relative; display: grid; align-content: center; justify-items: center; gap: 14px;
  min-height: 190px; padding: 16px 12px; cursor: pointer; overflow: hidden;
  border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink);
  color: var(--ink); background: var(--cream-hi);
  container-type: inline-size;         /* słowo skaluje się do kadru, nie ekranu — nic nie wystaje */
  transform: rotate(var(--tilt, 0deg));
  animation: frame-in 420ms cubic-bezier(0.3, 1.4, 0.5, 1) both;
  transition: transform 180ms var(--ease), opacity 180ms, box-shadow 180ms var(--ease);
}
.frame__sound {
  position: relative; max-width: 100%;
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  font-size: min(3rem, 16cqi); line-height: 0.95; letter-spacing: -0.02em;
  transform: skewX(-6deg) rotate(-4deg); text-align: center;
  color: var(--cream-hi); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill;
  text-shadow: 4px 4px 0 var(--ink);
}
.frame__plain {
  position: relative; font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.02em;
  background: var(--cream-hi); padding: 3px 8px; border: 2px solid var(--ink);
}
.frame--dots { background: radial-gradient(var(--rose) 2.2px, transparent 2.6px) 0 0 / 11px 11px, var(--cream-hi); }
.frame--dots .frame__sound { color: var(--amber); }
.frame--burst { background: repeating-conic-gradient(from 0deg at 50% 50%, var(--amber) 0 8deg, var(--cream-hi) 8deg 16deg); }
.frame--amber { background: radial-gradient(var(--ink) 1.4px, transparent 1.8px) 0 0 / 8px 8px, var(--amber); }
.frame--ink { background: var(--ink); }
.frame--ink .frame__sound { color: var(--ink); -webkit-text-stroke-color: var(--amber); text-shadow: 4px 4px 0 var(--amber); }
.frame--plum { background: radial-gradient(rgba(255, 237, 203, 0.35) 2px, transparent 2.4px) 0 0 / 10px 10px, var(--plum); }
.frame--plum .frame__sound { color: var(--amber); }
.frame--rose { background: repeating-linear-gradient(-45deg, var(--rose) 0 6px, var(--cream-hi) 6px 14px); }
.frame:focus-visible { outline: 4px solid var(--amber); outline-offset: 3px; }
@media (hover: hover) { .frame:hover { transform: rotate(0deg) scale(1.03); box-shadow: 9px 9px 0 var(--ink); } }
.frame.is-gone { opacity: 0; transform: scale(0.9); }
.frame.is-picked { transform: rotate(0) scale(1.05); z-index: 2; }

/* ——— dieta: pieczątki ——— */
.pk__grid--stamps { grid-template-columns: repeat(auto-fit, minmax(min(170px, 44%), 1fr)); }
.frame--toggle .frame__sound { text-decoration: line-through; text-decoration-thickness: 0.09em; text-decoration-color: transparent; transition: text-decoration-color 160ms; }
.frame--toggle[aria-pressed="true"] { box-shadow: 3px 3px 0 var(--ink); transform: rotate(0) translate(3px, 3px); }
.frame--toggle[aria-pressed="true"] .frame__sound { text-decoration-color: var(--ink); }
.frame--toggle[aria-pressed="true"] .frame__plain { display: none; }
.frame__stamp {                        /* po zaznaczeniu pieczątka staje w miejscu podpisu */
  position: relative; display: none; transform: rotate(-4deg);
  background: var(--ink); color: var(--amber); padding: 4px 10px; border: 2px solid var(--amber); outline: 2px solid var(--ink);
  font-family: var(--font-mono); font-weight: 500; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
  animation: stamp 260ms cubic-bezier(0.3, 1.6, 0.5, 1) both;
}
.frame--toggle[aria-pressed="true"] .frame__stamp { display: block; }
.frame--next { outline: 3px dashed var(--amber); outline-offset: -10px; }
/* „EVERYTHING!” to najdłuższe słowo w kreatorze — własna, mniejsza skala */
.frame--next .frame__sound { color: var(--amber); -webkit-text-stroke-color: var(--ink); font-size: min(2.4rem, 12.5cqi); white-space: nowrap; }
.frame--next .frame__plain { background: var(--amber); }

/* ——— rozmiar kubka: po wyborze napoju, z ceną ——— */
.pk__expand { margin-top: 18px; padding: 16px; border: 3px solid var(--ink); background: var(--cream-hi); box-shadow: 6px 6px 0 var(--amber); animation: rise 300ms var(--ease) both; }
.pk__expandask { margin: 0 0 12px; font-family: var(--font-display); font-weight: 900; font-size: var(--step-2); text-transform: uppercase; letter-spacing: -0.01em; }
.pk__expandrow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pk__size {
  display: grid; justify-items: center; align-content: end; gap: 3px; padding: 12px 6px 10px; cursor: pointer;
  border: 2px solid var(--ink); background: var(--cream); box-shadow: 4px 4px 0 var(--ink); color: var(--ink);
  transition: transform 140ms var(--ease), box-shadow 140ms var(--ease);
}
.pk__sizecup { width: calc(18px + var(--s) * 7px); height: calc(24px + var(--s) * 10px); background: var(--ink); clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%); margin-bottom: 6px; }
.pk__size b { font-family: var(--font-display); font-weight: 900; font-size: 1.05rem; text-align: center; }
.pk__size small { font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-soft); }
.pk__sizeprice { margin-top: 4px; font-family: var(--font-mono); font-weight: 500; font-size: 0.86rem; background: var(--amber); padding: 1px 6px; border: 2px solid var(--ink); }
@media (hover: hover) { .pk__size:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); } }
.pk__size.is-picked { background: var(--amber); }
.pk__back { margin-top: 12px; background: none; border: 0; padding: 6px 0; cursor: pointer; font-family: var(--font-mono); font-size: 0.8rem; text-decoration: underline; color: var(--ink); }

/* ——— akcje pod paragonem: kadry ——— */
.end { display: grid; gap: 18px; }
.end__row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 12px; }
.end__frame { min-height: 130px; font: inherit; }
.end__frame .frame__sound { font-size: min(2.8rem, 22cqi); }
.end__row .end__frame:first-child .frame__sound { font-size: min(3.4rem, 26cqi); }
.end__twist { display: grid; gap: 10px; justify-items: start; }
.end__minis { display: flex; flex-wrap: wrap; gap: 10px; }
.end__mini {
  cursor: pointer; padding: 10px 14px; border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); color: var(--ink);
  font-family: var(--font-display); font-weight: 900; font-style: italic; font-size: 1.05rem; letter-spacing: -0.01em;
  transform: rotate(-1deg); transition: transform 140ms var(--ease);
}
.end__mini--amber { background: var(--amber); }
.end__mini--cream { background: var(--cream-hi); }
.end__mini--plum { background: var(--plum); color: var(--cream); }
.end__mini:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
@media (hover: hover) { .end__mini:hover { transform: rotate(0) scale(1.05); } }

@media (max-width: 600px) {
  .picks__head h1 { font-size: var(--step-3); }
  .pk { box-shadow: 8px 8px 0 var(--ink); }
  .pk__head { padding: 10px 12px; }
  .pk__trail, .pk__stage, .pk__out { margin-inline: 12px; }
  .pk__cell { min-width: 0; flex: 1 1 30%; }
  .frame { min-height: 130px; }
  .pk__expandrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .end__row { grid-template-columns: 1fr 1fr; }
  .end__row .end__frame:first-child { grid-column: 1 / -1; }
}

/* ——— bez ruchu ——— */
@media (prefers-reduced-motion: reduce) {
  .pickspage *, .pickspage *::before, .pickspage *::after {
    animation-duration: 1ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }
}