:root{
  --bg1:#242a55; --bg2:#161a38;
  --red:#FF5252; --yellow:#FFC542; --green:#3DBE5B; --blue:#4A7DFF;
  --purple:#9B6DFF;
  --paper:#FFF9F0; --ink:#23264a; --muted:#8b8fb8;
  --radius:18px;
  --shadow:0 8px 24px rgba(0,0,0,.35);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; padding:0;}
body{
  font-family:'Nunito',sans-serif; color:var(--paper);
  background:
    radial-gradient(1200px 600px at 50% -10%, #33407e 0%, transparent 60%),
    radial-gradient(circle at 15% 85%, rgba(255,82,82,.08), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(74,125,255,.10), transparent 40%),
    linear-gradient(var(--bg1), var(--bg2));
  min-height:100vh;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.05) 1.2px, transparent 1.2px);
  background-size:26px 26px;
}
.wrap{max-width:760px; margin:0 auto; padding:16px 16px 48px; position:relative;}
h1,h2,h3,.display{font-family:'Fredoka',sans-serif;}
.screen{display:none; animation:fadein .35s ease;}
.screen.active{display:block;}
@keyframes fadein{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}

/* ---------- Cartas (assinatura visual) ---------- */
.card{
  --c:var(--red);
  position:relative; aspect-ratio:2.5/3.5; border-radius:14%;
  background:var(--c); box-shadow:0 3px 0 rgba(0,0,0,.3), 0 6px 14px rgba(0,0,0,.25);
  border:3px solid #fff; overflow:hidden; user-select:none;
}
.card .oval{
  position:absolute; inset:12% 8%; background:#fff; border-radius:50%;
  transform:rotate(-28deg);
}
.card .num{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:'Fredoka',sans-serif; font-weight:700; color:var(--c);
  text-shadow:2px 2px 0 rgba(0,0,0,.15);
}
.card .mini{
  position:absolute; font-family:'Fredoka',sans-serif; font-weight:700; color:#fff; line-height:1;
}
.card .mini.tl{top:6%; left:9%;} .card .mini.br{bottom:6%; right:9%; transform:rotate(180deg);}
.card.back{background:#1b1e3d;}
.card.back .oval{background:var(--red); transform:rotate(-28deg); inset:14% 10%;}
.card.back .num{color:#fff; font-size:1em;}
.card.c1{--c:var(--red);} .card.c2{--c:var(--yellow);} .card.c3{--c:var(--green);} .card.c4{--c:var(--blue);}

/* tamanhos */
.card.lg{width:110px;} .card.lg .num{font-size:56px;} .card.lg .mini{font-size:16px;}
.card.md{width:72px;} .card.md .num{font-size:36px;} .card.md .mini{font-size:12px;}
.card.sm{width:100%;} .card.sm .num{font-size:clamp(18px,5vw,30px);} .card.sm .mini{display:none;}

/* ---------- Botões ---------- */
.btn{
  font-family:'Fredoka',sans-serif; font-weight:600; font-size:18px;
  border:none; border-radius:999px; padding:14px 28px; cursor:pointer;
  color:#fff; background:var(--green);
  box-shadow:0 4px 0 rgba(0,0,0,.3);
  transition:transform .08s ease, filter .15s;
}
.btn:active{transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,.3);}
.btn:disabled{filter:grayscale(.7) brightness(.7); cursor:not-allowed;}
.btn.red{background:var(--red);} .btn.blue{background:var(--blue);}
.btn.yellow{background:var(--yellow); color:var(--ink);}
.btn.ghost{background:rgba(255,255,255,.12); box-shadow:none; font-size:15px; padding:10px 18px;}
.btn.small{font-size:15px; padding:10px 20px;}

/* ---------- Topbar ---------- */
.topbar{display:flex; align-items:center; gap:8px; margin-bottom:14px;}
.topbar h2{flex:1; margin:0; font-size:clamp(20px,5vw,26px); text-align:center;}
.iconbtn{
  width:42px; height:42px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,.12); color:#fff; font-size:18px; font-weight:800;
  display:flex; align-items:center; justify-content:center; flex:none;
  font-family:'Fredoka',sans-serif;
}
.iconbtn:active{transform:scale(.92);}

