/* ============================================================
   IMPOSTOR — COSMIC ULTIMATE EDITION
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Orbitron:wght@700;900&family=Inter:wght@300;400;500;600&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

:root{
  --bg:        #04040d;
  --glass:     rgba(255,255,255,0.038);
  --border:    rgba(255,255,255,0.07);

  --purple:    #7c3aed;
  --purple-l:  #a78bfa;
  --purple-d:  #4c1d95;
  --cyan:      #06b6d4;
  --cyan-l:    #67e8f9;
  --pink:      #ec4899;
  --pink-l:    #f9a8d4;
  --green:     #10b981;
  --green-l:   #6ee7b7;
  --red:       #ef4444;
  --amber:     #f59e0b;

  --font-d:'Orbitron',sans-serif;
  --font-u:'Rajdhani',sans-serif;
  --font-b:'Inter',sans-serif;
  --ease:cubic-bezier(.4,0,.2,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --bounce:cubic-bezier(.68,-.55,.27,1.55);
}

html{height:100%;overflow-y:scroll;scroll-behavior:smooth;}
body{
  font-family:var(--font-b);background:var(--bg);color:#e2e8f0;
  min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;overflow-x:hidden;position:relative;cursor:default;
}

/* ── AURORA ──────────────────────────────────────────── */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 100% 55% at 20% 0%,  rgba(124,58,237,.26) 0%,transparent 58%),
    radial-gradient(ellipse 80%  50% at 80% 90%,  rgba(6,182,212,.2)   0%,transparent 55%),
    radial-gradient(ellipse 60%  45% at 55% 40%,  rgba(236,72,153,.12) 0%,transparent 55%),
    radial-gradient(ellipse 50%  40% at 70% 15%,  rgba(99,102,241,.15) 0%,transparent 55%),
    radial-gradient(ellipse 45%  35% at 10% 70%,  rgba(16,185,129,.1)  0%,transparent 55%);
  animation:aurora 10s ease-in-out infinite alternate;
}
@keyframes aurora{0%{filter:hue-rotate(0deg);opacity:.85;}50%{filter:hue-rotate(15deg);opacity:1;}100%{filter:hue-rotate(-10deg);opacity:.9;}}

body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(124,58,237,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(124,58,237,.04) 1px,transparent 1px);
  background-size:65px 65px;animation:gridShift 20s linear infinite;
}
@keyframes gridShift{to{background-position:65px 65px;}}

.scanlines{position:fixed;inset:0;pointer-events:none;z-index:1;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.045) 2px,rgba(0,0,0,.045) 4px);}

#starCanvas,#particleCanvas{position:fixed;inset:0;z-index:0;pointer-events:none;}
#starCanvas{opacity:.7;}
#particleCanvas{opacity:.55;}
#confettiCanvas,#cometCanvas{position:fixed;inset:0;z-index:300;pointer-events:none;}

#transOverlay{position:fixed;inset:0;opacity:0;pointer-events:none;z-index:9999;background:linear-gradient(135deg,rgba(124,58,237,.8),rgba(6,182,212,.8));}
#transOverlay.flash{animation:flashAnim .55s ease forwards;}
@keyframes flashAnim{0%{opacity:0;}35%{opacity:.35;}100%{opacity:0;}}

#rippleLayer{position:fixed;inset:0;pointer-events:none;z-index:9998;overflow:hidden;}
.ripple{position:absolute;transform:translate(-50%,-50%);width:4px;height:4px;border-radius:50%;border:2px solid rgba(167,139,250,.7);background:transparent;animation:rippleOut .9s ease-out forwards;}
@keyframes rippleOut{to{width:220px;height:220px;opacity:0;border-width:.5px;}}

/* ── LAYOUT ──────────────────────────────────────────── */
.center-wrapper{position:relative;z-index:2;width:100%;max-width:540px;padding:20px 16px;display:flex;flex-direction:column;align-items:center;gap:16px;}
.center-wrapper.wide{max-width:780px;}

/* ── CARD ────────────────────────────────────────────── */
.card{
  background:var(--glass);backdrop-filter:blur(32px) saturate(1.8);-webkit-backdrop-filter:blur(32px) saturate(1.8);
  border-radius:30px;border:1px solid var(--border);
  padding:40px 34px 34px;width:100%;position:relative;overflow:hidden;
  box-shadow:0 40px 90px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.04),inset 0 1px 0 rgba(255,255,255,.09);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--purple),var(--cyan),var(--pink),var(--green),var(--purple));
  background-size:300% 100%;animation:rainbowSlide 4s linear infinite;
}
@keyframes rainbowSlide{to{background-position:300% 0;}}
.card.narrow{max-width:390px;}
.landing-card{animation:cardIn .75s var(--spring) both;}
@keyframes cardIn{from{opacity:0;transform:translateY(36px) scale(.93);}to{opacity:1;transform:none;}}
.card:hover{border-color:rgba(255,255,255,.13);}

/* ── LOGO ────────────────────────────────────────────── */
.logo-row{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:22px;}
.logo-row.small{margin-bottom:12px;}
.logo-icon{
  width:56px;height:56px;cursor:pointer;
  filter:drop-shadow(0 0 18px rgba(124,58,237,.95)) drop-shadow(0 0 50px rgba(6,182,212,.45));
  animation:iconFloat 3.5s ease-in-out infinite;
  transition:transform .15s var(--spring);
}
.logo-icon:active{transform:scale(.85) rotate(15deg);}
.logo-icon.small{width:36px;height:36px;}
@keyframes iconFloat{0%,100%{transform:translateY(0) rotate(-1deg);}50%{transform:translateY(-7px) rotate(1deg);}}

.logo-title{
  font-family:var(--font-d);font-size:2.8rem;font-weight:900;letter-spacing:7px;
  background:linear-gradient(135deg,#c4b5fd 0%,#67e8f9 40%,#f9a8d4 70%,#c4b5fd 100%);
  background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:titleShimmer 5s linear infinite, glitch 8s ease-in-out infinite;
  position:relative;user-select:none;
}
@keyframes titleShimmer{to{background-position:200% 0;}}
@keyframes glitch{
  0%,90%,100%{text-shadow:none;transform:none;}
  91%{transform:translateX(-2px);filter:drop-shadow(2px 0 rgba(236,72,153,.8));}
  92%{transform:translateX(2px);filter:drop-shadow(-2px 0 rgba(6,182,212,.8));}
  93%{transform:translateX(-1px);filter:none;}
  94%{transform:none;}
}
.logo-title.small{font-size:1.7rem;letter-spacing:5px;}

/* secret combo hint */
.secret-hint{
  font-family:var(--font-u);font-size:.6rem;letter-spacing:2px;color:rgba(167,139,250,.25);
  margin-top:-14px;margin-bottom:18px;text-transform:uppercase;
}

.subtitle{font-size:.9rem;color:rgba(167,139,250,.78);margin-bottom:22px;line-height:1.6;}

/* ── BADGES ──────────────────────────────────────────── */
.badge-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:30px;}
.badge{
  font-family:var(--font-u);font-size:.72rem;font-weight:700;letter-spacing:1.2px;
  padding:6px 14px;border-radius:99px;position:relative;overflow:hidden;
  animation:badgeFloat 3s ease-in-out infinite;cursor:default;
}
.badge:nth-child(1){background:rgba(124,58,237,.2);border:1px solid rgba(124,58,237,.4);color:var(--purple-l);animation-delay:0s;}
.badge:nth-child(2){background:rgba(6,182,212,.18);border:1px solid rgba(6,182,212,.35);color:var(--cyan-l);animation-delay:.35s;}
.badge:nth-child(3){background:rgba(236,72,153,.18);border:1px solid rgba(236,72,153,.35);color:var(--pink-l);animation-delay:.7s;}
@keyframes badgeFloat{0%,100%{transform:translateY(0);box-shadow:0 0 12px rgba(124,58,237,.3);}50%{transform:translateY(-3px);box-shadow:0 0 24px rgba(124,58,237,.5);}}

.top-bar{width:100%;display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:14px;}

/* ── ROUND DOTS TRACKER ──────────────────────────────────── */
.round-dots{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:center;max-width:280px;}
.round-dot{
  width:9px;height:9px;border-radius:50%;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);
  transition:background .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease),transform .25s var(--spring);
}
.round-dot.active{
  background:var(--purple);border-color:var(--purple-l);
  box-shadow:0 0 12px rgba(124,58,237,.8);
  transform:scale(1.3);
}
.round-dot.done{background:var(--green);border-color:var(--green-l);box-shadow:0 0 8px rgba(16,185,129,.5);}
.round-dot.dot-pop{animation:dotPop .4s var(--spring);}
.round-dot.dot-done-flash{animation:dotDoneFlash .4s ease;}
@keyframes dotPop{0%{transform:scale(2);opacity:0;}100%{transform:scale(1.3);opacity:1;}}
@keyframes dotDoneFlash{0%{transform:scale(1.3);}40%{transform:scale(1.6);}100%{transform:scale(1);}}

/* przycisk "Następna runda" gdy limit rund osiągnięty */
.btn-muted{
  background:rgba(255,255,255,.06);color:rgba(255,255,255,.3);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:none;cursor:not-allowed;
}
.btn-muted:hover{transform:none!important;box-shadow:none!important;}
.btn-muted::after{display:none;}

/* ── BUTTONS ─────────────────────────────────────────── */
button{
  font-family:var(--font-u);font-size:.98rem;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;
  border:none;border-radius:99px;padding:14px 30px;cursor:pointer;user-select:none;
  position:relative;overflow:hidden;transition:transform .2s var(--ease),box-shadow .2s var(--ease);isolation:isolate;
}
button::before{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(255,255,255,.18) 0%,transparent 60%);pointer-events:none;}
button::after{content:'';position:absolute;top:-50%;left:-120%;width:70%;height:200%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);transform:skewX(-25deg);transition:left .55s ease;pointer-events:none;}
button:hover::after{left:140%;}
button:active{transform:scale(.95)!important;}
.btn-xl{padding:18px 38px;font-size:1.08rem;letter-spacing:4px;}

.btn-primary{background:linear-gradient(135deg,var(--purple),#4c1d95);color:#f5f3ff;box-shadow:0 0 35px rgba(124,58,237,.6),0 12px 30px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.16);}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 0 60px rgba(124,58,237,.85),0 16px 40px rgba(0,0,0,.75);}
.btn-secondary{background:linear-gradient(135deg,#0891b2,#0e7490);color:#e0f7fa;box-shadow:0 0 35px rgba(6,182,212,.6),0 12px 30px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.16);}
.btn-secondary:hover{transform:translateY(-3px);box-shadow:0 0 60px rgba(6,182,212,.85),0 16px 40px rgba(0,0,0,.75);}
.btn-danger{background:linear-gradient(135deg,#be185d,#9f1239);color:#fdf2f8;box-shadow:0 0 35px rgba(190,24,93,.6),0 12px 30px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.13);}
.btn-danger:hover{transform:translateY(-3px);box-shadow:0 0 60px rgba(236,72,153,.85),0 16px 40px rgba(0,0,0,.75);}
.btn-home{background:linear-gradient(135deg,#065f46,#047857);color:#d1fae5;box-shadow:0 0 35px rgba(16,185,129,.5),0 12px 30px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.13);}
.btn-home:hover{transform:translateY(-3px);box-shadow:0 0 60px rgba(16,185,129,.75),0 16px 40px rgba(0,0,0,.75);}
.btn-ghost{background:rgba(255,255,255,.05);color:#c4b5fd;border:1px solid rgba(167,139,250,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.07);}
.btn-ghost:hover{background:rgba(124,58,237,.2);border-color:rgba(167,139,250,.5);transform:translateY(-2px);box-shadow:0 0 32px rgba(124,58,237,.35);}

.full-width{width:100%;}

/* ── GAME MODE SWITCH ────────────────────────────────────── */
.mode-switch{
  position:relative;
  display:grid;grid-template-columns:1fr 1fr;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:5px;
  margin-bottom:22px;
  width:100%;
  gap:4px;
}
.mode-slider{
  position:absolute;top:5px;left:5px;
  width:calc(50% - 6.5px);height:calc(100% - 10px);
  background:linear-gradient(135deg,var(--purple),var(--purple-d));
  border-radius:14px;
  box-shadow:0 0 24px rgba(124,58,237,.5),inset 0 1px 0 rgba(255,255,255,.15);
  transition:transform .32s var(--spring),background .32s var(--ease),box-shadow .32s var(--ease);
  pointer-events:none;
  z-index:0;
}
.mode-switch.hints-active .mode-slider{
  transform:translateX(calc(100% + 4px));
  background:linear-gradient(135deg,var(--cyan),#0e7490);
  box-shadow:0 0 24px rgba(6,182,212,.5),inset 0 1px 0 rgba(255,255,255,.15);
}

.mode-option{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  background:transparent;border:none;
  padding:12px 8px;border-radius:14px;
  cursor:pointer;text-align:center;
  box-shadow:none;
  min-width:0;
  transition:transform .15s var(--ease);
}
.mode-option::after,.mode-option::before{display:none;}
.mode-option:hover{transform:none;}
.mode-option:active{transform:scale(.98)!important;}

.mode-icon-row{display:flex;align-items:center;gap:7px;}
.mode-icon{font-size:1.15rem;flex:0 0 auto;filter:grayscale(.4);opacity:.7;transition:filter .25s var(--ease),opacity .25s var(--ease);}
.mode-option.active .mode-icon{filter:grayscale(0);opacity:1;}

.mode-title{
  font-family:var(--font-u);font-size:.78rem;font-weight:700;letter-spacing:.5px;
  color:rgba(255,255,255,.45);transition:color .25s var(--ease);
  white-space:nowrap;
}
.mode-sub{
  font-family:var(--font-b);font-size:.62rem;color:rgba(255,255,255,.25);
  line-height:1.3;transition:color .25s var(--ease);
  white-space:normal;max-width:100%;
}
.mode-option.active .mode-title{color:#fff;}
.mode-option.active .mode-sub{color:rgba(255,255,255,.65);}

/* ── GAME MODE SELECT SCREEN (Impostor vs Pytania) ──────── */
.game-mode-cards{display:flex;flex-direction:column;gap:10px;width:100%;margin:16px 0 18px;}
.game-mode-card{
  display:flex;align-items:center;gap:14px;
  width:100%;padding:14px 16px;border-radius:16px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);
  cursor:pointer;text-align:left;box-shadow:none;
  transition:transform .15s var(--spring),background .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.game-mode-card::after,.game-mode-card::before{display:none;}
.game-mode-card:hover{
  transform:translateY(-2px);
  background:rgba(124,58,237,.1);border-color:rgba(124,58,237,.35);
  box-shadow:0 8px 20px rgba(124,58,237,.18);
}
.game-mode-card:active{transform:translateY(0) scale(.98);}
.game-mode-card-icon{font-size:1.6rem;flex:0 0 auto;filter:drop-shadow(0 0 10px rgba(124,58,237,.35));}
.game-mode-card-text{display:flex;flex-direction:column;gap:2px;min-width:0;}
.game-mode-card-title{
  font-family:var(--font-u);font-size:.82rem;font-weight:700;letter-spacing:.5px;
  color:#fff;text-transform:none;
}
.game-mode-card-desc{
  font-family:var(--font-b);font-size:.68rem;color:rgba(255,255,255,.45);
  line-height:1.35;
}
.small-sub{margin-bottom:16px;}

.landing-buttons,.setup-buttons,.rules-buttons{display:flex;flex-direction:column;gap:12px;width:100%;margin-top:8px;}
.extra-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:22px;}
.extra-btns button{min-width:168px;}

/* ── NUMBER CONTROL ──────────────────────────────────── */
.setup-icon{font-size:2.6rem;margin-bottom:10px;animation:iconFloat 3s ease-in-out infinite;}
.setup-label{font-family:var(--font-u);font-size:.8rem;font-weight:700;letter-spacing:3.5px;color:var(--purple-l);margin-bottom:18px;text-transform:uppercase;}
.number-control{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:10px;}
.num-btn{
  width:44px;height:44px;padding:0;border-radius:50%;
  font-family:var(--font-d);font-size:1.3rem;letter-spacing:0;
  background:rgba(124,58,237,.18);color:var(--purple-l);border:1px solid rgba(124,58,237,.4);
  box-shadow:0 0 16px rgba(124,58,237,.25);display:flex;align-items:center;justify-content:center;
  transition:background .18s,transform .15s var(--spring),box-shadow .18s;
}
.num-btn:hover{background:rgba(124,58,237,.45);transform:scale(1.12);box-shadow:0 0 28px rgba(124,58,237,.6);}
input[type=number]{
  width:84px;font-family:var(--font-d);font-size:1.55rem;font-weight:700;padding:8px;border-radius:14px;
  border:1px solid rgba(124,58,237,.5);outline:none;text-align:center;color:var(--purple-l);
  background:rgba(124,58,237,.13);transition:box-shadow .22s,border-color .22s;
}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;}
input[type=number]:focus{border-color:var(--purple);box-shadow:0 0 28px rgba(124,58,237,.65);}
input.pop{animation:numPop .25s var(--spring);}
@keyframes numPop{0%,100%{transform:scale(1);}50%{transform:scale(1.22);color:var(--cyan-l);}}

/* quick presets */
.preset-row{display:flex;gap:8px;justify-content:center;margin-bottom:20px;flex-wrap:wrap;}
.preset-chip{
  font-family:var(--font-u);font-size:.7rem;font-weight:700;letter-spacing:1px;
  padding:5px 12px;border-radius:99px;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.5);
  transition:all .18s var(--ease);
}
.preset-chip:hover{background:rgba(124,58,237,.2);border-color:rgba(124,58,237,.4);color:var(--purple-l);transform:translateY(-1px);}
.preset-chip.active{background:rgba(124,58,237,.3);border-color:var(--purple);color:var(--purple-l);}

.unlimited-chip{font-weight:900;}
.unlimited-chip:hover{background:rgba(6,182,212,.2);border-color:rgba(6,182,212,.4);color:var(--cyan-l);}
.unlimited-chip.active{background:rgba(6,182,212,.28);border-color:var(--cyan);color:var(--cyan-l);box-shadow:0 0 14px rgba(6,182,212,.35);}

.disabled-control{opacity:.35;pointer-events:none;filter:grayscale(.6);transition:opacity .2s var(--ease),filter .2s var(--ease);}

/* ── SETUP EXTRAS: impostor count + timer ───────────────── */
.setup-divider{
  width:100%;height:1px;margin:18px 0 16px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
}
.setup-hint{
  font-family:var(--font-u);font-size:.66rem;letter-spacing:1px;
  color:rgba(255,255,255,.35);text-align:center;margin:8px 0 4px;
  transition:opacity .2s var(--ease);
}

.timer-mode-row{display:flex;gap:6px;justify-content:center;margin-bottom:14px;flex-wrap:wrap;}
.timer-chip{
  font-family:var(--font-u);font-size:.68rem;font-weight:700;letter-spacing:.5px;
  padding:7px 13px;border-radius:99px;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.5);
  transition:all .18s var(--ease);
}
.timer-chip:hover{background:rgba(6,182,212,.15);border-color:rgba(6,182,212,.35);color:var(--cyan-l);}
.timer-chip.active{background:rgba(6,182,212,.25);border-color:var(--cyan);color:var(--cyan-l);box-shadow:0 0 14px rgba(6,182,212,.3);}

/* ── PLAYERS ─────────────────────────────────────────── */
#buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;max-width:600px;margin:16px auto;}
.players-wrapper{transition:transform .42s var(--spring),filter .3s var(--ease);}

.player-container{
  cursor:pointer;width:148px;border-radius:22px;overflow:hidden;position:relative;
  background:rgba(255,255,255,.04);backdrop-filter:blur(20px);border:1px solid var(--border);
  box-shadow:0 8px 36px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.07);
  transition:transform .25s var(--spring),box-shadow .25s var(--ease),border-color .25s var(--ease);
  user-select:none;display:flex;flex-direction:column;align-items:center;
  transform-style:preserve-3d;will-change:transform;
}
.player-container::before{
  content:'';position:absolute;inset:0;z-index:4;border-radius:inherit;
  background:linear-gradient(135deg,rgba(255,255,255,0) 0%,rgba(167,139,250,.07) 25%,rgba(6,182,212,.07) 50%,rgba(236,72,153,.07) 75%,rgba(255,255,255,0) 100%);
  background-size:300% 300%;opacity:0;transition:opacity .3s;pointer-events:none;animation:holoPan 4s linear infinite paused;
}
.player-container:hover::before{opacity:1;animation-play-state:running;}
@keyframes holoPan{to{background-position:300% 300%;}}
.player-container::after{
  content:'';position:absolute;inset:-2px;z-index:0;border-radius:24px;
  background:linear-gradient(90deg,var(--purple),var(--cyan),var(--pink),var(--green),var(--purple));
  background-size:400% 100%;opacity:0;transition:opacity .3s;pointer-events:none;
}
.player-container:hover::after{opacity:1;animation:borderSweep 2.5s linear infinite;}
@keyframes borderSweep{to{background-position:400% 0;}}
.player-container:hover{transform:translateY(-10px) scale(1.05);box-shadow:0 0 0 2px transparent,0 0 50px rgba(124,58,237,.55),0 0 100px rgba(124,58,237,.2),0 28px 60px rgba(0,0,0,.85);border-color:transparent;}
.player-container .player-inner{position:absolute;inset:1px;z-index:1;border-radius:21px;background:rgba(10,10,26,.92);pointer-events:none;}

.player-num-badge{
  position:absolute;top:9px;left:9px;z-index:6;width:26px;height:26px;border-radius:50%;
  background:rgba(124,58,237,.7);border:1px solid rgba(167,139,250,.6);
  font-family:var(--font-d);font-size:.64rem;font-weight:700;color:#ede9fe;
  display:flex;align-items:center;justify-content:center;box-shadow:0 0 12px rgba(124,58,237,.7);
}

/* streak fire badge */
.player-streak{
  position:absolute;top:9px;right:9px;z-index:6;
  font-size:.85rem;opacity:0;transform:scale(0);
  transition:all .3s var(--spring);
  filter:drop-shadow(0 0 6px rgba(245,158,11,.8));
}
.player-streak.show{opacity:1;transform:scale(1);animation:fireFlicker 1.5s ease-in-out infinite;}
@keyframes fireFlicker{0%,100%{transform:scale(1) rotate(-3deg);}50%{transform:scale(1.1) rotate(3deg);}}

.player-image{width:100%;height:112px;object-fit:cover;position:relative;z-index:2;display:block;filter:brightness(.88) saturate(1.15);transition:filter .28s var(--ease);}
.player-svg{object-fit:unset;overflow:visible;}
.player-container:hover .player-image{filter:brightness(1.1) saturate(1.5);}
.player-label-wrapper{width:100%;padding:10px 8px 10px;background:rgba(0,0,0,.38);position:relative;z-index:2;}
.player-label{font-family:var(--font-u);font-weight:700;font-size:.83rem;letter-spacing:1.5px;text-transform:uppercase;color:#e2e8f0;cursor:pointer;transition:color .15s var(--ease);}
.player-label:hover{color:var(--purple-l);}
.edit-icon{position:absolute;bottom:7px;right:7px;width:22px;height:22px;padding:3px;cursor:pointer;color:rgba(167,139,250,.65);background:rgba(124,58,237,.18);border:1px solid rgba(124,58,237,.3);border-radius:6px;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s,transform .15s;z-index:5;}
.edit-icon svg{width:13px;height:13px;fill:currentColor;}
.edit-icon:hover{background:rgba(124,58,237,.6);color:#fff;transform:scale(1.15);}
.player-enter{opacity:0;transform:translateY(28px) scale(.87);animation:playerEnter .55s var(--spring) forwards;}
@keyframes playerEnter{to{opacity:1;transform:none;}}

/* ── COUNTDOWN ──────────────────────────────────────────── */
#countdownOverlay{position:fixed;inset:0;z-index:200;background:rgba(4,4,13,.92);backdrop-filter:blur(18px);display:flex;align-items:center;justify-content:center;}
#countdownOverlay.cd-enter{animation:cdIn .3s var(--spring);}
#countdownOverlay.cd-exit{animation:cdOut .3s ease forwards;}
@keyframes cdIn{from{opacity:0;}to{opacity:1;}}
@keyframes cdOut{to{opacity:0;}}
#countdownBox{display:flex;flex-direction:column;align-items:center;gap:12px;position:relative;}
#countdownBox::before{content:'';position:absolute;width:260px;height:260px;border-radius:50%;border:1px solid rgba(124,58,237,.3);animation:orbitSpin 3s linear infinite;top:50%;left:50%;transform:translate(-50%,-50%);}
#countdownBox::after{content:'';position:absolute;width:300px;height:300px;border-radius:50%;border:1px dashed rgba(6,182,212,.2);animation:orbitSpin 5s linear infinite reverse;top:50%;left:50%;transform:translate(-50%,-50%);}
@keyframes orbitSpin{to{transform:translate(-50%,-50%) rotate(360deg);}}
.orbit-dot{position:absolute;top:50%;left:50%;width:8px;height:8px;border-radius:50%;background:var(--cyan-l);box-shadow:0 0 14px var(--cyan);transform-origin:0 0;animation:dotOrbit 3s linear infinite;}
@keyframes dotOrbit{to{transform:rotate(360deg) translateX(130px) rotate(-360deg);}}
#countdownName{font-family:var(--font-u);font-size:1.15rem;font-weight:700;letter-spacing:3px;color:var(--purple-l);text-transform:uppercase;margin-bottom:4px;}
#countdownNum{font-family:var(--font-d);font-size:7.5rem;font-weight:900;line-height:1;background:linear-gradient(135deg,var(--purple-l) 0%,var(--cyan-l) 50%,var(--pink-l) 100%);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 0 40px rgba(124,58,237,.9));animation:numShimmer 2s linear infinite;}
@keyframes numShimmer{to{background-position:200% 0;}}
#countdownNum.cd-pop{animation:cdPop .55s var(--spring),numShimmer 2s linear infinite;}
@keyframes cdPop{0%{transform:scale(2.2) rotate(-5deg);opacity:0;}100%{transform:scale(1) rotate(0);opacity:1;}}
#countdownSub{font-family:var(--font-u);font-size:.82rem;letter-spacing:2px;color:rgba(255,255,255,.38);text-transform:uppercase;}

/* ── ROLE BOX (pełnoekranowy modal, jak inne okna w grze) ── */
#roleBoxContainer{
  position:fixed;inset:0;z-index:450;
  opacity:0;pointer-events:none;
  transition:opacity .35s var(--ease);
}
#roleBoxContainer.visible{opacity:1;pointer-events:auto;}
.role-backdrop{
  position:absolute;inset:0;
  background:rgba(4,4,13,.82);backdrop-filter:blur(14px);
}
.role-card{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) scale(.8) translateY(22px);
  background:rgba(5,5,16,.92);backdrop-filter:blur(34px);
  border-radius:30px;border:1px solid var(--border);padding:36px 30px 30px;
  max-width:460px;width:90%;overflow:hidden;
  transition:transform .5s var(--spring),border-color .3s var(--ease),box-shadow .3s var(--ease);
}
#roleBoxContainer.visible .role-card{transform:translate(-50%,-50%) scale(1) translateY(0);}
.role-card::after{content:'';position:absolute;top:14px;right:14px;width:8px;height:8px;border-radius:50%;background:var(--cyan-l);box-shadow:0 0 12px var(--cyan);animation:dotPulse 2s ease-in-out infinite;}
@keyframes dotPulse{0%,100%{opacity:.4;transform:scale(.8);}50%{opacity:1;transform:scale(1.2);}}
.role-top-bar{position:absolute;top:0;left:0;right:0;height:3px;border-radius:3px 3px 0 0;}
.role-top-bar.imp-bar{background:linear-gradient(90deg,var(--pink),var(--red),var(--amber),var(--pink));background-size:200% 100%;animation:rainbowSlide 2s linear infinite;}
.role-top-bar.civ-bar{background:linear-gradient(90deg,var(--green),var(--cyan),var(--purple-l),var(--green));background-size:200% 100%;animation:rainbowSlide 2s linear infinite;}
#roleBoxContainer.role-impostor .role-card{border-color:rgba(236,72,153,.38);box-shadow:0 0 60px rgba(236,72,153,.22),0 0 120px rgba(236,72,153,.09),0 36px 80px rgba(0,0,0,.8);}
#roleBoxContainer.role-civilian .role-card{border-color:rgba(16,185,129,.38);box-shadow:0 0 60px rgba(16,185,129,.22),0 0 120px rgba(16,185,129,.09),0 36px 80px rgba(0,0,0,.8);}
.role-emoji{font-size:3rem;margin-bottom:8px;animation:emojiPop .6s var(--bounce),emojiFloat 3s ease-in-out .6s infinite;}
@keyframes emojiPop{from{transform:scale(0) rotate(-20deg);}to{transform:scale(1);}}
@keyframes emojiFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}
.role-tag{font-family:var(--font-d);font-size:1.7rem;font-weight:900;letter-spacing:5px;margin-bottom:8px;animation:tagReveal .5s var(--spring) .15s both;}
@keyframes tagReveal{from{opacity:0;letter-spacing:20px;}to{opacity:1;letter-spacing:5px;}}
.impostor-tag{background:linear-gradient(135deg,var(--pink-l),var(--red),var(--amber));background-size:200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:tagReveal .5s var(--spring) .15s both,tagShimmer 3s linear .65s infinite;filter:drop-shadow(0 0 22px rgba(236,72,153,.8));}
.civilian-tag{background:linear-gradient(135deg,var(--green-l),var(--cyan-l),var(--purple-l));background-size:200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:tagReveal .5s var(--spring) .15s both,tagShimmer 3s linear .65s infinite;filter:drop-shadow(0 0 22px rgba(16,185,129,.8));}
@keyframes tagShimmer{to{background-position:200% 0;}}
.role-desc{font-size:.88rem;color:rgba(249,168,212,.72);margin-bottom:22px;}

/* podpowiedź dla Impostora w trybie "graj z podpowiedziami" */
.role-hint-label{
  font-family:var(--font-u);font-size:.66rem;letter-spacing:2px;
  color:rgba(255,255,255,.35);text-transform:uppercase;margin:-12px 0 8px;
}
.role-hint{
  display:inline-block;font-family:var(--font-d);font-size:1.3rem;letter-spacing:3px;
  color:var(--amber);text-shadow:0 0 18px rgba(245,158,11,.55);
  background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.25);
  padding:6px 18px;border-radius:14px;margin-bottom:20px;
  animation:wordReveal .6s var(--spring) .3s both;
}

.role-word-label{font-size:.75rem;font-family:var(--font-u);letter-spacing:2.5px;color:rgba(103,232,249,.6);margin-bottom:8px;text-transform:uppercase;}
.role-word{font-family:var(--font-d);font-size:1.8rem;font-weight:700;letter-spacing:5px;background:linear-gradient(135deg,var(--cyan-l),var(--purple-l),var(--pink-l));background-size:200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 0 20px rgba(6,182,212,.75));margin-bottom:14px;animation:wordReveal .65s var(--spring) .25s both,tagShimmer 4s linear .9s infinite;}
@keyframes wordReveal{from{opacity:0;transform:scale(.6) translateY(12px);}to{opacity:1;transform:none;}}

/* category tag on word */
.role-category{
  display:inline-block;font-family:var(--font-u);font-size:.62rem;letter-spacing:1.5px;
  color:rgba(255,255,255,.4);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  padding:3px 10px;border-radius:99px;margin-bottom:18px;text-transform:uppercase;
}
#hideBtn{width:100%;font-size:.8rem;letter-spacing:3px;}

/* ── TRYB PYTANIA ────────────────────────────────────────── */
/* pasek neutralny — celowo NIE różni się kolorem między impostorem a cywilem,
   bo w tym trybie gracz nigdy nie poznaje swojej roli */
.role-top-bar.question-bar{background:linear-gradient(90deg,var(--cyan),var(--purple-l),var(--pink-l),var(--cyan));background-size:200% 100%;animation:rainbowSlide 2s linear infinite;}
#roleBoxContainer.role-question .role-card{border-color:rgba(103,232,249,.35);box-shadow:0 0 60px rgba(6,182,212,.2),0 0 120px rgba(6,182,212,.08),0 36px 80px rgba(0,0,0,.8);}

.question-text{
  font-family:var(--font-d);font-size:1.25rem;font-weight:700;line-height:1.4;
  color:#fff;margin-bottom:18px;
  animation:wordReveal .65s var(--spring) .25s both;
}
.answer-saved-badge{
  display:inline-block;font-family:var(--font-u);font-size:.66rem;letter-spacing:1px;
  color:var(--green-l);background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.3);
  padding:4px 12px;border-radius:99px;margin-bottom:14px;
}
.answer-input{
  width:100%;font-family:var(--font-b);font-size:.92rem;color:#e2e8f0;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);border-radius:14px;
  padding:12px 14px;margin-bottom:16px;resize:vertical;min-height:56px;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.answer-input:focus{outline:none;border-color:rgba(103,232,249,.5);background:rgba(255,255,255,.07);}
.answer-input::placeholder{color:rgba(255,255,255,.3);}
.answer-submit-btn{width:100%;margin-bottom:14px;}

.answer-progress{
  font-family:var(--font-u);font-size:.7rem;letter-spacing:1px;
  color:rgba(255,255,255,.5);background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);border-radius:99px;
  padding:6px 16px;transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
}
.answer-progress.answer-progress-complete{
  color:var(--green-l);background:rgba(16,185,129,.1);border-color:rgba(16,185,129,.3);
}

/* ── MODAL UJAWNIENIA ODPOWIEDZI (tryb Pytania) ─────────────
   Własna karta — pytanie główne jest teraz wyraźnym, dużym nagłówkiem,
   a nie ściśniętym podpisem w karcie zapożyczonej z podsumowania sesji. */
.reveal-wrapper{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.92);
  width:94%;max-width:520px;max-height:92vh;
  display:flex;flex-direction:column;gap:16px;
  opacity:0;transition:opacity .3s var(--spring),transform .3s var(--spring);
}
#revealAnswersModal.visible .reveal-wrapper{opacity:1;transform:translate(-50%,-50%) scale(1);}

.reveal-card{
  background:linear-gradient(165deg,#0d0d1f,#0a0a18);
  border:1px solid rgba(103,232,249,.28);border-radius:26px;
  padding:22px 22px 20px;
  box-shadow:0 0 50px rgba(6,182,212,.18),0 30px 70px rgba(0,0,0,.7);
  overflow-y:auto;max-height:80vh;
  scrollbar-width:none; -ms-overflow-style:none; /* Firefox / legacy Edge */
}
.reveal-card::-webkit-scrollbar{display:none;} /* Chrome / Safari / Edge Chromium */
.reveal-card-header{
  display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:10px;
}
.reveal-card-icon{font-size:1.15rem;filter:drop-shadow(0 0 10px rgba(6,182,212,.5));}
.reveal-card-label{
  font-family:var(--font-u);font-size:.62rem;font-weight:700;letter-spacing:2.5px;
  color:rgba(103,232,249,.7);text-transform:uppercase;
}
.reveal-question-text{
  font-family:var(--font-d);font-size:1.05rem;font-weight:700;line-height:1.35;
  color:#fff;text-align:center;margin-bottom:14px;
}
.reveal-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);margin-bottom:12px;}
.reveal-answers-label{
  font-family:var(--font-u);font-size:.6rem;letter-spacing:2px;color:rgba(255,255,255,.35);
  text-align:center;margin-bottom:10px;text-transform:uppercase;
}
/* lista już NIE ma własnego limitu wysokości — cała karta jest jednym,
   wspólnym obszarem przewijania zamiast dwóch zagnieżdżonych pasków */
.reveal-answers-list{max-height:none;overflow:visible;}
.reveal-answer-entry{
  display:flex;flex-direction:column;gap:2px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);
  border-radius:12px;padding:9px 14px;margin-bottom:7px;
  transition:background .15s var(--ease),border-color .15s var(--ease),box-shadow .15s var(--ease),transform .15s var(--ease);
}
.reveal-answer-name{font-family:var(--font-u);font-size:.74rem;font-weight:700;color:var(--cyan-l);letter-spacing:.5px;}
.reveal-answer-text{font-family:var(--font-b);font-size:.9rem;color:#e2e8f0;line-height:1.4;}

/* "spotlight" przesuwający się po odpowiedziach podczas ujawniania Impostora */
.reveal-answer-entry.reveal-answer-scanning{
  background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.28);
  box-shadow:0 0 16px rgba(255,255,255,.12);
  transform:scale(1.025);
}

/* podświetlenie wpisu Impostora po zakończeniu "skanowania" */
.reveal-answer-entry.reveal-answer-impostor{
  background:rgba(236,72,153,.1);border-color:rgba(236,72,153,.35);
  box-shadow:0 0 20px rgba(236,72,153,.15);
}
.reveal-answer-entry.reveal-answer-pop{animation:revealImpostorPop .5s var(--spring);}
@keyframes revealImpostorPop{
  0%{transform:scale(.92);}
  55%{transform:scale(1.05);box-shadow:0 0 34px rgba(236,72,153,.45);}
  100%{transform:scale(1);}
}
.reveal-answer-impostor-question{
  display:block;margin-top:8px;padding-top:8px;border-top:1px solid rgba(236,72,153,.2);
  font-family:var(--font-b);font-size:.78rem;font-style:italic;
  color:rgba(249,168,212,.85);line-height:1.4;
  animation:answerFadeIn .4s var(--ease) .1s both;
}
@keyframes answerFadeIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
.reveal-impostor-btn{margin-top:14px;}

/* ── TOAST ──────────────────────────────────────────────── */
.info-toast{font-family:var(--font-u);font-size:.8rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:13px 26px;border-radius:99px;max-width:450px;margin:14px auto 0;display:block;opacity:0;transform:translateY(12px) scale(.96);pointer-events:none;transition:opacity .4s var(--ease),transform .4s var(--spring);}
.toast-ok{color:var(--cyan-l);background:rgba(6,182,212,.13);border:1px solid rgba(6,182,212,.3);box-shadow:0 0 30px rgba(6,182,212,.28);}
.toast-err{color:var(--pink-l);background:rgba(236,72,153,.13);border:1px solid rgba(236,72,153,.3);box-shadow:0 0 30px rgba(236,72,153,.28);}
.info-toast.visible{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}

/* ── SCOREBOARD ─────────────────────────────────────────── */
#scoreboard{
  position:fixed;top:50%;right:18px;transform:translateY(-50%);width:258px;max-height:83vh;overflow-y:auto;
  background:rgba(4,4,13,.85);backdrop-filter:blur(34px);border:1px solid rgba(255,255,255,.07);
  border-radius:24px;padding:18px 14px;box-shadow:0 0 0 1px rgba(255,255,255,.04),0 40px 90px rgba(0,0,0,.85);
  z-index:50;overflow-x:hidden;animation:scoreIn .6s var(--spring) both;
}
@keyframes scoreIn{from{opacity:0;transform:translateY(-50%) translateX(30px);}to{opacity:1;transform:translateY(-50%) translateX(0);}}
#scoreboard::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--purple),var(--cyan),var(--pink),transparent);background-size:200% 100%;animation:rainbowSlide 3s linear infinite;}
#scoreboard::-webkit-scrollbar{width:3px;}
#scoreboard::-webkit-scrollbar-thumb{background:rgba(124,58,237,.4);border-radius:2px;}
.score-header{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:14px;}
.score-title{font-family:var(--font-d);font-size:.65rem;font-weight:700;letter-spacing:4px;background:linear-gradient(135deg,var(--purple-l),var(--cyan-l));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
#scoreList{list-style:none;}
.score-entry{display:flex;align-items:center;padding:7px 3px;border-bottom:1px solid rgba(255,255,255,.04);gap:6px;border-radius:7px;transition:background .2s;animation:entryIn .4s var(--spring) both;}
@keyframes entryIn{from{opacity:0;transform:translateX(16px);}to{opacity:1;transform:none;}}
.score-entry:hover{background:rgba(124,58,237,.08);}
.score-entry:first-child{background:rgba(245,200,66,.07);border-color:rgba(245,200,66,.15);}
.score-position{flex:0 0 24px;font-size:.82rem;text-align:center;}
.score-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-u);font-size:.8rem;font-weight:600;letter-spacing:.5px;}
.score-points{font-family:var(--font-d);font-size:.88rem;font-weight:700;color:var(--purple-l);min-width:20px;text-align:center;transition:all .2s var(--spring);}
.score-points.score-pop{animation:scorePop .35s var(--spring);}
@keyframes scorePop{0%,100%{transform:scale(1);}50%{transform:scale(1.7);filter:drop-shadow(0 0 8px var(--cyan));}}
.score-plus,.score-minus{cursor:pointer;user-select:none;width:23px;height:23px;display:flex;align-items:center;justify-content:center;border-radius:7px;font-weight:700;font-size:.88rem;transition:background .15s,transform .12s var(--spring),box-shadow .15s;}
.score-plus{background:rgba(16,185,129,.22);color:var(--green-l);border:1px solid rgba(16,185,129,.32);}
.score-plus:hover{background:rgba(16,185,129,.45);box-shadow:0 0 16px rgba(16,185,129,.55);transform:scale(1.18);}
.score-minus{background:rgba(239,68,68,.22);color:#fca5a5;border:1px solid rgba(239,68,68,.3);}
.score-minus:hover{background:rgba(239,68,68,.45);box-shadow:0 0 16px rgba(239,68,68,.55);transform:scale(1.18);}

.score-name-clickable{cursor:pointer;transition:color .18s var(--ease);}
.score-name-clickable:hover{color:var(--cyan-l);text-decoration:underline;text-underline-offset:2px;}

/* ── WORD HISTORY (w panelu wyników) ─────────────────────── */
.history-section{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.06);}
.history-title{font-family:var(--font-u);font-size:.62rem;letter-spacing:2.5px;color:rgba(255,255,255,.35);margin-bottom:8px;text-align:center;}
.history-list{list-style:none;max-height:160px;overflow-y:auto;}
.history-list::-webkit-scrollbar{width:3px;}
.history-list::-webkit-scrollbar-thumb{background:rgba(124,58,237,.3);border-radius:2px;}
.history-entry{
  display:flex;align-items:center;justify-content:space-between;gap:6px;
  padding:5px 6px;border-radius:6px;font-size:.72rem;
  opacity:.7;transition:opacity .2s,background .2s;
}
.history-entry:hover{background:rgba(255,255,255,.03);opacity:1;}
.history-word{font-family:var(--font-u);font-weight:700;color:#e2e8f0;}
.history-cat{font-family:var(--font-b);font-size:.62rem;color:rgba(255,255,255,.3);}
.history-entry-question{flex-direction:column;align-items:flex-start;gap:2px;padding:8px 6px;}
.history-entry-question .history-word{white-space:normal;line-height:1.35;}
.history-entry-question .history-cat{text-transform:uppercase;letter-spacing:.5px;}

/* ── TIMER BAR ───────────────────────────────────────────── */
.timer-bar{
  width:100%;max-width:460px;margin:0 auto 16px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);
  border-radius:16px;padding:12px 16px;
}
.timer-idle{display:flex;flex-direction:column;align-items:center;gap:10px;padding:4px 0;}
.timer-idle-label{
  font-family:var(--font-u);font-size:.68rem;letter-spacing:.5px;
  color:rgba(255,255,255,.45);text-align:center;
}
.timer-start-btn{padding:10px 24px;font-size:.82rem;letter-spacing:2px;}

