/* IMPOSTOR / Visual refresh — 2026. No external fonts, no image dependencies. */
:root {
  --bg:#080911;
  --panel:#141725;
  --panel-2:#1b2030;
  --panel-3:#22283a;
  --line:#303347;
  --line-2:#42475d;
  --text:#f9f9ff;
  --muted:#a6a9bb;
  --muted-2:#7d8198;
  --accent:#8b6cff;
  --accent-hover:#a28cff;
  --accent-soft:rgba(139,108,255,.16);
  --shadow:0 20px 60px rgba(2,2,14,.35);
  --radius:24px;
}
body:not(.tv11-body) {
  background:
    radial-gradient(720px 490px at 8% -100px,rgba(116,74,255,.19),transparent 80%),
    radial-gradient(560px 380px at 95% 10%,rgba(51,116,209,.105),transparent 80%),
    linear-gradient(180deg,#0b0c16,#080911 80%)!important;
  color:#f9f9ff;
  letter-spacing:-.008em;
}
body:not(.tv11-body)::before {
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.22;
  background-image:radial-gradient(#7176a3 0.55px,transparent 0.55px);
  background-size:27px 27px;
  mask-image:linear-gradient(to bottom,black,transparent 78%);
}
body:not(.tv11-body) .container {position:relative}
body:not(.tv11-body) .glass-card,
body:not(.tv11-body) .card {
  background:linear-gradient(150deg,rgba(27,30,47,.98),rgba(16,18,31,.985))!important;
  border:1px solid rgba(139,145,177,.16)!important;
  border-radius:24px!important;
  box-shadow:0 16px 55px rgba(0,0,9,.21),inset 0 1px 0 rgba(255,255,255,.045)!important;
}
body:not(.tv11-body) .glass-card::before {
  content:"";position:absolute;inset:0 auto 0 0;width:1px;
  background:linear-gradient(transparent,rgba(161,140,255,.42),transparent);
  pointer-events:none;border-radius:24px;
}
body:not(.tv11-body) .glass-card h2,
body:not(.tv11-body) .card h2 {letter-spacing:-.035em;font-weight:850}
body:not(.tv11-body) .card-description {line-height:1.65;font-size:.89rem;color:#9da3b6}
body:not(.tv11-body) .field-label {color:#c7cad7;letter-spacing:.015em;font-size:.78rem}
body:not(.tv11-body) input:not([type=checkbox]),
body:not(.tv11-body) textarea,
body:not(.tv11-body) select {
  border-radius:15px;
  background:#0c0e1b;
  border-color:#32354b;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.15);
  transition:background .16s,border-color .16s,box-shadow .16s;
}
body:not(.tv11-body) input:not([type=checkbox]):focus,
body:not(.tv11-body) textarea:focus,
body:not(.tv11-body) select:focus {
  border-color:#9478ff!important;
  background:#111427!important;
  box-shadow:0 0 0 4px rgba(139,108,255,.15)!important;
}
body:not(.tv11-body) button:not(.code-choice-card),
body:not(.tv11-body) .btn-tv,
body:not(.tv11-body) .btn-back {
  border-radius:14px;
  transition:transform .17s ease,box-shadow .17s ease,background .17s ease,filter .17s ease!important;
}
body:not(.tv11-body) button:not(.code-choice-card):hover:not(:disabled),
body:not(.tv11-body) .btn-tv:hover {
  transform:translateY(-2px);
}
body:not(.tv11-body) button:not(.code-choice-card):active:not(:disabled) {transform:translateY(0)}
body:not(.tv11-body) form > button:not(.btn-start):not(.btn-new-game):not(.btn-lobby):not(.btn-back):not(.kick-btn):not(.btn-delete),
body:not(.tv11-body) .btn-call-vote,
body:not(.tv11-body) .reveal-answer-btn,
body:not(.tv11-body) .reveal-all-answers-btn {
  background:linear-gradient(130deg,#956fff,#7355ed);
  box-shadow:0 8px 28px rgba(111,78,231,.17);
}
body:not(.tv11-body) .btn-start,
body:not(.tv11-body) .btn-new-game {
  background:linear-gradient(125deg,#7fe2b6,#4fcf9e);
  color:#091b17;
  box-shadow:0 9px 26px rgba(80,203,156,.13);
}
/* Welcome view */
.landing-hero {position:relative;padding:22px 0 7px!important;margin:20px 0 26px!important}
.landing-hero .hero-kicker {
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 13px;border-radius:999px;
  border:1px solid rgba(144,122,255,.25);background:rgba(144,122,255,.1);
  color:#c5bcff;font-size:10px;font-weight:900;letter-spacing:.17em;
  margin-bottom:23px;
}
.hero-pulse {display:block;width:7px;height:7px;border-radius:50%;background:#a790ff;box-shadow:0 0 0 5px rgba(157,127,255,.11)}
body:not(.tv11-body) .landing-hero h1 {
  font-size:clamp(3.8rem,12.8vw,6.4rem);font-weight:950;
  letter-spacing:-.079em;line-height:1;
  text-shadow:0 7px 33px rgba(106,76,228,.11);
}
.hero-period {color:#977aff}
.landing-hero .subtitle {font-size:1rem;letter-spacing:-.015em;text-transform:none;font-weight:550;color:#a8aabe;margin-top:13px}
.hero-tags {display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-top:22px}
.hero-tags span {border:1px solid #2e3248;border-radius:999px;background:rgba(22,25,40,.7);color:#b9bdd1;font-size:11px;font-weight:750;padding:7px 12px}
body:not(.tv11-body) .landing-hero+.glass-card,
body:not(.tv11-body) .landing-hero+.glass-card+.glass-card {padding:29px}
body:not(.tv11-body) .landing-hero+.glass-card h2 .icon {color:#baa5ff}
/* Lobby and players */
body:not(.tv11-body) .room-code,
body:not(.tv11-body) .invite-code {letter-spacing:.095em;background:linear-gradient(110deg,#fff,#b6a8ff);background-clip:text;-webkit-background-clip:text;color:transparent}
body:not(.tv11-body) .player-item,
body:not(.tv11-body) .toggle-row,
body:not(.tv11-body) .settings-block,
body:not(.tv11-body) .scoreboard-card,
body:not(.tv11-body) .game-timer-card {
  background:linear-gradient(135deg,rgba(15,17,30,.9),rgba(20,23,39,.9));
  border-color:#2b3045;
  border-radius:16px;
}
body:not(.tv11-body) .player-item {transition:border-color .2s,background .2s}
body:not(.tv11-body) .player-item:hover {border-color:#454260;background:#181a2d}
body:not(.tv11-body) .player-avatar {background:#292744;color:#c3b5ff;border-color:#39385a}
body:not(.tv11-body) .toggle-switch.active {background:#8b6cff}
body:not(.tv11-body) .host-chip,
body:not(.tv11-body) .you-badge {background:#2d2451;border-color:#4f4184;color:#d2c7ff}
/* Live gameplay */
body:not(.tv11-body) .gameplay-header {margin:14px 3px 25px}
body:not(.tv11-body) .gameplay-header h1 {font-size:clamp(2.6rem,7vw,4rem);letter-spacing:-.065em}
body:not(.tv11-body) .game-live-pill {background:rgba(32,92,66,.19);border-color:#275a48;color:#8decba;white-space:nowrap;letter-spacing:.055em}
body:not(.tv11-body) .role-card {
  background:radial-gradient(510px 250px at 50% 0,rgba(122,91,255,.12),transparent 80%),linear-gradient(160deg,#181a30,#101320)!important;
  border:1px solid #41395f!important;
  box-shadow:0 25px 58px rgba(0,0,10,.36),inset 0 1px 0 rgba(255,255,255,.055)!important;
  border-radius:26px!important;
  padding:31px 28px!important;
}
body:not(.tv11-body) .role-card::before {height:3px!important;background:linear-gradient(90deg,transparent,#9d7eff,transparent)!important}
body:not(.tv11-body) .role-card.impostor {border-color:#7e384e!important;background:radial-gradient(510px 260px at 50% 0,rgba(244,76,120,.09),transparent 80%),linear-gradient(160deg,#221725,#13111b)!important}
body:not(.tv11-body) .role-card.impostor::before {background:linear-gradient(90deg,transparent,#ff748e,transparent)!important}
body:not(.tv11-body) .role-card.jester {border-color:#715a2c!important}
body:not(.tv11-body) .secret-warning {background:rgba(139,108,255,.085);border-color:rgba(139,108,255,.22);color:#c8befb;font-size:.67rem;letter-spacing:.105em;padding:9px 13px}
body:not(.tv11-body) .role-title {letter-spacing:-.055em;font-size:clamp(1.65rem,5vw,2.35rem);margin-bottom:22px}
body:not(.tv11-body) .question-box,
body:not(.tv11-body) .password-box {
  border-radius:20px;border-color:#3b3858;
  background:linear-gradient(150deg,#0e101e,#141528);
  padding:30px 22px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 8px 28px rgba(0,0,0,.12)
}
body:not(.tv11-body) .question-text {font-size:clamp(1.45rem,5vw,2.35rem);letter-spacing:-.035em;line-height:1.22;font-weight:880}
body:not(.tv11-body) .password-text {font-weight:950;letter-spacing:.04em}
body:not(.tv11-body) .role-description {font-size:.89rem;line-height:1.65;color:#b9bbd0;font-weight:600}
body:not(.tv11-body) .question-answer-panel {background:rgba(10,12,24,.55);border-color:#32324b;border-radius:19px;padding:20px;margin-top:24px}
body:not(.tv11-body) .question-answer-head strong {font-size:.96rem}
body:not(.tv11-body) .question-answer-head span {color:#c1b6fe;background:rgba(122,95,240,.12);border:1px solid rgba(122,95,240,.2);border-radius:999px;padding:5px 9px}
body:not(.tv11-body) .my-answer-saved {background:#10241f;border-color:#285948;color:#9be9bf}
body:not(.tv11-body) .host-answer-card {background:linear-gradient(150deg,rgba(77,63,142,.22),rgba(18,19,39,.98));border:1px solid #49426c;border-radius:17px;padding:18px;text-align:left}
body:not(.tv11-body) .host-answer-label {color:#c1b5ff;font-size:.7rem}
body:not(.tv11-body) .host-answer-text {font-size:1.13rem;margin:7px 0 1px;letter-spacing:-.015em}
body:not(.tv11-body) .host-answer-note {margin-top:15px;line-height:1.5}
body:not(.tv11-body) .reveal-answer-btn {margin-top:17px;min-height:52px}
body:not(.tv11-body) .answer-row {border-color:#30354b}
body:not(.tv11-body) .btn-call-vote {width:100%}
body:not(.tv11-body) .round-players-section {margin-top:18px}
body:not(.tv11-body) .info-badge,
body:not(.tv11-body) .question-mode-badge {background:rgba(20,25,40,.86)!important;border-radius:15px;border-color:#37405a}
/* Small screens & motion */
@media(max-width:640px){
  body:not(.tv11-body) {padding:18px 12px 35px!important}
  .landing-hero {padding-top:18px!important;margin:9px 0 23px!important}
  .landing-hero .hero-kicker {margin-bottom:17px}
  .hero-tags {gap:6px;margin-top:18px}
  .hero-tags span {font-size:10px;padding:6px 10px}
  body:not(.tv11-body) .landing-hero+.glass-card,
  body:not(.tv11-body) .landing-hero+.glass-card+.glass-card {padding:20px}
  body:not(.tv11-body) .role-card {padding:21px 15px!important}
  body:not(.tv11-body) .question-box,
  body:not(.tv11-body) .password-box {padding:23px 13px}
  body:not(.tv11-body) .question-answer-panel {padding:15px}
  body:not(.tv11-body) .gameplay-header h1 {font-size:2.55rem}
}
@media(prefers-reduced-motion:reduce){
  body:not(.tv11-body) *,body:not(.tv11-body) *::before,body:not(.tv11-body) *::after {animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* Wydarzenia losowe / wybór prawdopodobieństwa */
.random-round-settings {border:1px solid rgba(164,130,255,.25)!important;background:linear-gradient(145deg,rgba(100,67,182,.10),rgba(18,20,35,.98))!important}
.special-settings-form {display:flex;flex-wrap:wrap;align-items:end;gap:12px;margin-top:18px}
.special-settings-form .field-label {width:100%}
.special-settings-form select {flex:1;min-width:150px;padding:12px}
.special-settings-form button {flex:1;min-width:150px;margin:0}
.special-preview-chips {display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.special-preview-chips span {border:1px solid #41405f;background:rgba(128,91,228,.12);color:#d9cafa;border-radius:999px;padding:6px 10px;font-size:11px;font-weight:750}
.special-round-banner {display:flex;align-items:center;gap:18px;padding:22px 24px;margin:14px 0 22px;border:1px solid rgba(166,133,255,.55);border-radius:22px;background:radial-gradient(350px 180px at 10% 0%,rgba(165,110,255,.26),transparent 100%),linear-gradient(120deg,#25203e,#15192d);box-shadow:0 15px 40px rgba(36,22,78,.2)}
.special-round-symbol {display:grid;place-items:center;font-size:2.15rem;width:72px;height:72px;flex:none;border-radius:18px;background:rgba(150,111,255,.18);border:1px solid rgba(165,128,255,.3)}
.special-round-kicker {font-size:10px;font-weight:900;letter-spacing:.16em;color:#bdb2ff;margin-bottom:6px}
.special-round-content h2 {margin:0 0 7px;font-size:clamp(1.35rem,4vw,1.85rem);font-weight:900;letter-spacing:-.035em;color:#fff}
.special-round-content p {margin:0;color:#d6d3e8;font-size:.9rem;line-height:1.55}
.special-answer-hint {margin:9px 0;font-size:.81rem;color:#c7b1ff}
body:not(.tv11-body) .reveal-names-btn {display:block;padding:13px 16px;width:100%;background:#312654;color:#ebe0ff;border:1px solid #7768bd;border-radius:14px;margin:14px 0;cursor:pointer;font-weight:850}
body:not(.tv11-body) .reveal-names-btn[hidden] {display:none}
.tv-special-event {background:linear-gradient(110deg,#251c43,#181c31);border:1px solid #6651a7;border-radius:20px;padding:17px 24px;margin:14px auto 20px;max-width:1120px;color:white}
.tv-special-event[hidden] {display:none}
.tv-special-event .tv-special-label {font-size:10px;letter-spacing:.13em;color:#b6a1ff;font-weight:900}
.tv-special-event strong {display:block;font-size:1.45rem;margin:6px 0}
.tv-special-event p {margin:0;color:#d2cbe4}
@media(max-width:640px){.special-round-banner{padding:17px;gap:12px}.special-round-symbol{width:50px;height:50px;font-size:1.5rem}.special-settings-form{display:block}.special-settings-form select,.special-settings-form button{width:100%;margin:8px 0}}

/* V4 — Role of Devil */
body:not(.tv11-body) .role-card.devil {
  border-color:rgba(240,94,95,.68)!important;
  background:radial-gradient(520px 270px at 50% 0,rgba(227,61,80,.16),transparent 80%),linear-gradient(160deg,#241721,#12111c)!important;
}
body:not(.tv11-body) .role-card.devil::before {background:linear-gradient(90deg,transparent,#f36b77,transparent)!important}
.devil-mission {margin-top:26px;padding:21px 22px;text-align:center;border:1px solid rgba(255,100,109,.44);border-radius:20px;background:linear-gradient(160deg,rgba(109,30,55,.3),rgba(35,17,27,.75));box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.devil-mission-eyebrow {color:#ff9b9f;letter-spacing:.14em;font-weight:900;font-size:.78rem}
.devil-mission p {color:#e5ccd0;font-size:.92rem;line-height:1.5;margin:12px 0 0}
.devil-mission-target {display:inline-block;max-width:100%;overflow-wrap:anywhere;font-size:clamp(1.65rem,6vw,2.7rem);font-weight:950;letter-spacing:-.04em;color:#fff;margin:15px 0 5px;padding:10px 26px;border-radius:13px;background:rgba(226,65,75,.16);border:1px solid rgba(255,112,127,.32)}
.devil-mission strong {color:#ffd5d6}
.devil-mission small {display:block;color:#bd9da8;margin-top:13px}
.devil-feature-badge {line-height:1.5;border:1px solid rgba(232,85,95,.3)!important;background:rgba(199,53,75,.11)!important;color:#f5c2ca}
.devil-toggle-row .toggle-label {color:#ffbdc1}
.devil-toggle-row .toggle-switch.active {background:#d44a66!important}
body:not(.tv11-body) .round-result-inline.winner-devil {border-color:#d65b73;background:linear-gradient(145deg,#351722,#18111c)}
.tv11-result.winner-devil {border-color:#d65b73;background:rgba(126,25,54,.15)}
.devil-toggle-row button.toggle-switch {display:block;position:relative;flex:0 0 54px;width:54px;height:31px;padding:0!important;border:0!important;border-radius:999px!important;cursor:pointer;appearance:none;box-shadow:none!important;background:#343b49!important}
.devil-toggle-row button.toggle-switch.active {background:#d44a66!important}
.devil-toggle-row button.toggle-switch::after {top:4px;left:4px;width:23px;height:23px}
body:not(.tv11-body) .round-result-inline.winner-devil {border-color:#9a4055!important;background:linear-gradient(145deg,#321820,#171019)!important}
body:not(.tv11-body) .round-result-inline.winner-devil .round-result-title {color:#ff929a!important}
.tv11-winner.winner-devil {border-color:#9a4055!important;background:linear-gradient(100deg,#331820,#11141b)!important}