/* MatchPoint · first-time setup "Who's playing?" (12 Nov review). One question per screen, a cast host asking it, big tappable answers,
   the app's orange Continue at the bottom; answers you pick go blue. */
.su{position:absolute;inset:0;z-index:90;display:flex;flex-direction:column;background:#fff;font-family:Nunito,system-ui,sans-serif;color:#191919;
  opacity:0;transform:translateY(14px);transition:opacity .25s,transform .3s cubic-bezier(.2,.8,.2,1)}
.su.on{opacity:1;transform:none}
.su-top{flex:none;display:flex;align-items:center;gap:14px;padding:calc(env(safe-area-inset-top,0px) + 14px) 16px 6px}
.su-x,.su-x0{flex:none;width:40px;height:40px}
.su-x{padding:0;border:0;border-radius:50%;background:none;display:grid;place-items:center;color:#AFAFAF;cursor:pointer}
.su-x svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.su-bar{flex:1;height:16px;border-radius:99px;background:#E5E5E5;overflow:hidden}
.su-bar u{display:block;height:100%;border-radius:inherit;background:#3B82F6;box-shadow:inset 0 4px 0 rgba(255,255,255,.28);transition:width .35s cubic-bezier(.2,.8,.2,1)}
.su-b{flex:1;overflow-y:auto;padding:14px 16px 18px}
.su-b.su-new{animation:su-in .3s cubic-bezier(.2,.8,.2,1)}   /* only when the question changes, not on every tap */
@keyframes su-in{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.su-host{display:flex;align-items:flex-end;gap:10px;margin:4px 0 22px}
.su-host img{flex:none;width:104px;height:104px;object-fit:contain}
.su-bub{position:relative;flex:1;margin:0 0 26px;padding:13px 15px;border:2px solid #E5E5E5;border-radius:16px;background:#fff;font-size:18px;font-weight:800;line-height:1.3}
.su-bub::before{content:"";position:absolute;left:-9px;bottom:16px;width:14px;height:14px;background:#fff;border-left:2px solid #E5E5E5;border-bottom:2px solid #E5E5E5;transform:rotate(45deg)}
.su-l{display:grid;gap:10px}
.su-l2{grid-template-columns:1fr 1fr}
.su-l2 .su-o:last-child{grid-column:1/-1}
.su-o{display:flex;align-items:center;gap:12px;width:100%;min-height:58px;padding:12px 16px;border:2px solid #E5E5E5;border-radius:16px;background:#fff;box-shadow:0 3px 0 #E5E5E5;
  text-align:left;font:inherit;color:inherit;cursor:pointer;transition:background-color .15s,border-color .15s}
.su-o:active{transform:translateY(2px);box-shadow:0 1px 0 #E5E5E5}
.su-o span{display:flex;flex-direction:column;gap:2px;min-width:0}
.su-o b{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:17px;font-weight:800}
.su-o small{font-size:14px;font-weight:600;color:#777;line-height:1.3}
.su-o em{font-style:normal;font-size:11px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;color:#2563EB;background:#DBEAFE;padding:3px 8px;border-radius:99px}
.su-o.on{border-color:#3B82F6;background:#EFF6FF;box-shadow:0 3px 0 #93C5FD}
.su-o.on b{color:#1D4ED8}
.su-ball{width:22px;height:22px;border-radius:50%;flex:none;box-shadow:inset -3px -3px 0 rgba(0,0,0,.12)}
.su-ball.b0{background:#EF4444}.su-ball.b1{background:#F97316}.su-ball.b2{background:#22C55E}.su-ball.b3{background:#E6F35A}
.su-in{width:100%;height:58px;padding:0 16px;border:2px solid #E5E5E5;border-radius:16px;background:#F7F7F7;font:inherit;font-size:20px;font-weight:800;color:#191919;outline:none}
.su-in:focus{border-color:#3B82F6;background:#fff}
.su-k{margin:18px 0 8px;font-size:15px;font-weight:800;color:#555}
.su-g{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.su-g button{height:54px;border:2px solid #E5E5E5;border-radius:14px;background:#fff;box-shadow:0 3px 0 #E5E5E5;font:inherit;font-size:20px;font-weight:900;color:#3C3C3C;cursor:pointer}
.su-g button.on{border-color:#3B82F6;background:#EFF6FF;color:#1D4ED8;box-shadow:0 3px 0 #93C5FD}
.su-g .su-gw{grid-column:span 4;font-size:17px}
.su-f{margin:14px 2px 0;font-size:14px;font-weight:600;color:#888;line-height:1.4}
.su-more{display:block;margin:14px auto 0;padding:8px 12px;border:0;background:none;font:inherit;font-size:15px;font-weight:900;color:#2563EB;letter-spacing:.02em;cursor:pointer}
.su-av{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.su-av button{aspect-ratio:1;padding:0;border:3px solid transparent;border-radius:50%;background:#F2F4F7;overflow:hidden;cursor:pointer}
.su-av button.on{border-color:#3B82F6;box-shadow:0 0 0 3px #DBEAFE}
.su-av img{width:100%;height:100%;object-fit:cover;display:block}
.su-done{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:6vh}
.su-dc{width:190px;height:190px;object-fit:contain;animation:su-pop .5s cubic-bezier(.2,1.4,.4,1) both}
@keyframes su-pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.su-done h2{margin:14px 0 8px;font-size:28px;font-weight:900;line-height:1.15}
.su-done p{margin:0;max-width:300px;font-size:17px;font-weight:600;color:#666;line-height:1.45}
.su-go{display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;padding:0 20px;border:0;border-radius:14px;background:#FC9B00;box-shadow:0 3px 0 #DC8000;
  font:inherit;font-size:18px;font-weight:800;color:#fff;letter-spacing:.02em;cursor:pointer}   /* the app's own orange main button (va.css) */
.su-go:active{transform:translateY(2px);box-shadow:0 1px 0 #DC8000}
.su-go:disabled{background:#E5E5E5;box-shadow:0 3px 0 #D0D0D0;color:#AFAFAF;cursor:default;transform:none}
.su-ft{flex:none;padding:12px 16px calc(env(safe-area-inset-bottom,0px) + 18px);border-top:2px solid #F0F0F0;background:#fff}
/* Switch player › Add a player */
.who-add{display:flex;align-items:center;gap:12px;width:100%;margin:10px 0 4px;padding:12px 14px;border:2px dashed #C9D3E3;border-radius:16px;background:#F8FAFF;font:inherit;text-align:left;color:#1D4ED8;cursor:pointer}
.who-add svg{flex:none;width:30px;height:30px;padding:6px;border-radius:50%;background:#3B82F6;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round}
.who-add span{display:flex;flex-direction:column}
.who-add b{font-size:16px;font-weight:900}
.who-add small{font-size:13px;font-weight:600;color:#6B7280}