.timer-bar-track{width:100%;height:6px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;margin-bottom:8px;}
.timer-bar-fill{
  height:100%;border-radius:99px;width:100%;
  background:linear-gradient(90deg,var(--cyan),var(--purple-l));
  transition:width 1s linear,background .3s var(--ease);
}
.timer-bar-fill.timer-warning{background:linear-gradient(90deg,var(--amber),#f59e0b);}
.timer-bar-fill.timer-critical{background:linear-gradient(90deg,var(--red),#dc2626);animation:timerPulse .6s ease-in-out infinite;}
@keyframes timerPulse{0%,100%{opacity:1;}50%{opacity:.55;}}
.timer-bar-row{display:flex;align-items:center;justify-content:space-between;}
.timer-bar-label{font-family:var(--font-u);font-size:.64rem;letter-spacing:2px;color:rgba(255,255,255,.4);}
.timer-bar-time{font-family:var(--font-d);font-size:1.1rem;font-weight:700;color:var(--cyan-l);letter-spacing:1px;}
.timer-bar-controls{display:flex;gap:6px;justify-content:center;margin-top:8px;}
.timer-ctrl-btn{
  width:30px;height:30px;border-radius:50%;padding:0;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.6);font-size:.85rem;
  display:flex;align-items:center;justify-content:center;
  transition:all .18s var(--spring);
}
.timer-ctrl-btn:hover{background:rgba(124,58,237,.2);border-color:rgba(124,58,237,.4);transform:scale(1.1);}
.timer-ctrl-btn::after,.timer-ctrl-btn::before{display:none;}

/* ── MULTI-IMPOSTOR NOTE in role box ─────────────────────── */
.role-multi-note{
  font-family:var(--font-u);font-size:.66rem;letter-spacing:1px;
  color:rgba(245,158,11,.85);background:rgba(245,158,11,.1);
  border:1px solid rgba(245,158,11,.25);border-radius:10px;
  padding:6px 12px;margin-bottom:16px;display:inline-block;
}

/* ── ROUND OUTCOME MODAL (kto wygrał rundę) ─────────────── */
#roundOutcomeModal{position:fixed;inset:0;z-index:500;}
#roundOutcomeModal .stats-backdrop{
  position:absolute;inset:0;background:rgba(4,4,13,.8);backdrop-filter:blur(10px);
  opacity:0;transition:opacity .25s var(--ease);
}
#roundOutcomeModal.visible .stats-backdrop{opacity:1;}
.outcome-card{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.85);
  width:90%;max-width:380px;
  background:rgba(12,10,26,.96);backdrop-filter:blur(30px);
  border:1px solid rgba(124,58,237,.3);border-radius:24px;
  padding:30px 26px 24px;text-align:center;
  box-shadow:0 0 60px rgba(124,58,237,.2),0 30px 70px rgba(0,0,0,.8);
  opacity:0;transition:opacity .3s var(--spring),transform .3s var(--spring);
}
#roundOutcomeModal.visible .outcome-card{opacity:1;transform:translate(-50%,-50%) scale(1);}
.outcome-icon{font-size:2rem;margin-bottom:10px;filter:drop-shadow(0 0 14px rgba(245,158,11,.5));}
.outcome-title{font-family:var(--font-u);font-size:1.1rem;font-weight:700;color:#fff;margin-bottom:6px;}
.outcome-text{font-family:var(--font-b);font-size:.8rem;color:rgba(255,255,255,.5);line-height:1.5;margin-bottom:22px;}

.outcome-buttons{display:flex;flex-direction:column;gap:10px;}
.outcome-btn{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:14px 16px;border-radius:16px;cursor:pointer;
  border:1px solid transparent;transition:transform .15s var(--ease),box-shadow .2s var(--ease);
  box-shadow:none;
}
.outcome-btn::after,.outcome-btn::before{display:none;}
.outcome-btn:active{transform:scale(.97);}
.outcome-btn-imp{background:rgba(236,72,153,.14);border-color:rgba(236,72,153,.3);}
.outcome-btn-imp:hover{background:rgba(236,72,153,.24);box-shadow:0 0 20px rgba(236,72,153,.25);}
.outcome-btn-civ{background:rgba(16,185,129,.14);border-color:rgba(16,185,129,.3);}
.outcome-btn-civ:hover{background:rgba(16,185,129,.24);box-shadow:0 0 20px rgba(16,185,129,.25);}
.outcome-btn-label{font-family:var(--font-u);font-size:.88rem;font-weight:700;letter-spacing:.5px;color:#fff;text-transform:none;}
.outcome-btn-sub{font-family:var(--font-b);font-size:.7rem;color:rgba(255,255,255,.5);}
.outcome-btn-skip{
  background:transparent;border:none;box-shadow:none;
  font-family:var(--font-b);font-size:.72rem;font-weight:400;letter-spacing:0;text-transform:none;
  color:rgba(255,255,255,.35);padding:8px;cursor:pointer;
}
.outcome-btn-skip::after,.outcome-btn-skip::before{display:none;}
.outcome-btn-skip:hover{color:rgba(255,255,255,.6);}

/* ── SETTINGS MODAL ──────────────────────────────────────── */
#settingsModal{position:fixed;inset:0;z-index:500;}
#settingsModal .stats-backdrop{
  position:absolute;inset:0;background:rgba(4,4,13,.8);backdrop-filter:blur(10px);
  opacity:0;transition:opacity .25s var(--ease);
}
#settingsModal.visible .stats-backdrop{opacity:1;}
.settings-card{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.85);
  width:90%;max-width:380px;
  background:rgba(12,10,26,.95);backdrop-filter:blur(30px);
  border:1px solid rgba(124,58,237,.28);border-radius:24px;
  padding:30px 26px 26px;
  box-shadow:0 0 60px rgba(124,58,237,.2),0 30px 70px rgba(0,0,0,.8);
  opacity:0;transition:opacity .3s var(--spring),transform .3s var(--spring);
}
#settingsModal.visible .settings-card{opacity:1;transform:translate(-50%,-50%) scale(1);}

.settings-title{
  font-family:var(--font-u);font-size:1rem;font-weight:700;letter-spacing:2px;
  color:#fff;text-align:center;margin-bottom:26px;
}

.settings-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0;border-bottom:1px solid rgba(255,255,255,.06);
  gap:14px;
}
.settings-row:last-child{border-bottom:none;}
.settings-row-slider{flex-direction:column;align-items:stretch;gap:10px;}
.settings-row-label{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-u);font-size:.86rem;font-weight:600;color:#e2e8f0;
}
.settings-row-icon{font-size:1.15rem;flex:0 0 auto;}

