/* MafiaNoir Carnival - lifted verbatim from the task #2061 carnival mockup,
   then extended below for the real multiplayer screens (task #2064). */

:root{
  --ink:#1b0f30;
  --bg:#2b1b46;
  --bg2:#3d2568;
  --cream:#fff6e9;
  --cream2:#ffe9cf;
  --tang:#ff8a3d;
  --pink:#ff4d9d;
  --lime:#a8e63a;
  --sky:#4fc3ff;
  --sun:#ffd23f;
  --grape:#b98cff;
  --mint:#3ee0b0;
  --red:#ff4d6b;
  --sh:rgba(27,15,48,.9);
  --disp:'Fredoka',system-ui,sans-serif;
  --body:'Nunito',system-ui,-apple-system,sans-serif;
  --spring:cubic-bezier(.34,1.56,.64,1);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%}
body{
  background:var(--bg);
  color:var(--cream);
  font-family:var(--body);
  font-weight:700;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
input{font:inherit}

/* ---------------------------------------------------------- background */
.bg{position:fixed;inset:0;overflow:hidden;z-index:0;background:
  radial-gradient(120% 80% at 50% -10%, #4b2d7d 0%, #2b1b46 55%, #1f1234 100%)}
.blob{position:absolute;border-radius:50%;filter:blur(46px);opacity:.5}
.b1{width:340px;height:340px;background:var(--pink);left:-110px;top:-60px}
.b2{width:300px;height:300px;background:var(--sky);right:-120px;top:22%}
.b3{width:360px;height:360px;background:var(--tang);left:-140px;bottom:-90px}
.b4{width:260px;height:260px;background:var(--grape);right:-90px;bottom:-60px}
.cfetti{position:absolute;opacity:.5}
.cfetti.sq{border-radius:4px}
.cfetti.ci{border-radius:50%}
.cfetti.tr{width:0!important;height:0!important;background:none!important;border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:15px solid var(--sun)}
@keyframes drift{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-16px) rotate(22deg)}}
.cfetti{animation:drift 9s ease-in-out infinite}
.sideRibbon{display:none}

/* ------------------------------------------------------------- phone */
.phone{
  position:relative;z-index:1;
  width:100%;max-width:430px;margin:0 auto;
  height:100dvh;display:flex;flex-direction:column;
  overflow:hidden;
}
#app{
  flex:1;overflow-y:auto;overflow-x:hidden;
  padding:calc(env(safe-area-inset-top) + 16px) 18px calc(env(safe-area-inset-bottom) + 26px);
  scrollbar-width:none;
  transition:padding-top .34s var(--spring);
}
body.hasToast #app{padding-top:calc(env(safe-area-inset-top) + 68px)}
#app::-webkit-scrollbar{display:none}
@media(min-width:900px){
  .phone{border-left:4px solid var(--ink);border-right:4px solid var(--ink);
    box-shadow:0 0 0 4px rgba(255,255,255,.05), 0 30px 90px rgba(0,0,0,.55);
    background:linear-gradient(180deg,rgba(43,27,70,.55),rgba(31,18,52,.75))}
  .sideRibbon{display:block;position:fixed;top:50%;font-family:var(--disp);font-weight:700;
    font-size:80px;letter-spacing:6px;color:rgba(255,255,255,.055);white-space:nowrap;z-index:0;
    pointer-events:none;text-transform:uppercase}
  .sideRibbon.l{left:-40px;transform:translateY(-50%) rotate(-90deg);transform-origin:center}
  .sideRibbon.r{right:-40px;transform:translateY(-50%) rotate(90deg);transform-origin:center}
}

