:root {
  --bg: #2B1320; --bg2: #4a1d33; --panel: #3a1a2b; --panel2: #57263f; --ink: #fff7ea; --muted: #f0cfc0;
  --saffron: #FFB627; --paprika: #E4572E; --teal: #17BEBB; --leaf: #7cc243; --wicker: #c9843a;
  --ok: #7cf29a; --bad: #ff5a6e;
  --c1: #E4572E; --c2: #fff3dc;
  --display: "Fredoka", "Rubik", system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(120% 60% at 50% 0%, #7a2f4b 0%, var(--bg2) 35%, var(--bg) 75%);
  color: var(--ink); font-family: "Rubik", system-ui, sans-serif; overflow: hidden;
}
button { font-family: inherit; color: inherit; }

/* ---------- Tło: lampiony i dalekie stragany ---------- */
.sky { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.lights { position: absolute; left: -5%; right: -5%; top: 0; height: 90px; }
.lights::before { content: ""; position: absolute; left: 0; right: 0; top: -40px; height: 90px; border-bottom: 2px solid rgba(0,0,0,.45); border-radius: 0 0 50% 50%; }
.bulb { position: absolute; width: 12px; height: 16px; border-radius: 50% 50% 45% 45%; background: var(--bc, #ffd36b);
  box-shadow: 0 0 12px 4px color-mix(in srgb, var(--bc, #ffd36b) 60%, transparent); animation: twinkle 2.4s ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: .55; filter: brightness(.8); } }
.far { position: absolute; left: 0; right: 0; bottom: 0; height: 38%;
  background:
    linear-gradient(180deg, transparent, rgba(0,0,0,.35)),
    repeating-linear-gradient(90deg, #5b2239 0 46px, #3f1628 46px 50px, #6d2a46 50px 96px, #3f1628 96px 100px);
  -webkit-mask: linear-gradient(180deg, transparent, #000 30%); mask: linear-gradient(180deg, transparent, #000 30%); opacity: .5; }

/* ---------- Szkielet ---------- */
.app { position: relative; z-index: 1; max-width: 480px; height: 100dvh; margin: 0 auto; display: flex; flex-direction: column;
  padding: max(8px, env(safe-area-inset-top)) 14px max(10px, env(safe-area-inset-bottom)); }
.top { display: flex; align-items: center; gap: 8px; height: 44px; flex: none; }
.brand { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: .02em; color: var(--saffron); text-shadow: 0 2px 0 #7a2412; margin-right: auto; white-space: nowrap; }
.stat { font-weight: 900; font-size: 15px; background: rgba(0,0,0,.28); border-radius: 99px; padding: 6px 12px; white-space: nowrap; }
.coins::before { content: "🪙 "; }
.icon-btn { width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(0,0,0,.28); font-size: 20px; cursor: pointer; flex: none; }
.screen { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* ---------- Wybór koszyka ---------- */
#pick { justify-content: center; gap: 14px; text-align: center; }
.title { font-family: var(--display); font-weight: 700; margin: 0; font-size: clamp(30px, 9vw, 42px); color: var(--saffron); text-shadow: 0 3px 0 #7a2412, 0 0 30px rgba(255,182,39,.35); }
.sub { margin: 0; color: var(--muted); line-height: 1.4; font-size: 15px; }
.baskets { display: grid; gap: 12px; margin-top: 6px; }
.bchoice { display: flex; align-items: center; gap: 14px; min-height: 84px; padding: 10px 16px 10px 12px; border: 0; border-radius: 22px; cursor: pointer; text-align: left;
  background: linear-gradient(180deg, var(--panel2), var(--panel)); box-shadow: 0 6px 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12);
  transition: transform .12s ease; animation: pop .45s backwards; }
.bchoice:nth-child(2) { animation-delay: .08s; } .bchoice:nth-child(3) { animation-delay: .16s; }
.bchoice:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0,0,0,.35); }
.bchoice .bimg { width: 64px; height: 56px; flex: none; position: relative; }
.bchoice .bimg::before { content: ""; position: absolute; left: 4px; right: 4px; bottom: 0; height: 36px; border-radius: 4px 4px 18px 18px; background:
  repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 3px, transparent 3px 11px), repeating-linear-gradient(0deg, rgba(0,0,0,.15) 0 3px, transparent 3px 9px), var(--bcol); }
.bchoice .bimg::after { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 36px; border: 5px solid var(--bcol); border-bottom: 0; border-radius: 30px 30px 0 0; filter: brightness(.85); }
.bchoice.green { --bcol: #56b04a; } .bchoice.yellow { --bcol: #f2c230; } .bchoice.black { --bcol: #2c2a2e; }
.bchoice.black .bimg::before { box-shadow: 0 0 0 2px #6b6570 inset; }
.btxt { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.btxt b { font-family: var(--display); font-weight: 700; font-size: 24px; letter-spacing: .02em; }
.btxt small { color: var(--muted); font-size: 13.5px; line-height: 1.3; }
.lvl { font-weight: 900; font-size: 13px; padding: 4px 9px; border-radius: 99px; background: rgba(0,0,0,.3); color: var(--saffron); }
@keyframes pop { from { opacity: 0; transform: translateY(16px) scale(.96); } }

/* ---------- Stragan ---------- */
.play { gap: 8px; }
.stall { position: relative; flex: 1 1 auto; min-height: 250px; max-height: 330px; border-radius: 18px 18px 14px 14px; overflow: hidden;
  background: linear-gradient(180deg, #5d2a1c, #3b1a12); box-shadow: 0 10px 30px rgba(0,0,0,.4), inset 0 0 0 3px #2a120c;
  display: grid; grid-template-columns: 40% 60%; grid-template-rows: 52px 1fr 64px; }
.stall.enter { animation: walkIn .55s cubic-bezier(.2,.8,.2,1); }
.stall.leave { animation: walkOut .35s ease-in forwards; }
@keyframes walkIn { from { transform: translateX(110%) rotate(3deg); } }
@keyframes walkOut { to { transform: translateX(-110%) rotate(-3deg); } }
.awning { grid-column: 1 / -1; position: relative; z-index: 2;
  background: repeating-linear-gradient(90deg, var(--c1) 0 30px, var(--c2) 30px 60px); box-shadow: 0 6px 10px rgba(0,0,0,.35); }
.awning::after { content: ""; position: absolute; left: 0; right: 0; bottom: -14px; height: 15px;
  background: radial-gradient(circle at 15px 0, var(--c1) 14px, transparent 15px) 0 0 / 60px 15px repeat-x,
              radial-gradient(circle at 15px 0, var(--c2) 14px, transparent 15px) 30px 0 / 60px 15px repeat-x; }
.tag { position: absolute; z-index: 3; right: 10px; top: 58px; transform-origin: 50% -14px; animation: swing 3s ease-in-out infinite;
  background: #fff3dc; color: #3b1a12; border-radius: 8px; padding: 5px 10px 4px; font-weight: 900; font-size: 16px; text-align: center; box-shadow: 0 4px 0 rgba(0,0,0,.3); }
.tag::before { content: ""; position: absolute; left: 50%; top: -14px; width: 2px; height: 14px; background: #2a120c; }
.tag small { display: block; font-size: 11px; color: var(--paprika); min-height: 0; }
.tag small:empty { display: none; }
.tag.bump { animation: bump .5s ease; }
@keyframes swing { 50% { transform: rotate(-4deg); } }
@keyframes bump { 30% { transform: scale(1.3) rotate(6deg); background: #ffd0c4; } }

.vendor-wrap { grid-row: 2 / 4; grid-column: 1; position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: center; }
.vendor { width: 112%; max-width: 200px; height: auto; margin-bottom: 26px; transform-origin: 50% 100%; transition: transform .3s ease; }
.vendor .skin { fill: #f5c7a0; } .vendor .ink { fill: #2a120c; } .vendor .nose { fill: #e4a57f; }
.vendor .dress { fill: #1f6f6d; } .vendor .apron { fill: #fff3dc; } .vendor .dot { fill: var(--paprika); }
.vendor .scarf, .vendor .scarf-back, .vendor .knot { fill: var(--paprika); } .vendor .scarf-back { filter: brightness(.8); }
.vendor .blush { fill: #ff8a80; opacity: .45; transition: opacity .3s; }
.vendor .line, .vendor .brows-cross, .vendor .mouth-mid, .vendor .mouth-frown { fill: none; stroke: #2a120c; stroke-width: 4; stroke-linecap: round; }
.vendor .mouth-smile { fill: #8a1f1f; stroke: #2a120c; stroke-width: 3; stroke-linejoin: round; }
.vendor .arm { fill: none; stroke: #1f6f6d; stroke-width: 18; stroke-linecap: round; }
.vendor .eyes-happy, .vendor .mouth-smile, .vendor .mouth-frown, .vendor .brows-cross, .vendor .finger { display: none; }
.vendor.happy .eyes-open, .vendor.happy .mouth-mid { display: none; }
.vendor.happy .eyes-happy, .vendor.happy .mouth-smile { display: inline; }
.vendor.happy .blush { opacity: .9; }
.vendor.happy { animation: hop .5s ease 2; }
.vendor.wag .mouth-mid { display: none; }
.vendor.wag .mouth-frown, .vendor.wag .brows-cross, .vendor.wag .finger { display: inline; }
.vendor.wag .finger { transform-origin: 150px 170px; animation: wag .22s ease-in-out 5 alternate; }
.vendor.wag { animation: shake .5s ease; }
.vendor.listen { transform: rotate(-4deg) scale(1.03); }
@keyframes hop { 40% { transform: translateY(-12px) scale(1.04, .97); } }
@keyframes wag { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

.bubble { grid-row: 2; grid-column: 2; align-self: center; position: relative; z-index: 2; margin: 18px 12px 6px 4px; padding: 10px 12px 12px;
  background: #fff7ea; color: #2a120c; border-radius: 18px; box-shadow: 0 6px 0 rgba(0,0,0,.3); animation: pop .4s .2s backwards; }
.bubble::before { content: ""; position: absolute; left: -12px; top: 42%; border: 8px solid transparent; border-right: 14px solid #fff7ea; border-left: 0; }
.bubble small { display: block; font-size: 11px; font-weight: 700; color: #a0553a; text-transform: uppercase; letter-spacing: .08em; }
.idiom { margin: 2px 0 0; font-family: var(--display); font-weight: 700; font-size: clamp(19px, 5.6vw, 25px); line-height: 1.12; }
.hint { margin: 6px 0 0; font-size: 14px; font-weight: 700; color: #1f6f6d; line-height: 1.3; }
.hint:empty { display: none; }
.hint .sk { white-space: pre-wrap; word-spacing: -.2em; font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .06em; color: #7a2412; display: block; margin-top: 2px; }
.bubble.answer { background: #e7ffe9; }
.bubble.answer .idiom { color: #135c2b; }

.goods { grid-row: 3; grid-column: 1 / -1; position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: space-around; padding: 0 6px 6px;
  background: linear-gradient(180deg, #8a4b24, #6a3517); border-top: 4px solid #a8612f; font-size: 28px; line-height: 1; }
.goods .crate { display: grid; grid-template-columns: repeat(3, auto); justify-content: center; width: 24%; margin-top: -22px; font-size: .8em; line-height: .95; filter: drop-shadow(0 3px 0 rgba(0,0,0,.35)); }
.goods .crate i { font-style: normal; }
.goods .crate i:nth-child(1) { grid-column: 1 / 2; margin-left: 50%; } .goods .crate i:nth-child(2) { grid-column: 2 / 3; margin-left: 50%; }
.goods .crate::after { content: ""; grid-column: 1 / -1; height: 12px; margin-top: -4px; border-radius: 3px; background: repeating-linear-gradient(90deg, #b5773f 0 16px, #8a5226 16px 18px); box-shadow: 0 2px 0 rgba(0,0,0,.3); }
.goods .sack { width: 22%; height: 38px; margin-top: -20px; border-radius: 50% 50% 8px 8px / 60% 60% 8px 8px; background: radial-gradient(ellipse at 50% 20%, var(--sp) 55%, transparent 56%), #c7a270; box-shadow: inset 0 -6px 0 rgba(0,0,0,.18); }

/* Cierpliwość */
.patience { flex: none; height: 10px; border-radius: 99px; background: rgba(0,0,0,.35); overflow: hidden; }
.patience i { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--paprika), var(--saffron) 40%, var(--leaf)); transform-origin: 0 50%; }
.patience.low i { animation: blink .5s steps(2) infinite; }
@keyframes blink { 50% { opacity: .4; } }

.heard { flex: none; margin: 0; min-height: 22px; text-align: center; font-weight: 700; color: var(--muted); font-size: 15px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; }
.heard.live { color: #fff; font-style: italic; }
.heard.ok { color: var(--ok); } .heard.bad { color: #ffb0b8; }

/* Sterowanie */
.controls { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.side-btn { min-height: 56px; border: 0; border-radius: 16px; background: rgba(0,0,0,.28); cursor: pointer; font-weight: 700; font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px; }
.side-btn span { font-size: 18px; } .side-btn small { color: var(--muted); font-size: 11px; font-weight: 500; }
.side-btn:disabled { opacity: .4; }
.mic { position: relative; width: 92px; height: 92px; border-radius: 50%; border: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, #ffd779, var(--saffron) 45%, #d9820c); color: #3b1a12; box-shadow: 0 6px 0 #8a4a07, 0 0 0 6px rgba(255,182,39,.18), 0 12px 30px rgba(0,0,0,.4); transition: transform .1s; }
.mic:active { transform: translateY(4px); box-shadow: 0 2px 0 #8a4a07; }
.mic-ico { font-size: 34px; line-height: 1; } .mic-lbl { font-weight: 900; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.mic.on { background: radial-gradient(circle at 35% 30%, #ff9b80, var(--paprika) 50%, #a52d12); color: #fff; box-shadow: 0 6px 0 #6b1a08; }
.mic.on::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 3px solid var(--paprika); animation: ring 1s ease-out infinite; }
.mic:disabled { filter: grayscale(.6) brightness(.8); }
@keyframes ring { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.typebox { flex: none; display: flex; gap: 8px; }
.typebox input { flex: 1; min-width: 0; height: 52px; border-radius: 14px; border: 2px solid rgba(255,182,39,.45); background: #fff7ea; color: #2a120c; padding: 0 14px; font: 700 17px "Rubik", sans-serif; }
.typebox input:focus { outline: none; border-color: var(--saffron); box-shadow: 0 0 0 4px rgba(255,182,39,.25); }
.typebox button { width: 56px; height: 52px; border: 0; border-radius: 14px; background: var(--saffron); color: #3b1a12; font-size: 24px; font-weight: 900; cursor: pointer; box-shadow: 0 4px 0 #8a4a07; }
.link-btn { flex: none; align-self: center; min-height: 36px; border: 0; background: none; color: var(--muted); font-weight: 700; font-size: 14px; text-decoration: underline; cursor: pointer; }
.typing .controls .mic { display: none; } .typing .controls { grid-template-columns: 1fr 1fr; }

/* Koszyk */
.basket-row { flex: none; display: flex; align-items: flex-end; gap: 12px; height: 64px; }
.basket { position: relative; flex: 1; height: 50px; border-radius: 6px 6px 22px 22px;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,.2) 0 3px, transparent 3px 12px), repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 3px, transparent 3px 10px), var(--bcol, var(--wicker));
  box-shadow: inset 0 6px 0 rgba(255,255,255,.18), 0 5px 0 rgba(0,0,0,.35); }
.basket::before { content: ""; position: absolute; left: 18%; right: 18%; bottom: 100%; height: 22px; border: 5px solid var(--bcol, var(--wicker)); border-bottom: 0; border-radius: 40px 40px 0 0; filter: brightness(.8); }
.fruits { position: absolute; left: 8px; right: 8px; bottom: 26px; display: flex; flex-wrap: wrap-reverse; justify-content: center; font-size: 26px; line-height: .9; }
.fruits span { animation: drop .45s cubic-bezier(.3,1.6,.5,1) backwards; margin: 0 -2px; }
@keyframes drop { from { transform: translateY(-40px) scale(1.5); opacity: 0; } }
.bill { flex: none; text-align: right; display: flex; flex-direction: column; }
.bill small { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.bill b { font-family: var(--display); font-weight: 700; font-size: 24px; color: var(--saffron); }
.bill .combo { color: var(--ok); text-transform: none; letter-spacing: 0; min-height: 13px; }

/* ---------- Podsumowanie ---------- */
.recap { align-items: stretch; gap: 10px; text-align: center; padding-top: 4px; }
.big-basket { position: relative; flex: none; height: 110px; width: 78%; max-width: 300px; margin: 30px auto 0; border-radius: 8px 8px 44px 44px;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,.2) 0 4px, transparent 4px 16px), repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 4px, transparent 4px 13px), var(--bcol, var(--wicker));
  box-shadow: inset 0 8px 0 rgba(255,255,255,.18), 0 8px 0 rgba(0,0,0,.35); }
.big-basket::before { content: ""; position: absolute; left: 20%; right: 20%; bottom: 100%; height: 42px; border: 8px solid var(--bcol, var(--wicker)); border-bottom: 0; border-radius: 80px 80px 0 0; filter: brightness(.8); }
.big-basket .fruits { bottom: 60px; font-size: 40px; }
.idioms { list-style: none; margin: 0; padding: 0 2px; flex: 1; min-height: 0; overflow-y: auto; text-align: left; display: grid; gap: 6px; align-content: start; }
.idioms li { display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,.25); border-radius: 14px; padding: 7px 8px 7px 12px; }
.idioms .mk { font-size: 20px; flex: none; }
.idioms .tx { flex: 1; min-width: 0; }
.idioms .en { display: block; font-weight: 900; font-size: 15px; }
.idioms .pl { display: block; color: var(--muted); font-size: 12.5px; }
.idioms li.miss .en { color: #ffc2c8; }
.say { flex: none; width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--teal); font-size: 18px; cursor: pointer; }
.say.on { animation: blink .5s steps(2) infinite; }
.cta { flex: none; height: 58px; border: 0; border-radius: 99px; cursor: pointer; font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: .03em; color: #3b1a12;
  background: linear-gradient(180deg, #ffd779, var(--saffron)); box-shadow: 0 6px 0 #8a4a07; }
.cta:active { transform: translateY(4px); box-shadow: 0 2px 0 #8a4a07; }

/* ---------- Efekty ---------- */
.fx { position: fixed; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
.pt { position: absolute; left: 0; top: 0; will-change: transform, opacity; font-size: 22px; }
.flyer { position: absolute; left: 0; top: 0; font-size: 44px; will-change: transform; z-index: 6; }
.float { position: absolute; font-family: var(--display); font-weight: 700; font-size: 26px; color: var(--ok); text-shadow: 0 2px 0 rgba(0,0,0,.5); animation: rise 1s ease-out forwards; }
.float.bad { color: var(--bad); }
@keyframes rise { to { transform: translateY(-60px); opacity: 0; } }

@media (max-height: 660px) {
  .stall { min-height: 220px; grid-template-rows: 46px 1fr 56px; }
  .mic { width: 80px; height: 80px; } .mic-ico { font-size: 28px; }
  .side-btn { min-height: 50px; }
  .basket-row { height: 56px; } .basket { height: 42px; } .fruits { font-size: 22px; bottom: 20px; }
  .goods { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}

/* Ściągawka (3 do wyboru) i zachęta do podpowiedzi */
.choices { position: absolute; z-index: 4; left: 8px; right: 8px; bottom: 8px; display: grid; gap: 6px; animation: pop .3s backwards; }
.choice { min-height: 40px; border: 0; border-radius: 12px; padding: 6px 12px; cursor: pointer; text-align: left;
  background: #fff7ea; color: #2a120c; font: 700 15px "Rubik", sans-serif; box-shadow: 0 3px 0 rgba(0,0,0,.35); }
.choice::before { content: "🗣️ "; }
.choice:active { transform: translateY(2px); }
.choice.bad { background: #ffd0d4; color: #8a1f2b; text-decoration: line-through; opacity: .7; }
.choice.ok { background: #c9f7d3; color: #135c2b; }
.side-btn.nudge { background: rgba(255,182,39,.28); box-shadow: 0 0 0 2px var(--saffron); animation: nudge 1s ease-in-out infinite; }
@keyframes nudge { 50% { transform: scale(1.06); } }

/* Lokalizacja: etykieta przycisku bocznego w <b> (tłumaczona) wygląda jak dawny zwykły tekst przycisku */
.side-btn b { font-weight: inherit; }
/* Inne języki niż polski: długie słowa (np. niemieckie złożenia) łamią się zamiast wychodzić poza dymek i listę */
html:not([lang="pl"]) .idiom, html:not([lang="pl"]) .hint, html:not([lang="pl"]) .idioms .pl { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }