:root{
  --stage:#14102B; --curtain:#241A4A; --curtain-2:#2E2160;
  --magenta:#FF2E88; --cyan:#29E0FF; --gold:#FFC83D; --chalk:#FFF7EE;
  --buzz-red:#FF4D4D; --buzz-blue:#3D8BFF; --buzz-orange:#FF9F2E; --buzz-green:#3DDC84;
  --shadow: 0 10px 30px rgba(0,0,0,.45);
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:'Outfit',sans-serif; color:var(--chalk); background:var(--stage);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(255,46,136,.22), transparent 60%),
    radial-gradient(ellipse 60% 40% at 15% 110%, rgba(41,224,255,.14), transparent 60%),
    radial-gradient(ellipse 60% 40% at 85% 110%, rgba(255,200,61,.10), transparent 60%);
  min-height:100dvh; display:flex; flex-direction:column; align-items:center;
  overflow-x:hidden;
}
h1,h2,h3,.display{font-family:'Baloo 2',cursive; font-weight:800; letter-spacing:.5px}

/* ----- spotlights ----- */
.spot{position:fixed; top:-20vh; width:34vw; height:90vh; pointer-events:none; opacity:.10; z-index:0;
  background:linear-gradient(to bottom, var(--chalk), transparent 75%);
  clip-path:polygon(45% 0,55% 0,100% 100%,0 100%);}
.spot.l{left:2vw; transform:rotate(14deg); animation:sway 9s ease-in-out infinite alternate}
.spot.r{right:2vw; transform:rotate(-14deg); animation:sway 11s ease-in-out infinite alternate-reverse}
@keyframes sway{from{transform:rotate(10deg)}to{transform:rotate(20deg)}}
.spot.r{animation-name:swayR}
@keyframes swayR{from{transform:rotate(-10deg)}to{transform:rotate(-20deg)}}

.wrap{position:relative; z-index:1; width:100%; max-width:880px; padding:18px 14px 110px; display:flex; flex-direction:column; gap:16px; flex:1}

