:root {
  --ink: #0B0B0D;
  --noc: #15131A;
  --beton: #9AA0A8;
  --sod: #FFB23E;
  --led: #FF2E1F;
  --laser: #5BFF6A;
  --papier: #F3EEE2;
  --tag: "Sedgwick Ave Display", "Comic Sans MS", cursive;
  --ui: "Funnel Sans", system-ui, sans-serif;
  --led-f: "Doto", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--noc); color: var(--papier); overflow: hidden; }
body { font: 400 16px/1.45 var(--ui); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--sod); outline-offset: 3px; }
#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* naklejka: gruba kreska markera, przesunięty cień */
.stk {
  background: var(--papier); color: var(--ink); border: 3px solid var(--ink); border-radius: 4px;
  padding: 0.62rem 1.05rem; font-weight: 800; letter-spacing: 0.01em;
  box-shadow: 4px 4px 0 var(--ink); transform: rotate(-1.2deg);
  transition: transform .15s, box-shadow .15s, background-color .15s;
}
.stk:hover { transform: rotate(-1.2deg) translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.stk:active { transform: rotate(-1.2deg) translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.stk-main { background: var(--sod); transform: rotate(1deg); }
.stk-main:hover { transform: rotate(1deg) translate(-2px, -2px); }

/* --- start ---------------------------------------------------------------- */
.boot {
  position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: clamp(1.25rem, 6vw, 6rem); background: rgba(11, 11, 13, 0.82);
  transition: opacity .9s ease;
}
.boot.out { opacity: 0; pointer-events: none; }
.boot-artist { font: 900 clamp(1rem, 2vw, 1.35rem) var(--led-f); color: var(--led); letter-spacing: .08em; margin: 0 0 .6rem; }
.boot-title {
  font: 400 clamp(3.2rem, 11vw, 9.5rem)/0.86 var(--tag); margin: 0; color: var(--papier);
  -webkit-text-stroke: 0.04em var(--ink); paint-order: stroke fill; text-shadow: 0.05em 0.05em 0 var(--ink);
  transform: rotate(-3deg); transform-origin: left bottom;
}
.boot-title span { display: inline-block; }
.boot-title span:nth-child(2) { color: var(--sod); }
.boot-title span:nth-child(3) { color: var(--led); }
.boot-note { max-width: 32rem; margin: 1.6rem 0 0; color: #CFC9BC; font-size: 1.05rem; }
.boot-go { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.8rem; }
.boot-low { position: absolute; left: clamp(1.25rem, 6vw, 6rem); right: clamp(1.25rem, 6vw, 6rem); bottom: 2rem; }
.boot-log { list-style: none; margin: 0 0 .6rem; padding: 0; font: 600 .85rem var(--led-f); color: var(--beton); min-height: 2.6em; }
.boot-log li.done { color: var(--laser); }
.boot-bar { height: 3px; background: #2A2730; }
.boot-bar i { display: block; height: 100%; width: 0; background: var(--sod); transition: width .5s ease; }

/* --- mapa ---------------------------------------------------------------------- */
.map { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
.pin {
  position: absolute; left: 0; top: 0; pointer-events: auto; background: none; border: 0; padding: 0; text-align: left;
  transform: translate(-50%, -100%); will-change: transform;
}
.pin-name {
  display: block; font: 400 clamp(2rem, 4.2vw, 3.6rem)/0.9 var(--tag); color: var(--c, var(--papier));
  -webkit-text-stroke: 0.06em var(--ink); paint-order: stroke fill; text-shadow: 0.06em 0.06em 0 var(--ink);
  transform: rotate(-4deg); transition: transform .2s;
}
.pin-sub { display: block; margin-top: .35rem; font: 600 .78rem var(--led-f); color: var(--papier); background: var(--ink); padding: .2rem .45rem; width: max-content; }
.pin::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 28px; background: var(--c, var(--papier)); opacity: .7; }
.pin:hover .pin-name, .pin:focus-visible .pin-name { transform: rotate(-4deg) scale(1.12); }
.map-hint { position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%); margin: 0; font: 600 .82rem var(--led-f); color: var(--papier); background: rgba(11, 11, 13, .7); padding: .4rem .7rem; white-space: nowrap; }

/* --- miejsce ---------------------------------------------------------------------- */
.loc { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
.loc-back { position: absolute; top: 1.1rem; right: 1.1rem; pointer-events: auto; }
.loc-card {
  position: absolute; left: clamp(1rem, 3vw, 2.4rem); bottom: 6.6rem; width: min(25rem, calc(100vw - 2rem));
  pointer-events: auto; background: rgba(11, 11, 13, 0.78); border: 3px solid var(--ink); padding: 1rem 1.15rem 1.1rem;
  box-shadow: 5px 5px 0 rgba(0,0,0,.6);
}
.loc-where { margin: 0; font: 600 .8rem var(--led-f); color: var(--sod); }
.loc-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.loc-name { margin: .2rem 0 .1rem; font: 400 clamp(2.6rem, 5vw, 3.8rem)/0.95 var(--tag); color: var(--papier); -webkit-text-stroke: 0.05em var(--ink); paint-order: stroke fill; text-shadow: 0.05em 0.05em 0 var(--led); transform: rotate(-2deg); transform-origin: left; }
.loc-tog { display: none; background: none; border: 2px solid var(--beton); color: var(--papier); padding: .25rem .6rem; font: 600 .8rem var(--led-f); }
.loc-list { list-style: none; margin: .8rem 0 0; padding: 0; }
.loc-list button {
  width: 100%; display: grid; grid-template-columns: 2.2rem 1fr auto; align-items: baseline; gap: .4rem; text-align: left;
  background: none; border: 0; border-top: 1px solid #2E2B34; padding: .55rem 0; color: #D9D3C6;
}
.loc-list button:hover { color: var(--papier); }
.loc-list .n { font: 900 .9rem var(--led-f); color: var(--beton); }
.loc-list .t { font-weight: 600; font-size: 1.02rem; }
.loc-list .d { font: 600 .8rem var(--led-f); color: var(--beton); }
.loc-list button[aria-current="true"] { color: var(--sod); }
.loc-list button[aria-current="true"] .n { color: var(--led); }
.loc-views { display: flex; align-items: center; gap: .4rem; margin-top: .8rem; font: 600 .78rem var(--led-f); color: var(--beton); }
.loc-views button { width: 2rem; height: 2rem; background: none; border: 2px solid #3A3640; color: var(--papier); font: 900 .85rem var(--led-f); }
.loc-views button[aria-pressed="true"] { background: var(--papier); color: var(--ink); border-color: var(--papier); }

/* --- odtwarzacz -------------------------------------------------------------------- */
.player {
  position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 6; width: min(56rem, calc(100vw - 1.5rem));
  display: grid; grid-template-columns: auto auto auto minmax(0, 1fr) minmax(6rem, 14rem) auto auto auto; align-items: center; gap: .6rem;
  background: var(--ink); border: 2px solid #2A2730; padding: .55rem .8rem; box-shadow: 0 0 0 1px rgba(255,255,255,.03);
}
.pb { width: 2.3rem; height: 2.3rem; display: grid; place-items: center; background: none; border: 0; padding: 0; color: var(--papier); }
.pb svg { width: 1.2rem; height: 1.2rem; fill: currentColor; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.pb .w { fill: none; }
.pb-main { width: 2.7rem; height: 2.7rem; background: var(--sod); color: var(--ink); border-radius: 50%; }
.pb-main .i-pause, .player.on .pb-main .i-play { display: none; }
.player.on .pb-main .i-pause { display: block; }
.player.muted #pMute { color: var(--led); }
.p-info { min-width: 0; }
.p-title { margin: 0; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-sub { margin: 0; font: 600 .76rem var(--led-f); color: var(--beton); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-bar { position: relative; height: 1.4rem; cursor: pointer; }
.p-bar::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; transform: translateY(-50%); background: #34313A; }
.p-bar i { position: absolute; left: 0; top: 50%; height: 3px; transform: translateY(-50%); width: 0; background: var(--led); }
.p-time { margin: 0; font: 600 .8rem var(--led-f); color: var(--papier); white-space: nowrap; }
.p-eq { width: 72px; height: 28px; }

.logo {
  position: fixed; top: .9rem; left: 1.1rem; z-index: 7; text-decoration: none;
  font: 400 2.4rem/1 var(--tag); color: var(--sod); -webkit-text-stroke: 0.06em var(--ink); paint-order: stroke fill; text-shadow: 0.06em 0.06em 0 var(--ink);
  transform: rotate(-6deg);
}
.nojs { position: fixed; inset: 0; display: grid; place-items: center; margin: 0; padding: 2rem; text-align: center; background: var(--noc); z-index: 20; }

@media (max-width: 760px) {
  .player { grid-template-columns: auto auto auto minmax(0, 1fr) auto; bottom: .6rem; }
  .p-bar { grid-column: 1 / -1; order: 9; height: .9rem; }
  .p-eq, #pPrev { display: none; }
  .loc-card { bottom: 8.6rem; left: .75rem; padding: .8rem .9rem; }
  .loc-tog { display: block; }
  .loc-card.closed .loc-more { display: none; }
  .loc-back { top: .8rem; right: .75rem; }
  .map-hint { white-space: normal; width: calc(100vw - 2rem); text-align: center; }
  .boot-title { font-size: clamp(3rem, 15vw, 5rem); }
}
@media (prefers-reduced-motion: reduce) {
  .stk, .pin-name, .boot { transition: none; }
}