/* Ekran startowy Carpocalypse (js/boot.js): miasto o zmierzchu w łunie, iskry, ostry pochylony krój; menu, przeglądarka gier, wczytywanie. */
:root {
  --sz-red: #e8321f; --sz-orange: #ff8a1d; --sz-yellow: #ffd23a; --sz-ink: #0d0c0b; --sz-panel: rgba(16, 14, 13, .86); --sz-line: rgba(255, 255, 255, .1);
  --sz-dim: #a19387; --sz-font: "Russo One", "Oswald", "Segoe UI", system-ui, sans-serif; --sz-text: "Oswald", "Segoe UI", system-ui, sans-serif;
}
#sz-start { position: fixed; inset: 0; z-index: 20; overflow: hidden; background: #120b09; color: #f3ece6; font-family: var(--sz-text); transition: opacity .35s ease; }
#sz-start.sz-out { opacity: 0; pointer-events: none; }
#sz-start .hidden { display: none !important; }

/* ---------- tło ---------- */
.sz-bg { position: absolute; inset: 0; }
.sz-sky { position: absolute; inset: 0; background: linear-gradient(180deg, #1b0e10 0%, #4a1610 38%, #b4401a 58%, #ff9a3a 64%, #120b09 66%); }
.sz-glow { position: absolute; left: 10%; right: 10%; top: 40%; height: 30%; background: radial-gradient(ellipse at center, rgba(255, 120, 30, .45), transparent 70%); filter: blur(10px); }
.sz-city { position: absolute; inset: 0; width: 100%; height: 100%; }
.sz-embers i { position: absolute; bottom: -10px; width: 4px; height: 4px; border-radius: 50%; background: #ffb347; box-shadow: 0 0 8px #ff7a1e;
  animation: sz-ember 8s linear infinite; opacity: 0; }
@keyframes sz-ember { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translate(var(--dx), -90vh); opacity: 0; } }

/* ---------- logo ---------- */
.sz-logo { width: 100%; max-width: 620px; user-select: none; height: auto; display: block; overflow: visible; filter: drop-shadow(0 0 24px rgba(255, 110, 20, .45)); animation: sz-heat 3.2s ease-in-out infinite; }
@keyframes sz-heat { 0%, 100% { filter: drop-shadow(0 0 22px rgba(255, 110, 20, .42)); } 50% { filter: drop-shadow(0 0 34px rgba(255, 70, 10, .62)); } }
@media (prefers-reduced-motion: reduce) { .sz-logo { animation: none; } }
.sz-logo-small { max-width: 420px; margin: 0 auto; }

/* ---------- menu ---------- */
.sz-menu { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(300px, 520px) minmax(380px, 620px); gap: clamp(24px, 5vw, 80px);
  align-items: center; justify-content: center; padding: 30px 48px 60px; }
.sz-left { display: flex; flex-direction: column; gap: 14px; }
.sz-name { padding: 12px 16px; border: 2px solid rgba(255, 255, 255, .18); border-radius: 4px; background: rgba(0, 0, 0, .55); color: #fff;
  font: 500 20px var(--sz-text); outline: none; transition: border-color .15s; }
.sz-name:focus { border-color: var(--sz-orange); }
.sz-btn { position: relative; padding: 12px 18px; border: 2px solid rgba(255, 255, 255, .18); border-radius: 4px; background: rgba(0, 0, 0, .55); color: #fff;
  font: 22px var(--sz-font); letter-spacing: .04em; cursor: pointer; transform: skewX(-8deg); transition: background .15s, border-color .15s, transform .08s; }
.sz-btn:hover:not(:disabled) { border-color: var(--sz-orange); background: rgba(60, 20, 8, .7); }
.sz-btn:active:not(:disabled) { transform: skewX(-8deg) translateY(2px); }
.sz-btn:disabled { opacity: .4; cursor: default; }
.sz-primary { padding: 16px; font-size: 34px; color: var(--sz-ink); border: none; background: linear-gradient(180deg, var(--sz-yellow), var(--sz-orange) 60%, var(--sz-red));
  box-shadow: 0 0 30px rgba(255, 110, 20, .45); }
.sz-primary:hover:not(:disabled) { background: linear-gradient(180deg, #ffe680, #ff9a3a 60%, #ff4a2a); }
.sz-note { font: 500 16px/1.45 var(--sz-text); color: #ffb3a8; background: rgba(0, 0, 0, .6); padding: 8px 12px; border-left: 3px solid var(--sz-red); }
.sz-note:empty { display: none; }

/* ---------- przeglądarka gier ---------- */
.sz-browser { display: flex; flex-direction: column; min-height: 360px; max-height: min(560px, 70vh); background: var(--sz-panel); border: 1px solid rgba(255, 140, 40, .25);
  border-top: 3px solid var(--sz-orange); overflow: hidden; box-shadow: 0 16px 50px rgba(0, 0, 0, .6); }
.sz-browser header { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--sz-line); }
.sz-browser h2 { font: 22px var(--sz-font); }
.sz-count { font: 500 15px var(--sz-text); color: var(--sz-dim); margin-right: auto; }
.sz-check { display: flex; align-items: center; gap: 6px; font: 400 15px var(--sz-text); color: var(--sz-dim); cursor: pointer; }
.sz-check input { accent-color: var(--sz-orange); width: 16px; height: 16px; }
.sz-icon { width: 36px; height: 36px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(0, 0, 0, .4); color: #fff; font-size: 18px; cursor: pointer; }
.sz-icon:hover { border-color: var(--sz-orange); }
.sz-thead, .sz-row { display: grid; grid-template-columns: 2.2fr 1.4fr 1fr; gap: 10px; align-items: center; padding: 0 18px; }
.sz-thead { padding-top: 10px; padding-bottom: 6px; font: 500 13px var(--sz-text); letter-spacing: .12em; text-transform: uppercase; color: var(--sz-dim); }
.sz-rows { flex: 1; overflow-y: auto; padding: 2px 8px 8px; }
.sz-row { margin: 4px 0; padding: 12px 10px; border-left: 3px solid transparent; background: rgba(255, 255, 255, .04); font: 400 17px var(--sz-text); cursor: pointer; transition: background .12s; }
.sz-row:hover { background: rgba(255, 120, 30, .14); }
.sz-row.sel { border-color: var(--sz-orange); background: rgba(255, 120, 30, .28); }
.sz-row.full { opacity: .45; cursor: default; }
.sz-host b { font: 18px var(--sz-font); }
.sz-host small { margin-left: 10px; font: 400 14px var(--sz-text); color: var(--sz-orange); letter-spacing: .06em; }
.sz-slots { display: inline-flex; gap: 3px; vertical-align: middle; margin-right: 6px; }
.sz-slots i { width: 8px; height: 16px; background: rgba(255, 255, 255, .15); transform: skewX(-12deg); }
.sz-slots i.on { background: var(--sz-orange); }
.sz-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 60px 20px; text-align: center; color: var(--sz-dim); font: 400 16px var(--sz-text); }
.sz-empty b { font: 20px var(--sz-font); color: #fff; }
.sz-browser footer { display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding: 12px 18px; border-top: 1px solid var(--sz-line); }
.sz-join { min-width: 150px; }
.sz-join:not(:disabled) { border-color: var(--sz-orange); }

/* ---------- wczytywanie ---------- */
.sz-bar { height: 12px; background: rgba(0, 0, 0, .6); border: 1px solid rgba(255, 255, 255, .2); overflow: hidden; transform: skewX(-16deg); }
.sz-bar i { display: block; height: 100%; width: 5%; background: repeating-linear-gradient(-45deg, var(--sz-orange) 0 12px, var(--sz-red) 12px 24px); background-size: 34px 34px;
  animation: sz-roll 1s linear infinite; transition: width .4s ease; }
@keyframes sz-roll { to { background-position: 34px 0; } }
.sz-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 16px; background: rgba(10, 6, 5, .6); }
.sz-bar-big { width: min(500px, 80vw); height: 20px; }
.sz-ldtext { font: 22px var(--sz-font); color: #fff; text-shadow: 0 2px 6px #000; }
.sz-tip { max-width: 540px; text-align: center; font: 400 19px/1.45 var(--sz-text); color: #f3ece6; background: var(--sz-panel); padding: 14px 20px; border-left: 3px solid var(--sz-orange); }

@media (max-width: 900px) {
  .sz-menu { grid-template-columns: 1fr; align-content: start; overflow-y: auto; padding: 24px 16px 60px; gap: 20px; }
  .sz-logo { max-width: 380px; margin: 0 auto; }
  .sz-browser { min-height: 280px; }
}