:root {
  --glass: rgba(26, 23, 22, 0.74);
  --glass-2: rgba(40, 36, 34, 0.72);
  --line: rgba(255, 255, 255, 0.09);
  --text: #f6f0ea;
  --dim: #b5aba1;
  --green: #3cc755;
  --green-2: #2a9f40;
  --red: #ff5e52;
  --orange: #ee8a2c;
  --yellow: #ffd03c;
  --roach: #9a4a22;
  --r: 16px;
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #1b1410; color: var(--text); font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 700; overflow: hidden; }
body { user-select: none; -webkit-user-select: none; }
input, button { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
.hidden { display: none !important; }
.dim { color: var(--dim); }
small { color: var(--dim); font-weight: 700; }
#scene { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; touch-action: none; }
#bgShade { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 60% 40%, rgba(20, 12, 6, 0.05), rgba(15, 9, 5, 0.72) 75%), linear-gradient(180deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.45)); }
body.in-game #bgShade { display: none; }
.screen { position: fixed; inset: 0; }
.glass { background: var(--glass); border: 1px solid var(--line); border-radius: var(--r); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28); }
body.q-low .glass { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(26, 23, 22, 0.88); }

/* ---------- icons (CSS masks, no image requests) ---------- */
.ic { display: inline-block; width: 1.25em; height: 1.25em; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; flex: none; vertical-align: middle; }
.ic-home { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2 11.5 12 3l10 8.5-1.3 1.5L19 11.6V21h-5.5v-6h-3v6H5v-9.4L3.3 13z'/></svg>"); }
.ic-shirt { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8 3 2.5 6l2.2 5 2.8-1.2V21h9V9.8l2.8 1.2 2.2-5L16 3c-.3 1.8-2 3-4 3S8.3 4.8 8 3z'/></svg>"); }
.ic-book { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M1.5 5c3.5-1.2 7-.8 9.7 1.2V21c-2.7-1.8-6.2-2.2-9.7-1.2zM22.5 5c-3.5-1.2-7-.8-9.7 1.2V21c2.7-1.8 6.2-2.2 9.7-1.2z'/></svg>"); }
.ic-gear { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M10 1.5h4l.7 3 2.1 1.2 3-1 2 3.5-2.3 2.1v2.4l2.3 2.1-2 3.5-3-1-2.1 1.2-.7 3h-4l-.7-3-2.1-1.2-3 1-2-3.5 2.3-2.1v-2.4L1.2 8.2l2-3.5 3 1 2.1-1.2zM12 8.5a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7z'/></svg>"); }
.ic-exit { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M11 3H3v18h8v-2H5V5h6zm4.5 4-1.4 1.4 2.6 2.6H9v2h7.7l-2.6 2.6 1.4 1.4 5-5z'/></svg>"); }
.ic-copy { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M8 2h11a2 2 0 0 1 2 2v12h-2V4H8zM4 6h11a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2zm0 2v12h11V8z'/></svg>"); }
.ic-chev { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 4 7.6 5.4 14.2 12l-6.6 6.6L9 20l8-8z'/></svg>"); }
.ic-users { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='9' cy='8' r='4'/><path d='M1 21c0-4.4 3.6-7 8-7s8 2.6 8 7z'/><circle cx='17.5' cy='7' r='3'/><path d='M18.5 12c3 .3 4.5 3 4.5 6h-4c0-2.3-.8-4.3-2.6-5.6z'/></svg>"); }
.ic-clock { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16zm-1 3h2v5.4l3.5 2.1-1 1.7L11 13.5z'/></svg>"); }
.ic-swap { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 3 2 8l5 5V9.5h11v-3H7zM17 11v3.5H6v3h11V21l5-5z'/></svg>"); }
.ic-mic { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 1.5a3.5 3.5 0 0 1 3.5 3.5v6a3.5 3.5 0 0 1-7 0V5A3.5 3.5 0 0 1 12 1.5zM5 11h2a5 5 0 0 0 10 0h2a7 7 0 0 1-6 6.9V21h3v2H8v-2h3v-3.1A7 7 0 0 1 5 11z'/></svg>"); }
.ic-micoff { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 1.5a3.5 3.5 0 0 1 3.5 3.5v6a3.5 3.5 0 0 1-7 0V5A3.5 3.5 0 0 1 12 1.5zM5 11h2a5 5 0 0 0 10 0h2a7 7 0 0 1-6 6.9V21h3v2H8v-2h3v-3.1A7 7 0 0 1 5 11z'/><path d='M3 2.5 21.5 21 20 22.5 1.5 4z'/></svg>"); }
.ic-send { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2 21 23 12 2 3v7l14 2-14 2z'/></svg>"); }
.ic-play { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 3.5 21 12 6 20.5z'/></svg>"); }
.ic-hand { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.5 3a1.5 1.5 0 0 1 1.5 1.5V11h1V2.5a1.5 1.5 0 0 1 3 0V11h1V4a1.5 1.5 0 0 1 3 0v7.5h.5V7a1.5 1.5 0 0 1 3 0v7c0 5-3.2 8.5-7.5 8.5-3 0-5.3-1.6-7-4.4L3 12.5a1.5 1.5 0 0 1 2.5-1.6L7 13V4.5A1.5 1.5 0 0 1 8.5 3z'/></svg>"); }
.ic-broom { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 1.5 22 3.5 14.2 11.3l1.8 1.8-2 2-1-1L6 22.5H1.5V18l8.4-7-1-1 2-2 1.8 1.8z'/></svg>"); }
.ic-run { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='15' cy='3.8' r='2.3'/><path d='M11 7.5l4.2 1.2 2 3.3 3.3.6-.4 2-4.3-.9-1.1-1.7-1.1 3.6 3.2 2.6V23h-2.2v-4.8l-3.1-2.1-1.6 3.6-6 .1.3-2.1 4.3-.3 2.4-6.2-2 1.1-.8 3-2-.5 1.1-4.2z'/></svg>"); }
.ic-crouch { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='10' cy='4' r='2.3'/><path d='M7.5 8h4.5l3 5h4.5v2.2h-5.6l-1.6-1.8-1 3 3.1 2V23h-2.2v-4.5l-4-1.8-2.4 3.3H2.5v-2.1h3l2-5z'/></svg>"); }
.ic-bug { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><ellipse cx='12' cy='14' rx='5' ry='7.5'/><circle cx='12' cy='5.5' r='2.6'/><path d='M7.6 9.5 2.5 7.2l.6-1.3 5.2 2.3zm0 4.2H2v-1.5h5.6zm.3 3.6-4.4 3.4-.9-1.2 4.4-3.4zm8.5-7.8 5.1-2.3.6 1.3-5.1 2.3zm0 4.2H22v-1.5h-5.6zm-.3 3.6 4.4 3.4.9-1.2-4.4-3.4zM10.9 3.4 8.4.6l1-.9 2.6 2.8zm2.2 0 2.5-2.8 1 .9-2.5 2.8z'/></svg>"); }
.ic-flash { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2 8h10l2.5 2.5v3L12 16H2zM16 9.5l6-3.5v12l-6-3.5z'/></svg>"); }
.ic-trap { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M2 7h20v11H2zm4 3.5a1.3 1.3 0 1 0 0 2.6 1.3 1.3 0 0 0 0-2.6zm6 1.5a1.3 1.3 0 1 0 0 2.6 1.3 1.3 0 0 0 0-2.6zm6-1.5a1.3 1.3 0 1 0 0 2.6 1.3 1.3 0 0 0 0-2.6z'/></svg>"); }
.ic-cctv { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2 5.5l14.5 3.2-1.6 6.3L.8 11.6zM17 10.2l5 2v4.3l-6.3-2.1zM3.5 12.8H5.7V19H8v2.2H3.5z'/></svg>"); }
.ic-drop { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 22l-7-7h4.2V3h5.6v12H19z'/></svg>"); }
.ic-decoy { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2 9h4l6-5v16l-6-5H2zm13.5-2.2A6.5 6.5 0 0 1 15.5 17l-1.4-1.4a4.5 4.5 0 0 0 0-7.4zm3-3a10.5 10.5 0 0 1 0 16.4l-1.4-1.5a8.5 8.5 0 0 0 0-13.4z'/></svg>"); }
.ic-eye { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M12 5c5 0 9 4 10.5 7C21 15 17 19 12 19S3 15 1.5 12C3 9 7 5 12 5zm0 3a4 4 0 1 0 0 8 4 4 0 0 0 0-8z'/></svg>"); }
.ic-x { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 3.6 12 10.6l7-7L20.4 5l-7 7 7 7-1.4 1.4-7-7-7 7L3.6 19l7-7-7-7z'/></svg>"); }

/* ---------- logo ---------- */
.logo { display: flex; flex-direction: column; align-items: center; line-height: 0.82; pointer-events: none; }
.logo .logo-art { width: 1.5em; height: 1.1em; margin-bottom: -0.18em; z-index: 1; }
.logo .logo-art svg { width: 100%; height: 100%; }
.logo .w { font-family: 'Luckiest Guy', 'Arial Black', sans-serif; letter-spacing: 0.02em; color: #fff0d2; -webkit-text-stroke: 0.09em #3b1d0b; paint-order: stroke fill; text-shadow: 0 0.06em 0 #3b1d0b, 0 0.12em 0.2em rgba(0, 0, 0, 0.45); }
.logo .w.run { color: var(--orange); font-size: 1.08em; }
.logo .tag { font-family: 'Caveat', cursive; color: #ffd98c; font-size: 0.28em; line-height: 1.05; text-align: center; margin-top: 0.35em; transform: rotate(-4deg); letter-spacing: 0.06em; }
.logo.big { font-size: clamp(56px, 12vw, 104px); }
.logo.small { font-size: 46px; }
.logo.center { margin: 0 auto 6px; }

/* ---------- buttons / inputs ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 20px; border-radius: 14px; background: rgba(255, 255, 255, 0.1); border: 1px solid var(--line); font-weight: 800; font-size: 16px; transition: transform 0.08s, filter 0.15s, background 0.15s; }
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; filter: grayscale(0.4); }
.btn.primary { background: linear-gradient(180deg, #4ad965, var(--green-2)); border-color: rgba(255, 255, 255, 0.25); box-shadow: 0 6px 18px rgba(40, 170, 70, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.btn.big { min-height: 56px; font-size: 19px; }
.btn.small { min-height: 38px; font-size: 14px; padding: 0 14px; }
.btn.ghost { background: rgba(255, 255, 255, 0.06); }
.btn.danger { background: linear-gradient(180deg, #ff766b, #d8443a); }
.icon-btn { width: 40px; height: 40px; border-radius: 12px; display: inline-grid; place-items: center; background: rgba(255, 255, 255, 0.07); border: 1px solid var(--line); }
.icon-btn:hover { background: rgba(255, 255, 255, 0.14); }
.link { color: #ffd98c; font-weight: 800; padding: 8px 10px; text-decoration: underline; text-underline-offset: 4px; }
input[type='text'], input:not([type]), input[inputmode] { width: 100%; height: 48px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(0, 0, 0, 0.35); padding: 0 14px; font-size: 16px; outline: none; user-select: text; -webkit-user-select: text; }
input:focus { border-color: rgba(255, 208, 60, 0.7); }
input[type='range'] { width: 180px; accent-color: var(--green); }
.row { display: flex; gap: 10px; align-items: center; }
.row.center { justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.err { color: var(--red); min-height: 20px; font-size: 14px; }
.toggle { width: 74px; height: 34px; border-radius: 20px; background: #555; position: relative; transition: background 0.2s; font-weight: 900; font-size: 13px; text-align: left; padding-left: 12px; }
.toggle::after { content: ''; position: absolute; right: 4px; top: 4px; width: 26px; height: 26px; border-radius: 50%; background: #fff; transition: transform 0.2s; }
.toggle.on { background: var(--green); }
.toggle:not(.on) { padding-left: 38px; }
.toggle:not(.on)::after { transform: translateX(-40px); }
.toggle:disabled { cursor: default; opacity: 0.85; }

/* ---------- landing ---------- */
#landing { display: grid; place-items: center; overflow-y: auto; padding: 20px; }
.landing-wrap { display: flex; flex-direction: column; align-items: center; gap: 22px; width: min(420px, 100%); }
.landing-card { width: 100%; padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.landing-card label { font-size: 14px; color: var(--dim); }
.or { text-align: center; color: var(--dim); font-size: 13px; position: relative; margin: 4px 0; }
.landing-links { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.scribble { position: fixed; left: 28px; bottom: 22px; font-family: 'Caveat', cursive; font-size: 30px; color: #f3e6d3; transform: rotate(-8deg); opacity: 0.9; pointer-events: none; }

/* ---------- lobby ---------- */
#lobby { display: flex; overflow: hidden; }
.side { width: 250px; flex: none; padding: 26px 18px; display: flex; flex-direction: column; gap: 30px; background: linear-gradient(90deg, rgba(10, 8, 7, 0.55), transparent); }
.side nav { display: flex; flex-direction: column; gap: 6px; }
.nav { display: flex; gap: 14px; align-items: center; padding: 12px 16px; border-radius: 12px; font-size: 18px; color: #e5ddd4; text-align: left; }
.nav .ic { width: 24px; height: 24px; }
.nav:hover, .nav.active { background: rgba(255, 255, 255, 0.1); color: #fff; }
.lobby-main { flex: 1; display: flex; flex-direction: column; gap: 18px; padding: 22px 26px 22px 6px; min-width: 0; overflow-y: auto; }
.lobby-top { display: flex; gap: 18px; align-items: stretch; justify-content: space-between; flex-wrap: wrap; }
.room-card { display: flex; align-items: center; gap: 14px; padding: 10px 18px 10px 10px; }
.room-thumb { width: 64px; height: 48px; border-radius: 10px; object-fit: cover; background: #6b4a33; }
.room-code { font-size: 20px; font-weight: 900; }
.room-id .dim { font-size: 14px; }
.room-count { border-left: 1px solid var(--line); padding-left: 18px; margin-left: 4px; font-size: 20px; }
.room-count b { color: var(--green); }
.top-right { display: flex; gap: 12px; }
.chip { display: flex; align-items: center; gap: 12px; padding: 8px 12px; font-size: 16px; }
.chip small { font-size: 12px; }
.bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 18px; }
.bars b { width: 4px; background: #555; border-radius: 1px; }
.bars b:nth-child(1) { height: 6px; } .bars b:nth-child(2) { height: 10px; } .bars b:nth-child(3) { height: 14px; } .bars b:nth-child(4) { height: 18px; }
.bars.q1 b:nth-child(-n + 1), .bars.q2 b:nth-child(-n + 2), .bars.q3 b:nth-child(-n + 3), .bars.q4 b { background: var(--green); }
#pingMs { color: var(--green); }
.me-chip { text-align: left; min-width: 190px; }
.me-chip > div { flex: 1; }
.avatar { width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; border: 2px solid rgba(255, 255, 255, 0.3); overflow: hidden; }
.avatar svg { width: 80%; height: 80%; }
.avatar.xl { width: 84px; height: 84px; }
.avatar.speaking { box-shadow: 0 0 0 3px var(--green), 0 0 14px var(--green); }
.lobby-grid { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 18px; align-items: start; }
.teams { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.team { padding: 12px; }
.team-head { display: flex; align-items: center; gap: 12px; padding: 4px 6px 12px; }
.team-head b { font-size: 20px; display: block; }
.team-head small { font-size: 12px; }
.team-head > div { flex: 1; }
.team-count { font-size: 20px; color: var(--dim); }
.team-ic { width: 38px; height: 38px; flex: none; }
.team-ic svg { width: 100%; height: 100%; }
.slots { display: flex; flex-direction: column; gap: 8px; }
.slot { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); min-height: 66px; }
.slot .nm { font-size: 17px; display: flex; gap: 6px; align-items: center; }
.slot .st { font-size: 14px; }
.slot .st.ok { color: var(--green); } .slot .st.no { color: var(--red); } .slot .st.off { color: var(--yellow); }
.slot > div { flex: 1; min-width: 0; }
.slot.me { border-color: rgba(255, 208, 60, 0.45); }
.slot.empty { color: var(--dim); }
.slot.empty .avatar { border: 2px solid rgba(255, 255, 255, 0.25); background: none; }
.slot .plus { width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.35); font-size: 22px; line-height: 1; display: grid; place-items: center; color: #ddd; }
.slot .swap { font-size: 12px; padding: 6px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.08); }
.crown { color: var(--yellow); font-size: 15px; }
.bot-tag { font-size: 10px; background: #5a6f93; border-radius: 6px; padding: 1px 6px; letter-spacing: 1px; }
.botadd { font-size: 12px; padding: 7px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.08); color: #ddd; margin-right: 4px; }
.botadd:hover { background: rgba(255, 255, 255, 0.16); }
.ping-pin { position: absolute; transform: translate(-50%, -100%); font-size: 13px; font-weight: 900; background: rgba(20, 18, 18, 0.85); border: 2px solid var(--yellow); border-radius: 10px; padding: 3px 9px; white-space: nowrap; pointer-events: none; }
.ping-pin.enemy { border-color: var(--red); }
.ping-pin::after { content: ''; position: absolute; left: 50%; bottom: -8px; margin-left: -6px; border: 6px solid transparent; border-top-color: inherit; }
.ping-pin.off { opacity: 0.75; }
.right-col { display: flex; flex-direction: column; gap: 18px; }
.map-card { padding: 12px; }
.map-card img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border-radius: 10px; background: #6b4a33; display: block; }
.map-info { padding: 10px 4px 2px; }
.map-info b { font-size: 21px; display: block; }
.map-info small { font-size: 13px; }
.settings-card { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.settings-card h3 { margin: 0 0 4px; font-size: 19px; }
.settings-card h3 small { font-size: 12px; }
.set-row { display: flex; align-items: center; gap: 12px; min-height: 40px; }
.set-row > span { flex: 1; color: #e4dcd3; }
.set-row .ic { color: var(--dim); }
.stepper { display: flex; align-items: center; gap: 6px; }
.stepper b { min-width: 86px; text-align: center; }
.stepper button { width: 32px; height: 32px; font-size: 22px; border-radius: 8px; color: #ddd; }
.stepper button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); }
.stepper button:disabled { opacity: 0.3; }
.lobby-bottom { display: grid; grid-template-columns: minmax(260px, 390px) 1fr 180px; gap: 18px; align-items: end; margin-top: auto; }
.chat { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.chat-log { max-height: 118px; min-height: 60px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; font-size: 15px; user-select: text; }
.chat-log div { display: flex; gap: 14px; }
.chat-log b { color: #fff; min-width: 70px; flex: none; }
.chat-log .sys { color: var(--dim); font-style: italic; font-size: 13px; }
.chat-form { display: flex; gap: 8px; }
.chat-form input { height: 44px; }
.chat-form .icon-btn { width: 44px; height: 44px; }
.start-area { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.start-row { display: flex; gap: 12px; align-items: center; }
.btn.start { min-width: min(420px, 60vw); min-height: 78px; font-size: 32px; border-radius: 20px; background: linear-gradient(180deg, #52df6c, #27a03f); border: 2px solid rgba(255, 255, 255, 0.3); box-shadow: 0 10px 30px rgba(40, 190, 80, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.35); }
.btn.start .ic { width: 30px; height: 30px; }
.btn.start.ready-btn { background: linear-gradient(180deg, #ffb347, #e07a1f); box-shadow: 0 10px 30px rgba(230, 130, 40, 0.3); }
.btn.start.ready-btn.is-ready { background: linear-gradient(180deg, #52df6c, #27a03f); }
.mic-btn { width: 60px; height: 60px; padding: 0; border-radius: 18px; }
.mic-btn .ic { width: 26px; height: 26px; }
.mic-btn.live { background: var(--green); }
.mic-btn.muted { background: var(--red); }
.start-status { padding: 8px 18px; border-radius: 12px; background: rgba(0, 0, 0, 0.45); font-size: 17px; text-align: center; }
.start-status b { color: var(--yellow); }
.sticky-note { justify-self: end; width: 160px; padding: 16px 14px; background: #e6b95a; color: #3a2a12; font-family: 'Caveat', cursive; font-size: 24px; line-height: 1.1; text-align: center; transform: rotate(-6deg); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.4); position: relative; }
.sticky-note small { color: #3a2a12; font-size: 18px; display: block; margin-top: 6px; }
.sticky-note .smile { font-size: 30px; display: block; }

@media (max-width: 1180px) {
  .lobby-grid { grid-template-columns: 1fr; }
  .right-col { display: grid; grid-template-columns: 1fr 1fr; }
  .lobby-bottom { grid-template-columns: 1fr; }
  .sticky-note { display: none; }
  .start-area { order: -1; }
}
@media (max-width: 820px), (max-height: 520px) and (orientation: landscape) {
  #lobby { flex-direction: column; overflow-y: auto; }
  .side { width: 100%; flex-direction: row; align-items: center; padding: calc(8px + var(--safe-t)) 12px 8px; gap: 10px; background: rgba(10, 8, 7, 0.7); position: sticky; top: 0; z-index: 5; }
  .side .logo.small { font-size: 22px; }
  .side .logo .tag, .side .logo .logo-art { display: none; }
  .side nav { flex-direction: row; gap: 2px; margin-left: auto; }
  .nav { padding: 10px; }
  .nav span { display: none; }
  .lobby-main { padding: 12px 12px calc(16px + var(--safe-b)); overflow: visible; }
  .room-card { flex: 1; flex-wrap: wrap; }
  .room-count { font-size: 16px; padding-left: 12px; }
  .top-right { width: 100%; }
  .top-right .chip { flex: 1; }
  .me-chip { min-width: 0; }
  .teams { grid-template-columns: 1fr; gap: 12px; }
  .right-col { grid-template-columns: 1fr; }
  .map-card { display: none; }
  .btn.start { min-width: 0; width: calc(100vw - 110px); min-height: 64px; font-size: 26px; }
  .slot { min-height: 56px; }
  .slot.empty:nth-child(n + 4) { display: none; }
}

/* ---------- HUD ---------- */
#hud { pointer-events: none; }
#hud > * { pointer-events: auto; }
#hud .fx-layer, #hud .crosshair, #hud .noise-ring, #hud .toast-stack, #hud .clues, #hud .big-status, #hud .prompt, #hud .cctv-overlay { pointer-events: none; }
.hud-tl { position: absolute; left: calc(18px + var(--safe-l)); top: calc(14px + var(--safe-t)); display: flex; gap: 14px; padding: 12px 18px 12px 12px; width: min(430px, 40vw); align-items: center; }
.mission-icon { font-size: 44px; width: 64px; height: 64px; display: grid; place-items: center; flex: none; background: rgba(255, 255, 255, 0.06); border-radius: 12px; }
.mission-text b { font-size: 19px; display: block; }
.mission-text p { margin: 3px 0 0; font-size: 15px; color: #e6ddd3; font-weight: 700; line-height: 1.3; }
.mission-prog { height: 7px; background: rgba(255, 255, 255, 0.12); border-radius: 4px; margin-top: 8px; overflow: hidden; }
.mission-prog i { display: block; height: 100%; background: var(--green); width: 0; transition: width 0.3s; }
#missionCard.done { border-color: rgba(60, 199, 85, 0.6); }
#missionCard.flash { animation: pulse 0.6s 2; }
@keyframes pulse { 50% { transform: scale(1.03); border-color: var(--yellow); } }
.hud-timer { position: absolute; left: 50%; top: calc(14px + var(--safe-t)); transform: translateX(-50%); padding: 6px 36px; font-size: 38px; font-weight: 900; letter-spacing: 1px; font-variant-numeric: tabular-nums; pointer-events: none; }
.hud-timer.low { color: var(--red); animation: pulse 1s infinite; }
.hud-tr { position: absolute; right: calc(18px + var(--safe-r)); top: calc(14px + var(--safe-t)); display: flex; gap: 12px; align-items: flex-start; }
.team-panel { padding: 10px 16px; }
.team-panel > b { font-size: 16px; }
.team-icons { display: flex; gap: 14px; margin-top: 6px; }
.tm { display: flex; flex-direction: column; align-items: center; font-size: 13px; gap: 2px; min-width: 50px; position: relative; }
.tm .avatar { width: 38px; height: 38px; border-width: 2px; }
.tm.you span { color: var(--green); }
.tm.jarred .avatar { border-color: var(--red); filter: grayscale(0.6); }
.tm.jarred span { color: var(--red); }
.tm.off { opacity: 0.45; }
.tm .badge { position: absolute; top: -4px; right: 2px; font-size: 14px; }
.mic-btn.round { width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; }
.minimap { position: absolute; right: calc(18px + var(--safe-r)); top: calc(110px + var(--safe-t)); width: 200px; height: 140px; border-radius: 14px; pointer-events: none !important; }
.clues { position: absolute; left: calc(18px + var(--safe-l)); top: calc(120px + var(--safe-t)); display: flex; flex-direction: column; gap: 6px; max-width: 300px; }
.clue { background: rgba(20, 18, 18, 0.7); border-radius: 10px; padding: 6px 12px; font-size: 14px; animation: fadeout 5s forwards; }
@keyframes fadeout { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
.toast-stack { position: absolute; left: 50%; top: calc(78px + var(--safe-t)); transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; align-items: center; width: min(560px, 70vw); }
.toast { background: rgba(20, 18, 18, 0.82); border: 1px solid var(--line); border-radius: 12px; padding: 7px 16px; font-size: 15px; text-align: center; animation: toastIn 0.25s ease-out, fadeout 3.6s forwards; }
.toast.good { border-color: rgba(60, 199, 85, 0.6); } .toast.bad { border-color: rgba(255, 94, 82, 0.7); } .toast.warn { border-color: rgba(255, 208, 60, 0.7); } .toast.dim { color: var(--dim); }
.toast.hint { border-color: rgba(127, 179, 255, 0.7); animation: toastIn 0.25s ease-out, fadeout 6.5s forwards; }
@keyframes toastIn { from { transform: translateY(-8px) scale(0.95); opacity: 0; } }
.crosshair { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; transform: translate(-50%, -50%); }
.crosshair i { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: rgba(255, 255, 255, 0.85); box-shadow: 0 0 3px #000; }
.crosshair svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.crosshair circle { fill: none; stroke-width: 5; }
.crosshair .ring-bg { stroke: rgba(0, 0, 0, 0); }
.crosshair .ring { stroke: var(--yellow); stroke-linecap: round; stroke-dasharray: 151; stroke-dashoffset: 151; }
.crosshair.holding .ring-bg { stroke: rgba(0, 0, 0, 0.35); }
.prompt { position: absolute; left: 50%; top: calc(50% + 46px); transform: translateX(-50%); background: rgba(20, 18, 18, 0.8); border-radius: 12px; padding: 7px 14px; font-size: 15px; white-space: nowrap; }
.prompt kbd { background: #fff; color: #222; border-radius: 5px; padding: 0 6px; margin-right: 6px; font-family: inherit; }
.big-status { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); font-family: 'Luckiest Guy', sans-serif; font-size: clamp(28px, 5vw, 48px); text-align: center; color: #fff4d8; -webkit-text-stroke: 2px #3b1d0b; paint-order: stroke fill; text-shadow: 0 4px 0 #3b1d0b; }
.big-status small { display: block; font-family: 'Nunito', sans-serif; -webkit-text-stroke: 0; font-size: 17px; color: #fff; text-shadow: 0 2px 4px #000; margin-top: 6px; }
.noise-ring { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.noise-ping { position: absolute; width: 46px; height: 46px; margin: -23px; display: grid; place-items: center; font-size: 22px; animation: fadeout 2.4s forwards; }
.noise-ping::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: rgba(255, 208, 60, 0.25); border: 2px solid rgba(255, 208, 60, 0.8); }
.noise-ping.l3::before { background: rgba(255, 94, 82, 0.3); border-color: var(--red); }

.joystick { position: absolute; left: calc(40px + var(--safe-l)); bottom: calc(34px + var(--safe-b)); width: 170px; height: 170px; border-radius: 50%; background: rgba(30, 28, 28, 0.55); border: 2px solid rgba(255, 255, 255, 0.12); touch-action: none; display: none; }
body.touch .joystick { display: block; }
.joystick .knob { position: absolute; left: 50%; top: 50%; width: 70px; height: 70px; margin: -35px; border-radius: 50%; background: rgba(200, 200, 200, 0.8); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); }
.joystick .ar { position: absolute; width: 0; height: 0; border: 9px solid transparent; opacity: 0.6; }
.joystick .up { left: 50%; top: 10px; margin-left: -9px; border-bottom-color: #ddd; }
.joystick .down { left: 50%; bottom: 10px; margin-left: -9px; border-top-color: #ddd; }
.joystick .left { top: 50%; left: 10px; margin-top: -9px; border-right-color: #ddd; }
.joystick .right { top: 50%; right: 10px; margin-top: -9px; border-left-color: #ddd; }

.actions { position: absolute; right: calc(22px + var(--safe-r)); bottom: calc(22px + var(--safe-b)); display: grid; grid-template-columns: repeat(2, auto); gap: 14px; justify-items: center; align-items: end; direction: rtl; }
.act { direction: ltr; width: 92px; height: 92px; border-radius: 50%; background: rgba(34, 32, 32, 0.78); border: 2px solid rgba(255, 255, 255, 0.16); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 15px; position: relative; touch-action: none; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35); }
.act .ic { width: 36px; height: 36px; }
.act.primary { width: 104px; height: 104px; }
.act.on { background: rgba(60, 199, 85, 0.85); }
.act.hot { border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(255, 208, 60, 0.4), 0 6px 16px rgba(0, 0, 0, 0.35); }
.act.pressed { transform: scale(0.94); }
.act.cool { opacity: 0.55; }
.act .cd { position: absolute; inset: 0; display: grid; place-items: center; font-size: 22px; font-weight: 900; background: rgba(0, 0, 0, 0.45); border-radius: 50%; }
.act .key { position: absolute; top: -6px; right: -4px; background: #fff; color: #222; font-size: 11px; border-radius: 6px; padding: 1px 6px; display: none; }
body:not(.touch) .act .key { display: block; }
body:not(.touch) .act { width: 74px; height: 74px; font-size: 13px; }
body:not(.touch) .act .ic { width: 28px; height: 28px; }
body:not(.touch) .act.primary { width: 84px; height: 84px; }
.act .count { position: absolute; bottom: -4px; left: -2px; background: var(--orange); border-radius: 10px; font-size: 12px; padding: 1px 7px; }
.nest-compass { position: absolute; right: calc(28px + var(--safe-r)); bottom: calc(345px + var(--safe-b)); width: 104px; display: flex; flex-direction: column; align-items: center; pointer-events: none !important; }
body:not(.touch) .nest-compass { bottom: calc(285px + var(--safe-b)); }
.nest-arrow { width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-bottom: 22px solid var(--yellow); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6)); margin-bottom: 4px; transform-origin: 50% 70px; }
.nest-btn { width: 104px; height: 104px; border-radius: 50%; background: rgba(34, 32, 32, 0.8); border: 2px solid rgba(255, 255, 255, 0.3); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.nest-btn .ic { width: 34px; height: 34px; color: var(--orange); }
.nest-btn b { font-size: 17px; line-height: 1; } .nest-btn small { color: #fff; font-size: 15px; }
.nest-compass.carrying .nest-btn { border-color: var(--green); box-shadow: 0 0 18px rgba(60, 199, 85, 0.5); }
.cctv-overlay { position: absolute; inset: 0; border: 3px solid rgba(255, 255, 255, 0.35); background: radial-gradient(ellipse, transparent 60%, rgba(0, 0, 0, 0.5)); }
.cctv-overlay .rec { position: absolute; left: 24px; top: 122px; color: var(--red); font-weight: 900; animation: pulse 1s infinite; }
.cctv-overlay .cam-name { position: absolute; left: 24px; bottom: 30px; font-family: monospace; font-size: 20px; background: rgba(0, 0, 0, 0.5); padding: 4px 10px; }
.cctv-overlay .cam-time { position: absolute; right: 150px; bottom: 30px; font-family: monospace; font-size: 18px; }
.cctv-overlay .scan { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 2px, transparent 2px 4px); }
body.cctv #scene { filter: grayscale(0.7) contrast(1.15) brightness(1.05); }
.rotate-hint, .desk-hint { position: absolute; left: 50%; bottom: calc(12px + var(--safe-b)); transform: translateX(-50%); background: rgba(20, 18, 18, 0.85); padding: 8px 14px; border-radius: 12px; font-size: 14px; white-space: nowrap; }
.desk-hint { pointer-events: none !important; }
.fx-layer { position: absolute; inset: 0; overflow: hidden; }
.fx-word { position: absolute; font-family: 'Luckiest Guy', 'Arial Black', sans-serif; font-size: 54px; color: #ffd83a; -webkit-text-stroke: 3px #7a2a0a; paint-order: stroke fill; text-shadow: 0 5px 0 #5a1f06; white-space: nowrap; transform: translate(-50%, -50%); animation: pop 1.1s cubic-bezier(0.2, 1.8, 0.4, 1) forwards; }
.fx-word::before { content: ''; position: absolute; inset: -40% -25%; z-index: -1; background: #ff8a1f; clip-path: polygon(50% 0, 60% 30%, 92% 10%, 72% 42%, 100% 55%, 70% 62%, 85% 100%, 55% 72%, 40% 100%, 35% 70%, 5% 88%, 25% 58%, 0 38%, 30% 35%, 18% 5%, 45% 28%); opacity: 0.9; }
.fx-word.plain::before { display: none; }
.fx-word.big { font-size: clamp(60px, 12vw, 120px); }
@keyframes pop { 0% { transform: translate(-50%, -50%) scale(0.2) rotate(-12deg); opacity: 0; } 20% { transform: translate(-50%, -50%) scale(1.15) rotate(-6deg); opacity: 1; } 75% { opacity: 1; } 100% { transform: translate(-50%, -80%) scale(1) rotate(-4deg); opacity: 0; } }
.shake { animation: shake 0.45s; }
@keyframes shake { 20% { transform: translate(8px, -6px); } 40% { transform: translate(-7px, 5px); } 60% { transform: translate(5px, 4px); } 80% { transform: translate(-3px, -2px); } }

/* ---------- overlays / modals ---------- */
.overlay { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(10, 7, 5, 0.55); z-index: 20; padding: 16px; overflow-y: auto; }
.role-card { width: min(520px, 100%); text-align: center; padding: 26px 26px 20px; }
.round-label { font-weight: 900; letter-spacing: 3px; color: var(--yellow); }
.role-art { width: 120px; height: 120px; margin: 10px auto; }
.role-art svg { width: 100%; height: 100%; }
.role-card h1 { font-family: 'Luckiest Guy', sans-serif; font-weight: 400; font-size: clamp(30px, 6vw, 44px); margin: 6px 0; color: #fff0d2; letter-spacing: 1px; }
.role-card p { font-size: 17px; color: #e8dfd6; margin: 6px 0 12px; }
.cd-num { font-family: 'Luckiest Guy', sans-serif; font-size: 64px; color: var(--orange); }
.result-card { width: min(560px, 100%); padding: 24px; text-align: center; }
.result-card.wide { width: min(820px, 100%); }
.result-card h1 { font-family: 'Luckiest Guy', sans-serif; font-weight: 400; font-size: clamp(30px, 6vw, 46px); margin: 4px 0; color: #fff0d2; }
.re-stats, .res-rounds { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 14px 0; }
.stat { background: rgba(255, 255, 255, 0.06); border-radius: 12px; padding: 10px 16px; min-width: 110px; }
.stat b { font-size: 24px; display: block; } .stat small { font-size: 13px; }
.res-round { background: rgba(255, 255, 255, 0.06); border-radius: 14px; padding: 14px; flex: 1; min-width: 240px; text-align: left; }
.res-round h3 { margin: 0 0 6px; }
.res-round.win { border: 2px solid var(--green); }
.obj-list { list-style: none; padding: 0; margin: 10px 0; text-align: left; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.obj-list li { background: rgba(255, 255, 255, 0.05); border-radius: 10px; padding: 7px 12px; }
.obj-list li.ok { border-left: 4px solid var(--green); } .obj-list li.no { border-left: 4px solid var(--red); opacity: 0.8; }
.res-players { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 15px; }
.res-players th, .res-players td { padding: 6px 8px; border-bottom: 1px solid var(--line); }
.res-players td:first-child, .res-players th:first-child { text-align: left; }
.modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); display: grid; place-items: center; z-index: 30; padding: 16px; }
.modal-card { width: min(640px, 100%); max-height: 90dvh; overflow-y: auto; padding: 24px; position: relative; display: flex; flex-direction: column; gap: 12px; }
.modal-card h2 { margin: 0 0 4px; font-family: 'Luckiest Guy', sans-serif; font-weight: 400; font-size: 32px; color: #fff0d2; }
.modal-card label { font-size: 14px; color: var(--dim); }
.close { position: absolute; right: 12px; top: 12px; width: 40px; height: 40px; border-radius: 12px; font-size: 18px; background: rgba(255, 255, 255, 0.08); }
.howto { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; font-size: 15px; font-weight: 600; }
.howto h3 { margin: 8px 0 4px; }
.howto ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
@media (max-width: 640px) { .howto { grid-template-columns: 1fr; } }
.seg { display: flex; background: rgba(0, 0, 0, 0.35); border-radius: 12px; padding: 3px; }
.seg button { padding: 8px 14px; border-radius: 10px; }
.seg button.on { background: var(--green); }
.swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.swatches button { width: 46px; height: 46px; border-radius: 50%; border: 3px solid transparent; }
.swatches button.on { border-color: #fff; }
.preview-row { display: flex; gap: 20px; justify-content: center; margin: 6px 0; }
.conn-banner { position: fixed; top: calc(10px + var(--safe-t)); left: 50%; transform: translateX(-50%); z-index: 40; background: var(--red); padding: 8px 18px; border-radius: 12px; font-weight: 900; }
.fps { position: fixed; left: 8px; bottom: 8px; z-index: 50; font: 12px monospace; background: rgba(0, 0, 0, 0.6); padding: 2px 6px; border-radius: 4px; pointer-events: none; }
.loading { position: fixed; inset: 0; z-index: 60; background: #1b1410; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; transition: opacity 0.4s; }
.loading p { color: var(--dim); }
.loading.gone { opacity: 0; pointer-events: none; }

/* compact HUD for small / landscape phones */
@media (max-height: 520px), (max-width: 700px) {
  .hud-tl { width: min(300px, 44vw); padding: 8px 10px 8px 8px; gap: 8px; top: calc(8px + var(--safe-t)); left: calc(10px + var(--safe-l)); }
  .mission-icon { width: 44px; height: 44px; font-size: 28px; }
  .mission-text b { font-size: 14px; } .mission-text p { font-size: 12px; }
  .hud-timer { font-size: 24px; padding: 4px 18px; top: calc(8px + var(--safe-t)); }
  .hud-tr { top: calc(8px + var(--safe-t)); right: calc(10px + var(--safe-r)); gap: 8px; }
  .team-panel { padding: 6px 10px; } .team-panel > b { font-size: 12px; }
  .team-icons { gap: 6px; } .tm { min-width: 34px; font-size: 10px; } .tm .avatar { width: 26px; height: 26px; }
  .mic-btn.round { width: 44px; height: 44px; }
  .minimap { width: 130px; height: 91px; top: calc(76px + var(--safe-t)); right: calc(10px + var(--safe-r)); }
  .toast-stack { top: calc(50px + var(--safe-t)); } .toast { font-size: 13px; padding: 5px 12px; }
  .clues { top: calc(80px + var(--safe-t)); left: calc(10px + var(--safe-l)); } .clue { font-size: 12px; }
  .joystick { width: 130px; height: 130px; left: calc(24px + var(--safe-l)); bottom: calc(16px + var(--safe-b)); }
  .joystick .knob { width: 56px; height: 56px; margin: -28px; }
  .actions { gap: 8px; right: calc(12px + var(--safe-r)); bottom: calc(12px + var(--safe-b)); }
  .act { width: 70px; height: 70px; font-size: 12px; } .act .ic { width: 26px; height: 26px; }
  .act.primary { width: 80px; height: 80px; }
  .nest-compass { bottom: calc(262px + var(--safe-b)); right: calc(14px + var(--safe-r)); width: 76px; }
  .nest-btn { width: 72px; height: 72px; } .nest-btn .ic { width: 22px; height: 22px; } .nest-btn b { font-size: 13px; } .nest-btn small { font-size: 12px; }
  .fx-word { font-size: 38px; }
  .cctv-overlay .rec { top: 60px; }
}
/* short landscape phones: 3-column action cluster, compass beside it */
@media (max-height: 520px) and (orientation: landscape) {
  .actions { grid-template-columns: repeat(3, auto); gap: 8px; }
  .act, body:not(.touch) .act { width: 60px; height: 60px; font-size: 11px; gap: 2px; }
  .act .ic, body:not(.touch) .act .ic { width: 22px; height: 22px; }
  .act.primary, body:not(.touch) .act.primary { width: 70px; height: 70px; }
  .nest-compass, body:not(.touch) .nest-compass { bottom: calc(10px + var(--safe-b)); right: calc(242px + var(--safe-r)); width: 72px; }
  .minimap { width: 120px; height: 84px; top: calc(94px + var(--safe-t)); }
  .hud-tl { width: min(300px, 36vw); }
}
body.touch .desk-hint { display: none !important; }
@media (orientation: portrait) and (max-width: 700px) {
  .hud-tl { width: calc(100vw - 20px); top: calc(56px + var(--safe-t)); }
  .hud-tr { left: calc(10px + var(--safe-l)); right: auto; }
  .team-panel { display: none; }
  .minimap { top: calc(8px + var(--safe-t)); }
  .toast-stack { top: calc(140px + var(--safe-t)); width: 92vw; }
  .clues { top: calc(140px + var(--safe-t)); }
}

/* final results (compact) */
.res-teams { display: flex; gap: 12px; justify-content: center; margin: 14px 0; }
.res-team { flex: 1; max-width: 240px; background: rgba(255, 255, 255, 0.06); border-radius: 14px; padding: 12px; border: 2px solid transparent; }
.res-team.win { border-color: var(--green); }
.res-team h3 { margin: 0 0 4px; font-size: 16px; }
.res-team .big-num { font-family: 'Luckiest Guy', sans-serif; font-size: 34px; line-height: 1.1; color: #fff0d2; }
.res-team small { color: var(--dim); }
.res-line { margin-top: 6px; font-size: 14px; }
.res-stars { font-size: 15px; line-height: 1.7; margin: 4px 0 12px; }
#iosFsHint { font-size: 13px; margin: 10px 0 0; text-align: center; }
@media (max-height: 520px) and (orientation: landscape) { .result-card { padding: 14px; } .res-teams { margin: 8px 0; } .res-team .big-num { font-size: 26px; } }

/* first-time guide */
.coach { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: min(380px, calc(100% - 32px)); z-index: 45; padding: 14px 16px; border-radius: var(--r); border: 2px solid var(--yellow); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); }
.coach.low { bottom: auto; top: calc(16px + env(safe-area-inset-top, 0px)); }
.coach-step { font-size: 12px; color: var(--yellow); font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.coach h3 { margin: 4px 0 6px; font-size: 18px; }
.coach p { margin: 0 0 12px; font-size: 14px; line-height: 1.45; color: var(--text); }
.coach .row { display: flex; gap: 8px; }
.coach-ring { position: fixed; z-index: 44; pointer-events: none; border: 3px solid var(--yellow); border-radius: 18px; animation: coachPulse 1.2s ease-in-out infinite; }
@keyframes coachPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 208, 60, 0.7); } 50% { box-shadow: 0 0 0 10px rgba(255, 208, 60, 0); } }
@media (max-height: 520px) and (orientation: landscape) { .coach { padding: 10px 12px; } .coach p { font-size: 13px; margin-bottom: 8px; } .coach h3 { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .coach-ring { animation: none; } }
.cd-mic { margin: 8px 0; padding: 8px 10px; border-radius: 12px; background: rgba(255, 208, 60, 0.14); border: 1px solid rgba(255, 208, 60, 0.5); font-size: 14px; display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; }