/* ---------- HUB ---------- */
.hero{text-align:center; padding:26px 0 8px;}
.fan{position:relative; height:120px; width:180px; margin:0 auto 6px;}
.fan .card{position:absolute; top:10px; left:50%;}
.fan .card:nth-child(1){transform:translateX(-50%) rotate(-18deg) translateX(-42px);}
.fan .card:nth-child(2){transform:translateX(-50%) rotate(0deg) translateY(-8px); z-index:2;}
.fan .card:nth-child(3){transform:translateX(-50%) rotate(18deg) translateX(42px);}
.fan .card{animation:pop .6s cubic-bezier(.2,1.4,.4,1) backwards;}
.fan .card:nth-child(1){animation-delay:.05s;} .fan .card:nth-child(2){animation-delay:.15s;} .fan .card:nth-child(3){animation-delay:.25s;}
@keyframes pop{from{opacity:0; margin-top:40px;}}
.hero h1{font-size:clamp(30px,7vw,44px); margin:6px 0 4px; letter-spacing:.5px;}
.hero p{color:var(--muted); margin:0 0 18px; font-size:16px;}

.gamecard{
  background:var(--paper); color:var(--ink); border-radius:var(--radius);
  padding:20px; margin-bottom:16px; box-shadow:var(--shadow);
  display:flex; gap:16px; align-items:center; text-align:left;
  border-bottom:6px solid rgba(0,0,0,.12);
}
.gamecard .art{flex:none;}
.gamecard h3{margin:0 0 4px; font-size:22px;}
.gamecard p{margin:0 0 12px; font-size:14.5px; color:#565a86; line-height:1.45;}
.gamecard .info{flex:1;}

.rulesbox{
  background:rgba(255,255,255,.08); border-radius:var(--radius);
  padding:18px 20px; margin-top:8px; font-size:15px; line-height:1.55; color:#d7daf2;
}
.rulesbox h3{margin:0 0 8px; color:#fff;}

/* ---------- Painéis de jogo ---------- */
.panel{
  background:var(--paper); color:var(--ink); border-radius:var(--radius);
  padding:18px; margin-bottom:14px; box-shadow:var(--shadow);
}
.panel h3{margin:0 0 10px; font-size:18px;}
.turnbanner{
  background:linear-gradient(90deg,var(--blue),var(--purple));
  border-radius:var(--radius); padding:12px 18px; margin-bottom:14px;
  font-family:'Fredoka',sans-serif; font-size:17px; text-align:center; color:#fff;
  box-shadow:var(--shadow);
}
.turnbanner.mine{background:linear-gradient(90deg,var(--green),#2ea34a);}
.center{text-align:center;}
.row{display:flex; gap:10px; justify-content:center; flex-wrap:wrap;}

/* ---------- LOBBY / SALA ---------- */
.lobby-head{text-align:center; margin-bottom:8px;}
.lobby-head .game-name{font-family:'Fredoka'; font-size:clamp(22px,6vw,30px); margin:2px 0;}
.qrbox{background:#fff; padding:14px; border-radius:16px; display:inline-block; box-shadow:var(--shadow);}
.qrbox canvas{display:block; border-radius:6px; width:210px; height:210px;}
.roomcode{
  font-family:'Fredoka'; font-size:34px; letter-spacing:8px; color:#fff;
  background:rgba(255,255,255,.1); border:1px dashed rgba(255,255,255,.3);
  border-radius:14px; padding:8px 20px; display:inline-block;
}
.playerlist{list-style:none; padding:0; margin:12px 0; display:flex; flex-direction:column; gap:8px;}
.playerlist li{
  display:flex; align-items:center; gap:10px; background:var(--paper); color:var(--ink);
  border-radius:12px; padding:11px 14px; font-weight:700; box-shadow:var(--shadow);
}
.playerlist li .dot{width:11px; height:11px; border-radius:50%; background:var(--green); flex:none;}
.playerlist li .pname-cell{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.playerlist li .badge{font-size:11.5px; color:#8b8fb8; font-weight:700; text-transform:uppercase; letter-spacing:.5px;}
.kickbtn{
  width:28px; height:28px; border-radius:50%; border:none; cursor:pointer; flex:none;
  background:var(--red); color:#fff; font-family:'Fredoka',sans-serif; font-size:18px; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.kickbtn:active{transform:scale(.9);}
.hint{color:var(--muted); font-size:14.5px; line-height:1.5; text-align:center; margin:8px 0;}
.waiting{text-align:center; padding:26px; color:var(--muted); font-family:'Fredoka'; font-size:18px;}
.pulse{animation:pulse 1.4s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:.55;} 50%{opacity:1;}}

/* ---------- Código Secreto ---------- */
.slots{display:flex; gap:clamp(6px,2vw,12px); justify-content:center; margin:10px 0; flex-wrap:wrap;}
.slot{
  width:clamp(48px,15vw,72px); aspect-ratio:2.5/3.5; border-radius:12px;
  border:3px dashed #b9bcdd; display:flex; align-items:center; justify-content:center;
  color:#b9bcdd; font-family:'Fredoka',sans-serif; font-size:26px; position:relative;
}
.slot .card{width:100%; border-width:2px;}
.slot .poslabel{position:absolute; bottom:-22px; font-size:12px; color:#8b8fb8; font-family:'Nunito';}
.slot.found{border-style:solid; border-color:var(--green);}
.numgrid{display:grid; grid-template-columns:repeat(9,1fr); gap:6px; margin:8px 0;}
.numgrid button{
  border:none; background:none; padding:0; cursor:pointer; border-radius:10px;
  transition:transform .1s;
}
.numgrid button:active{transform:scale(.9);}
.numgrid button.sel .card{outline:4px solid #fff; outline-offset:-1px; transform:translateY(-4px);}
.numgrid button:disabled{opacity:.28; cursor:not-allowed; filter:grayscale(.8);}
.numgrid .card{transition:transform .15s;}
.posbtns{display:flex; gap:8px; justify-content:center; margin-bottom:6px;}
.posbtn{
  flex:1; max-width:110px; padding:10px 0; border-radius:12px; border:2px solid #d5d7ee;
  background:#fff; font-family:'Fredoka',sans-serif; font-size:15px; color:var(--ink); cursor:pointer;
}
.posbtn.sel{background:var(--blue); border-color:var(--blue); color:#fff;}
.posbtn:disabled{opacity:.4; text-decoration:line-through; cursor:not-allowed;}
.notes{font-size:14.5px; line-height:1.7;}
.notes b{font-family:'Fredoka',sans-serif; font-weight:600;}
.tag{display:inline-block; background:#eceefc; border-radius:8px; padding:1px 8px; margin:1px 2px; font-weight:700; color:#565a86;}
.tag.ok{background:var(--green); color:#fff;}
.tag.no{text-decoration:line-through;}

/* ---------- Complete a Linha ---------- */
.nameinput{
  width:100%; border:2px solid #d5d7ee; border-radius:12px; padding:12px 14px;
  font-family:'Nunito'; font-weight:700; font-size:16px; color:var(--ink); margin-bottom:8px;
  background:#fff;
}
.nameinput:focus{outline:none; border-color:var(--blue);}
.drawarea{display:flex; align-items:center; justify-content:center; gap:26px; margin:6px 0 14px;}
.flip{width:96px; aspect-ratio:2.5/3.5; perspective:600px;}
.flip .inner{position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .5s cubic-bezier(.3,1.3,.4,1);}
.flip.flipped .inner{transform:rotateY(180deg);}
.flip .face{position:absolute; inset:0; backface-visibility:hidden;}
.flip .face .card{width:100%; height:100%;}
.flip .face.front{transform:rotateY(180deg);}
.deckpile{position:relative; width:96px;}
.deckpile .card{width:100%; position:relative;}
.deckpile::before,.deckpile::after{
  content:""; position:absolute; inset:0; border-radius:14%; background:#12142c;
  border:3px solid #fff;
}
.deckpile::before{transform:translate(5px,5px); z-index:-1;}
.deckpile::after{transform:translate(10px,10px); z-index:-2; opacity:.6;}
.msg{
  min-height:28px; text-align:center; font-family:'Fredoka',sans-serif; font-size:18px; margin:4px 0 10px;
}
.msg.good{color:var(--green);} .msg.bad{color:var(--red);}
.board{display:flex; flex-direction:column; gap:10px;}
.brow{display:grid; grid-template-columns:minmax(70px,120px) repeat(9,1fr); gap:4px; align-items:center;}
.brow .pname{
  font-family:'Fredoka',sans-serif; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-right:4px;
}
.brow.active .pname{color:var(--blue);}
.cell{
  aspect-ratio:2.5/3.2; border-radius:8px; background:#eceefc; border:2px dashed #c9ccec;
  display:flex; align-items:center; justify-content:center; color:#b0b3d8;
  font-family:'Fredoka',sans-serif; font-size:clamp(11px,2.6vw,15px); position:relative; overflow:hidden;
}
.cell .card{width:100%; height:100%; border-radius:8px; border-width:2px; animation:stamp .35s cubic-bezier(.2,1.6,.4,1);}
@keyframes stamp{from{transform:scale(1.6); opacity:0;}}
.cell .card .num{font-size:clamp(13px,3vw,18px);}
.cell .card .oval{inset:14% 10%;}

/* ---------- Quem é o Impostor? ---------- */
.card.c5{--c:var(--purple);}
.impcard{
  width:min(260px,72vw); min-height:150px; margin:4px auto 0;
  background:#1b1e3d; color:#fff; border-radius:18px; padding:24px 18px;
  border:3px dashed rgba(255,255,255,.35); cursor:pointer; user-select:none;
  font-family:'Fredoka',sans-serif; text-align:center;
  display:flex; align-items:center; justify-content:center;
  transition:transform .12s ease;
}
.impcard:active{transform:scale(.97);}
.impcard.open{border-style:solid; border-color:var(--yellow); background:#23264a;}
.impcard .impcard-secret{display:none;}
.impcard.open .impcard-cover{display:none;}
.impcard.open .impcard-secret{display:block;}
.impcard-cover{font-size:15px; color:#b9bcdd; line-height:1.7;}
.impcard-cover .big{font-size:42px; line-height:1;}
.impcard-cover small{font-size:12px; color:#8b8fb8;}
.impcard-secret .role{font-size:13px; letter-spacing:1px; text-transform:uppercase; color:#b9bcdd; margin-bottom:6px;}
.impcard-secret .word{font-size:clamp(24px,7vw,32px); color:#fff; word-break:break-word;}
.impcard-secret.evil .word{color:var(--red);}
.myword{
  background:#1b1e3d; color:#fff; border-radius:14px; padding:10px 16px;
  margin:-4px 0 14px; text-align:center; font-family:'Fredoka',sans-serif;
  font-size:15px; box-shadow:var(--shadow); border:2px solid rgba(255,255,255,.18);
}
.myword b{color:var(--yellow); font-size:17px; letter-spacing:.5px;}
.myword.evil b{color:var(--red);}
.myword small{display:block; color:#8b8fb8; font-family:'Nunito'; font-size:12px; margin-top:2px;}
.votebtns{display:flex; flex-direction:column; gap:8px; max-width:320px; margin:0 auto;}
.votebtns .posbtn{max-width:none; flex:none; padding:13px 0; font-size:16px;}
.cluelist{display:flex; flex-direction:column; gap:6px; font-size:15px;}
.cluerow{display:flex; align-items:center; gap:10px; background:#eceefc; border-radius:10px; padding:9px 12px;}
.cluerow.turn{background:#fff3d1;}
.cluerow .who{font-family:'Fredoka',sans-serif; font-size:13.5px; color:#565a86; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cluerow .clue{font-weight:800; color:var(--ink);}

/* ---------- Overlays ---------- */
.overlay{
  position:fixed; inset:0; background:rgba(13,15,35,.92); z-index:50;
  display:none; align-items:center; justify-content:center; padding:24px;
  animation:fadein .25s ease;
}
.overlay.show{display:flex;}
.overlay .box{max-width:420px; width:100%; text-align:center;}
.overlay .box .panel{padding:28px 22px;}
.overlay h2{margin:0 0 6px; font-size:26px;}
.overlay p{margin:0 0 18px; color:#565a86; font-size:16px; line-height:1.5;}
.handoff-icon{font-size:52px; margin-bottom:8px;}
.toast{
  position:fixed; top:20%; left:50%; transform:translateX(-50%);
  z-index:60; padding:18px 36px; border-radius:999px; color:#fff;
  font-family:'Fredoka',sans-serif; font-size:26px; box-shadow:var(--shadow);
  background:var(--ink); text-align:center; max-width:90vw;
  display:none; animation:toastin .3s cubic-bezier(.2,1.5,.4,1);
}
.toast.show{display:block;}
.toast.good{background:var(--green);} .toast.bad{background:var(--red);}
@keyframes toastin{from{transform:translateX(-50%) scale(.5); opacity:0;}}

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

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important;}
}
@media (max-width:480px){
  .gamecard{flex-direction:row;}
  .card.md{width:58px;} .card.md .num{font-size:28px;}
  .drawarea{gap:16px;}
  .flip,.deckpile{width:80px;}
}