/* Strona przepustek: „Brak przepustki” i „Wydanie przepustki”. Scena 1422×800 skalowana do okna
   jak sekretariat; tło wypełnia cały ekran. Tła i miejsce przepustki ustawia się TYLKO tutaj: */
:root {
  --bg-gate: url('/pass/assets/przepustki-tlo-szerokie.webp');
  --bg-issue: url('/pass/assets/przepustki-tlo-wydanie.webp');  /* przepustka na smyczy jest na grafice */
  --bg-position: 70% 50%;
  --badge-left: 820px;   /* przepustka na haku (współrzędne sceny 1422×800) */
  --badge-top: 170px;
  --badge-width: 190px;

  --ink: #231a33;
  --cream: #fff3dc;
  --mustard: #f2b134;
  --tomato: #e4572e;
  --teal: #2a9d8f;
  --sky: #8ecae6;
  --violet: #6b4fa0;
  --letterbox: #17111f;
  --f-display: 'Rum Raisin', 'Arial Black', Impact, sans-serif;
  --f-hand: 'Margarine', 'Comic Sans MS', cursive;
  --f-ui: 'Winky Rough', 'Segoe UI', Arial, sans-serif;
  --f-mono: 'JetBrains Mono', Consolas, 'Courier New', monospace;
  color-scheme: light;
}
html, body { height: 100%; margin: 0; }
body { background: var(--letterbox); color: var(--ink); font-family: var(--f-ui); overflow: hidden; }
[hidden] { display: none !important; }

#fit { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: var(--violet) var(--bg-gate) var(--bg-position) / cover no-repeat; }
body.issue #fit { background-image: var(--bg-issue); }
#stage { position: relative; width: 1422px; height: 800px; flex: none; transform-origin: 50% 50%; }

#title { position: absolute; left: 60px; top: 30px; display: flex; flex-direction: column; gap: 6px; }
#titleTop { font-family: var(--f-display); font-size: 30px; line-height: 1; color: #fff; letter-spacing: 2px; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; filter: drop-shadow(3px 3px 0 var(--ink)); }
#titleMain { font-family: var(--f-display); font-size: 64px; line-height: 1.02; color: #fff; -webkit-text-stroke: 9px var(--ink); paint-order: stroke fill; filter: drop-shadow(4px 4px 0 var(--ink)); }

#card { position: absolute; left: 60px; top: 175px; width: 480px; box-sizing: border-box; background: var(--cream); border: 4px solid var(--ink);
  border-radius: 18px; filter: drop-shadow(6px 6px 0 var(--ink)); padding: 22px 26px; font-size: 19px; }
#card h2 { margin: 0 0 10px; font-family: var(--f-display); font-weight: 400; font-size: 30px; line-height: 1.1; }
#card p { margin: 0 0 12px; line-height: 1.4; font-weight: 500; }
#card form, #wait { display: flex; flex-direction: column; gap: 10px; }
.label { font-weight: 700; }
.small { font-size: 15px; color: var(--violet); margin-top: -6px !important; }
#codeRow { display: flex; align-items: center; gap: 14px; margin: 4px 0 16px; }
.code { font-family: var(--f-mono); font-weight: 700; font-size: 34px; letter-spacing: 4px; color: #8ee08e; background: #1d1b26; border: 4px solid var(--ink);
  border-radius: 12px; padding: 4px 16px; filter: drop-shadow(4px 4px 0 var(--ink)); }
input[type=text] { font: 700 24px var(--f-ui); color: var(--ink); background: #fff; border: 4px solid var(--ink); border-radius: 14px; padding: 8px 14px; outline: none; }
input[type=text]:focus { box-shadow: 0 0 0 4px var(--sky); }
.btn { align-self: flex-start; font: 400 24px var(--f-display); color: #fff; background: var(--tomato); border: 4px solid var(--ink); border-radius: 14px;
  filter: drop-shadow(4px 4px 0 var(--ink)); padding: 8px 18px; cursor: pointer; }
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translate(2px, 2px); filter: drop-shadow(2px 2px 0 var(--ink)); }
.btn:disabled { opacity: .6; cursor: wait; }
.alert { font-weight: 700 !important; color: var(--tomato); }

.bar { height: 18px; border: 4px solid var(--ink); border-radius: 12px; background: #fff; overflow: hidden; }
#waitBar { height: 100%; width: 0; background: var(--teal); }
#waitBar.run { width: 100%; transition: width 15s linear; }
.log { font: 700 15px/1.4 var(--f-mono); color: #8ee08e; background: #1d1b26; border: 4px solid var(--ink); border-radius: 12px; padding: 8px 12px; margin: 0 !important; min-height: 2.8em; }

.genderRow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.genderRow input { position: absolute; opacity: 0; pointer-events: none; }
.choice { font-weight: 700; border: 4px solid var(--ink); border-radius: 12px; padding: 4px 14px; background: #fff; cursor: pointer; filter: drop-shadow(3px 3px 0 var(--ink)); }
.genderRow input:checked + .choice { background: var(--teal); color: #fff; }
.genderRow input:focus-visible + .choice { box-shadow: 0 0 0 4px var(--sky); }
#preview { font-weight: 700 !important; }

#badge { position: absolute; left: var(--badge-left); top: var(--badge-top); width: var(--badge-width); box-sizing: border-box; background: var(--cream);
  border: 4px solid var(--ink); border-radius: 16px; filter: drop-shadow(5px 5px 0 var(--ink)); padding: 10px; text-align: center; transform: rotate(-3deg); }
.badgeHead { font-family: var(--f-display); font-size: 22px; color: #fff; background: var(--teal); border: 3px solid var(--ink); border-radius: 8px; margin-bottom: 10px; }
.badgePhoto { width: 70%; display: block; margin: 0 auto 8px; }
.badgeFoot { font-family: var(--f-display); font-size: 16px; }

#note { position: absolute; right: 60px; bottom: 80px; width: 250px; font: 26px/1.15 var(--f-hand); background: var(--mustard); border: 4px solid var(--ink);
  filter: drop-shadow(5px 5px 0 var(--ink)); padding: 12px 16px; transform: rotate(-4deg); }
#footer { position: absolute; left: 60px; bottom: 22px; margin: 0; font-weight: 700; font-size: 15px; color: #fff; text-shadow: 0 0 4px var(--ink), 1px 1px 0 var(--ink); }