/* przełącznik on/off */
.settings-toggle{position:relative;flex:0 0 auto;cursor:pointer;}
.settings-toggle input{position:absolute;opacity:0;width:0;height:0;}
.settings-toggle-track{
  display:block;width:46px;height:26px;border-radius:99px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.15);
  position:relative;transition:background .25s var(--ease),border-color .25s var(--ease);
}
.settings-toggle-thumb{
  position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;
  background:#cbd5f5;box-shadow:0 2px 6px rgba(0,0,0,.4);
  transition:transform .25s var(--spring),background .25s var(--ease);
}
.settings-toggle input:checked + .settings-toggle-track{
  background:linear-gradient(135deg,var(--purple),var(--cyan));
  border-color:rgba(167,139,250,.6);
  box-shadow:0 0 14px rgba(124,58,237,.5);
}
.settings-toggle input:checked + .settings-toggle-track .settings-toggle-thumb{
  transform:translateX(20px);background:#fff;
}

/* suwak głośności — poziomy, w karcie ustawień */
.settings-row-slider input[type=range]{
  width:100%;height:6px;-webkit-appearance:none;appearance:none;
  background:rgba(255,255,255,.1);border-radius:99px;outline:none;cursor:pointer;
}
.settings-row-slider input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:18px;height:18px;border-radius:50%;
  background:var(--purple-l);box-shadow:0 0 10px rgba(124,58,237,.7);
  border:2px solid #fff;cursor:pointer;margin-top:-6px;
}
.settings-row-slider input[type=range]::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;
  background:var(--purple-l);box-shadow:0 0 10px rgba(124,58,237,.7);
  border:2px solid #fff;cursor:pointer;
}
.settings-row-slider input[type=range]::-webkit-slider-runnable-track{
  background:linear-gradient(to right,var(--purple),rgba(255,255,255,.1));
  border-radius:99px;height:6px;
}

#confirmModal{position:fixed;inset:0;z-index:500;}
#confirmModal .stats-backdrop{
  position:absolute;inset:0;background:rgba(4,4,13,.78);backdrop-filter:blur(10px);
  opacity:0;transition:opacity .25s var(--ease);
}
#confirmModal.visible .stats-backdrop{opacity:1;}
.confirm-card{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.85);
  width:88%;max-width:340px;
  background:rgba(12,10,26,.95);backdrop-filter:blur(30px);
  border:1px solid rgba(239,68,68,.3);border-radius:22px;
  padding:28px 24px 22px;text-align:center;
  box-shadow:0 0 50px rgba(239,68,68,.15),0 30px 70px rgba(0,0,0,.8);
  opacity:0;transition:opacity .3s var(--spring),transform .3s var(--spring);
}
#confirmModal.visible .confirm-card{opacity:1;transform:translate(-50%,-50%) scale(1);}
.confirm-icon{font-size:1.8rem;margin-bottom:10px;filter:drop-shadow(0 0 12px rgba(239,68,68,.5));}
.confirm-title{font-family:var(--font-u);font-size:1.05rem;font-weight:700;color:#fff;margin-bottom:8px;}
.confirm-text{font-family:var(--font-b);font-size:.82rem;color:rgba(255,255,255,.55);line-height:1.5;margin-bottom:22px;}
.confirm-buttons{display:flex;gap:10px;}
.confirm-buttons button{flex:1;padding:12px 10px;font-size:.78rem;}

/* ── PLAYER STATS MODAL ──────────────────────────────────── */
#statsModal{position:fixed;inset:0;z-index:400;}
.stats-backdrop{
  position:absolute;inset:0;background:rgba(4,4,13,.78);backdrop-filter:blur(10px);
  opacity:0;transition:opacity .25s var(--ease);
}
#statsModal.visible .stats-backdrop{opacity:1;}
.stats-card{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.85);
  width:90%;max-width:380px;
  background:rgba(10,10,24,.92);backdrop-filter:blur(30px);
  border:1px solid rgba(167,139,250,.25);border-radius:26px;
  padding:32px 26px 26px;text-align:center;
  box-shadow:0 0 60px rgba(124,58,237,.25),0 40px 90px rgba(0,0,0,.8);
  opacity:0;transition:opacity .3s var(--spring),transform .3s var(--spring);
}
#statsModal.visible .stats-card{opacity:1;transform:translate(-50%,-50%) scale(1);}

.stats-close{
  position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;padding:0;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.6);
  font-size:.85rem;display:flex;align-items:center;justify-content:center;
}
.stats-close::after,.stats-close::before{display:none;}
.stats-close:hover{background:rgba(236,72,153,.25);border-color:rgba(236,72,153,.4);color:#fff;}

.stats-avatar{
  width:64px;height:64px;border-radius:50%;margin:0 auto 14px;
  background:linear-gradient(135deg,var(--purple),var(--cyan));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-d);font-size:1.4rem;color:#fff;
  box-shadow:0 0 30px rgba(124,58,237,.5);
}
.stats-name{
  font-family:var(--font-u);font-size:1.1rem;font-weight:700;letter-spacing:1px;
  color:#fff;margin-bottom:20px;
}

