.event-qr { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 14px; border-radius: 20px; background: #fff; color: #172129; text-decoration: none; text-align: center; box-shadow: 0 14px 50px #0003; }
.event-qr img { display: block; width: 180px; height: 180px; max-width: 100%; object-fit: contain; }
.event-qr strong { font: 700 15px/1.3 var(--font-head, sans-serif); }
.event-qr span { max-width: 190px; font: 500 11px/1.5 var(--font-body, sans-serif); color: #59616a; }
/* An invitation for the people watching, independent of the open game/panel. */
.phone-game-callout {
  position: absolute; z-index: 6; left: clamp(18px, 2.6vw, 48px); bottom: max(24px, env(safe-area-inset-bottom));
  display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 14px;
  width: 328px; box-sizing: border-box; padding: 12px; border-radius: 20px;
  color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,.2); background: rgba(14,18,20,.78);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 12px 32px rgba(0,0,0,.24);
}
.phone-game-callout img { display: block; width: 112px; height: 112px; border-radius: 10px; background: #fff; }
.phone-game-copy { display: grid; gap: 7px; }
.phone-game-copy strong { color: var(--yellow, #FFD21F); font: 700 15px/1.3 var(--font-head, sans-serif); }
.phone-game-copy > span { color: rgba(255,255,255,.76); font: 400 12px/1.5 var(--font-body, sans-serif); }
.phone-game-callout:hover { border-color: var(--yellow, #FFD21F); }
.phone-game-callout:focus-visible { outline: 2px solid var(--yellow, #FFD21F); outline-offset: 4px; }
@media (max-width: 1100px) {
  .phone-game-callout { left: 18px; width: 274px; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 10px; }
  .phone-game-callout img { width: 96px; height: 96px; }
  .phone-game-copy strong { font-size: 14px; }
  .phone-game-copy > span { font-size: 11px; }
}
@media (min-width: 601px) and (orientation: portrait) {
  .phone-game-callout { bottom: calc(112px + env(safe-area-inset-bottom)); }
  body.has-phone-game-qr .trivia-stage .trivia-body { bottom: calc(272px + env(safe-area-inset-bottom)); }
}
@media (max-height: 820px) and (min-width: 1101px) and (orientation: landscape) {
  body.has-phone-game-qr .booth-rail-explore { top: 46%; gap: 8px; }
}
@media (max-width: 600px) { .phone-game-callout { display: none; } }
@media (min-width: 601px) { body.has-phone-game-qr .game-phone-shortcut { display: none; } }
.event-mobile-header { position: fixed; z-index: 8; top: 0; left: 0; right: 0; padding: max(18px, env(safe-area-inset-top)) 22px 14px; background: linear-gradient(#10151ef0, #10151e00); color: #fff; pointer-events: none; }
.event-mobile-header small { color: #d2d9df; font: 600 10px var(--font-head); letter-spacing: .18em; }
.event-mobile-header h1 { margin: 6px 0 0; font: 700 clamp(17px, 4.5vw, 24px)/1.3 var(--font-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event-mobile-nav { position: fixed; z-index: 40; bottom: 0; left: 0; right: 0; display: flex; gap: 8px; padding: 12px 12px max(14px, env(safe-area-inset-bottom)); background: #111822f5; border-top: 1px solid #ffffff21; }
.event-mobile-nav button { flex: 1; min-height: 48px; padding: 9px 6px; color: #fff; background: #ffffff12; border: 1px solid #ffffff24; border-radius: 14px; font: 600 12px var(--font-body); cursor: pointer; }
.event-mobile-nav button:first-child { color: #172129; background: var(--yellow); border-color: var(--yellow); }
.event-mobile-dialog { width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); margin: auto; box-sizing: border-box; overflow-y: auto; padding: 28px; border: 1px solid #ffffff30; border-radius: 26px; color: #f5f7fb; background: #18212e; box-shadow: 0 24px 100px #0008; font: 400 14px/1.6 var(--font-body); }
.event-mobile-dialog::backdrop { background: #070d17aa; backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.event-mobile-dialog h2 { margin: 12px 0; font: 700 30px/1.2 var(--font-head); letter-spacing: -.04em; }
.event-mobile-dialog p { color: #bdc8d8; }
.event-mobile-eyebrow { color: var(--yellow); font-weight: 600; }
.event-mobile-dialog label { display: grid; gap: 6px; margin: 16px 0; font-size: 12px; font-weight: 600; }
.event-mobile-dialog input, .event-mobile-dialog select { width: 100%; min-height: 48px; box-sizing: border-box; padding: 11px 13px; border: 1px solid #ffffff30; border-radius: 12px; color: #fff; background: #101823; font: 400 16px var(--font-body); }
.event-mobile-dialog input:focus, .event-mobile-dialog select:focus { outline: 2px solid var(--yellow); outline-offset: 2px; }
.event-mobile-dialog button { min-height: 46px; border: 0; border-radius: 12px; cursor: pointer; font: 700 14px var(--font-head); }
.event-mobile-dialog button[type=submit] { width: 100%; margin: 6px 0 12px; color: #172129; background: var(--yellow); }
.event-mobile-consent { display: block; font-size: 11px; line-height: 1.6; color: #adbbcc; }
.event-mobile-dialog .event-mobile-error { color: #ffb4ac; }
.event-mobile-error:empty { display: none; }
.event-mobile-choices { display: grid; gap: 10px; }
.event-mobile-choices button { display: grid; gap: 5px; padding: 18px; text-align: left; color: #f5f7fb; background: #ffffff0c; border: 1px solid #ffffff20; }
.event-mobile-choices small { color: #adbbcc; font: 400 12px/1.5 var(--font-body); }
.event-mobile-choices button:first-child { border-color: var(--yellow); }
.event-mobile-options > button { float: right; color: #d2d9e2; background: #ffffff12; padding: 8px 12px; }
.event-mobile-options h2 { clear: both; padding-top: 14px; }
.event-mobile-close { float: right; padding: 8px 12px; color: #d2d9e2; background: #ffffff12; }
.event-mobile-board h2 { clear: both; padding-top: 10px; font-size: 24px; }
.event-mobile-status { font-size: 11px; }
.event-mobile-ranks { margin: 10px 0 0; padding: 0; list-style: none; }
.event-mobile-ranks li { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid #ffffff18; }
.event-mobile-ranks li > b { color: var(--yellow); min-width: 20px; }
.event-mobile-ranks li > span { display: grid; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.event-mobile-ranks small { color: #adbbcc; font-size: 11px; }
.event-mobile-ranks em { font-size: 12px; font-style: normal; }
body[data-event-mobile] #topbar, body[data-event-mobile] .booth-rail, body[data-event-mobile] #attract, body[data-event-mobile] #bottombar { display: none; }
body[data-event-mobile][data-mobile-voice] #bottombar { display: flex; bottom: 76px; padding: 8px 12px; justify-content: center; }
body[data-event-mobile] #bottombar :is(.compact-explore, .booth-menu, .visitor-badge, .chips, .booth-icon-credit) { display: none; }
body[data-event-mobile] #panelRoot { left: 12px; right: 12px; top: 94px; bottom: 90px; width: auto; transform: none; }
body[data-event-mobile] .stage-panel { width: 100%; max-height: 100%; }
body[data-event-mobile] .event-mobile-nav:has(~ dialog[open]) { visibility: hidden; }
body[data-event-mobile][data-stage-game] .event-mobile-header { display: none; }
.event-mobile-settings { display: flex; align-items: center; gap: 28px; margin-bottom: 24px; }
.event-mobile-settings > div { flex: 1; min-width: 0; }
.event-mobile-settings input { width: 100%; box-sizing: border-box; margin: 8px 0 14px; padding: 10px; border: 1px solid #d6dde2; border-radius: 8px; }
.event-mobile-settings .event-qr { flex-shrink: 0; border: 1px solid #e6eaef; box-shadow: none; }
@media (max-width: 650px) { .event-mobile-settings { flex-direction: column; align-items: stretch; } .event-mobile-settings .event-qr { align-self: center; } }