:root {
  --bg: #0d0717;
  --bg2: #170d29;
  --card: #1f1336;
  --card2: #2a1a47;
  --line: #3b2763;
  --txt: #f3eaff;
  --mute: #a493c4;
  --pink: #ff3fa4;
  --cyan: #2ef2ff;
  --lime: #b6ff3b;
  --gold: #ffd23f;
  --red: #ff4b5c;
  --pix: 'Pixelify Sans', ui-monospace, monospace;
  --h: var(--tg-viewport-stable-height, 100dvh);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--txt); overscroll-behavior: none; }
body { font: 14px/1.35 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; user-select: none; -webkit-user-select: none; overflow: hidden; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
.hidden { display: none !important; }

#app { height: var(--h); max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; background: var(--bg); position: relative; overflow: hidden; }

/* ─── HUD na scenie: mały gramofon (pierścień = energia parkietu) + nastrój ─── */
#hud { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; align-items: center; gap: 10px; pointer-events: none; z-index: 4; }
#mood { flex: 1; min-width: 0; background: #0b0614cc; border: 1px solid #ffffff1a; border-radius: 12px; padding: 6px 10px; backdrop-filter: blur(4px); }
#mood b { display: block; font: 700 15px var(--pix); text-shadow: 0 0 10px #ff3fa488; white-space: nowrap; }
#mood small { display: block; font: 600 10px var(--pix); color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#turntable { position: relative; flex: none; width: var(--d, 74px); height: var(--d, 74px); border-radius: 14px; padding: 5px;
  background: linear-gradient(160deg, #34314a, #17151f 60%); box-shadow: 0 6px 18px #000c, inset 0 1px 0 #ffffff22; }
#disc { position: relative; width: 100%; height: 100%; border-radius: 50%; padding: 4px; transition: transform 0.08s ease-out;
  background: conic-gradient(from -90deg, var(--rc, #ff3fa4) calc(var(--e, 0.5) * 360deg), #251a3d 0); box-shadow: 0 0 calc(var(--e, 0.5) * 18px) var(--rc, #ff3fa4); }
#disc.hit { transform: scale(0.93); }
#disc.drop { background: conic-gradient(from var(--rot, 0deg), #ff3fa4, #ffd23f, #b6ff3b, #2ef2ff, #a45cff, #ff3fa4); box-shadow: 0 0 22px #ff3fa4, 0 0 40px #2ef2ff66; }
#vinyl { position: relative; width: 100%; height: 100%; border-radius: 50%; will-change: transform;
  background: repeating-radial-gradient(circle at 50% 50%, #0d0d10 0 1.5px, #1b1b22 1.5px 3px); box-shadow: inset 0 0 0 1px #000, inset 0 0 10px #000; }
#vinylMark { position: absolute; left: 50%; top: 8%; width: 2px; height: 14%; margin-left: -1px; background: #ffffff66; border-radius: 1px; }
#vlabel { position: absolute; inset: 31%; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, #ff6ab8 0 12%, #ff3fa4 13% 100%); }
#vlabel span { font-size: calc(var(--d, 74px) * 0.17); line-height: 1; }
#sheen { position: absolute; inset: 4px; border-radius: 50%; pointer-events: none; background: linear-gradient(130deg, #ffffff1c 0%, transparent 35%, transparent 65%, #ffffff10 100%); }
#arm { position: absolute; right: 3px; top: 3px; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle, #ccc 0 30%, #666 35%); }
#arm i { position: absolute; left: 4px; top: 5px; width: 2px; height: calc(var(--d, 74px) * 0.42); background: linear-gradient(#ddd, #888); border-radius: 1px; transform-origin: 1px 0; transform: rotate(var(--arm, 22deg)); transition: transform 0.6s; }
.ripple { position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 2px solid var(--rc, #ff3fa4); animation: ripple 0.5s ease-out forwards; pointer-events: none; }
@keyframes ripple { to { transform: scale(4); opacity: 0; } }

/* ─── wysuwany panel ─── */
#sheet { position: absolute; left: 0; right: 0; bottom: var(--tabsH, 60px); height: var(--sheetH, 60%); z-index: 20; display: flex; flex-direction: column;
  background: linear-gradient(180deg, #1d1133, var(--bg) 120px); border-top: 1px solid var(--line); border-radius: 18px 18px 0 0; box-shadow: 0 -10px 30px #000c;
  transform: translateY(calc(100% + var(--tabsH, 60px))); transition: transform 0.28s cubic-bezier(.2, .9, .3, 1); }
#sheet.open { transform: translateY(0); }
#sheetHead { position: relative; display: flex; align-items: center; justify-content: center; padding: 14px 12px 6px; touch-action: none; cursor: grab; }
#sheetHead .grab { position: absolute; top: 5px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: #ffffff33; }
#sheetHead b { font: 700 16px var(--pix); }
#sheetClose { position: absolute; right: 10px; top: 8px; width: 32px; height: 32px; border-radius: 10px; background: var(--card2); border: 1px solid var(--line); font-size: 14px; color: var(--mute); }

/* ─── góra ─── */
#top { display: flex; align-items: center; gap: 8px; padding: 8px 12px 6px; background: linear-gradient(180deg, #1b0f30, var(--bg)); }
.loc-pill { font-family: var(--pix); font-size: 13px; padding: 6px 10px; border-radius: 999px; background: var(--card2); border: 1px solid var(--line); white-space: nowrap; max-width: 34%; overflow: hidden; text-overflow: ellipsis; }
.money { flex: 1; text-align: center; min-width: 0; }
.cash { font-family: var(--pix); font-weight: 700; font-size: 26px; line-height: 1; color: var(--gold); text-shadow: 0 0 12px #ffd23f66, 2px 2px 0 #7a4b00; }
.cash i { font-style: normal; font-size: 18px; margin-left: 4px; }
.sub { font-size: 12px; color: var(--mute); margin-top: 3px; }
.sub b { color: var(--lime); font-weight: 600; }
.icon-btn { width: 38px; height: 38px; border-radius: 12px; background: var(--card2); border: 1px solid var(--line); font-size: 18px; }

/* ─── scena ─── */
#stage { position: relative; margin: 6px 6px 6px; border-radius: 14px; overflow: hidden; border: 2px solid var(--line); box-shadow: 0 0 24px #ff3fa422, inset 0 0 0 1px #000; touch-action: manipulation; flex: 1; min-height: 0; cursor: pointer; }
#scene { display: block; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; background: #000; }
#fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
#chips { position: absolute; left: 6px; top: 6px; display: flex; flex-wrap: wrap; gap: 4px; max-width: 75%; pointer-events: none; }
.chip { font-family: var(--pix); font-size: 11px; padding: 2px 6px; border-radius: 6px; background: #000a; border: 1px solid #ffffff33; white-space: nowrap; }
.chip.good { color: var(--lime); border-color: #b6ff3b66; }
.chip.bad { color: var(--red); border-color: #ff4b5c88; animation: blink 0.8s steps(2) infinite; }
#tapHint { position: absolute; bottom: 96px; left: 50%; transform: translateX(-50%); font-family: var(--pix); font-size: 13px; background: #000c; border: 1px solid var(--pink); padding: 5px 12px; border-radius: 10px; animation: bounce 1s ease-in-out infinite; pointer-events: none; white-space: nowrap; z-index: 4; }
#eventBar { position: absolute; left: 6px; right: 6px; bottom: 92px; z-index: 5; background: #000d; border: 1px solid var(--red); border-radius: 10px; padding: 6px 8px; font-size: 12px; display: flex; align-items: center; gap: 8px; }
#eventBar .ev-txt { flex: 1; }
#eventBar button { background: var(--pink); color: #fff; padding: 5px 9px; border-radius: 8px; font-weight: 700; font-size: 12px; }

.float { position: absolute; font-family: var(--pix); font-weight: 700; color: var(--gold); text-shadow: 1px 1px 0 #000, 0 0 6px #000; animation: floatUp 0.9s ease-out forwards; white-space: nowrap; font-size: 15px; transform: translate(-50%, -50%); }
.float.big { font-size: 22px; color: var(--lime); }
.clicky { position: absolute; pointer-events: auto; font-size: 30px; line-height: 1; transform: translate(-50%, -50%); filter: drop-shadow(0 0 6px #ffd23f); cursor: pointer; animation: wobble 0.6s ease-in-out infinite; z-index: 3; }
.clicky .hp { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); width: 36px; height: 5px; background: #000a; border-radius: 3px; overflow: hidden; margin-top: 2px; }
.clicky .hp i { display: block; height: 100%; background: var(--red); }
.clicky .tag { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); font: 600 10px var(--pix); background: #000c; padding: 1px 4px; border-radius: 4px; white-space: nowrap; color: #fff; }
.flash { position: absolute; inset: 0; background: #fff; animation: flash 0.35s ease-out forwards; }

/* ─── paski ─── */
#meters { display: flex; gap: 8px; padding: 6px 10px 0; }
.meter { position: relative; flex: 1; height: 22px; border-radius: 8px; background: var(--card); border: 1px solid var(--line); overflow: hidden; }
.meter > div { position: absolute; left: 0; top: 0; bottom: 0; width: 0; transition: width 0.15s linear; }
.meter span { position: relative; display: block; text-align: center; font: 600 11px/20px var(--pix); text-shadow: 1px 1px 0 #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; }
#dropFill { background: linear-gradient(90deg, #ff6a00, var(--pink)); }
.meter.drop.cold { border-color: var(--red); animation: glowRed 0.8s infinite alternate; }
@keyframes glowRed { to { box-shadow: 0 0 12px var(--red); } }
.meter.drop.hot #dropFill { background: linear-gradient(90deg, var(--lime), var(--cyan)); animation: pulse 0.3s infinite alternate; }
#goalFill { background: linear-gradient(90deg, #5a2bd6, var(--cyan)); }
.meter.goal.ready { border-color: var(--lime); animation: glow 1s infinite alternate; }

/* ─── panel ─── */
#panel { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 10px 16px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.sec-title { font: 700 15px var(--pix); margin: 10px 2px 6px; display: flex; align-items: center; gap: 6px; }
.sec-title small { font: 12px system-ui; color: var(--mute); margin-left: auto; }
.hint { color: var(--mute); font-size: 12px; margin: 2px 2px 8px; }
.row { display: flex; gap: 6px; align-items: center; }
.seg { display: flex; gap: 4px; background: var(--card); border-radius: 10px; padding: 3px; border: 1px solid var(--line); }
.seg button { flex: 1; padding: 6px 4px; border-radius: 8px; font-size: 12px; color: var(--mute); white-space: nowrap; }
.seg button.on { background: var(--card2); color: var(--txt); box-shadow: 0 0 0 1px var(--line); }
.cats { margin-bottom: 6px; }
.amt { width: 120px; flex: none; }

.item { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; margin-bottom: 6px; }
.item.locked { opacity: 0.45; }
.item .ico { width: 40px; height: 40px; flex: none; display: grid; place-items: center; background: var(--bg2); border-radius: 10px; font-size: 22px; }
.item .mid { flex: 1; min-width: 0; }
.item .nm { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item .ds { font-size: 11px; color: var(--mute); }
.lvbar { height: 4px; background: var(--bg2); border-radius: 2px; margin-top: 4px; overflow: hidden; }
.lvbar i { display: block; height: 100%; background: var(--cyan); }
.buy { flex: none; min-width: 84px; padding: 7px 8px; border-radius: 10px; background: linear-gradient(180deg, #ff57b0, #d4247f); font-weight: 700; font-size: 12px; text-align: center; box-shadow: 0 3px 0 #7d0f48; line-height: 1.15; }
.buy small { display: block; font-size: 10px; font-weight: 500; opacity: 0.85; }
.buy *, #tabs button *, .seg button * { pointer-events: none; }
.buy:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #7d0f48; }
.buy:disabled { background: #3a2a55; box-shadow: 0 3px 0 #22183a; color: #8c7aaa; }
.buy.ad { background: linear-gradient(180deg, #2ef2ff, #119bb0); box-shadow: 0 3px 0 #0b5864; color: #00262c; }
.buy.star { background: linear-gradient(180deg, #ffe36e, #f0a500); box-shadow: 0 3px 0 #8a5a00; color: #3a2400; }
.buy.green { background: linear-gradient(180deg, #c8ff5e, #6fbf00); box-shadow: 0 3px 0 #3c6a00; color: #1a2e00; }
.buy.wide { width: 100%; padding: 11px; font-size: 14px; }
.buy.ad:disabled, .buy.star:disabled, .buy.green:disabled { background: #3a2a55; box-shadow: 0 3px 0 #22183a; color: #8c7aaa; }

.hero { background: linear-gradient(135deg, #3a1563, #12304a); border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin: 6px 0 8px; }
.hero h3 { margin: 0 0 4px; font: 700 17px var(--pix); }
.hero p { margin: 0 0 10px; color: #d6c8f0; font-size: 12px; }
.req { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 6px 8px; background: #0006; border-radius: 8px; margin-bottom: 6px; }
.req.ok { color: var(--lime); }
.req .grow { flex: 1; }
.req button { padding: 4px 8px; border-radius: 7px; font-size: 11px; font-weight: 700; }

.path { display: flex; flex-direction: column; gap: 6px; }
.stop { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.stop.cur { border-color: var(--pink); box-shadow: 0 0 12px #ff3fa444; }
.stop.done { opacity: 0.6; }
.stop.lock { opacity: 0.4; }
.stop .e { font-size: 24px; }
.stop .n { font-weight: 600; }
.stop .s { font-size: 11px; color: var(--mute); }

.lb { background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.lb .r { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-bottom: 1px solid #ffffff0d; font-size: 13px; }
.lb .r:last-child { border-bottom: 0; }
.lb .r.me { background: #ff3fa422; }
.lb .p { width: 22px; font: 700 13px var(--pix); color: var(--mute); text-align: center; }
.lb .nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb .v { font: 600 13px var(--pix); color: var(--gold); }
.lb .r button { padding: 4px 8px; border-radius: 7px; font-size: 11px; font-weight: 700; background: var(--red); color: #fff; }
.lb .r button:disabled { background: #3a2a55; color: #8c7aaa; }
.empty { padding: 14px; text-align: center; color: var(--mute); font-size: 12px; }

.daily { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 8px 0 12px; }
.daily div { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 6px 2px; text-align: center; font-size: 10px; color: var(--mute); }
.daily div b { display: block; font: 700 13px var(--pix); color: var(--txt); }
.daily div.got { background: #b6ff3b22; border-color: #b6ff3b66; }
.daily div.today { border-color: var(--gold); box-shadow: 0 0 10px #ffd23f55; }

/* ─── nawigacja ─── */
#tabs { position: relative; z-index: 25; display: flex; background: #120a20; border-top: 1px solid var(--line); padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); }
#tabs button { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 4px 0; border-radius: 10px; color: var(--mute); position: relative; }
#tabs button i { font-style: normal; font-size: 20px; line-height: 1.1; filter: grayscale(0.6); }
#tabs button span { font: 600 11px var(--pix); }
#tabs button.on { color: var(--txt); background: var(--card); }
#tabs button.on i { filter: none; }
.dot { position: absolute; top: 3px; right: 22%; width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 6px var(--red); }

/* ─── modal ─── */
#modal { position: fixed; inset: 0; background: #05020bcc; display: grid; place-items: center; padding: 18px; z-index: 50; animation: fadeIn 0.15s; }
.card { width: 100%; max-width: 380px; background: linear-gradient(180deg, #2a1748, #160c28); border: 2px solid var(--line); border-radius: 18px; padding: 18px 16px 14px; text-align: center; box-shadow: 0 10px 40px #000, 0 0 30px #ff3fa433; animation: pop 0.22s cubic-bezier(.2, 1.6, .5, 1); max-height: 90vh; overflow-y: auto; }
.card .big-e { font-size: 54px; line-height: 1; margin-bottom: 6px; }
.card h2 { font: 700 21px var(--pix); margin: 0 0 6px; }
.card p { color: #d6c8f0; margin: 0 0 12px; font-size: 13px; }
.card .val { font: 700 30px var(--pix); color: var(--gold); margin: 4px 0 12px; text-shadow: 0 0 14px #ffd23f66; }
.card .btns { display: flex; flex-direction: column; gap: 8px; }
.card .btns .buy { width: 100%; padding: 11px; font-size: 14px; }
.card .ghost { color: var(--mute); font-size: 12px; padding: 6px; }

#adOverlay { position: fixed; inset: 0; z-index: 80; background: #000; display: grid; place-items: center; }
.ad-box { text-align: center; }
.ad-tag { font: 600 12px var(--pix); color: var(--mute); letter-spacing: 2px; }
#adCount { font: 700 72px var(--pix); color: var(--cyan); }
.ad-sub { color: var(--mute); font-size: 12px; }

#toasts { position: fixed; left: 0; right: 0; top: 74px; display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 60; pointer-events: none; }
.toast { max-width: 92%; background: #1d1131f0; border: 1px solid var(--line); border-left: 4px solid var(--pink); padding: 8px 12px; border-radius: 10px; font-size: 13px; box-shadow: 0 6px 20px #000a; animation: toastIn 0.25s ease-out, toastOut 0.3s ease-in 2.7s forwards; }
.toast.good { border-left-color: var(--lime); }
.toast.bad { border-left-color: var(--red); }

.dev { margin-top: 16px; padding: 8px; border: 1px dashed #ff4b5c88; border-radius: 10px; display: flex; flex-wrap: wrap; gap: 4px; }
.dev button { background: #ff4b5c33; padding: 4px 8px; border-radius: 6px; font-size: 11px; }

@keyframes floatUp { 0% { opacity: 1; margin-top: 0; } 100% { opacity: 0; margin-top: -46px; } }
@keyframes bounce { 50% { transform: translateX(-50%) translateY(-4px); } }
@keyframes wobble { 0%, 100% { transform: translate(-50%, -50%) rotate(-8deg); } 50% { transform: translate(-50%, -58%) rotate(8deg); } }
@keyframes blink { 50% { opacity: 0.4; } }
@keyframes pulse { to { filter: brightness(1.5); } }
@keyframes glow { to { box-shadow: 0 0 14px var(--lime); } }
@keyframes flash { from { opacity: 0.55; } to { opacity: 0; } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes pop { from { transform: scale(0.8); opacity: 0; } }
@keyframes toastIn { from { transform: translateY(-20px); opacity: 0; } }
@keyframes toastOut { to { transform: translateY(-20px); opacity: 0; } }
@keyframes shake { 10%, 90% { transform: translateX(-2px); } 30%, 70% { transform: translateX(3px); } 50% { transform: translateX(-3px); } }
.shake { animation: shake 0.35s; }

/* ─── ekran ładowania ─── */
#splash { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: radial-gradient(ellipse at 50% 45%, #3a1563 0%, var(--bg) 65%); transition: opacity 0.35s; }
#splash.hide { opacity: 0; pointer-events: none; }
.sp-disc { width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center; animation: spin 1.6s linear infinite;
  background: radial-gradient(circle, #ff3fa4 0 22%, #111 23%), repeating-radial-gradient(circle, #0d0d10 0 2px, #1b1b22 2px 4px);
  box-shadow: 0 0 0 6px #251a3d, 0 0 0 9px #ff3fa4, 0 0 40px #ff3fa4aa; }
.sp-disc span { font-size: 28px; animation: spin 1.6s linear infinite reverse; }
.sp-title { font: 700 30px var(--pix); color: var(--gold); text-shadow: 0 0 14px #ffd23f66, 3px 3px 0 #7a4b00; letter-spacing: 1px; }
.sp-dots { display: flex; gap: 8px; }
.sp-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); animation: bounceDot 0.9s ease-in-out infinite; }
.sp-dots i:nth-child(2) { animation-delay: 0.15s; background: var(--pink); }
.sp-dots i:nth-child(3) { animation-delay: 0.3s; background: var(--lime); }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bounceDot { 50% { transform: translateY(-8px); } }
.sp-sub { font: 700 13px var(--pix); color: var(--cyan); letter-spacing: 6px; margin-top: -12px; }

/* ─── samouczek: ramka, palec, dymek ─── */
#coach { position: fixed; inset: 0; z-index: 45; pointer-events: none; }
#coach.hidden { display: none; }
#coach .c-ring { position: fixed; border: 3px solid var(--lime); border-radius: 14px; box-shadow: 0 0 18px var(--lime), inset 0 0 12px #b6ff3b55; animation: coachPulse 1s ease-in-out infinite; }
#coach.dim .c-ring { box-shadow: 0 0 0 200vmax #05020bb3, 0 0 18px var(--lime), inset 0 0 12px #b6ff3b55; }
#coach .c-hand { position: fixed; display: none; font-size: 46px; line-height: 1; margin: -6px 0 0 -14px; filter: drop-shadow(0 3px 6px #000); animation: coachTap 0.8s ease-in-out infinite; }
#coach.hand .c-hand { display: block; }
#coach .c-bubble { position: fixed; left: 14px; right: 14px; max-width: 440px; margin: 0 auto; padding: 11px 14px; text-align: center; font-size: 14px; line-height: 1.4;
  background: linear-gradient(180deg, #2a1748f5, #1a0e2ef5); border: 2px solid var(--lime); border-radius: 14px; box-shadow: 0 10px 28px #000d, 0 0 16px #b6ff3b44; }
#coach .c-bubble b { color: var(--lime); }
#coach .c-btn { pointer-events: auto; display: block; width: 100%; margin-top: 10px; padding: 10px; border-radius: 10px; font-weight: 700; font-size: 14px;
  background: linear-gradient(180deg, #c8ff5e, #6fbf00); color: #1a2e00; box-shadow: 0 3px 0 #3c6a00; }
#coach .c-btn.hidden { display: none; }
@keyframes coachPulse { 50% { border-color: #e9ffb8; } }
@keyframes coachTap { 0%, 100% { transform: translateY(0) scale(1); } 45% { transform: translateY(10px) scale(0.88); } }

/* ═══════════════════════════════════════════════════════════════════════
   MOTYW Y2K PIXEL — chrom, twardy połysk (frutiger/metro), pikselowe fazowanie,
   zero rozmyć (lekko na telefon). Nadpisuje style powyżej.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --bg: #0a0612; --bg2: #170d2b; --card: #2a1a4a; --card2: #3f2a6b; --line: #5b3f99;
  --ink: #0a0612; --txt: #f1ebff; --mute: #a58ae6;
  --pink: #ff5fb8; --pink2: #e0278f; --pink3: #a3166b; --cyan: #5ff0ff; --lime: #c4ff4a; --gold: #ffe066; --red: #ff4b6b;
  --title: 'Silkscreen', var(--pix);
  --bevel: inset 2px 2px 0 #7d5fc4, inset -2px -2px 0 #170d2b;
  --chrome: linear-gradient(180deg, #cdbdf5 0 8%, #a58ae6 8% 46%, #7d5fc4 46% 100%);
}
html, body { background: var(--bg); }
body { background-image: conic-gradient(#0d0818 25%, #120a22 0 50%, #0d0818 0 75%, #120a22 0); background-size: 4px 4px; }
#app { background: transparent; }
.pxi { width: 1em; height: 1em; image-rendering: pixelated; image-rendering: crisp-edges; vertical-align: -0.15em; pointer-events: none; }

/* góra */
#top { background: linear-gradient(180deg, #2a1a4a 0 50%, #1d1236 50% 100%); border-bottom: 2px solid var(--ink); box-shadow: 0 2px 0 #3f2a6b; }
.loc-pill { font: 700 12px var(--title); border-radius: 4px; border: 2px solid var(--ink); background: var(--chrome); color: var(--ink); box-shadow: inset 1px 1px 0 #f1ebff, 2px 2px 0 var(--ink); }
.loc-pill .pxi { font-size: 18px; }
.cash { font-family: var(--title); font-size: 24px; color: var(--gold); text-shadow: 2px 2px 0 #b5552a; letter-spacing: 1px; }
.icon-btn { border-radius: 4px; border: 2px solid var(--ink); background: var(--chrome); box-shadow: inset 1px 1px 0 #f1ebff, 2px 2px 0 var(--ink); }

/* scena: chromowana ramka + linie CRT */
#stage { border: 3px solid var(--ink); border-radius: 6px; box-shadow: 0 0 0 2px #a58ae6, 0 0 0 4px var(--ink); margin: 8px 8px 8px; }
#stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; background: repeating-linear-gradient(180deg, transparent 0 2px, #0a061226 2px 3px); }
.chip { border-radius: 2px; border: 2px solid var(--ink); background: #170d2be6; box-shadow: 2px 2px 0 var(--ink); }
#tapHint { font-family: var(--title); font-size: 11px; border-radius: 3px; border: 2px solid var(--ink); background: var(--pink2); color: #fff; box-shadow: inset 2px 2px 0 var(--pink), 3px 3px 0 var(--ink); }
#eventBar { border-radius: 4px; border: 2px solid var(--ink); background: #170d2bf2; box-shadow: inset 0 0 0 2px var(--red), 3px 3px 0 var(--ink); }
.float { font-family: var(--title); text-shadow: 2px 2px 0 var(--ink); }

/* HUD: gramofon + nastrój */
#mood { backdrop-filter: none; background: #170d2bf2; border: 2px solid var(--ink); border-radius: 4px; box-shadow: var(--bevel), 3px 3px 0 var(--ink); }
#mood b { font-family: var(--title); font-size: 13px; text-shadow: 2px 2px 0 var(--ink); }
#turntable { border-radius: 6px; border: 2px solid var(--ink); background: var(--chrome); box-shadow: inset 2px 2px 0 #f1ebff, 3px 3px 0 var(--ink); }
#disc { box-shadow: none; }
#vlabel .pxi { font-size: 22px; }

/* paski */
.meter { border-radius: 3px; border: 2px solid var(--ink); background: #170d2b; box-shadow: 2px 2px 0 var(--ink); }
.meter span { font-family: var(--title); font-size: 10px; text-shadow: 1px 1px 0 var(--ink); }
#goalFill { background: repeating-linear-gradient(90deg, #5ff0ff 0 6px, #1fa3c4 6px 8px); }
.meter.goal.ready { animation: none; box-shadow: 0 0 0 2px var(--lime), 2px 2px 0 var(--ink); }
.meter.goal.ready #goalFill { background: repeating-linear-gradient(90deg, #c4ff4a 0 6px, #6fbf1a 6px 8px); }

/* panel zakładek = okno Y2K */
#sheet { border-radius: 8px 8px 0 0; border: 3px solid var(--ink); border-bottom: 0; background: #170d2b; box-shadow: 0 -4px 0 #a58ae6; }
#sheetHead { background: linear-gradient(180deg, #ff8fd0 0 45%, #e0278f 45% 100%); border-bottom: 3px solid var(--ink); border-radius: 5px 5px 0 0; padding: 10px 12px 8px; }
#sheetHead b { font: 700 15px var(--title); color: #fff; text-shadow: 2px 2px 0 var(--pink3); }
#sheetHead .grab { background: #ffffff99; }
#sheetClose { border-radius: 3px; border: 2px solid var(--ink); background: var(--chrome); color: var(--ink); box-shadow: inset 1px 1px 0 #f1ebff; top: 6px; }
.sec-title { font-family: var(--title); font-size: 13px; letter-spacing: 0.5px; }
.sec-title::before { content: "✦"; color: var(--pink); }
.seg { border-radius: 4px; border: 2px solid var(--ink); background: #0a0612; }
.seg button { border-radius: 2px; }
.seg button.on { background: var(--chrome); color: var(--ink); box-shadow: inset 1px 1px 0 #f1ebff; }

.item, .hero, .req, .stop, .lb, .daily div { border-radius: 4px; border: 2px solid var(--ink); }
.item { background: linear-gradient(180deg, #2a1a4a 0 50%, #24163f 50% 100%); box-shadow: var(--bevel), 3px 3px 0 var(--ink); }
.item .ico { border-radius: 3px; border: 2px solid var(--ink); background: repeating-conic-gradient(#3f2a6b 0 25%, #2a1a4a 0 50%) 0 0 / 6px 6px; box-shadow: inset 1px 1px 0 #7d5fc4; }
.item .ico .pxi { font-size: 30px; }
.lvbar { height: 6px; border-radius: 0; border: 1px solid var(--ink); background: #0a0612; }
.lvbar i { background: repeating-linear-gradient(90deg, #5ff0ff 0 4px, #1fa3c4 4px 5px); }
.hero { background: linear-gradient(180deg, #3f2a6b 0 50%, #2a1a4a 50% 100%); box-shadow: var(--bevel), 3px 3px 0 var(--ink); }
.hero h3 { font-family: var(--title); font-size: 14px; text-shadow: 2px 2px 0 var(--ink); }
.req { background: #0a0612; }
.stop.cur { box-shadow: 0 0 0 2px var(--pink), 3px 3px 0 var(--ink); }
.lb { background: #170d2b; box-shadow: 3px 3px 0 var(--ink); }
.lb .r.me { background: #a3166b55; }

/* przyciski: twardy połysk (górna połowa jaśniejsza), pikselowe fazowanie, bez rozmyć */
.buy { border-radius: 4px; border: 2px solid var(--ink); color: #fff; text-shadow: 1px 1px 0 var(--pink3);
  background: linear-gradient(180deg, #ff8fd0 0 46%, #e0278f 46% 100%); box-shadow: inset 2px 2px 0 #ffb3dc, inset -2px -2px 0 #a3166b, 0 3px 0 var(--ink); }
.buy:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 2px 2px 0 #a3166b, 0 1px 0 var(--ink); }
.buy.ad { color: var(--ink); text-shadow: none; background: linear-gradient(180deg, #a6f8ff 0 46%, #1fa3c4 46% 100%); box-shadow: inset 2px 2px 0 #e0fdff, inset -2px -2px 0 #0f4f66, 0 3px 0 var(--ink); }
.buy.star { color: var(--ink); text-shadow: none; background: linear-gradient(180deg, #fff0a8 0 46%, #ff9a3c 46% 100%); box-shadow: inset 2px 2px 0 #fff8d6, inset -2px -2px 0 #b5552a, 0 3px 0 var(--ink); }
.buy.green { color: var(--ink); text-shadow: none; background: linear-gradient(180deg, #e2ff9e 0 46%, #6fbf1a 46% 100%); box-shadow: inset 2px 2px 0 #f2ffd6, inset -2px -2px 0 #2f5e12, 0 3px 0 var(--ink); }
.buy:disabled, .buy.ad:disabled, .buy.star:disabled, .buy.green:disabled { color: #8d88a3; text-shadow: none; background: linear-gradient(180deg, #4a4658 0 46%, #2c2a3a 46% 100%); box-shadow: inset 2px 2px 0 #5b5670, 0 3px 0 var(--ink); }
.buy.wide { font-family: var(--title); font-size: 13px; letter-spacing: 0.5px; }

/* dolne zakładki: chromowany pasek */
#tabs { background: linear-gradient(180deg, #cdbdf5 0 6%, #a58ae6 6% 50%, #8e6bd6 50% 100%); border-top: 3px solid var(--ink); }
#tabs button { border-radius: 4px; color: #2a1a4a; }
#tabs button span { font-family: var(--title); font-size: 9px; letter-spacing: 0.3px; }
#tabs button i { filter: none; }
#tabs button i .pxi { font-size: 26px; }
#tabs button.on { background: linear-gradient(180deg, #ff8fd0 0 46%, #e0278f 46% 100%); color: #fff; box-shadow: inset 2px 2px 0 #a3166b, 0 0 0 2px var(--ink); }
.dot { border-radius: 0; width: 8px; height: 8px; background: var(--red); box-shadow: 0 0 0 2px var(--ink); }

/* okienka: okno Y2K */
#modal { background: #0a0612cc; }
.card { border-radius: 6px; border: 3px solid var(--ink); background: #170d2b; box-shadow: 0 0 0 2px #a58ae6, 0 0 0 4px var(--ink), 8px 10px 0 2px #00000088; padding-top: 0; overflow: hidden; }
.card .big-e { margin: 0 -16px 10px; padding: 14px 0 8px; background: repeating-conic-gradient(#3f2a6b 0 25%, #2a1a4a 0 50%) 0 0 / 8px 8px; border-bottom: 3px solid var(--ink); }
.card .big-e .pxi { font-size: 72px; }
.card h2 { font-family: var(--title); font-size: 18px; color: var(--gold); text-shadow: 2px 2px 0 #b5552a; }
.card .val { font-family: var(--title); text-shadow: 2px 2px 0 #b5552a; }
.toast { border-radius: 4px; border: 2px solid var(--ink); border-left: 6px solid var(--pink); background: #170d2bf5; box-shadow: 3px 3px 0 var(--ink); }
.toast.good { border-left-color: var(--lime); }
.toast.bad { border-left-color: var(--red); }

/* samouczek */
#coach .c-ring { border-radius: 4px; border: 3px solid var(--lime); box-shadow: 0 0 0 2px var(--ink); }
#coach.dim .c-ring { box-shadow: 0 0 0 2px var(--ink), 0 0 0 200vmax #0a0612b3; }
#coach .c-bubble { border-radius: 4px; border: 3px solid var(--ink); background: #170d2b; box-shadow: 0 0 0 2px var(--lime), 5px 5px 0 2px var(--ink); }
#coach .c-btn { border-radius: 4px; border: 2px solid var(--ink); font-family: var(--title); background: linear-gradient(180deg, #e2ff9e 0 46%, #6fbf1a 46% 100%); box-shadow: inset 2px 2px 0 #f2ffd6, 0 3px 0 var(--ink); }

/* ekran ładowania */
#splash { background: conic-gradient(#0d0818 25%, #120a22 0 50%, #0d0818 0 75%, #120a22 0) 0 0 / 4px 4px; }
.sp-disc { box-shadow: 0 0 0 6px #2a1a4a, 0 0 0 9px var(--pink), 0 0 0 12px var(--ink); }
.sp-disc span .pxi { font-size: 40px; }
.sp-title { font-family: var(--title); font-size: 28px; text-shadow: 3px 3px 0 #b5552a; }
#adOverlay { background: #0a0612; }
#adCount { font-family: var(--title); }

/* Silkscreen: tylko wielkie litery (polskie znaki) */
.loc-pill, #mood b, .meter span, #sheetHead b, .sec-title, .hero h3, .buy.wide, #tabs button span, .card h2, #tapHint, #coach .c-btn, .sp-title { text-transform: uppercase; }

/* okienko: przyciski chwilę nieaktywne (ochrona przed przypadkowym tapnięciem) */
.card .btns.wait button { opacity: 0.45; pointer-events: none; }
.card .btns button { transition: opacity 0.15s; }

/* ── gatunki: znaczki i przyciski ── */
.gbtns{display:flex;flex-direction:column;gap:4px;align-items:stretch}
.gtags{display:flex;flex-wrap:wrap;gap:3px;margin:2px 0}
.gtag{font-size:10px;line-height:1;padding:3px 5px;border:1px solid currentColor;box-shadow:1px 1px 0 #000;text-transform:uppercase;font-family:'Silkscreen',monospace}
.gtag.fav{color:#ff8a3d}.gtag.hit{color:var(--cyan)}.gtag.req{color:var(--lime)}
.genre-hint{margin:-2px 0 6px;line-height:1.5}
/* ── Skrzynka DJ-a ── */
.item.chest .slots{display:flex;gap:4px;margin-top:5px}
.item.chest .slots i{width:22px;height:12px;background:#1b1030;border:2px solid #5a4a7a;box-shadow:inset 2px 2px 0 #000}
.item.chest .slots i.on{background:var(--lime);border-color:#e9ffb0;box-shadow:inset -2px -2px 0 #6a9a10}
.item.chest.ready{animation:chestGlow 1s steps(2) infinite}
.item.chest.gold .nm{color:#ffd23d}
@keyframes chestGlow{50%{box-shadow:0 0 0 2px var(--lime),0 0 12px var(--lime)}}