/* ------------------------------------------------------- primitives */
.sticker{
  border:3px solid var(--ink);border-radius:24px;
  box-shadow:0 6px 0 var(--sh);
}
.card{
  background:var(--cream);color:var(--ink);
  border:3px solid var(--ink);border-radius:26px;
  box-shadow:0 7px 0 var(--sh);
  padding:16px 16px;
}
.btn{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;min-height:60px;padding:14px 18px;
  font-family:var(--disp);font-weight:700;font-size:21px;letter-spacing:.3px;
  color:var(--ink);background:var(--sun);
  border:3px solid var(--ink);border-radius:22px;
  box-shadow:0 6px 0 var(--sh);
  transition:transform .12s var(--spring),box-shadow .12s ease,filter .15s ease;
}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(5px);box-shadow:0 1px 0 var(--sh)}
.btn[disabled]{opacity:.5;filter:saturate(.4);pointer-events:none}
.btn.pink{background:var(--pink);color:#fff}
.btn.tang{background:var(--tang)}
.btn.lime{background:var(--lime)}
.btn.sky{background:var(--sky)}
.btn.grape{background:var(--grape);color:#fff}
.btn.ghost{background:rgba(255,255,255,.09);color:var(--cream);border-color:rgba(255,255,255,.3);
  box-shadow:0 5px 0 rgba(0,0,0,.35);font-size:18px;min-height:52px}
.btn.sm{min-height:46px;font-size:16px;border-radius:16px;padding:8px 14px;width:auto;box-shadow:0 4px 0 var(--sh)}
.btn.sm:active{transform:translateY(3px);box-shadow:0 1px 0 var(--sh)}

.pill{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 14px;border-radius:999px;border:3px solid var(--ink);
  background:var(--cream);color:var(--ink);
  font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:.4px;
  box-shadow:0 4px 0 var(--sh);text-transform:uppercase;
}
.h1{font-family:var(--disp);font-weight:700;font-size:38px;line-height:.95;margin:0;letter-spacing:-.5px}
.h2{font-family:var(--disp);font-weight:700;font-size:27px;line-height:1;margin:0}
.h3{font-family:var(--disp);font-weight:600;font-size:19px;line-height:1.1;margin:0}
.sub{font-size:15px;line-height:1.4;font-weight:700;opacity:.85;margin:0}
.tiny{font-size:12.5px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;opacity:.7}
.stack{display:flex;flex-direction:column}
.g6{gap:6px}.g8{gap:8px}.g10{gap:10px}.g12{gap:12px}.g14{gap:14px}.g18{gap:18px}
.row{display:flex;align-items:center}
.center{text-align:center}
.mt6{margin-top:6px}.mt10{margin-top:10px}.mt14{margin-top:14px}.mt20{margin-top:20px}

/* topbar */
.top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.chipR{background:var(--sun)}

/* ------------------------------------------------------- characters */
.chr{display:block;width:100%;height:auto;overflow:visible}
.chrBox{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px}
.chrArt{position:relative;width:66px;animation:bob 2.8s ease-in-out infinite}
.chrArt.ghosty{animation:float 3.4s ease-in-out infinite;opacity:.6}
.chrArt.slumped{animation:none;transform:rotate(9deg) translateY(4px);opacity:.72;filter:saturate(.55)}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-6px) rotate(1.5deg)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
.nameTag{
  font-family:var(--disp);font-weight:600;font-size:12.5px;color:var(--ink);
  background:var(--cream);border:2.5px solid var(--ink);border-radius:999px;
  padding:2px 9px;box-shadow:0 3px 0 var(--sh);max-width:82px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;
}
.nameTag.you{background:var(--sun)}
.nameTag.dead{background:#c6bcd4;color:#4a3b63;text-decoration:line-through}

@keyframes popIn{0%{transform:scale(0) rotate(-25deg);opacity:0}
  60%{transform:scale(1.18) rotate(6deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}
.pop{animation:popIn .46s var(--spring) both}
@keyframes puff{0%{transform:translate(-50%,6px) scale(.4);opacity:0}
  25%{transform:translate(-50%,-6px) scale(1.1);opacity:1}
  70%{transform:translate(-50%,-10px) scale(1);opacity:1}
  100%{transform:translate(-50%,-22px) scale(.9);opacity:0}}
.bubble{
  position:absolute;left:50%;top:-14px;transform:translate(-50%,0);
  background:var(--lime);color:var(--ink);border:2.5px solid var(--ink);
  border-radius:999px;padding:3px 10px;font-family:var(--disp);font-weight:700;
  font-size:12px;white-space:nowrap;box-shadow:0 3px 0 var(--sh);
  animation:puff 1.5s ease-out forwards;pointer-events:none;z-index:5;
}
@keyframes wobble{0%{transform:rotate(0)}20%{transform:rotate(-9deg) scale(1.09)}
  45%{transform:rotate(7deg) scale(1.06)}70%{transform:rotate(-4deg)}100%{transform:rotate(0) scale(1)}}
.wob{animation:wobble .5s var(--spring)}
@keyframes zzz{0%{transform:translate(0,0) scale(.6);opacity:0}
  25%{opacity:1}100%{transform:translate(16px,-30px) scale(1.2);opacity:0}}
.zzz{position:absolute;right:-4px;top:-6px;font-family:var(--disp);font-weight:700;
  font-size:17px;color:var(--sky);animation:zzz 2.6s ease-out infinite;pointer-events:none}
.zzz.z2{animation-delay:.85s;font-size:14px}
.zzz.z3{animation-delay:1.7s;font-size:12px}

/* ------------------------------------------------------------ home */
.logoWrap{position:relative;padding:6px 0 2px;text-align:center}
.logo{display:flex;justify-content:center;gap:3px}
.logo span{
  font-family:var(--disp);font-weight:700;font-size:52px;line-height:1;
  color:var(--cream);background:var(--pink);
  border:3.5px solid var(--ink);border-radius:14px;padding:2px 8px 6px;
  box-shadow:0 6px 0 var(--sh);display:inline-block;
}
.logo span:nth-child(2){background:var(--tang);transform:rotate(-4deg)}
.logo span:nth-child(3){background:var(--sun);color:var(--ink)}
.logo span:nth-child(4){background:var(--lime);color:var(--ink);transform:rotate(4deg)}
.logo span:nth-child(5){background:var(--sky);color:var(--ink)}
.logoTag{
  position:absolute;right:-2px;top:-14px;transform:rotate(12deg);z-index:3;
  background:var(--grape);color:#fff;border:3px solid var(--ink);border-radius:12px;
  padding:3px 11px;font-family:var(--disp);font-weight:700;font-size:16px;
  box-shadow:0 4px 0 var(--sh);
}
.crew{display:flex;justify-content:center;align-items:flex-end;margin:4px 0 0}
.crew .chrArt{width:60px;margin:0 -7px}
.nameIn{
  width:100%;min-height:58px;padding:12px 16px;
  font-family:var(--disp);font-weight:600;font-size:21px;color:var(--ink);
  background:var(--cream);border:3px solid var(--ink);border-radius:20px;
  box-shadow:inset 0 3px 0 rgba(27,15,48,.13);outline:none;text-align:center;
}
.nameIn::placeholder{color:rgba(27,15,48,.35)}
.nameIn:focus{background:#fff;box-shadow:inset 0 3px 0 rgba(27,15,48,.13),0 0 0 4px rgba(255,210,63,.5)}
.linkBtn{background:none;border:0;color:var(--cream);opacity:.75;font-size:14px;font-weight:800;
  text-decoration:underline;text-underline-offset:3px;padding:10px;min-height:44px}
.linkBtn:hover{opacity:1}

/* ----------------------------------------------------------- lobby */
.tableWrap{position:relative;height:322px;margin:2px -4px 0}
.tableTop{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:172px;height:118px;border-radius:50%;
  background:radial-gradient(120% 120% at 40% 25%, #ffb35c 0%, var(--tang) 55%, #e2662a 100%);
  border:3.5px solid var(--ink);box-shadow:0 9px 0 var(--sh);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
}
.tableTop .tiny{color:rgba(27,15,48,.75);opacity:1;font-size:10.5px}
.codeBig{font-family:var(--disp);font-weight:700;font-size:37px;color:var(--ink);
  letter-spacing:3px;line-height:1}
.seat{position:absolute;transform:translate(-50%,-50%)}
.seat .chrArt{width:58px}
.seat.tight .chrArt{width:50px}
.seat.tight .nameTag{font-size:11px;max-width:66px}

.stepRow{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 10px;border-radius:18px;background:rgba(255,255,255,.07);
  border:2.5px solid rgba(255,255,255,.14)}
.stepRow .rn{display:flex;align-items:center;gap:9px;min-width:0}
.roleDot{width:30px;height:30px;border-radius:10px;border:2.5px solid var(--ink);flex:none;
  display:flex;align-items:center;justify-content:center;font-family:var(--disp);
  font-weight:700;font-size:15px;color:var(--ink)}
.stepBtns{display:flex;align-items:center;gap:7px;flex:none}
.stepBtn{width:44px;height:44px;border-radius:14px;border:3px solid var(--ink);
  background:var(--cream);color:var(--ink);font-family:var(--disp);font-weight:700;font-size:23px;
  display:flex;align-items:center;justify-content:center;box-shadow:0 4px 0 var(--sh);
  transition:transform .12s var(--spring),box-shadow .12s}
.stepBtn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--sh)}
.stepVal{font-family:var(--disp);font-weight:700;font-size:23px;min-width:22px;text-align:center}

/* ----------------------------------------------------------- setup */
.roleCard{display:flex;gap:12px;align-items:center;padding:11px 13px;border-radius:22px;
  background:var(--cream);border:3px solid var(--ink);box-shadow:0 6px 0 var(--sh);color:var(--ink)}
.roleCard .chrArt{width:52px;flex:none;animation-duration:3.4s}
.cntBadge{margin-left:auto;flex:none;min-width:40px;height:40px;border-radius:13px;
  border:3px solid var(--ink);display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-weight:700;font-size:19px;color:var(--ink);box-shadow:0 3px 0 var(--sh)}

/* ---------------------------------------------------------- reveal */
.scWrap{position:relative;width:100%;max-width:300px;margin:0 auto;aspect-ratio:5/6;
  border-radius:26px;border:3.5px solid var(--ink);box-shadow:0 8px 0 var(--sh);overflow:hidden;
  background:var(--cream);touch-action:none}
.scUnder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:9px;padding:18px;text-align:center;color:var(--ink)}
#scCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;
  transition:opacity .45s ease,transform .45s var(--spring);touch-action:none;cursor:grab}
#scCanvas.gone{opacity:0;transform:scale(1.08);pointer-events:none}
@keyframes cardPop{0%{transform:scale(1)}45%{transform:scale(1.07) rotate(1.5deg)}100%{transform:scale(1)}}
.scWrap.done{animation:cardPop .55s var(--spring)}
.teamTag{display:inline-block;padding:4px 13px;border-radius:999px;border:3px solid var(--ink);
  font-family:var(--disp);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.8px;
  box-shadow:0 3px 0 var(--sh)}
.roleBig{font-family:var(--disp);font-weight:700;font-size:44px;line-height:.95;letter-spacing:-1px}
.infoRow{display:flex;gap:11px;align-items:flex-start;padding:11px 13px;border-radius:18px;
  background:rgba(255,255,255,.08);border:2.5px solid rgba(255,255,255,.16)}
.infoIco{width:34px;height:34px;flex:none;border-radius:11px;border:2.5px solid var(--ink);
  display:flex;align-items:center;justify-content:center;font-size:17px}
@keyframes riseIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.rise{animation:riseIn .42s var(--spring) both}

/* ----------------------------------------------------------- night */
.nightSky{position:relative;border-radius:26px;border:3px solid var(--ink);overflow:hidden;
  background:linear-gradient(180deg,#150c28 0%,#241546 60%,#2f1a55 100%);
  box-shadow:0 7px 0 var(--sh);padding:20px 16px 18px;text-align:center}
.star{position:absolute;width:5px;height:5px;border-radius:50%;background:#fff;opacity:.65}
.moon{position:absolute;right:16px;top:14px;width:46px;height:46px;border-radius:50%;
  background:var(--sun);border:3px solid var(--ink);box-shadow:0 4px 0 var(--sh)}
.pickGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pickGrid.det{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42'%3E%3Ccircle cx='17' cy='17' r='11' fill='rgba(79,195,255,.3)' stroke='%231b0f30' stroke-width='4'/%3E%3Cpath d='M25 25 L37 37' stroke='%231b0f30' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E") 17 17, pointer}
.pk{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:9px 4px 8px;border-radius:20px;border:3px solid transparent;background:rgba(255,255,255,.06);
  transition:transform .18s var(--spring),background .18s,border-color .18s;min-height:44px}
.pk .chrArt{width:56px}
.pk:active{transform:scale(.95)}
.pk.on{background:var(--sun);border-color:var(--ink);box-shadow:0 5px 0 var(--sh)}
.pk.on .nameTag{background:#fff}
.tick{position:absolute;right:2px;top:2px;width:26px;height:26px;border-radius:50%;
  background:var(--lime);border:3px solid var(--ink);display:flex;align-items:center;
  justify-content:center;font-size:14px;color:var(--ink);animation:popIn .35s var(--spring) both}
.resultBox{padding:15px;border-radius:22px;border:3px solid var(--ink);box-shadow:0 6px 0 var(--sh);
  text-align:center;color:var(--ink);animation:popIn .5s var(--spring) both}

/* ------------------------------------------------------------- day */
.chat{display:flex;gap:10px;align-items:flex-end}
.chat .chrArt{width:44px;flex:none;animation-duration:3.2s}
.bub{position:relative;background:var(--cream);color:var(--ink);border:3px solid var(--ink);
  border-radius:18px;padding:9px 13px;font-size:14.5px;font-weight:700;line-height:1.3;
  box-shadow:0 5px 0 var(--sh);flex:1}
.bub:before{content:'';position:absolute;left:-9px;bottom:11px;width:12px;height:12px;
  background:var(--cream);border-left:3px solid var(--ink);border-bottom:3px solid var(--ink);
  transform:rotate(45deg);border-radius:0 0 0 4px}
.bub .who{display:block;font-family:var(--disp);font-weight:700;font-size:11.5px;
  text-transform:uppercase;letter-spacing:.7px;opacity:.55;margin-bottom:1px}
.voteGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.vt{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:10px 4px;border-radius:20px;border:3px solid transparent;background:rgba(255,255,255,.06);
  transition:transform .18s var(--spring),background .18s,border-color .18s}
.vt .chrArt{width:56px}
.vt:active{transform:scale(.95)}
.vt.on{background:var(--pink);border-color:var(--ink);box-shadow:0 5px 0 var(--sh)}
@keyframes tokDrop{0%{transform:translate(-50%,-46px) scale(.5) rotate(-40deg);opacity:0}
  55%{transform:translate(-50%,4px) scale(1.15) rotate(8deg);opacity:1}
  75%{transform:translate(-50%,-4px) scale(1)}100%{transform:translate(-50%,0) scale(1) rotate(0);opacity:1}}
.token{position:absolute;left:50%;top:-9px;width:32px;height:32px;border-radius:50%;
  border:3px solid var(--ink);background:var(--sun);box-shadow:0 3px 0 var(--sh);
  display:flex;align-items:center;justify-content:center;font-family:var(--disp);
  font-weight:700;font-size:10px;color:var(--ink);animation:tokDrop .55s var(--spring) both;z-index:3}
.ghostBanner{display:flex;align-items:center;gap:10px;padding:10px 13px;border-radius:18px;
  background:rgba(185,140,255,.2);border:3px dashed var(--grape);color:var(--cream);font-size:14px}

/* ---------------------------------------------------------- result */
@keyframes outSpin{0%{transform:rotate(0) translateY(0)}
  35%{transform:rotate(-16deg) translateY(-14px) scale(1.06)}
  70%{transform:rotate(14deg) translateY(6px)}100%{transform:rotate(8deg) translateY(10px)}}
.outChar{animation:outSpin .95s var(--spring) forwards;animation-delay:.15s}
.burstTag{position:absolute;left:50%;top:-6px;transform:translateX(-50%) rotate(-7deg);
  background:var(--red);color:#fff;font-family:var(--disp);font-weight:700;font-size:22px;
  padding:5px 18px;border:3.5px solid var(--ink);border-radius:14px;box-shadow:0 5px 0 var(--sh);
  animation:popIn .5s var(--spring) .5s both;z-index:4;white-space:nowrap}
.tallyRow{display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:16px;
  background:rgba(255,255,255,.07);border:2.5px solid rgba(255,255,255,.13)}
.tallyRow .chrArt{width:40px;flex:none;animation-duration:3.6s}
.chips{display:flex;gap:-4px;margin-left:auto}
.chip{width:17px;height:17px;border-radius:50%;border:2.5px solid var(--ink);
  background:var(--sun);margin-left:-5px;box-shadow:0 2px 0 var(--sh);
  animation:popIn .34s var(--spring) both}
.roll{display:inline-block;height:1em;overflow:hidden;vertical-align:-.12em;
  font-family:var(--disp);font-weight:700;font-size:22px;line-height:1;min-width:.7em;text-align:center}
.rollStrip{display:block;transition:transform .95s var(--spring)}
.rollStrip>i{display:block;height:1em;line-height:1;font-style:normal}

/* ------------------------------------------------------------- end */
.hat{position:absolute;left:50%;top:-16px;transform:translateX(-50%);width:38px;z-index:2}
.podium{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}
.podium .chrBox{position:relative}

/* --------------------------------------------------------- overlays */
#toastHost{position:fixed;left:0;right:0;top:calc(env(safe-area-inset-top) + 14px);
  z-index:60;display:flex;justify-content:center;pointer-events:none;padding:0 16px}
@keyframes toastIn{0%{transform:translateY(-40px) scale(.7) rotate(-6deg);opacity:0}
  60%{transform:translateY(6px) scale(1.06) rotate(2deg);opacity:1}100%{transform:none;opacity:1}}
.toast{pointer-events:none;display:inline-flex;align-items:center;gap:8px;
  padding:9px 17px;border-radius:999px;border:3px solid var(--ink);
  background:var(--lime);color:var(--ink);font-family:var(--disp);font-weight:700;font-size:15.5px;
  box-shadow:0 5px 0 var(--sh);animation:toastIn .5s var(--spring) both;max-width:100%}
.toast.bad{background:var(--red);color:#fff}
.toast.join{background:var(--sky)}
#cfx{position:fixed;inset:0;z-index:70;pointer-events:none}
.sheetBack{position:fixed;inset:0;z-index:80;background:rgba(15,8,28,.6);
  opacity:0;pointer-events:none;transition:opacity .28s ease}
.sheetBack.open{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:81;max-width:430px;margin:0 auto;
  background:var(--bg2);border:4px solid var(--ink);border-bottom:0;
  border-radius:32px 32px 0 0;box-shadow:0 -10px 0 rgba(27,15,48,.5);
  padding:14px 18px calc(env(safe-area-inset-bottom) + 20px);
  transform:translateY(102%);transition:transform .4s var(--spring);
  max-height:88dvh;overflow-y:auto}
.sheet.open{transform:none}
.grab{width:56px;height:6px;border-radius:99px;background:rgba(255,255,255,.3);margin:2px auto 12px}
.step{display:flex;gap:12px;align-items:center}
.step .chrArt{width:48px;flex:none;animation-duration:3.6s}
.stepN{font-family:var(--disp);font-weight:700;font-size:13px;color:var(--ink);
  background:var(--sun);border:2.5px solid var(--ink);border-radius:999px;padding:1px 9px;
  display:inline-block;margin-bottom:2px}

/* ============================================================================
   Task #2064 additions - real multiplayer screens.
   ========================================================================== */

/* ------------------------------------------------- code-join keypad screen */
.codeIn{
  width:100%;min-height:74px;padding:10px 16px;
  font-family:var(--disp);font-weight:700;font-size:40px;letter-spacing:12px;
  color:var(--ink);background:var(--cream);text-transform:uppercase;
  border:3px solid var(--ink);border-radius:22px;
  box-shadow:inset 0 3px 0 rgba(27,15,48,.13);outline:none;text-align:center;
}
.codeIn::placeholder{color:rgba(27,15,48,.22);letter-spacing:10px}
.codeIn:focus{background:#fff;box-shadow:inset 0 3px 0 rgba(27,15,48,.13),0 0 0 4px rgba(255,210,63,.5)}
.codeSlots{display:flex;justify-content:center;gap:8px}
.codeSlot{
  width:52px;height:64px;border-radius:16px;border:3px solid var(--ink);
  background:rgba(255,255,255,.1);box-shadow:0 5px 0 var(--sh);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-weight:700;font-size:32px;color:var(--cream);
  transition:background .18s,transform .18s var(--spring);
}
.codeSlot.filled{background:var(--sun);color:var(--ink)}
.codeSlot.cur{transform:translateY(-4px);border-color:var(--sun)}

/* copyable room code */
.codeCopy{position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);
  background:var(--cream);color:var(--ink);border:2.5px solid var(--ink);border-radius:999px;
  padding:3px 12px;font-family:var(--disp);font-weight:700;font-size:12px;
  box-shadow:0 3px 0 var(--sh);white-space:nowrap;z-index:4}

/* --------------------------------------------------- the one role-card block
   Mike's note: the old three loose rows were different sizes with weak icons
   that clashed on the yellow Villager card. This is ONE ink-dark panel, so the
   role accent never sits next to the role background colour and the contrast is
   identical for all six roles. Rows are forced to an equal height. */
.brief{
  border:3px solid var(--ink);border-radius:24px;overflow:hidden;
  background:var(--ink);box-shadow:0 7px 0 var(--sh);
}
.briefTop{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 14px;border-bottom:3px solid rgba(255,246,233,.14);
}
.briefTop .lbl{font-family:var(--disp);font-weight:700;font-size:14px;
  letter-spacing:1.4px;text-transform:uppercase;color:rgba(255,246,233,.62)}
.briefChip{
  font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.6px;
  text-transform:uppercase;color:var(--ink);border:2.5px solid var(--ink);
  border-radius:999px;padding:2px 12px;
}
/* grid-auto-rows:1fr forces all three tracks to the tallest one, so the block
   never reads as "three different sized sections" whatever the role copy is. */
.briefRows{display:grid;grid-auto-rows:1fr}
.briefRow{
  display:grid;grid-template-columns:52px 1fr;align-items:center;gap:12px;
  min-height:80px;padding:12px 14px;color:var(--cream);box-sizing:border-box;
}
.briefRow + .briefRow{border-top:2px dashed rgba(255,246,233,.16)}
.briefIco{
  width:52px;height:52px;border-radius:16px;border:3px solid rgba(27,15,48,.85);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 0 rgba(0,0,0,.45);
}
.briefIco svg{width:28px;height:28px;display:block}
.briefRow .k{font-family:var(--disp);font-weight:700;font-size:12.5px;
  letter-spacing:1.3px;text-transform:uppercase;color:rgba(255,246,233,.55);margin-bottom:2px}
.briefRow .v{font-size:14.5px;font-weight:800;line-height:1.32;color:var(--cream)}

/* ------------------------------------------------------------- silence card
   The Boxer's whole point: everybody must SEE who cannot talk today. */
.silence{
  display:flex;align-items:center;gap:12px;padding:13px 15px;
  border-radius:22px;border:3px solid var(--ink);
  background:linear-gradient(180deg,var(--tang),#f2762a);color:var(--ink);
  box-shadow:0 6px 0 var(--sh);
}
.silence .glove{width:48px;flex:none}
.silence .h3{font-size:19px}
.silence.you{background:linear-gradient(180deg,var(--red),#e03554);color:#fff}
@keyframes shakeIn{0%{transform:translateX(0) scale(.9);opacity:0}
  30%{transform:translateX(-6px) scale(1.04);opacity:1}
  55%{transform:translateX(6px) scale(1.02)}80%{transform:translateX(-3px)}100%{transform:none}}
.silence{animation:shakeIn .55s var(--spring) both}
.mutedTag{background:var(--tang)!important;color:var(--ink)!important}

/* -------------------------------------------------------- waiting-on-others */
.waitBox{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:16px;border-radius:22px;border:3px dashed rgba(255,255,255,.24);
  background:rgba(255,255,255,.05);text-align:center;
}
.dots{display:flex;gap:6px}
.dots i{width:10px;height:10px;border-radius:50%;background:var(--sun);
  animation:bounceDot 1.05s ease-in-out infinite}
.dots i:nth-child(2){animation-delay:.16s;background:var(--pink)}
.dots i:nth-child(3){animation-delay:.32s;background:var(--sky)}
@keyframes bounceDot{0%,60%,100%{transform:translateY(0);opacity:.55}30%{transform:translateY(-8px);opacity:1}}

.readyBar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}
.readyPip{width:16px;height:16px;border-radius:50%;border:2.5px solid var(--ink);
  background:rgba(255,255,255,.2);box-shadow:0 2px 0 var(--sh)}
.readyPip.on{background:var(--lime)}

/* connection dot */
.liveDot{width:9px;height:9px;border-radius:50%;background:var(--lime);
  box-shadow:0 0 0 3px rgba(168,230,58,.25);flex:none}
.liveDot.off{background:var(--red);box-shadow:0 0 0 3px rgba(255,77,107,.25)}

/* host-only helper strip */
.hostStrip{display:flex;gap:8px}
.hostStrip .btn{flex:1}

.notes{display:flex;flex-direction:column;gap:7px}
.noteRow{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:14px;
  background:rgba(255,255,255,.08);border:2.5px solid rgba(255,255,255,.14);font-size:13.5px;font-weight:800}
.noteRow .vd{margin-left:auto;font-family:var(--disp);font-size:12px;padding:2px 9px;border-radius:999px;
  border:2.5px solid var(--ink);color:var(--ink)}

.mateStrip{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center}