/* Lobby proportions and card/button styling follow Blast. */
:root { --accent: #29b7b0; --accent2: #137d91; }
button,input { font: inherit; }
button { padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: #303a43; color: var(--ink); cursor: pointer; font-weight: 700; min-height: 44px; }
button:disabled { opacity: .42; cursor: default; }
button:focus-visible,input:focus-visible { outline: 3px solid #67e8f9; outline-offset: 3px; }
.primary { background: #147f85; border-color: #29b7b0; }
.danger { background: #aa303e; border-color: #ef6877; }
.wide { width: 100%; margin-top: 22px; }
.muted { color: var(--muted); font-size: 13px; line-height: 1.6; }
.eyebrow { font-size: 10px; font-weight: 800; letter-spacing: .14em; color: #60d4cf; }
h1,h2 { font-family: 'Baloo 2',sans-serif; line-height: 1.2; }
h1 { font-size: 38px; } h2 { font-size: 24px; }
.brand { font-size: 15px; font-weight: 800; letter-spacing: .06em; }
.lobby-card { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 28px 20px; text-align: center; margin-top: 12px; }
.lobby-card p { margin-top: 12px; } #joinStatus { min-height: 18px; font-size: 13px; }
.infiltrado-lobby-logo { height: 56px; width: auto; margin-bottom: 10px; }
.legend { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 20px; margin: 12px 0 24px; }
.legend p { margin-top: 12px; font-size: 13px; line-height: 1.6; color: var(--muted); }
#gameView { position: fixed; inset: 0; background: #0c0f12; z-index: 100; overflow: hidden; }
#gameCanvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#hudTop { position: absolute; top: max(12px,env(safe-area-inset-top)); left: 12px; right: 12px; display: flex; justify-content: space-between; gap: 12px; pointer-events: none; }
#hudTop button { pointer-events: auto; align-self: flex-start; }
.hud-panel { background: #182129ed; border: 1px solid var(--line); padding: 12px; border-radius: 12px; font-size: 12px; }
#hudTop .hud-panel { display: flex; flex-direction: column; gap: 5px; text-align: right; }
#taskHud { position: absolute; top: 115px; left: 12px; width: 210px; max-height: 30vh; overflow: auto; }
#taskHud h2 { font: bold 13px 'Sora',sans-serif; } #taskList { padding-left: 16px; line-height: 1.8; margin-top: 6px; } .done { text-decoration: line-through; color: #60d4cf; }
progress { width: 100%; height: 10px; accent-color: #29b7b0; margin-top: 8px; }
#notice { position: absolute; top: 75px; left: 50%; transform: translateX(-50%); max-width: 70%; background: #182129ed; padding: 8px 12px; border-radius: 8px; font-size: 12px; text-align: center; pointer-events: none; } #notice:empty { display: none; }
#hudBottom { position: absolute; bottom: max(16px,env(safe-area-inset-bottom)); left: max(16px,env(safe-area-inset-left)); right: max(16px,env(safe-area-inset-right)); display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; pointer-events: none; }
#moveStick { width: 112px; height: 112px; border-radius: 50%; background: #ffffff12; border: 2px solid #ffffff35; flex-shrink: 0; position: relative; pointer-events: auto; touch-action: none; user-select: none; }
#stickNub { position: absolute; width: 42px; height: 42px; left: 33px; top: 33px; border-radius: 50%; background: #6d919c; pointer-events: none; }
.stick-label { position: absolute; bottom: 8px; width: 100%; text-align: center; font-size: 9px; color: #abc1c8; }
#actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; max-width: 360px; pointer-events: auto; } #actions button { font-size: 12px; }
#taskWork { grid-column: 1/-1; background: #182129; padding: 10px; font-size: 12px; border-radius: 12px; } #taskWork button { padding: 4px 10px; margin-top: 6px; }
.overlay { position: absolute; inset: 0; z-index: 10; background: #090e15dc; display: flex; align-items: center; justify-content: center; padding: max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom)); overflow: auto; }
.panel { width: 100%; max-width: 650px; max-height: 100%; overflow: auto; background: var(--surface); border: 1px solid #3d4c59; border-radius: 22px; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.panel > * { flex-shrink: 0; }
.player-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.player-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px 8px; display: flex; align-items: center; flex-direction: column; gap: 8px; text-align: center; min-width: 0; font-size: 12px; }
.player-card span { overflow-wrap: anywhere; } .player-card small { color: var(--muted); } .player-card.dead { opacity: .55; }
.player-dot { display: block; width: 30px; height: 30px; border-radius: 50%; background: #728da6; border: 2px solid #ffffff65; }
.color-picker { display: grid; grid-template-columns: repeat(auto-fill,36px); gap: 8px; justify-content: center; }
.color-swatch { position: relative; width: 36px; height: 36px; min-height: 0; border-radius: 10px; border: 2px solid #ffffff30; padding: 0; cursor: pointer; background-color: #121a21; background-repeat: no-repeat; background-size: 252px 36px; background-position: 0 0; }
.color-swatch.selected { border-color: #fff; box-shadow: 0 0 0 2px #60d4cf; }
.color-swatch-star { position: absolute; top: -6px; right: -6px; font-size: 13px; line-height: 1; filter: drop-shadow(0 1px 1px #000a); pointer-events: none; }
.color-swatch:disabled { opacity: .3; cursor: not-allowed; }
#spectatorLabel:empty { display: none; }
/* Collapsed by default behind lobby-panel-toggle -- the waiting room has
   real art behind it (sofas, promo banners, the POP floor logo), and on a
   real phone the browser's own address bar already eats into the viewport,
   so an always-open panel covered most of what little room was left. Opens
   on tap; stacked bottom-up, clear of #hudBottom's move stick: lobby-hud
   (roster + actions), lobby-dock (chat) above that. */
.lobby-panel-toggle { position: absolute; bottom: 148px; left: 12px; right: 12px; z-index: 6; min-height: 0; padding: 8px 14px; font-size: 13px; background: #182129f2; }
.lobby-hud { position: absolute; bottom: 148px; left: 12px; right: 12px; z-index: 6; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; max-height: 38vh; overflow-y: auto; background: #182129f2; }
.lobby-hud p { margin: 0; }
.lobby-hud-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lobby-hud-head #roomLabel { font-size: 12px; }
.lobby-hud #lobbyHint { font-size: 12px; }
.lobby-roster { display: flex; flex-wrap: wrap; gap: 6px; }
.lobby-roster.collapsed { display: none; }
#lobbyRosterToggle { min-height: 0; padding: 2px 8px; font-size: 11px; flex-shrink: 0; }
.lobby-roster .player-card { flex-direction: row; padding: 4px 10px 4px 6px; gap: 6px; border-radius: 999px; font-size: 12px; }
.lobby-roster .player-dot { width: 18px; height: 18px; border-width: 1px; }
.lobby-roster .player-card small { color: var(--muted); }
.lobby-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.lobby-actions button { min-height: 38px; padding: 8px 12px; font-size: 13px; }
/* A small corner widget, not a bar across the middle -- tucked under the
   top-right status panel (same corner), so the center of the room (where
   everyone actually walks) stays clear instead of being cut in half by a
   chat log. Explicit live feedback: "deixar a parte do meio livre, correr
   pra lá e pra cá". */
.lobby-dock { position: absolute; top: 112px; right: 12px; left: auto; bottom: auto; z-index: 6; display: flex; flex-direction: column; gap: 6px; width: min(220px, 50vw); }
.lobby-dock .lobby-chat-log { height: 110px; background: #121a21e6; }
.lobby-dock .lobby-chat-form { flex-direction: column; }
.lobby-dock #lobbyChatSend { padding: 6px; }
#avatarScreen { z-index: 150; }
#missionOverlay { position: fixed; top: 110px; right: 8px; left: auto; bottom: auto; width: min(320px, calc(100vw - 16px)); height: min(400px, 56vh); z-index: 160; padding: 0; background: transparent; align-items: stretch; justify-content: stretch; pointer-events: auto; }
#missionOverlay .mission-panel { border: 2px solid #f5c451; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px #0008; }
.mission-panel { width: 100%; height: 100%; display: flex; flex-direction: column; background: var(--surface); }
.mission-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; }
.mission-frame { flex: 1; width: 100%; border: 0; background: #0d151d; }
.avatar-chip { position: relative; width: 56px; height: 56px; margin: 0 auto; }
.avatar-chip span { position: absolute; inset: 0; background: no-repeat 0 0 / 392px 56px; }
.avatar-chip span.dead-layer { background-size: 56px 56px; }
.lobby-roster .avatar-chip { width: 34px; height: 34px; margin: 0; }
.lobby-roster .avatar-chip span { background-size: 238px 34px; }
.lobby-roster .avatar-chip span.dead-layer { background-size: 34px 34px; }
.avatar-panel { max-width: 460px; width: 100%; max-height: 100%; overflow-y: auto; }
.avatar-preview { display: block; width: 180px; height: 180px; margin: 0 auto; background: #121a21; border-radius: 16px; }
.avatar-group h3 { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.acc-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.acc-tile { width: 100%; aspect-ratio: 1; border-radius: 12px; border: 2px solid #ffffff30; background: #121a21; padding: 0; cursor: pointer; color: var(--muted); font-size: 11px; display: flex; align-items: center; justify-content: center; }
.acc-thumb { display: block; width: 40px; height: 40px; background: no-repeat 0 50% / 280px 40px; }
.acc-tile.selected { border-color: #fff; box-shadow: 0 0 0 2px #60d4cf; }
.button-row button.selected { outline: 2px solid #60d4cf; }
.lobby-chat-log { height: 90px; overflow-y: auto; background: #121a21; border-radius: 10px; padding: 8px 10px; font-size: 13px; overflow-wrap: anywhere; }
.lobby-chat-log p { margin-bottom: 4px; } .lobby-chat-log b { color: #60d4cf; }
.lobby-chat-form { display: flex; gap: 8px; } #lobbyChatInput { width: 100%; min-width: 0; background: #111920; color: var(--ink); border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.button-row,.section-heading { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .section-heading { justify-content: space-between; }
#countdown { font-variant-numeric: tabular-nums; color: #60d4cf; font-weight: bold; }
#chatLog { min-height: 100px; height: 150px; flex-shrink: 0; overflow-y: auto; background: #121a21; border-radius: 10px; padding: 12px; font-size: 13px; overflow-wrap: anywhere; }
#chatLog p { margin-bottom: 8px; } #chatLog b { color: #60d4cf; }
#chatForm { display: flex; gap: 8px; } #chatInput { width: 100%; min-width: 0; background: #111920; color: var(--ink); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.reveal { text-align: center; max-width: 440px; padding: 36px 24px; } .reveal h2 { font-size: clamp(26px,6vw,38px); } #roleOverlay { z-index: 30; } #connLost { z-index: 40; } #endedOverlay { z-index: 35; }
#voteResults { list-style: none; font-size: 12px; line-height: 1.8; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media(max-width: 480px) { .panel { padding: 18px; } .player-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } #actions { max-width: 215px; gap: 6px; } #actions button { padding: 10px 7px; } #taskHud { width: 165px; } #moveStick { width: 96px; height: 96px; } #stickNub { left: 25px; top: 25px; } }
@media(max-height: 520px) { #taskHud { top: 70px; max-height: 28vh; } .overlay { padding: 8px; } .panel { gap: 10px; } #notice { top: 12px; } #moveStick { width: 96px; height: 96px; } #stickNub { left: 25px; top: 25px; } }
/* Viewport-aware controls: keep the room clear until a panel is requested. */
#gameView, #avatarScreen { position: fixed; top: var(--view-top, 0px); bottom: auto; height: var(--view-height, 100dvh); }
#gameCanvas { touch-action: none; }
button { touch-action: manipulation; }
input { font-size: 16px; }
#hudTop .hud-panel { max-width: calc(100% - 70px); overflow-wrap: anywhere; }
#lifeLabel:empty, #identityLabel:empty { display: none; }
/* The social controls belong directly under the player status, not by the joystick. */
.hud-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; min-width: 0; max-width: calc(100% - 80px); }
#hudTop .hud-right .hud-panel { max-width: 100%; }
.lobby-tools { display: flex; justify-content: flex-end; gap: 6px; max-width: 100%; pointer-events: auto; }
#hudTop .lobby-panel-toggle, #hudTop .lobby-chat-toggle { position: static; width: auto; min-height: 44px; padding: 8px 10px; font-size: 11px; background: #182129f2; }
.lobby-panel-toggle { min-width: 0; }
.lobby-chat-toggle { flex-shrink: 0; }
.lobby-hud, .lobby-dock { top: var(--lobby-panel-top, 156px); bottom: auto; left: auto; right: max(12px, env(safe-area-inset-right)); width: min(320px, calc(100% - 24px)); max-height: calc(var(--view-height, 100dvh) - var(--lobby-panel-top, 156px) - 120px); overflow-y: auto; }
.lobby-dock { padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: #182129f2; }
.lobby-dock .lobby-chat-log { height: 64px; min-height: 44px; flex-shrink: 1; }
.lobby-dock .lobby-chat-form { flex-direction: row; }
.lobby-dock #lobbyChatSend, #lobbyRosterToggle, .lobby-actions button { min-height: 44px; }
#lobbyRosterToggle { padding: 8px 10px; }
.mission-frame { min-height: 0; }
#missionCanvas { touch-action: none; }
.mission-head { gap: 12px; flex-shrink: 0; }
.mission-head small { display: block; font-size: 12px; margin-top: 4px; }
.color-picker { grid-template-columns: repeat(auto-fill, 44px); }
.color-swatch { width: 44px; height: 44px; background-size: 308px 44px; }
@media (max-width: 600px) {
  #hudTop { top: max(8px, env(safe-area-inset-top)); left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); }
  #hudTop .hud-panel { padding: 8px 10px; gap: 2px; font-size: 11px; }
  #hudBottom { gap: 12px; left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); }
  #actions { width: calc(100% - 108px); max-width: 240px; gap: 6px; }
  #actions button { min-height: 52px; padding: 8px; font-size: 11px; overflow-wrap: anywhere; }
  #taskBtn, #killBtn { grid-column: 1 / -1; }
  #taskHud { top: 100px; left: 8px; width: 145px; padding: 8px; max-height: 22%; font-size: 11px; }
  #notice { top: 76px; max-width: calc(100% - 24px); width: max-content; }
  .overlay { padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)); }
  .panel { padding: 16px; border-radius: 16px; gap: 12px; }
  #missionOverlay { top: calc(var(--view-top, 0px) + max(10px, env(safe-area-inset-top))); left: 10px; right: 10px; width: auto; height: calc(var(--view-height, 100dvh) - max(10px, env(safe-area-inset-top)) - max(10px, env(safe-area-inset-bottom))); }
  .avatar-preview { width: 140px; height: 140px; }
}
@media (max-height: 500px) and (min-width: 481px) {
  .lobby-hud, .lobby-dock { max-height: calc(var(--view-height, 100dvh) - var(--lobby-panel-top, 156px) - 12px); }
  #taskHud { top: 68px; max-height: 30%; width: 165px; padding: 8px; }
  #missionOverlay { top: calc(var(--view-top, 0px) + 8px); right: 120px; width: calc(100% - 240px); height: calc(var(--view-height, 100dvh) - 16px); }
  #actions { max-width: 260px; }
}
.quick-ready { position: absolute; top: calc(max(8px, env(safe-area-inset-top)) + 56px); left: max(12px, env(safe-area-inset-left)); z-index: 6; min-height: 44px; max-width: 145px; padding: 10px; font-size: 12px; }
.quick-ready[aria-pressed="true"] { background: #234a41; border-color: #60d4cf; }
#taskHud summary { cursor: pointer; min-height: 44px; display: list-item; align-content: center; font-weight: 700; }
#taskHud details { padding-left: 12px; }
#taskHud progress { display: block; margin-top: 0; }
/* Writing stays at the bottom; reading and room controls stay at the top. */
#gameView .lobby-dock { top: auto; bottom: max(8px, env(safe-area-inset-bottom)); left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); width: auto; max-height: none; padding: 6px; z-index: 8; }
#lobbyChatForm { margin: 0; }
#lobbyChatInput { min-height: 44px; }
#gameView.in-lobby #hudBottom { bottom: calc(max(8px, env(safe-area-inset-bottom)) + 68px); }
#lobbyChatLog { position: absolute; top: var(--lobby-panel-top, 156px); right: max(12px, env(safe-area-inset-right)); width: min(300px, calc(100% - 24px)); height: min(320px, 42dvh); max-height: calc(var(--view-height, 100dvh) - var(--lobby-panel-top, 156px) - 80px); z-index: 6; background: #121a21ed; border: 1px solid var(--line); }
#lobbyChatLog:empty::before { content: 'As mensagens aparecem aqui.'; color: var(--muted); }
.lobby-hud { top: var(--lobby-panel-top, 156px); max-height: calc(var(--view-height, 100dvh) - var(--lobby-panel-top, 156px) - 80px); }
#gameView.keyboard-open:has(#lobbyChatInput:focus) #hudBottom { visibility: hidden; }

/* A single compact header groups identity and equal-sized room controls. */
#hudTop { display: flex; flex-direction: column; gap: 10px; padding: 10px; border: 1px solid #34434e; border-radius: 16px; background: #15212bf5; box-shadow: 0 4px 16px #0004; }
.hud-summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-width: 0; }
#hudTop .hud-summary .hud-panel { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 3px 8px; text-align: left; background: none; border: 0; padding: 0; min-width: 0; max-width: calc(100% - 64px); }
#phaseLabel { flex-basis: 100%; font-size: 13px; color: #f1f3f5; }
#identityLabel, #lifeLabel, #spectatorLabel { font-size: 11px; color: #aebfc9; }
#hudTop #exitBtn { align-self: center; min-height: 44px; padding: 8px 12px; background: #25343e; font-size: 12px; border-radius: 10px; }
.lobby-toolbar { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; pointer-events: auto; }
.lobby-toolbar:has(> .hidden):not(:has(> :not(.hidden))) { display: none; }
#hudTop .lobby-toolbar button { position: static; width: 100%; max-width: none; min-width: 0; min-height: 44px; padding: 8px 4px; margin: 0; border-radius: 10px; font-size: 11px; line-height: 1.2; background: #263843; border: 1px solid #435764; }
#hudTop .lobby-toolbar .quick-ready { background: #147f85; border-color: #29b7b0; }
#hudTop .lobby-toolbar button[aria-expanded="true"], #hudTop .lobby-toolbar button[aria-pressed="true"] { background: #245c60; border-color: #64d2cc; }
#hudTop .lobby-toolbar button:disabled { opacity: 1; color: #aebfc9; background: #263843; border-color: #435764; }
#lobbyChatLog, .lobby-hud { width: min(280px, calc(100% - 144px)); border-radius: 12px; background: #15212bf5; }
#lobbyChatLog { height: min(300px, 40dvh); } /* more messages at once; the zoom buttons move below it while it's open */
.lobby-hud { padding: 8px; }
.lobby-hud-head { flex-wrap: wrap; }
.lobby-actions { grid-template-columns: 1fr; }
#notice { top: calc(var(--lobby-panel-top, 156px) + 4px); }
.avatar-panel > .button-row:last-child { position: sticky; bottom: -16px; background: var(--surface); padding: 10px 0; z-index: 2; }
.avatar-panel > .button-row:last-child button { width: 100%; }

/* Illustrated spaceship controls, matching the supplied visual reference. */
#hudTop { padding: 12px; gap: 12px; border: 1.5px solid #79d9ff; border-radius: 22px; background: linear-gradient(145deg,#122741f5,#0a1528f7 70%); box-shadow: inset 0 0 0 2px #4381c54d, 0 0 12px #339cff66, 0 5px 18px #0008; font-family: 'Trebuchet MS', Arial, sans-serif; }
.hud-summary { gap: 8px; }
.hud-summary::before { content: ''; width: 34px; height: 34px; flex: 0 0 34px; background: url('../asset/ui/people.svg') center / contain no-repeat; filter: drop-shadow(0 0 4px #73cfff66); }
#hudTop .hud-summary .hud-panel { flex: 1; max-width: none; }
#phaseLabel { font-size: clamp(16px,4.5vw,22px); font-weight: 900; letter-spacing: -.4px; color: #d6f1ff; text-shadow: 0 0 7px #438ffc80; }
#identityLabel, #lifeLabel, #spectatorLabel { color: #bcd1e4; font-size: 11px; }
#hudTop #exitBtn { background: linear-gradient(#a74651,#642833); border: 1.5px solid #ee8b91; box-shadow: inset 0 1px 3px #ffc0bb55,0 0 8px #ef526126; color: #fff1ef; border-radius: 13px; font-size: 12px; }
.lobby-toolbar { gap: 7px; }
#hudTop .lobby-toolbar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 74px; padding: 6px 3px; font-size: 12px; font-weight: 900; border-radius: 15px; color: #f0f7ff; border: 1.5px solid #79caff; background: linear-gradient(155deg,#346a9f,#1a345b 85%); box-shadow: inset 0 1px 3px #b8e7ff55,0 3px 5px #0005; text-shadow: 0 2px 2px #0007; }
#hudTop .lobby-toolbar button::before { content: ''; display: block; width: 38px; height: 38px; background: center / contain no-repeat; filter: drop-shadow(0 2px 2px #0007); }
#quickAvatarBtn::before { background-image: url('../asset/ui/avatar.svg') !important; }
#quickReadyBtn::before { background-image: url('../asset/ui/ready.svg') !important; }
#lobbyPanelToggle::before { background-image: url('../asset/ui/room.svg') !important; }
#lobbyChatToggle::before { background-image: url('../asset/ui/chat.svg') !important; }
#hudTop .lobby-toolbar .quick-ready, #hudTop .lobby-toolbar .quick-ready[aria-pressed="true"] { background: linear-gradient(150deg,#358b73,#17463e); border-color: #91ef9e; box-shadow: inset 0 1px 4px #c6ffb94d,0 0 8px #55e79845; }
#hudTop .lobby-toolbar button[aria-expanded="true"] { background: linear-gradient(150deg,#387fa3,#214974); border-color: #c4f9ff; box-shadow: inset 0 0 8px #80edff33,0 0 8px #6ddcff66; }
#hudTop .lobby-toolbar button:disabled { color: #c9d7e4; filter: saturate(.5); }
#lobbyChatLog, .lobby-hud, #gameView .lobby-dock { background: linear-gradient(145deg,#192d41f5,#101d30f5); border: 1px solid #6193c2; box-shadow: inset 0 1px 2px #b9dfff33,0 4px 14px #0005; border-radius: 17px; }
#lobbyChatInput { background: #15283c; border-color: #496781; border-radius: 13px; }
#lobbyChatSend { background: linear-gradient(#55b7f5,#357ae1); border: 1px solid #94dcff; border-radius: 12px; box-shadow: inset 0 1px 2px #ffffff66; }
@media (max-width: 350px) {
  #hudTop { padding: 10px; gap: 9px; }
  .hud-summary::before { width: 26px; height: 26px; flex-basis: 26px; }
  #hudTop .lobby-toolbar button { font-size: 10px; }
}
@media (max-height: 500px) {
  #hudTop { padding: 8px 10px; gap: 6px; border-radius: 16px; }
  #hudTop .lobby-toolbar button { min-height: 48px; flex-direction: row; gap: 6px; }
  #hudTop .lobby-toolbar button::before { width: 24px; height: 24px; flex-shrink: 0; }
  #phaseLabel { font-size: 16px; }
}

/* ===== Codex UI art (design/ui-v1, design/fx-v1) ===== */
/* Meeting/voting board: the gold frame is a 9-slice so its title plate (top)
   and button plate (bottom) never squash, whatever the phone's height. */
.meeting-panel { border: solid transparent; border-width: 64px 22px 70px; border-image: url(../asset/ui/meeting-board.webp) 200 80 210 80 fill / 64px 22px 70px stretch; background: none; box-shadow: 0 30px 80px -20px #000; border-radius: 0; padding: 0 10px 0; position: relative; overflow: visible; }
/* The frame can't clip (the title sits on its top plate), so the player list and chat scroll instead. */
.meeting-panel #votePlayers { max-height: 44vh; overflow: auto; padding: 2px; }
.meeting-panel #chatLog { flex: 1 1 auto; min-height: 56px; overflow: auto; }
.meeting-panel .section-heading { margin-top: -54px; min-height: 44px; align-items: center; justify-content: center; gap: 12px; position: relative; }
.meeting-panel #meetingTitle { color: #ffe7a6; text-shadow: 0 2px 0 #000, 0 0 18px #c8912a88; letter-spacing: .02em; font-size: clamp(18px, 4.6vw, 24px); }
#countdown { width: 52px; height: 52px; flex: 0 0 52px; display: grid; place-items: center; background: url(../asset/ui/timer-ring.webp) center/contain no-repeat; color: #ffe7a6; font-size: 14px; text-shadow: 0 1px 2px #000; }
.meeting-panel #meetingReason { text-align: center; color: #e9d9b0; margin-top: 8px; }
#votePlayers .player-card { position: relative; aspect-ratio: 320 / 110; border: 0; border-radius: 0; padding: 0 8px 0 31%; background: url(../asset/ui/player-card.webp) center/100% 100% no-repeat; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; text-align: left; cursor: pointer; color: #fff; text-shadow: 0 1px 2px #000; }
#votePlayers .player-card .avatar-dot, #votePlayers .player-card > :first-child { position: absolute; left: 6%; top: 50%; transform: translateY(-50%); width: 21%; height: auto; aspect-ratio: 1; }
#votePlayers .player-card span { font-weight: 700; font-size: 12px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
#votePlayers .player-card small { font-size: 10px; color: #d8c79d; }
#votePlayers .player-card button { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; min-height: 0; padding: 0; cursor: pointer; }
#votePlayers .player-card.dead { opacity: 1; background-image: url(../asset/ui/player-card-dead.webp); color: #9aa5ad; cursor: default; }
#votePlayers .player-card.my-vote { background-image: url(../asset/ui/player-card-selected.webp); }
#votePlayers .player-card.my-vote::after { content: ""; position: absolute; right: 2%; top: 50%; width: 22%; aspect-ratio: 1; transform: translateY(-50%) rotate(-12deg); background: url(../asset/ui/vote-stamp.webp) center/contain no-repeat; animation: stampIn .25s ease-out; }
@keyframes stampIn { from { transform: translateY(-50%) rotate(-12deg) scale(2.2); opacity: 0; } }
#skipBtn { display: inline-flex; align-items: center; gap: 8px; }
#skipBtn::before { content: ""; width: 28px; height: 28px; background: url(../asset/ui/skip-vote.webp) center/contain no-repeat; }
@media (max-width: 480px) { #votePlayers.player-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } }

/* Full-screen moment splashes (meeting called / body found). */
.splash { position: absolute; inset: 0; z-index: 25; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 24px; background: #000 center/cover no-repeat; animation: splashIn .35s ease-out; cursor: pointer; }
.splash.emergency { background-image: url(../asset/ui/splash-emergency.webp); }
.splash.body { background-image: url(../asset/ui/splash-body.webp); }
.splash h2 { font-size: clamp(28px, 8vw, 54px); color: #fff; text-shadow: 0 3px 0 #5a0d16, 0 0 30px #ff3b4f; letter-spacing: .03em; animation: splashPunch .5s cubic-bezier(.2,1.6,.4,1); }
.splash p { color: #ffd9de; font-size: clamp(14px, 3.6vw, 18px); text-shadow: 0 1px 3px #000; }
@keyframes splashIn { from { opacity: 0; } }
@keyframes splashPunch { from { transform: scale(2.2); opacity: 0; } }

/* Role reveal / vote result / winner: the matching splash behind the panel. */
#roleOverlay .reveal, #resultsOverlay .reveal, #endedOverlay .reveal { position: relative; overflow: hidden; width: min(640px, 100%); max-width: none; min-height: min(360px, 70vh); display: flex; flex-direction: column; align-items: center; justify-content: center; background: #000 center/cover no-repeat; border: 1px solid #c8912a88; box-shadow: 0 0 60px -10px #c8912a66; }
#roleOverlay .reveal { background-image: url(../asset/ui/splash-role-crew.webp); }
#roleOverlay.role-impostor .reveal { background-image: url(../asset/ui/splash-role-impostor.webp); border-color: #ff3b4f88; box-shadow: 0 0 60px -10px #ff3b4f66; }
#resultsOverlay .reveal { background-image: url(../asset/ui/splash-eject.webp); }
#endedOverlay .reveal { background-image: url(../asset/ui/splash-win-crew.webp); }
#endedOverlay.win-impostor .reveal { background-image: url(../asset/ui/splash-win-impostor.webp); }
#roleOverlay .reveal > *, #resultsOverlay .reveal > *, #endedOverlay .reveal > * { position: relative; z-index: 1; text-shadow: 0 2px 4px #000; }
#roleOverlay .reveal h2, #endedOverlay .reveal h2 { font-size: clamp(28px, 7vw, 46px); animation: splashPunch .5s cubic-bezier(.2,1.6,.4,1); }
#endedOverlay .reveal h2 { color: #ffe7a6; }
/* Sprite-strip effects, played with CSS steps(): background-size = frames x 100%. */
.fx-doors, .fx-confetti { position: absolute; z-index: 0; pointer-events: none; background-repeat: no-repeat; }
.fx-doors { display: none; left: 50%; top: 50%; width: min(100%, 800px); aspect-ratio: 800 / 450; transform: translate(-50%, -50%); background-image: url(../asset/anim/fx-eject-doors.webp); background-size: 800% 100%; opacity: .85; }
#resultsOverlay.ejected .fx-doors { display: block; animation: fxStrip 1s steps(8, jump-none) 1 forwards; }
.fx-confetti { inset: 0; background-image: url(../asset/anim/fx-confetti-win.webp); background-size: 1000% 100%; background-position-y: center; animation: fxStrip .83s steps(10, jump-none) infinite; opacity: .9; }
@keyframes fxStrip { from { background-position-x: 0%; } to { background-position-x: 100%; } }

/* Round action buttons: Codex's gold icons, label underneath. */
#actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 6px; }
#actions #taskBtn, #actions #killBtn, #actions #reportBtn, #actions #emergencyBtn { background-color: transparent; background-repeat: no-repeat; background-position: top center; background-size: 64px 64px; border: 0; box-shadow: none; padding: 64px 2px 2px; min-height: 0; font-size: 11px; font-weight: 700; color: #fff; text-shadow: 0 1px 3px #000, 0 0 2px #000; line-height: 1.15; transition: transform .1s; }
#actions button:not(:disabled):active { transform: scale(.92); }
#actions #taskBtn { background-image: url(../asset/ui/buttons/use.webp); }
#actions #taskBtn:disabled { background-image: url(../asset/ui/buttons/use-disabled.webp); }
#actions #killBtn { background-image: url(../asset/ui/buttons/kill.webp); }
#actions #killBtn:disabled { background-image: url(../asset/ui/buttons/kill-disabled.webp); }
#actions #reportBtn { background-image: url(../asset/ui/buttons/report.webp); }
#actions #reportBtn:disabled { background-image: url(../asset/ui/buttons/report-disabled.webp); }
#actions #emergencyBtn { background-image: url(../asset/ui/buttons/meeting.webp); }
#actions #emergencyBtn:disabled { background-image: url(../asset/ui/buttons/meeting-disabled.webp); }
#actions button:disabled { color: #b8c0c6; opacity: 1; }

/* Avatar v2 custom looks have no sprite sheet: their swatch is a small canvas. */
.color-swatch-v2 { width: 100%; height: 100%; display: block; pointer-events: none; }

/* ===== POP cosmetics, pets, emotes, share card ===== */
.acc-thumb.v2 { width: 44px; height: 44px; background-repeat: no-repeat; }
.acc-tile { position: relative; }
.acc-tile.rarity-rare { border-color: #4f9dff88; } .acc-tile.rarity-epic { border-color: #b46bff99; } .acc-tile.rarity-legendary { border-color: #ffc94dcc; box-shadow: inset 0 0 12px #ffc94d33; }
.acc-tile.selected.rarity-legendary, .acc-tile.selected.rarity-epic, .acc-tile.selected.rarity-rare { border-color: #fff; }
.emote-btn { position: absolute; right: max(12px, env(safe-area-inset-right)); bottom: calc(max(16px, env(safe-area-inset-bottom)) + 84px); z-index: 6; width: 62px; height: 62px; border-radius: 50%; padding: 0; border: 2px solid #ffd36b; background: radial-gradient(circle at 35% 30%, #4a3a12, #120d04) center; box-shadow: 0 4px 14px #000a, 0 0 14px #ffc94d55; }
.emote-btn::after { content: ""; position: absolute; inset: 6px; background: url(../asset/ui/emotes/celebrate.webp) center/contain no-repeat; }
.emote-wheel { position: absolute; z-index: 24; right: max(8px, env(safe-area-inset-right)); bottom: calc(max(16px, env(safe-area-inset-bottom)) + 154px); width: min(300px, 80vw); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.emote-ring { position: relative; width: 100%; aspect-ratio: 1; background: url(../asset/ui/emotes/emote-wheel.webp) center/contain no-repeat; filter: drop-shadow(0 8px 18px #000c); }
.emote-ring button { position: absolute; width: 23%; aspect-ratio: 1; transform: translate(-50%, -50%); padding: 0; border: 0; border-radius: 50%; background: center/contain no-repeat; cursor: pointer; }
.emote-ring button:active, .emote-bodies button:active { transform: translate(-50%, -50%) scale(.9); }
.emote-bodies { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.emote-bodies button { width: 58px; height: 58px; border-radius: 50%; padding: 0; border: 2px solid #ffd36b88; background: #120d04 center/78% no-repeat; }
.emote-bodies button:active { transform: scale(.9); }
.share-btn { margin: 4px 0; background: linear-gradient(180deg, #ffe08a, #c8912a); color: #2a1d06; font-weight: 900; border: 0; }

/* ===== Round intro + end-of-round recap ===== */
.role-intro { display: none; white-space: pre-line; line-height: 1.1; font-size: clamp(64px, 18vw, 96px); font-weight: 900; color: #ffe7a6; letter-spacing: .04em; text-shadow: 0 2px 6px #000; }
#roleOverlay.pre .role-intro { display: block; animation: splashPunch .4s ease-out; }
#roleOverlay.pre .reveal > :not(.role-intro) { display: none; }
#roleOverlay.pre .reveal { background-image: none; background-color: #05070a; }
.ended-detail { color: #f3e3bb; margin: 0; }
.ended-countdown { color: #c9d3da; font-size: 13px; margin: 0; }
.role-intro::first-line { font-size: clamp(20px, 5.5vw, 30px); }

/* ===== Sabotage ===== */
#actions #sabotageBtn, #actions #fixBtn { background-color: transparent; background-repeat: no-repeat; background-position: top center; background-size: 64px 64px; border: 0; box-shadow: none; padding: 64px 2px 2px; min-height: 0; font-size: 11px; font-weight: 700; color: #fff; text-shadow: 0 1px 3px #000, 0 0 2px #000; line-height: 1.15; }
#actions #sabotageBtn { background-image: url(../asset/ui/buttons/sabotage.webp); }
#actions #sabotageBtn:disabled { background-image: url(../asset/ui/buttons/sabotage-disabled.webp); }
#actions #fixBtn { background-image: url(../asset/ui/buttons/use.webp); animation: fixPulse 1s ease-in-out infinite; }
@keyframes fixPulse { 50% { transform: scale(1.06); } }
.sabotage-menu { position: absolute; z-index: 22; right: max(12px, env(safe-area-inset-right)); bottom: calc(max(16px, env(safe-area-inset-bottom)) + 190px); display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 14px; background: #160406ee; border: 1px solid #ff4f5f99; box-shadow: 0 10px 30px #000c; }
.sabotage-menu button { min-height: 48px; padding: 8px 14px; font-weight: 800; color: #fff; background: linear-gradient(180deg, #7a1420, #3a070d); border: 1px solid #ff6b78aa; border-radius: 10px; text-align: left; }
.sabotage-banner { position: absolute; z-index: 9; left: 50%; top: calc(max(8px, env(safe-area-inset-top)) + 104px); transform: translateX(-50%); max-width: calc(100% - 24px); padding: 8px 14px; border-radius: 999px; font-weight: 900; font-size: 13px; color: #fff; text-align: center; background: #6b0f19e6; border: 1px solid #ff6b78; box-shadow: 0 0 18px #ff3b4f88; animation: banPulse 1s ease-in-out infinite; pointer-events: none; }
.sabotage-banner.lights { background: #0b0f1ae6; border-color: #7aa2ff; box-shadow: 0 0 18px #4f7dff66; }
@keyframes banPulse { 50% { box-shadow: 0 0 30px #ff3b4fcc; } }
.splash.lights { background: radial-gradient(circle at 50% 45%, #1a2233 0, #000 60%); }
.splash.lights h2 { text-shadow: 0 3px 0 #0b1b40, 0 0 30px #6d8dff; }

/* ===== Doors (sabotage) ===== */
.sab-door-rooms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; max-height: 46vh; overflow: auto; }
.sab-door-rooms button { min-height: 40px; padding: 6px 8px; font-size: 12px; text-align: center; }
.sabotage-menu button:disabled { opacity: .45; }

/* ===== Metamorfo ===== */
#actions #shiftBtn { position: relative; background: transparent; border: 0; box-shadow: none; padding: 64px 2px 2px; min-height: 0; font-size: 11px; font-weight: 700; color: #fff; text-shadow: 0 1px 3px #000, 0 0 2px #000; line-height: 1.15; }
#actions #shiftBtn::before { content: '🦋'; position: absolute; top: 2px; left: 50%; transform: translateX(-50%); width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 28px; text-shadow: none; background: radial-gradient(circle at 35% 30%, #d6b6ff, #6a2bc4 58%, #2a0b55); border: 3px solid #d9b25c; box-shadow: 0 3px 8px #000a, inset 0 2px 5px #fff6; }
#actions #shiftBtn:disabled::before { filter: grayscale(1) brightness(.6); }
#actions #shiftBtn:active::before { transform: translateX(-50%) scale(.94); }
.shift-menu { background: #120720ee; border-color: #b98cff99; }
.shift-menu button { background: linear-gradient(180deg, #5a2a9e, #2a0f52); border-color: #c49bffaa; display: flex; align-items: center; gap: 8px; text-align: left; }
.shift-menu .dot { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff8; }
.shift-menu-title { margin: 0 0 2px; font-weight: 900; font-size: 13px; color: #e5d4ff; }

/* ===== Straight into the waiting room (no landing flash) ===== */
.enter-splash { display: none; position: fixed; inset: 0; z-index: 60; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: radial-gradient(120% 80% at 50% 30%, #2a1a0c, #0b0705 70%); color: #f3e3bb; font-weight: 800; }
.enter-splash img { width: min(78vw, 420px); height: auto; filter: drop-shadow(0 6px 12px #000c); }
.enter-splash p { margin: 0; letter-spacing: .02em; }
.enter-spinner { width: 34px; height: 34px; border-radius: 50%; border: 4px solid #ffffff22; border-top-color: #e0a73a; animation: enterSpin .8s linear infinite; }
@keyframes enterSpin { to { transform: rotate(360deg); } }
html.auto-enter .enter-splash { display: flex; }
html.auto-enter #lobbyWrap { visibility: hidden; }
/* Emote wheel: compact on phones (it used to cover half the screen). */
.emote-wheel { width: min(190px, 50vw); gap: 6px; bottom: calc(max(16px, env(safe-area-inset-bottom)) + 140px); }
.emote-ring button { width: 26%; }
.emote-bodies { gap: 6px; }
.emote-bodies button { width: 40px; height: 40px; }
.emote-btn { width: 52px; height: 52px; }
@media (min-width: 900px) { .emote-wheel { width: 240px; } .emote-bodies button { width: 50px; height: 50px; } }

/* ===== Lobby play: sofa / fountain ===== */
.play-btn { position: absolute; z-index: 6; right: calc(max(12px, env(safe-area-inset-right)) + 62px); bottom: calc(max(16px, env(safe-area-inset-bottom)) + 84px); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0; border: 0; background: none; color: #fff; font-size: 11px; font-weight: 800; text-shadow: 0 1px 3px #000, 0 0 2px #000; box-shadow: none; min-height: 0; }
.play-ico { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; border: 2px solid #ffd36b; background: radial-gradient(circle at 35% 30%, #4a3a12, #120d04); box-shadow: 0 4px 14px #000a, 0 0 14px #ffc94d55; animation: playPulse 1.6s ease-in-out infinite; }
.play-btn.leave .play-ico { animation: none; border-color: #9fd3ff; }
.play-btn:active .play-ico { transform: scale(.92); }
@keyframes playPulse { 50% { box-shadow: 0 4px 14px #000a, 0 0 22px #ffd36bbb; } }

/* Phase 20 medal icons for the lobby-play button */
.play-ico { font-size: 0; background: center/100% no-repeat; border: 0; box-shadow: 0 4px 14px #000a; }
.play-ico.sofa { background-image: url(../asset/ui/buttons/sofa-jump.webp); }
.play-ico.swim { background-image: url(../asset/ui/buttons/swim.webp); }
.play-ico.leave { background-image: url(../asset/ui/buttons/leave-activity.webp); }
@keyframes playPulse { 50% { box-shadow: 0 4px 14px #000a, 0 0 18px #ffd36baa; } }
/* Dance-floor music toggle: a small round icon next to Sair, not a toolbar tile */
.hud-top-actions { display: flex; align-items: center; gap: 8px; align-self: center; }
#hudTop .music-btn { width: 44px; height: 44px; min-height: 0; padding: 0; border-radius: 50%; font-size: 18px; line-height: 1; background: linear-gradient(155deg,#346a9f,#1a345b 85%); border: 1.5px solid #79caff; box-shadow: inset 0 1px 3px #b8e7ff55,0 2px 4px #0005; }
#hudTop .music-btn[aria-pressed="false"] { opacity: .65; }

/* map zoom buttons + the spectator's "who am I watching" bar */
#zoomCtl { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 6px; pointer-events: auto; z-index: 5; }
#zoomCtl button, #specBar button { width: 40px; height: 40px; padding: 0; border-radius: 12px; background: #0d151dcc; border: 1.5px solid #ffffff40; color: #fff; font-size: 20px; line-height: 1; }
#specBar { position: absolute; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; gap: 8px; align-items: center; background: #0d151dd9; border: 1.5px solid #ffffff35; border-radius: 14px; padding: 6px 8px; pointer-events: auto; z-index: 6; }
#specBar.hidden { display: none; }
/* spectators in the club: the bottom has the joystick + chat, so the ◀ ▶ (who the big screen follows) sits under the top bar */
#gameView.crowd-view #specBar { top: calc(var(--lobby-panel-top, 156px) + 2px); bottom: auto; }
#gameView.crowd-view:has(#lobbyChatLog:not(.hidden)) #specBar { display: none; }
#specBar span { min-width: 120px; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font-weight: 700; font-size: 13px; color: #fff; }

/* CCTV: the close button over the camera wall */
#camClose { position: absolute; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 7; pointer-events: auto; min-height: 44px; padding: 10px 18px; border-radius: 14px; background: linear-gradient(#a74651,#642833); border: 1.5px solid #ee8b91; color: #fff; font-weight: 700; }
#camClose.hidden { display: none; }
body.watching-cams #taskHud, body.watching-cams #hudBottom, body.watching-cams #zoomCtl, body.watching-cams #notice { visibility: hidden; }
/* host: remove a player from the waiting room */
.player-card .kick-btn { margin-left: auto; padding: 4px 9px; min-height: 30px; font-size: 11px; border-radius: 9px; background: linear-gradient(#a74651,#642833); border: 1px solid #ee8b91; color: #fff; }

/* Phone joystick: touch anywhere in the lower-left of the screen and the stick jumps under your thumb
   (no need to hit the small circle exactly); it slides back home when you let go. */
#moveZone { position: absolute; left: 0; bottom: 0; width: 50%; height: 55%; pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; }
#moveZone.hidden { display: none; }
#moveStick:not(.active) { transition: transform .15s ease-out, background .15s, border-color .15s; }
#moveStick.active { background: #ffffff24; border-color: #ffffff80; box-shadow: 0 0 0 6px #ffffff10; }
#moveStick.active #stickNub { background: #9fd3e0; box-shadow: 0 0 12px #9fd3e0aa; }
#gameView.keyboard-open:has(#lobbyChatInput:focus) #moveZone, body.watching-cams #moveZone { display: none; }
/* Compact top bar: one slim title row + one row of small buttons (icon beside the label),
   instead of the tall card with big tiles that covered a third of a phone screen. */
#hudTop { padding: 6px 8px; gap: 6px; border-radius: 16px; }
.hud-summary { gap: 6px; }
.hud-summary::before { width: 22px; height: 22px; flex-basis: 22px; }
#hudTop .hud-summary .hud-panel { gap: 0 6px; font-size: 11px; line-height: 1.25; align-items: baseline; }
#hudTop #phaseLabel { font-size: 14px; }
.hud-top-actions { gap: 6px; }
#hudTop .music-btn { width: 34px; height: 34px; font-size: 15px; }
#hudTop #exitBtn { min-height: 34px; padding: 4px 11px; font-size: 11px; border-radius: 10px; }
.lobby-toolbar { gap: 5px; }
#hudTop .lobby-toolbar button { min-height: 40px; flex-direction: row; gap: 5px; padding: 4px 6px; font-size: 11px; line-height: 1.1; border-radius: 11px; }
#hudTop .lobby-toolbar button::before { width: 22px; height: 22px; flex-shrink: 0; }

/* Pool Party bar drinks (design/drinks-v1): order button next to Levantar while on a bar stool, plus the 3-drink menu */
.drink-btn { right: calc(max(12px, env(safe-area-inset-right)) + 124px); }
.key-btn { right: calc(max(12px, env(safe-area-inset-right)) + 124px); }
.play-ico.key { display: grid; place-items: center; font-size: 26px; background: radial-gradient(circle at 35% 30%, #ffe9a8, #c8901f 70%); border-radius: 50%; }
.play-ico.drink { background: radial-gradient(circle at 35% 30%, #4a3a12, #120d04); border: 2px solid #ffd36b; position: relative; }
.play-ico.drink::after { content: ""; position: absolute; inset: 6px; background: url(../asset/drinks/caipirinha.webp) center/contain no-repeat; }
.drink-menu { position: absolute; z-index: 7; right: calc(max(12px, env(safe-area-inset-right)) + 62px); bottom: calc(max(16px, env(safe-area-inset-bottom)) + 160px); display: flex; gap: 8px; padding: 10px; border-radius: 16px; background: #120d04f2; border: 1px solid #ffd36b88; box-shadow: 0 8px 24px #000c; }
.drink-menu button { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 78px; padding: 8px 4px; border-radius: 12px; border: 1px solid #ffd36b55; background: #2a1f0a; color: #fff; font-size: 12px; font-weight: 800; min-height: 0; box-shadow: none; }
.drink-menu button:active { transform: scale(.94); }
.drink-menu img { width: 52px; height: 52px; object-fit: contain; }

/* Zoom is a lobby-only control: rounds are played at one fixed view */
#gameView:not(.in-lobby):not(.can-zoom) #zoomCtl { display: none; }
/* chat open: the zoom buttons move down out from under the (now taller) chat panel */
#gameView:has(#lobbyChatLog:not(.hidden)) #zoomCtl { top: auto; bottom: calc(190px + env(safe-area-inset-bottom)); transform: none; }

/* End screen: who the impostor(s) were (Among Us style reveal) */
.ended-impostors { margin: 6px 0 2px; }
.ended-impostors .imp-head { margin: 0 0 4px; font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: #ff6b7d; }
.ended-impostors .imp-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ended-impostors .imp-card { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.ended-impostors .imp-thumb { width: 84px; height: 84px; border-radius: 50%; background: radial-gradient(circle at 50% 60%, #6b0f1a 0%, #2a0509 62%, transparent 70%); filter: drop-shadow(0 0 10px #ff2a4580); }
.ended-impostors .imp-card span { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 800; color: #fff; }
/* Share preview: long-press the image to save (Telegram's in-app browser blocks downloads) */
.share-preview { gap: 8px; }
.share-preview img { width: min(78vw, 360px); aspect-ratio: 1; border-radius: 14px; box-shadow: 0 8px 24px #000a; -webkit-touch-callout: default; user-select: auto; }
.share-preview .share-hint { margin: 0; font-size: 13px; color: #f3e3bb; }
#sharePreview { z-index: 38; }

/* bad signal: a small badge instead of covering the game (the full reconnect screen only after 7s) */
.net-badge { position: absolute; left: 50%; top: calc(var(--lobby-panel-top, 156px) + 48px); transform: translateX(-50%); z-index: 7; padding: 6px 12px; border-radius: 999px; background: #3a1d08ee; border: 1px solid #f0b34a; color: #ffe2a8; font-size: 12px; font-weight: 800; white-space: nowrap; pointer-events: none; box-shadow: 0 4px 14px #0008; }
.net-badge.hidden { display: none; }

/* Round buttons, compact (phones): small round icons in a 3-wide grid filling from the right, short labels,
   instead of big tiles that overlapped each other and covered half the screen. */
#gameView #actions { display: grid; grid-template-columns: repeat(3, 60px); grid-auto-rows: auto; direction: rtl; gap: 2px 4px; width: auto; max-width: none; align-items: start; justify-content: end; }
#gameView #actions > button { direction: ltr; width: 60px; min-width: 0; min-height: 0; padding: 48px 0 0; margin: 0; background-size: 48px 48px; font-size: 10px; line-height: 1.1; white-space: normal; overflow-wrap: normal; word-break: normal; grid-column: auto; }
#gameView #actions > #taskBtn { grid-column: span 2; width: 124px; }
#gameView #actions #shiftBtn::before { width: 44px; height: 44px; font-size: 22px; top: 1px; border-width: 2px; }
#gameView #actions #camBtn { position: relative; background: transparent; border: 0; box-shadow: none; color: #fff; font-weight: 700; text-shadow: 0 1px 3px #000, 0 0 2px #000; }
#gameView #actions #camBtn::before { content: '📹'; position: absolute; top: 1px; left: 50%; transform: translateX(-50%); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 21px; text-shadow: none; background: radial-gradient(circle at 35% 30%, #8ff3e6, #128a80 58%, #053f3a); border: 2px solid #d9b25c; box-shadow: 0 3px 8px #000a, inset 0 2px 5px #fff6; }
#gameView #actions #camBtn:disabled::before { filter: grayscale(1) brightness(.6); }
#gameView #actions #camBtn:active::before { transform: translateX(-50%) scale(.94); }

/* During a round the top bar is one slim line (map · name · role), not a big card over the map. */
#gameView:not(.in-lobby):not(.crowd-view) #hudTop { padding: 4px 6px 4px 10px; gap: 0; border-radius: 14px; }
#gameView:not(.in-lobby):not(.crowd-view) #hudTop .hud-summary .hud-panel { flex-wrap: nowrap; align-items: baseline; gap: 6px; overflow: hidden; white-space: nowrap; }
#gameView:not(.in-lobby):not(.crowd-view) #phaseLabel { flex: 0 1 auto; flex-basis: auto; font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
#gameView:not(.in-lobby):not(.crowd-view) #identityLabel, #gameView:not(.in-lobby):not(.crowd-view) #lifeLabel, #gameView:not(.in-lobby):not(.crowd-view) #spectatorLabel { flex: 0 0 auto; font-size: 10px; }
#gameView:not(.in-lobby):not(.crowd-view) #hudTop #exitBtn { min-height: 26px; padding: 3px 10px; font-size: 11px; border-radius: 8px; }
#gameView:not(.in-lobby):not(.crowd-view) #hudTop .hud-summary::before, #gameView:not(.in-lobby):not(.crowd-view) #hudTop .hud-panel::before { display: none; }

/* Portraits drawn from the real avatar (see avatarFor) */
.avatar-chip canvas.av-thumb { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #2b3a46, #121a21 70%); }
/* Meeting on a phone: 3 small cards per row (15 players ≈ 5 rows) and a chat you can actually read */
.meeting-panel #chatLog { min-height: 120px; }
@media (max-width: 480px) {
  #votePlayers.player-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  #votePlayers .player-card { padding-left: 30%; }
  #votePlayers .player-card span { font-size: 10.5px; }
  #votePlayers .player-card small { font-size: 8.5px; }
  .meeting-panel #votePlayers { max-height: 34vh; }
  .meeting-panel #chatLog { min-height: 140px; font-size: 12.5px; padding: 8px 10px; }
  .meeting-panel #chatLog p { margin-bottom: 5px; }
}
.avatar-chip span.dead-layer { background-size: contain; background-position: center; } /* the eliminated mark fills the portrait at any size */