/* ----- marquee frame (signature) ----- */
.marquee{position:relative; background:var(--curtain); border-radius:22px; box-shadow:var(--shadow);
  border:3px solid #3a2b78; padding:26px 22px;}
.bulbs{position:absolute; inset:8px; border-radius:16px; pointer-events:none;
  background-image:radial-gradient(circle 4px, var(--gold) 55%, transparent 60%);
  background-size:34px 34px; background-position:0 0;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; padding:8px;
  animation:blink 1.1s steps(2) infinite; opacity:.85;}
@keyframes blink{50%{background-position:17px 17px}}

/* ----- logo / titles ----- */
.logo{text-align:center; margin-top:8px}
.logo h1{font-size:clamp(40px,9vw,76px); line-height:.95;
  background:linear-gradient(180deg,#FFE9A8, var(--gold) 45%, #E08900);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 4px 0 rgba(0,0,0,.35)) drop-shadow(0 0 22px rgba(255,200,61,.35));}
.logo .sub{color:var(--cyan); font-weight:800; letter-spacing:3px; text-transform:uppercase; font-size:13px}

/* ----- buttons ----- */
.btn{font-family:'Baloo 2',cursive; font-weight:800; font-size:20px; color:#1c1233; background:linear-gradient(180deg,#FFE08F,var(--gold));
  border:0; border-radius:14px; padding:14px 26px; cursor:pointer; box-shadow:0 5px 0 #B97900, var(--shadow);
  transition:transform .08s, box-shadow .08s; letter-spacing:.5px}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(3px); box-shadow:0 1px 0 #B97900}
.btn.cyan{background:linear-gradient(180deg,#A8F1FF,var(--cyan)); box-shadow:0 5px 0 #0E8FAB, var(--shadow)}
.btn.cyan:active{box-shadow:0 1px 0 #0E8FAB}
.btn.magenta{background:linear-gradient(180deg,#FF9CC6,var(--magenta)); color:#fff; box-shadow:0 5px 0 #A30E50, var(--shadow)}
.btn.magenta:active{box-shadow:0 1px 0 #A30E50}
.btn.ghost{background:transparent; color:var(--chalk); box-shadow:none; border:2px solid #4a3a8f; font-size:16px}
.btn:disabled{filter:grayscale(.7) brightness(.7); cursor:not-allowed; transform:none}
.btn:focus-visible, .answer:focus-visible, input:focus-visible, .chip:focus-visible{outline:3px solid var(--cyan); outline-offset:3px}

.row{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; align-items:center}
.stack{display:flex; flex-direction:column; gap:14px; align-items:center}

input[type=text]{font-family:'Outfit'; font-weight:800; font-size:20px; text-align:center; letter-spacing:2px;
  background:#191238; color:var(--chalk); border:2px solid #4a3a8f; border-radius:12px; padding:12px 14px; width:240px}
input::placeholder{color:#7a6db5; letter-spacing:1px; font-weight:600}

.hint{color:#9d92cf; font-size:14px; text-align:center; max-width:520px}

/* ----- avatar picker ----- */
.avs{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; max-width:460px}
.av{font-size:26px; width:48px; height:48px; display:grid; place-items:center; background:#191238;
  border:2px solid #4a3a8f; border-radius:12px; cursor:pointer; transition:transform .1s}
.av:hover{transform:scale(1.12)}
.av.sel{border-color:var(--gold); background:#33255f; box-shadow:0 0 14px rgba(255,200,61,.4)}

/* ----- category chips ----- */
.chips{display:flex; flex-wrap:wrap; gap:8px; justify-content:center}
.chip{font-weight:800; font-size:14px; padding:8px 14px; border-radius:999px; cursor:pointer;
  background:#191238; border:2px solid #4a3a8f; color:#bdb2ec; transition:.12s}
.chip.sel{background:var(--magenta); border-color:#ff7bb1; color:#fff; box-shadow:0 0 12px rgba(255,46,136,.5)}

/* ----- lobby players ----- */
.players{display:flex; flex-wrap:wrap; gap:10px; justify-content:center}
.pcard{display:flex; align-items:center; gap:8px; background:#191238; border:2px solid #4a3a8f;
  border-radius:14px; padding:8px 14px; font-weight:800; animation:pop .25s ease}
.pcard .em{font-size:22px}
.pcard.host{border-color:var(--gold)}
.pcard.host::after{content:"PROWADZI"; font-size:9px; color:var(--gold); letter-spacing:1px; margin-left:4px}
@keyframes pop{from{transform:scale(.6); opacity:0}}

.code-big{font-family:'Baloo 2'; font-weight:800; font-size:46px; letter-spacing:10px; color:var(--cyan);
  text-shadow:0 0 18px rgba(41,224,255,.55); user-select:all}

/* ----- game HUD ----- */
.hud{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap}
.tag{background:#191238; border:2px solid #4a3a8f; border-radius:999px; padding:6px 16px; font-weight:800; font-size:14px}
.tag.cat{border-color:var(--magenta); color:#ffb9d6}
.tag.final{border-color:var(--gold); color:var(--gold); animation:pulse 1s infinite}
@keyframes pulse{50%{box-shadow:0 0 16px rgba(255,200,61,.7)}}

/* timer */
.timerbar{height:14px; background:#191238; border-radius:999px; overflow:hidden; border:2px solid #4a3a8f}
.timerbar i{display:block; height:100%; background:linear-gradient(90deg,var(--cyan),var(--magenta));
  border-radius:999px; transition:width .2s linear}

/* question */
.qtext{font-size:clamp(22px,4.4vw,32px); text-align:center; line-height:1.25; min-height:84px;
  display:grid; place-items:center; padding:6px 4px}

/* answers — Buzz buzzer paddles */
.answers{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media(max-width:560px){.answers{grid-template-columns:1fr}}
.answer{position:relative; font-family:'Outfit'; font-weight:800; font-size:17px; text-align:left; color:#fff;
  border:0; border-radius:16px; padding:18px 16px 18px 54px; cursor:pointer; min-height:64px;
  transition:transform .1s, filter .15s; box-shadow:var(--shadow)}
.answer::before{content:attr(data-k); position:absolute; left:14px; top:50%; transform:translateY(-50%);
  font-family:'Baloo 2'; font-weight:800; width:30px; height:30px; border-radius:50%; background:rgba(0,0,0,.3);
  display:grid; place-items:center; font-size:16px}
.answer.a0{background:linear-gradient(180deg,#FF7B7B,var(--buzz-red)); box-shadow:0 5px 0 #B22424,var(--shadow)}
.answer.a1{background:linear-gradient(180deg,#7BB2FF,var(--buzz-blue)); box-shadow:0 5px 0 #1F5BC4,var(--shadow)}
.answer.a2{background:linear-gradient(180deg,#FFC07B,var(--buzz-orange)); box-shadow:0 5px 0 #C46A12,var(--shadow)}
.answer.a3{background:linear-gradient(180deg,#8BF0B6,var(--buzz-green)); box-shadow:0 5px 0 #1F9C56,var(--shadow)}
.answer:hover{transform:translateY(-2px)}
.answer:active{transform:translateY(3px)}
.answer.locked{filter:saturate(.25) brightness(.55); pointer-events:none}
.answer.mine{outline:4px solid var(--chalk); outline-offset:2px}
.answer.correct{filter:none; animation:winflash .5s ease 2}
.answer.wrong-mine{filter:saturate(.4) brightness(.6)}
@keyframes winflash{50%{box-shadow:0 0 30px 6px rgba(255,200,61,.9), var(--shadow)}}
.answer .who{position:absolute; right:10px; top:-12px; display:flex; gap:2px; font-size:18px;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.5))}

/* host quip — TV lower third */
.host{position:fixed; left:50%; bottom:14px; transform:translateX(-50%); z-index:5; width:min(820px,94vw);
  display:flex; align-items:flex-end; gap:10px; pointer-events:none}
.host .face{font-size:52px; filter:drop-shadow(0 4px 6px rgba(0,0,0,.5)); animation:bob 2.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-5px) rotate(-3deg)}}
.host .bubble{flex:1; background:linear-gradient(180deg,#fffdf6,#ffeccc); color:#33214a; font-weight:600;
  border-radius:16px 16px 16px 4px; padding:12px 16px; box-shadow:var(--shadow); font-size:15px; min-height:46px;
  border-bottom:4px solid var(--gold)}
.host .bubble b{color:#B3186B}

/* reveal & scores */
.scorelist{display:flex; flex-direction:column; gap:8px; width:100%; max-width:520px; margin:0 auto}
.srow{display:flex; align-items:center; gap:10px; background:#191238; border:2px solid #4a3a8f;
  border-radius:12px; padding:8px 14px; font-weight:800}
.srow .em{font-size:22px}
.srow .nm{flex:1}
.srow .pts{font-family:'Baloo 2'; font-weight:800; color:var(--gold); font-size:20px}
.srow .delta{font-size:13px; color:var(--cyan); min-width:54px; text-align:right}
.srow.me{border-color:var(--cyan)}
.srow.top{border-color:var(--gold); box-shadow:0 0 14px rgba(255,200,61,.35)}

/* podium */
.podium{display:flex; align-items:flex-end; justify-content:center; gap:14px; margin-top:18px; min-height:260px}
.pcol{width:120px; text-align:center}
.pcol .em{font-size:44px}
.pcol .nm{font-weight:800; font-size:14px; margin:4px 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pcol .block{border-radius:12px 12px 0 0; display:grid; place-items:center;
  font-family:'Baloo 2'; font-weight:800; font-size:24px; color:#1c1233; animation:rise .9s cubic-bezier(.2,1.4,.5,1) both}
.pcol.p1 .block{height:150px; background:linear-gradient(180deg,#FFE9A8,var(--gold))}
.pcol.p2 .block{height:105px; background:linear-gradient(180deg,#E8E8F5,#B9B9D6); animation-delay:.15s}
.pcol.p3 .block{height:75px; background:linear-gradient(180deg,#F0C8A0,#C98850); animation-delay:.3s}
@keyframes rise{from{height:0; opacity:0}}
.crown{font-size:30px; animation:bob 2s infinite}

/* confetti */
.confetti{position:fixed; top:-20px; font-size:20px; z-index:9; animation:fall linear forwards; pointer-events:none}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}

.center{text-align:center}
.muted{color:#9d92cf}
.screen{display:none}
.screen.on{display:flex; flex-direction:column; gap:16px; animation:fadein .3s ease}
@keyframes fadein{from{opacity:0; transform:translateY(8px)}}

.toast{position:fixed; top:14px; left:50%; transform:translateX(-50%); background:var(--magenta); color:#fff;
  font-weight:800; padding:10px 20px; border-radius:999px; box-shadow:var(--shadow); z-index:20; animation:pop .25s}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
}

/* ----- dodatki: serwer / lobby z gotowością ----- */
.pcard .rdy{font-size:14px; margin-left:2px}
.pcard.ready{border-color:var(--buzz-green); box-shadow:0 0 10px rgba(61,220,132,.35)}
.pcard.offline{opacity:.45}
.answeredbar{display:flex; gap:6px; justify-content:center; min-height:26px; font-size:20px}
.answeredbar span{animation:pop .25s ease}
.conn{position:fixed; top:10px; right:12px; z-index:30; font-size:12px; font-weight:800; padding:4px 12px;
  border-radius:999px; background:#191238; border:2px solid #4a3a8f; color:#9d92cf}
.conn.bad{border-color:var(--buzz-red); color:#ff9d9d}
.startwrap{display:flex; flex-direction:column; gap:6px; align-items:center}