.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px;}
.stats-tile{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:14px;padding:14px 8px;
}
.stats-tile-value{font-family:var(--font-d);font-size:1.6rem;font-weight:700;color:var(--purple-l);}
.stats-tile-label{font-family:var(--font-u);font-size:.6rem;letter-spacing:.5px;color:rgba(255,255,255,.4);margin-top:2px;text-transform:uppercase;}
.stats-tile-imp .stats-tile-value{color:var(--pink-l);}
.stats-tile-civ .stats-tile-value{color:var(--green-l);}

.stats-fun-fact{
  font-family:var(--font-b);font-size:.78rem;font-style:italic;
  color:rgba(255,255,255,.5);line-height:1.5;
  padding-top:14px;border-top:1px solid rgba(255,255,255,.06);
}

/* ── SESSION SUMMARY MODAL ───────────────────────────────── */
#summaryModal{position:fixed;inset:0;z-index:400;}
#summaryModal .stats-backdrop{opacity:0;transition:opacity .25s var(--ease);}
#summaryModal.visible .stats-backdrop{opacity:1;}
.summary-wrapper{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.92);
  width:94%;max-width:520px;max-height:92vh;
  display:flex;flex-direction:column;gap:16px;
  opacity:0;transition:opacity .3s var(--spring),transform .3s var(--spring);
}
#summaryModal.visible .summary-wrapper{opacity:1;transform:translate(-50%,-50%) scale(1);}
.summary-close{position:absolute;top:-44px;right:0;}

/* modal ujawnienia odpowiedzi (tryb Pytania) — własna karta (.reveal-card),
   ale potrzebuje tu tylko position/z-index/backdrop; widoczność .reveal-wrapper
   jest już zdefiniowana wyżej, obok reszty stylów tej karty */
#revealAnswersModal{position:fixed;inset:0;z-index:400;}
#revealAnswersModal .stats-backdrop{opacity:0;transition:opacity .25s var(--ease);}
#revealAnswersModal.visible .stats-backdrop{opacity:1;}

.summary-card{
  background:linear-gradient(165deg,#0d0d1f,#0a0a18);
  border:1px solid rgba(167,139,250,.25);border-radius:26px;
  padding:32px 28px 26px;
  box-shadow:0 0 50px rgba(124,58,237,.2),0 30px 70px rgba(0,0,0,.7);
  overflow-y:auto;max-height:76vh;
}

.summary-card-header{display:flex;flex-direction:column;align-items:center;gap:4px;margin-bottom:24px;}
.summary-card-logo-row{display:flex;align-items:center;gap:10px;margin-bottom:2px;}
.summary-card-emoji{font-size:1.6rem;}
/* UWAGA: celowo kolor stały (bez background-clip:text/animacji) —
   gradienty tekstowe potrafią się "rozjechać" przy renderowaniu do PNG
   przez html2canvas, więc logo na eksportowanej karcie musi być bezpieczne. */
.summary-card-logo{
  font-family:var(--font-d);font-size:1.7rem;font-weight:900;letter-spacing:4px;
  color:#c4b5fd;
}
.summary-card-sub{font-family:var(--font-u);font-size:.7rem;letter-spacing:2.5px;color:rgba(255,255,255,.45);text-transform:uppercase;}
.summary-card-rounds{font-family:var(--font-b);font-size:.7rem;color:rgba(103,232,249,.6);margin-top:4px;}

.summary-list{list-style:none;display:flex;flex-direction:column;gap:10px;}
.summary-entry{
  display:flex;align-items:center;gap:12px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);
  border-radius:16px;padding:13px 16px;
}
.summary-entry:first-child{background:rgba(245,200,66,.08);border-color:rgba(245,200,66,.22);}
.summary-medal{font-size:1.3rem;flex:0 0 30px;text-align:center;}
.summary-info{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;}
.summary-name{font-family:var(--font-u);font-size:.96rem;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.summary-title{font-family:var(--font-b);font-size:.74rem;color:rgba(167,139,250,.85);}
.summary-stats{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:0 0 auto;}
.summary-points{font-family:var(--font-d);font-size:1.1rem;font-weight:700;color:var(--cyan-l);}
.summary-roles{font-family:var(--font-b);font-size:.68rem;color:rgba(255,255,255,.4);white-space:nowrap;}

.summary-card-footer{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  text-align:center;margin-top:22px;padding-top:18px;
  border-top:1px solid rgba(255,255,255,.07);
}
.summary-footer-brand{
  font-family:var(--font-d);font-size:.78rem;font-weight:700;letter-spacing:3px;
  color:rgba(167,139,250,.55);
}
.summary-footer-text{
  font-family:var(--font-b);font-size:.64rem;color:rgba(255,255,255,.28);
}

.summary-save-btn{flex:0 0 auto;}

/* ── RULES PAGE ─────────────────────────────────────────── */
#setup1{font-family:var(--font-b);font-size:.93rem;line-height:1.82;color:rgba(226,232,240,.82);text-align:left;}
#setup1 p,#setup1 #liczbagraczy{font-family:var(--font-d);font-size:.7rem;font-weight:700;letter-spacing:3.5px;color:var(--cyan-l);margin:26px 0 9px;filter:drop-shadow(0 0 14px rgba(6,182,212,.5));text-transform:uppercase;}
.rules-card.wide-card{max-width:660px;width:100%;}

.player-name-input{font-family:var(--font-u)!important;font-weight:700!important;font-size:.83rem!important;letter-spacing:1.5px!important;text-align:center!important;text-transform:uppercase!important;width:100%!important;border:1px solid rgba(124,58,237,.6)!important;border-radius:7px!important;padding:3px 6px!important;background:rgba(124,58,237,.2)!important;color:#e2e8f0!important;outline:none!important;}

.hidden{display:none!important;}
.invisible{opacity:0;pointer-events:none;}

@media(max-width:990px){
  #scoreboard{position:static;width:100%;max-width:520px;transform:none;margin-top:18px;animation:cardIn .6s var(--spring) both;}
  body{justify-content:flex-start;padding-top:22px;}
}
@media(max-width:520px){
  .card{padding:26px 18px 22px;border-radius:24px;}
  .logo-title{font-size:2.1rem;letter-spacing:5px;}
  .logo-title.small{font-size:1.35rem;letter-spacing:3px;}
  .logo-icon{width:42px;height:42px;}
  button{font-size:.86rem;letter-spacing:1.5px;padding:13px 22px;}
  .player-container{width:132px;}
  .player-image{height:100px;}
  .extra-btns button{min-width:148px;}
  #countdownNum{font-size:5.5rem;}
  .settings-card{padding:24px 20px 22px;}
  .mode-option{padding:9px 8px;gap:7px;}
  .mode-icon{font-size:1.1rem;}
  .mode-title{font-size:.72rem;}
  .mode-sub{font-size:.56rem;}
  .timer-mode-row{gap:5px;}
  .timer-chip{padding:6px 10px;font-size:.62rem;}
  .timer-bar{padding:10px 12px;}
  .stats-card{padding:26px 18px 20px;}
  .stats-grid{gap:8px;}
  .stats-tile{padding:11px 6px;}
  .stats-tile-value{font-size:1.3rem;}
  .summary-card{padding:22px 16px 18px;}
  .summary-card-logo{font-size:1.35rem;letter-spacing:2.5px;}
  .summary-card-emoji{font-size:1.3rem;}
  .summary-entry{padding:10px 12px;gap:8px;}
  .summary-name{font-size:.84rem;}
  .summary-title{font-size:.66rem;}
  .summary-points{font-size:.95rem;}
  .summary-roles{font-size:.6rem;}
}