/* Mobile preparation screens. Loaded after host layouts; gameplay stays in
   host-phone.css. All rules opt in explicitly, including mobile Safari. */
html.mobile-shell[data-shell-screen] {
  --ms-bg: #032333;
  --ms-panel: #123443;
  --ms-ink: #fff2db;
  --ms-muted: #a8bac1;
  --ms-line: rgba(220, 238, 240, .10);
  --ms-accent: #f3a400;
  --ms-button: var(--mj-shell-button, #fff4e3);
  --ms-button-ink: var(--mj-shell-button-ink, #133441);
  --ms-top: max(env(safe-area-inset-top), 20px);
  --ms-bottom: max(env(safe-area-inset-bottom), 20px);
}
html.mobile-shell[data-appearance="light"] {
  --ms-bg: #f8f2e7;
  --ms-panel: #fffaf2;
  --ms-ink: #183441;
  --ms-muted: #64767c;
  --ms-line: rgba(32, 58, 68, .14);
}
html.mobile-shell.mobile-shell[data-shell-screen]:not([data-shell-screen="play"]) body {
  padding: 0; background: var(--ms-bg); color: var(--ms-ink);
}
html.mobile-shell[data-shell-screen]:not([data-shell-screen="play"]) :is(.page-header, #top-left-bar, #rotate-overlay, #fullscreen-btn) { display: none !important; }
/* The web game picker can be wider than a portrait viewport. Remove its
   covered layout while preparing so Safari cannot pan the fixed menus. */
html.mobile-shell[data-shell-screen]:not([data-shell-screen="play"]) #app { display: none; }
/* Retire the old blanket portrait blocker: preparation is now a real screen. */
html.mobile-shell.native-iphone.native-phone-host body::before,
html.mobile-shell.native-iphone.native-phone-host body::after { display: none !important; }
html.mobile-shell.mobile-shell[data-shell-screen] button { touch-action: manipulation; }
html.mobile-shell.mobile-shell[data-shell-screen] :is(#main-menu, #settings-overlay, #cqhub-overlay, .ms-quick-settings, .ms-account-dialog) button { margin: 0; box-sizing: border-box; }
html.mobile-shell[data-shell-screen] :is(button, summary, [role="button"]):focus-visible {
  outline: 3px solid var(--ms-accent); outline-offset: 4px;
}
html.mobile-shell.mobile-shell[data-shell-screen] #main-menu {
  position: fixed; inset: 0; z-index: 110;
  width: 100%; height: 100dvh; min-height: 0;
  box-sizing: border-box; padding: calc(var(--ms-top) + 10px) 24px var(--ms-bottom);
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
  overflow-x: hidden; overflow-y: auto;
  background: var(--ms-bg) url('/assets/home-bg-portrait.png') center / cover no-repeat;
  transition: opacity 200ms ease; color: var(--ms-ink);
}
html.mobile-shell[data-appearance="light"] #main-menu {
  background: radial-gradient(ellipse at 50% 34%, #ffe4ad 0%, transparent 62%), var(--ms-bg);
}
html.mobile-shell.mobile-shell #main-menu::before,
html.mobile-shell.mobile-shell #main-menu::after { display: none; }
html.mobile-shell #main-menu .mm-glow { display: none; }
html.mobile-shell #main-menu .ms-home-header {
  flex: 0 0 48px; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  position: relative; z-index: 2;
}
html.mobile-shell.mobile-shell #main-menu .mm-auth {
  position: static; inset: auto; padding: 0; min-width: 0; max-width: 62%; margin: 0;
}
html.mobile-shell.mobile-shell #main-menu .mm-user-pill {
  display: flex; align-items: center; gap: 9px; width: auto; min-width: 0; min-height: 44px;
  background: transparent; border: 0; box-shadow: none; border-radius: 14px; padding: 0; cursor: pointer;
}
html.mobile-shell.mobile-shell #main-menu .mm-user-avatar {
  flex: 0 0 38px; width: 38px; height: 38px; border: 1px solid var(--ms-line); box-shadow: none;
}
html.mobile-shell.mobile-shell #main-menu .mm-user-name {
  min-width: 0; max-width: 130px; font-size: 14px; color: var(--ms-ink); text-shadow: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html.mobile-shell #main-menu :is(.btn-mm-signout, .btn-mm-mute) { display: none !important; }
html.mobile-shell.mobile-shell #main-menu :is(.btn-mm-store, .btn-mm-signin) {
  position: static; width: auto; min-width: 0; height: 44px; min-height: 44px;
  padding: 0 12px; gap: 8px; border: 1px solid var(--ms-line); border-radius: 14px;
  background: var(--ms-button); color: var(--ms-button-ink); font-size: 13px;
  box-shadow: none; text-shadow: none; -webkit-text-stroke: 0; transform: none; filter: none;
}
html.mobile-shell #main-menu .mm-spacer-top { flex: 1 0 35px; }
html.mobile-shell.mobile-shell #main-menu .mm-logo {
  position: relative; inset: auto; align-self: center; flex: 0 0 auto;
  width: min(83%, 310px); height: auto; max-height: 180px; object-fit: contain;
  margin: 0; transform: none; filter: drop-shadow(0 14px 20px rgba(0, 0, 0, .13));
}
html.mobile-shell #main-menu .mm-spacer-mid { flex: 1.3 0 55px; }
html.mobile-shell #main-menu .mm-spacer-bot { flex: 0 0 10px; }
html.mobile-shell.mobile-shell #main-menu .mm-buttons {
  position: relative; inset: auto; display: flex; flex-direction: column; align-items: stretch;
  gap: 20px; flex: 0 0 auto; width: 100%; max-width: 420px; margin: 0 auto;
  padding: 0; transform: none;
}
html.mobile-shell.mobile-shell #main-menu .btn-mm-play {
  width: 100%; min-height: 64px; height: auto; padding: 13px 20px;
  border: 1px solid #ffbd38; border-radius: 20px; background: var(--ms-accent); color: #162b32;
  font-size: 23px; line-height: 1.4; font-weight: 700; text-shadow: none; -webkit-text-stroke: 0;
  box-shadow: 0 3px 0 #a36700, 0 12px 28px #00101a25, inset 0 1px 0 #ffe1a133; filter: none; transform: none;
}
html.mobile-shell #main-menu .btn-mm-play .mj-icon { filter: none; width: 22px; height: 22px; }
html.mobile-shell.mobile-shell #main-menu .mm-row {
  display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 0; margin: 0;
  border: 1px solid #fff6e9; border-radius: 18px; background: var(--ms-button);
}
html.mobile-shell.mobile-shell #main-menu :is(.btn-mm-questions, .btn-mm-settings) {
  width: 100%; min-width: 0; min-height: 62px; height: auto; padding: 12px 8px;
  background: transparent; color: var(--ms-button-ink); border: 0;
  border-radius: 18px; font-size: 15px; line-height: 1.6; box-shadow: none; text-shadow: none;
  -webkit-text-stroke: 0; transform: none; filter: none;
}
html.mobile-shell #main-menu :is(.btn-mm-play, .btn-mm-questions, .btn-mm-settings):active { translate: 0 2px; }
html.mobile-shell #main-menu .btn-mm-questions { position: relative; }
html.mobile-shell #main-menu .btn-mm-questions::after { content: ''; position: absolute; inset-inline-end: 0; top: 18px; bottom: 18px; border-inline-end: 1px solid #18394721; }
html.mobile-shell[data-appearance="light"] #main-menu .mm-row { background: #fffaf2cc; }
html.mobile-shell.mobile-shell #main-menu button { outline: none; }
html.mobile-shell.mobile-shell #main-menu button:focus-visible { outline: 3px solid var(--ms-accent); outline-offset: 4px; }
html.mobile-shell #main-menu .beta-banner { position: static; font-size: 11px; margin: 10px 0 0; }
html.mobile-shell #rotate-overlay .rotate-icon { animation: none; }

/* Shared portrait page: one scrolling surface, consistent safe-area header. */
html.mobile-shell.mobile-shell[data-shell-screen] :is(#settings-overlay, #cqhub-overlay, #history-overlay, #admin-overlay) {
  position: fixed; inset: 0; width: 100%; max-width: none; height: 100dvh; min-height: 0;
  box-sizing: border-box; padding: var(--ms-top) 20px calc(var(--ms-bottom) + 16px);
  overflow-y: auto; overflow-x: hidden; background: linear-gradient(#03233335, #03233335), url('/assets/home-bg-portrait.png') center / cover no-repeat var(--ms-bg); color: var(--ms-ink);
  font-family: 'Cairo', sans-serif; font-weight: 600;
  text-align: right; overscroll-behavior: contain; scroll-padding-top: 90px;
}
html.mobile-shell.mobile-shell[data-shell-screen] :is(#settings-overlay, #cqhub-overlay, #history-overlay, #admin-overlay).open {
  display: block; animation: ms-page-in 180ms ease-out both;
}
html.mobile-shell.mobile-shell[data-appearance="light"] :is(#settings-overlay, #cqhub-overlay, #history-overlay, #admin-overlay) { background: var(--ms-bg); }
html.mobile-shell.mobile-shell[data-appearance="light"] #cqhub-overlay .cqhub-card { background: var(--ms-panel); }
html.mobile-shell.mobile-shell[data-shell-screen] :is(#settings-overlay, #cqhub-overlay, #history-overlay, #admin-overlay) .settings-topbar {
  position: sticky; top: calc(-1 * var(--ms-top)); z-index: 5;
  display: grid !important; grid-template-columns: 48px 1fr 48px; align-items: center;
  gap: 12px; width: 100%; height: auto; min-height: 66px; max-width: none;
  margin: 0 0 24px; padding: 10px 0; border: 0; background: var(--ms-bg); box-shadow: 0 14px 18px -18px #00121b80;
}
html.mobile-shell.mobile-shell[data-shell-screen] :is(#settings-overlay, #cqhub-overlay, #history-overlay, #admin-overlay) .settings-topbar .btn-back {
  grid-column: 1; grid-row: 1; outline: 0;
  position: static; inset: auto; width: 44px; min-width: 44px; height: 44px; min-height: 44px;
  padding: 0 !important; border: 1px solid var(--ms-line); border-radius: 15px; box-shadow: none;
  background: var(--ms-button); color: var(--ms-button-ink); font-size: 0 !important; transform: none; filter: none;
}
html.mobile-shell.mobile-shell[data-shell-screen] :is(#settings-overlay, #cqhub-overlay, #history-overlay, #admin-overlay) .settings-topbar .btn-back::before { content: '→'; font-size: 23px; }
html.mobile-shell.mobile-shell[data-shell-screen] :is(#settings-overlay, #cqhub-overlay, #history-overlay, #admin-overlay) .settings-title {
  grid-column: 2; grid-row: 1; max-width: none; margin: 0;
  position: static; inset: auto; transform: none; width: auto; text-align: center;
  color: var(--ms-ink); font-family: 'IBM Plex Sans Arabic', 'Cairo', sans-serif; font-size: 24px !important; line-height: 1.5; text-shadow: none;
}
html.mobile-shell.mobile-shell[data-shell-screen] #settings-overlay > .settings-section,
html.mobile-shell.mobile-shell[data-shell-screen] .ms-disclosure {
  width: 100%; max-width: none; margin: 0 0 24px; padding: 0; float: none; grid-area: auto;
}
html.mobile-shell.mobile-shell[data-shell-screen] .settings-section-title {
  text-align: right; font-size: 13px; color: var(--ms-muted); margin: 0 4px 10px; letter-spacing: 0;
}
html.mobile-shell.mobile-shell[data-shell-screen] :is(.ms-sound, .ms-quick-body) :is(.toggle-row, .vol-row) {
  margin: 0; padding: 13px 16px; border: 0; border-radius: 0; background: var(--ms-panel); box-shadow: none;
  min-height: 0; width: 100%; box-sizing: border-box;
}
html.mobile-shell.mobile-shell[data-shell-screen] .ms-sound .toggle-row { border-radius: 20px 20px 0 0; }
html.mobile-shell.mobile-shell[data-shell-screen] .ms-sound .vol-row { border-top: 1px solid var(--ms-line); }
html.mobile-shell.mobile-shell[data-shell-screen] .ms-sound .vol-row:last-child { border-radius: 0 0 20px 20px; }
html.mobile-shell.mobile-shell[data-shell-screen] :is(.toggle-label, .vol-label) { color: var(--ms-ink); font-size: 14px; font-weight: 600; text-shadow: none; }
html.mobile-shell.mobile-shell[data-shell-screen] .vol-head { margin: 0 0 8px; }
html.mobile-shell.mobile-shell[data-shell-screen] .vol-pct { color: var(--ms-muted); font-size: 13px; }
html.mobile-shell.mobile-shell[data-shell-screen] .vol-slider { height: 26px; min-height: 26px; margin: 0; accent-color: var(--ms-accent); }
html.mobile-shell.mobile-shell[data-shell-screen] .toggle-track { width: 50px; min-width: 50px; height: 30px; min-height: 30px; padding: 0; flex: 0 0 50px; box-shadow: none; }
html.mobile-shell.mobile-shell[data-shell-screen] .toggle-track::after { width: 24px; height: 24px; top: 3px; }
html.mobile-shell.mobile-shell[data-shell-screen] .ms-disclosure,
html.mobile-shell.mobile-shell[data-shell-screen] .ms-question-options { border: 1px solid var(--ms-line); border-radius: 20px; background: var(--ms-panel); overflow: hidden; }
html.mobile-shell.mobile-shell[data-shell-screen] summary {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 16px;
  list-style: none; cursor: pointer; text-align: right; font-size: 16px; font-weight: 700; color: var(--ms-ink);
}
html.mobile-shell summary::-webkit-details-marker { display: none; }
html.mobile-shell summary::after { content: '⌄'; margin-inline-start: auto; color: var(--ms-muted); }
html.mobile-shell details[open] > summary::after { transform: rotate(180deg); }
html.mobile-shell.mobile-shell[data-shell-screen] .ms-disclosure > .settings-section { width: auto; margin: 0; padding: 0 16px 16px; }
html.mobile-shell .ms-setting-value { font-size: 13px; color: var(--ms-muted); margin-inline-start: auto; }
html.mobile-shell .ms-timer summary::after { margin-inline-start: 0; }
html.mobile-shell.mobile-shell[data-shell-screen] .timer-pills { display: flex; flex-direction: column; gap: 6px; }
html.mobile-shell.mobile-shell[data-shell-screen] .timer-pill {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  min-height: 48px; padding: 8px 12px; border: 1px solid var(--ms-line); border-radius: 12px;
  background: var(--ms-button); box-shadow: none; font-size: 15px; color: var(--ms-button-ink);
}
html.mobile-shell.mobile-shell[data-shell-screen] .timer-pill.selected { color: #152a31; background: var(--ms-accent); border-color: transparent; box-shadow: none; }
html.mobile-shell.mobile-shell[data-shell-screen] .timer-pill .tp-sub { color: inherit; font-size: 12px; opacity: .75; }
html.mobile-shell .appearance-row { display: none !important; }
html.mobile-shell .ms-appearance { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
html.mobile-shell .ms-appearance button {
  min-width: 0; width: 100%; padding: 10px 8px;
  display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px;
  border: 1px solid #fff6e9; border-radius: 18px; color: var(--ms-button-ink); background: var(--ms-button); font: inherit;
}
html.mobile-shell .ms-appearance button[aria-pressed="true"] { border-color: var(--ms-accent); box-shadow: inset 0 0 0 1px var(--ms-accent); }
html.mobile-shell .ms-color-swatch { width: 23px; height: 23px; border-radius: 50%; background: #062333; border: 1px solid #63818e; }
html.mobile-shell [data-appearance="light"] .ms-color-swatch { background: #fff2db; }
html.mobile-shell.mobile-shell[data-shell-screen] :is(.ms-question-shortcut, .ms-mode-switch) .settings-section-title { display: none; }
html.mobile-shell.mobile-shell[data-shell-screen] #settings-overlay :is(.btn-fullscreen, .btn-mode-switch, .btn-account-history, .ms-signout) {
  display: flex; align-items: center; justify-content: space-between; min-height: 54px; width: 100%;
  border: 1px solid var(--ms-line); border-radius: 16px; padding: 12px 16px;
  background: var(--ms-button); color: var(--ms-button-ink); box-shadow: none; font: inherit; text-align: right;
}
html.mobile-shell [hidden] { display: none !important; }
html.mobile-shell .ms-help details { border-top: 1px solid var(--ms-line); }
html.mobile-shell.mobile-shell[data-shell-screen] .how-to-card { padding: 8px 12px; margin: 0; background: transparent; border: 0; }
html.mobile-shell.mobile-shell[data-shell-screen] .how-to-card p { font-size: 14px; line-height: 1.9; color: var(--ms-muted); }
html.mobile-shell .ms-delete summary { color: #ec8585; font-size: 14px; padding-inline: 0; }
html.mobile-shell .ms-account .account-note { text-align: right; line-height: 2; }

/* A compact question library, preserving the existing server-driven cards. */
html.mobile-shell.mobile-shell[data-shell-screen] #cqhub-overlay .cqhub-hero {
  display: block; min-height: 0; height: auto; padding: 0; margin: 0 0 20px;
  border: 0; background: transparent; box-shadow: none;
}
html.mobile-shell #cqhub-overlay :is(.cqhub-hero-art, .cqhub-hero-kicker, .cqhub-hero h1, .cqhub-card-desc, .cqhub-beta) { display: none !important; }
html.mobile-shell.mobile-shell[data-shell-screen] #cqhub-overlay .cqhub-hero p { text-align: right; font-size: 15px; color: var(--ms-muted); margin: 0; }
html.mobile-shell.mobile-shell[data-shell-screen] .cqhub-account { margin: -10px 0 20px; font-size: 12px; color: var(--ms-muted); text-align: right; overflow-wrap: anywhere; }
html.mobile-shell.mobile-shell[data-shell-screen] #cqhub-overlay .cqhub-grid { display: flex; flex-direction: column; gap: 12px; margin: 0; }
html.mobile-shell.mobile-shell[data-shell-screen] #cqhub-overlay .cqhub-card {
  display: grid; grid-template-columns: 80px minmax(0, 1fr); align-items: stretch; gap: 0;
  min-height: 112px; height: auto; max-height: none; width: 100%; margin: 0;
  padding: 12px; border: 1px solid var(--ms-line); border-radius: 18px;
  background: var(--ms-panel); box-shadow: 0 5px 16px #00111c18; overflow: hidden;
}
html.mobile-shell.mobile-shell[data-shell-screen] #cqhub-overlay .cqhub-card-visual {
  position: relative; width: 68px; height: 88px; min-height: 0; overflow: hidden; border-radius: 10px;
}
html.mobile-shell.mobile-shell[data-shell-screen] #cqhub-overlay .cqhub-card-visual img {
  position: static; width: 100%; height: 100%; object-fit: cover; object-position: top; transform: none;
}
html.mobile-shell.mobile-shell[data-shell-screen] #cqhub-overlay .cqhub-card-status {
  position: absolute; top: auto; bottom: 4px; right: 4px; left: 4px;
  min-width: 0; min-height: 0; padding: 2px 4px; border: 0; border-radius: 7px;
  font-size: 10px; line-height: 1.5; text-align: center; background: #071c29df; color: #fff2db;
}
html.mobile-shell.mobile-shell[data-shell-screen] #cqhub-overlay .cqhub-card-body { display: flex; flex-direction: column; padding: 0 14px 0 0; min-width: 0; }
html.mobile-shell.mobile-shell[data-shell-screen] #cqhub-overlay .cqhub-card-head { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
html.mobile-shell.mobile-shell[data-shell-screen] #cqhub-overlay .cqhub-card-name { font-family: 'IBM Plex Sans Arabic', 'Cairo', sans-serif; font-size: 18px; color: var(--ms-ink); text-shadow: none; }
html.mobile-shell.mobile-shell[data-shell-screen] #cqhub-overlay .cqhub-card-count { color: var(--ms-muted); font-size: 12px; }
html.mobile-shell.mobile-shell[data-shell-screen] #cqhub-overlay .cqhub-card-count-num { font-size: inherit; }
html.mobile-shell.mobile-shell[data-shell-screen] #cqhub-overlay .cqhub-card-foot { margin-top: auto; padding: 0; }
html.mobile-shell.mobile-shell[data-shell-screen] #cqhub-overlay .cqhub-card-cta {
  min-height: 36px; padding: 3px 12px; margin: 0; border: 0; border-radius: 10px;
  font-size: 12px; background: var(--ms-button); color: var(--ms-button-ink); box-shadow: none; text-align: right;
}
html.mobile-shell #cqhub-overlay .cqhub-card-cta::after { content: ' ←'; }
html.mobile-shell.mobile-shell[data-shell-screen] #cqhub-overlay .cqhub-suggest-btn {
  width: 100%; min-height: 48px; margin: 20px 0 0; padding: 10px; background: transparent;
  border: 0; font-size: 13px; color: var(--ms-muted); box-shadow: none;
}
html.mobile-shell.mobile-shell[data-shell-screen] #cqhub-overlay .cqhub-editor-head { display: none; }
html.mobile-shell.mobile-shell[data-shell-screen] #cqhub-overlay .cqhub-locked {
  padding: 32px 22px; margin-top: 36px; border: 1px solid var(--ms-line); border-radius: 24px;
  background: var(--ms-panel); color: var(--ms-ink); text-align: center;
}
html.mobile-shell.mobile-shell[data-shell-screen] #cqhub-overlay .cqhub-locked-text { font-size: 15px; color: var(--ms-muted); line-height: 1.8; }
html.mobile-shell.mobile-shell[data-shell-screen] #cqhub-edit-body { display: flex; flex-direction: column; gap: 16px; }
html.mobile-shell.mobile-shell[data-shell-screen] #cqhub-edit-body[style*="none"] { display: none; }
html.mobile-shell.mobile-shell[data-shell-screen] #cqhub-overlay .cqhub-composer {
  display: none; order: 1; padding: 16px; margin: 0; border: 1px solid var(--ms-line);
  border-radius: 22px; background: var(--ms-panel); scroll-margin-top: 90px;
}
html.mobile-shell.mobile-shell[data-shell-screen] #cqhub-overlay .cqhub-composer.is-editing { display: block; }
html.mobile-shell .ms-add-question { order: 0; }
html.mobile-shell.mobile-shell[data-shell-screen] :is(.ms-add-question, #cqhub-overlay .cqhub-add-btn, #cqhub-overlay .cqhub-locked-cta) {
  width: 100%; min-height: 52px; padding: 10px 16px; border: 0; border-radius: 16px;
  background: var(--ms-accent); color: #152a31; font: inherit; font-weight: 800; box-shadow: none;
}
html.mobile-shell .ms-close-composer { display: block; margin: 0 0 12px auto; min-height: 36px; padding: 0 10px; border: 0; color: var(--ms-muted); background: transparent; font: inherit; }
html.mobile-shell.mobile-shell[data-shell-screen] #cqhub-overlay .cqhub-composer-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
html.mobile-shell.mobile-shell[data-shell-screen] #cqhub-overlay .cqhub-comp-tab {
  flex: 1; min-height: 42px; padding: 6px; background: transparent; border: 1px solid var(--ms-line);
  border-radius: 12px; color: var(--ms-muted); font-size: 13px;
}
html.mobile-shell.mobile-shell[data-shell-screen] #cqhub-overlay .cqhub-comp-tab.is-on { color: var(--ms-ink); border-color: var(--ms-accent); }
html.mobile-shell.mobile-shell[data-shell-screen] #cqhub-overlay textarea {
  width: 100%; min-height: 120px; height: auto; box-sizing: border-box; padding: 14px;
  font: inherit; font-size: 16px; line-height: 1.8; text-align: right; color: var(--ms-ink);
  border: 1px solid var(--ms-line); border-radius: 14px; background: var(--ms-bg);
}
html.mobile-shell.mobile-shell[data-shell-screen] #cqhub-overlay :is(.cqhub-list-head, .cqhub-list, .ms-question-options) { order: 2; }
html.mobile-shell.mobile-shell[data-shell-screen] #cqhub-overlay .cqhub-list { display: flex; flex-direction: column; gap: 10px; max-height: none; overflow: visible; }
html.mobile-shell.mobile-shell[data-shell-screen] #cqhub-overlay .cqhub-row { padding: 14px; margin: 0; border: 1px solid var(--ms-line); border-radius: 16px; background: var(--ms-panel); }
html.mobile-shell.mobile-shell[data-shell-screen] #cqhub-overlay .cqhub-row-text { color: var(--ms-ink); font-size: 16px; line-height: 1.8; overflow-wrap: anywhere; }
html.mobile-shell.mobile-shell[data-shell-screen] #cqhub-overlay .cqhub-row-btn { min-width: 40px; min-height: 44px; font-size: 16px; }
html.mobile-shell.mobile-shell[data-shell-screen] #cqhub-overlay .cqhub-row-text-edit { min-width: 0; font-size: 16px; color: var(--ms-ink); }
html.mobile-shell.mobile-shell[data-shell-screen] .cqhub-empty { text-align: center; color: var(--ms-muted); padding: 30px 16px; font-size: 14px; }
html.mobile-shell.mobile-shell[data-shell-screen] .cqhub-share-row { background: transparent; border: 0; padding: 12px; margin: 0; }
html.mobile-shell .cqhub-share-hint { color: var(--ms-muted); font-size: 12px; }
html.mobile-shell .cqhub-footnote { padding: 0 12px 12px; color: var(--ms-muted); font-size: 12px; }
html.mobile-shell .cqhub-freegame { order: 3; }
/* Warm paper surfaces share the home controls' palette. Keep these tokens
   local so headings on the signature blue background retain light ink. */
html.mobile-shell :is(.ms-disclosure, .ms-question-options, .ms-sound .toggle-row, .ms-sound .vol-row, .cqhub-card, .cqhub-locked, .cqhub-composer, .cqhub-row) {
  --ms-panel: #fff4e3;
  --ms-bg: #fffaf2;
  --ms-ink: #133441;
  --ms-muted: #576d75;
  --ms-line: rgba(19, 52, 65, .14);
  color: var(--ms-ink);
}
html.mobile-shell.mobile-shell #settings-overlay :is(.account-note, .how-to-card .htc-name),
html.mobile-shell.mobile-shell #cqhub-overlay :is(.cqhub-bulk-hint, .cqhub-percent-label, .cqhub-percent-suffix, .cqhub-share-label) { color: var(--ms-ink); }
html.mobile-shell.mobile-shell #cqhub-overlay .cqhub-percent-row input[type="number"] {
  background: var(--ms-bg); color: var(--ms-ink); border-color: var(--ms-line);
}
html.mobile-shell.mobile-shell #cqhub-overlay .cqhub-card-cta { border: 1px solid var(--ms-line); }
html.mobile-shell .ms-delete summary { color: #a43138; }
html.mobile-shell.mobile-shell #settings-overlay .ms-sound :is(.toggle-row, .vol-row) {
  background: var(--ms-panel); border: 0; padding: 13px 16px; margin: 0; box-shadow: none;
}
html.mobile-shell.mobile-shell #settings-overlay .ms-sound .vol-row { border-top: 1px solid var(--ms-line); }
html.mobile-shell.mobile-shell #cqhub-overlay .cqhub-composer-tabs { background: #1334410a; padding: 4px; border-radius: 16px; }
/* Calm Settings: the signature canvas shows through, with one quiet sound
   group and simple disclosure rows. Reserve cream for small navigation. */
html.mobile-shell:not([data-appearance="light"]) :is(#settings-overlay, .ms-quick-settings) {
  --ms-button: #103243;
  --ms-button-ink: #eee9de;
}
html.mobile-shell:not([data-appearance="light"]) :is(.ms-disclosure, .ms-sound .toggle-row, .ms-sound .vol-row) {
  --ms-panel: #103243;
  --ms-bg: #0b2b3b;
  --ms-ink: #eee9de;
  --ms-muted: #a8bbc2;
  --ms-line: #b8d8e21c;
}
html.mobile-shell.mobile-shell #settings-overlay .ms-disclosure { border-radius: 16px; margin-bottom: 14px; }
html.mobile-shell.mobile-shell #settings-overlay .ms-disclosure > summary { min-height: 54px; font-size: 15px; }
html.mobile-shell.mobile-shell #settings-overlay > .settings-section { margin-bottom: 22px; }
html.mobile-shell.mobile-shell #settings-overlay .ms-sound :is(.toggle-row, .vol-row) { padding: 11px 16px; }
html.mobile-shell.mobile-shell #settings-overlay .ms-sound .toggle-row { border-radius: 16px 16px 0 0; }
html.mobile-shell.mobile-shell #settings-overlay .ms-sound .vol-row:last-child { border-radius: 0 0 16px 16px; }
html.mobile-shell.mobile-shell #settings-overlay .vol-slider { height: 18px; min-height: 18px; background: #a8bbc226; }
html.mobile-shell.mobile-shell #settings-overlay .vol-slider::-webkit-slider-thumb { border: 2px solid #f3a400; box-shadow: none; width: 20px; height: 20px; }
html.mobile-shell.mobile-shell #settings-overlay .ms-appearance button { min-height: 48px; border-color: var(--ms-line); border-radius: 14px; }
html.mobile-shell.mobile-shell #settings-overlay .ms-appearance button[aria-pressed="true"] { border-color: #bd913d; box-shadow: inset 0 0 0 1px #bd913d; }
html.mobile-shell.mobile-shell #settings-overlay .settings-topbar .btn-back { background: #e7dfcf; color: #133441; }
html.mobile-shell.mobile-shell #settings-overlay .timer-pills { display: flex; flex-direction: column; gap: 6px; }
html.mobile-shell.mobile-shell #settings-overlay .timer-pill {
  display: flex; min-width: 0; width: 100%; min-height: 48px; height: auto; padding: 8px 12px;
  background: var(--ms-button); color: var(--ms-button-ink); border: 1px solid var(--ms-line); border-radius: 12px; box-shadow: none;
}
html.mobile-shell.mobile-shell #settings-overlay .timer-pill.selected { background: #f3a400; color: #133441; border-color: #f3a400; }
html.mobile-shell.mobile-shell #settings-overlay .timer-pill .tp-sub { color: inherit; font-size: 12px; }
html.mobile-shell:not([data-appearance="light"]) #settings-overlay .toggle-track:not(.on) { background: #839ba652; }
html.mobile-shell.ms-keyboard-open #cqhub-overlay { height: var(--ms-visible-height); }

/* Fast adjustments remain in the landscape game. */
html.mobile-shell .ms-quick-settings {
  min-width: 0;
  width: min(640px, calc(100vw - 40px)); max-height: calc(100dvh - 32px);
  box-sizing: border-box; padding: 18px; border: 1px solid var(--ms-line); border-radius: 24px;
  background: var(--ms-bg); color: var(--ms-ink); overflow-y: auto; overscroll-behavior: contain;
}
html.mobile-shell .ms-quick-settings::backdrop { background: #02101bcc; }
html.mobile-shell .ms-quick-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
html.mobile-shell .ms-quick-head button { width: 44px; height: 44px; border-radius: 14px; border: 1px solid var(--ms-line); background: var(--ms-panel); color: var(--ms-ink); }
html.mobile-shell .ms-quick-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; gap: 16px; }
html.mobile-shell .ms-quick-body .settings-section { margin: 0; min-width: 0; }
html.mobile-shell .ms-quick-body :is(.timer-pill, .ms-disclosure) { min-width: 0; }
@media (orientation: portrait) {
  html.mobile-shell .ms-quick-body { grid-template-columns: minmax(0, 1fr); }
}
html.mobile-shell .ms-all-settings { min-height: 44px; width: 100%; margin-top: 14px; background: transparent; color: var(--ms-muted); border: 0; font: inherit; }

/* Tapping the identity on Home opens this focused account sheet instead of
   routing through the unrelated app settings. */
html.mobile-shell .ms-account-dialog {
  position: fixed; inset: auto auto max(var(--ms-bottom), 16px) 50%;
  translate: -50% 0; width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 32px);
  box-sizing: border-box; margin: 0; padding: 18px;
  border: 1px solid var(--ms-line); border-radius: 24px;
  background: var(--ms-bg); color: var(--ms-ink); box-shadow: 0 20px 70px #00111c66;
  font-family: 'Cairo', sans-serif;
}
html.mobile-shell .ms-account-dialog::backdrop { background: #02101bcc; }
html.mobile-shell .ms-account-dialog-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px;
}
html.mobile-shell .ms-account-dialog-head strong { font-size: 20px; }
html.mobile-shell .ms-account-close {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--ms-line); border-radius: 14px;
  background: var(--ms-panel); color: var(--ms-ink); font: inherit; line-height: 1;
}
html.mobile-shell .ms-account-profile {
  display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px;
  border: 1px solid var(--ms-line); border-radius: 18px; background: var(--ms-panel);
}
html.mobile-shell .ms-account-profile .mm-user-avatar {
  display: grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px;
  overflow: hidden; border: 1px solid var(--ms-line); border-radius: 50%;
}
html.mobile-shell .ms-account-profile .mm-user-avatar img { width: 100%; height: 100%; object-fit: cover; }
html.mobile-shell .ms-account-profile .mm-user-name {
  min-width: 0; overflow: hidden; color: var(--ms-ink); font-size: 17px; font-weight: 700;
  text-overflow: ellipsis; white-space: nowrap;
}
html.mobile-shell .ms-account-signout {
  width: 100%; min-height: 52px; margin-top: 14px !important;
  border: 1px solid #d56868; border-radius: 16px; background: #9f3038; color: #fff;
  font: 700 16px 'Cairo', sans-serif;
}
html.mobile-shell[data-appearance="light"] .ms-account-signout { background: #fff1f1; color: #9b2831; }

.ms-rotation-cover { display: none; }
html.mobile-shell[data-shell-rotating] .ms-rotation-cover { display: grid; place-items: center; position: fixed; z-index: 2147483647; inset: 0; background: var(--ms-bg); }
.ms-rotation-cover img { width: 140px; height: auto; }
@keyframes ms-page-in { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
@media (max-height: 600px) {
  html.mobile-shell #main-menu .mm-spacer-top { flex-basis: 20px; }
  html.mobile-shell #main-menu .mm-spacer-mid { flex-basis: 25px; }
  html.mobile-shell.mobile-shell #main-menu .mm-logo { width: 210px; }
}
@media (prefers-reduced-motion: reduce) {
  html.mobile-shell :is(#main-menu, #settings-overlay.open, #cqhub-overlay.open, #history-overlay.open, #admin-overlay.open) { animation: none !important; transition: none !important; }
}

/* Clear, compact phone preparation controls. */
html.mobile-shell.mobile-shell #main-menu {
  background-image: url('/assets/home-bg-layer.webp');
  background-position: 50% 50%;
}
html.mobile-shell.mobile-shell #main-menu .btn-mm-store {
  width: 100%; min-height: 52px; height: 52px; padding: 10px 18px;
  font-size: 18px; border-radius: 18px; background: #204f6b; color: #fff;
  border: 1px solid #527d96; box-shadow: 0 3px 0 #103044;
}
html.mobile-shell.mobile-shell #main-menu .mm-buttons { gap: 14px; }
html.mobile-shell.mobile-shell[data-shell-screen] :is(#settings-overlay, #cqhub-overlay, #history-overlay, #admin-overlay) .settings-topbar {
  top: 0; grid-template-columns: 76px minmax(0, 1fr) 76px;
  margin-top: calc(-1 * var(--ms-top)); padding-top: calc(var(--ms-top) + 8px);
  padding-bottom: 12px; min-height: 64px; box-sizing: content-box;
}
html.mobile-shell.mobile-shell[data-shell-screen] :is(#settings-overlay, #cqhub-overlay, #history-overlay, #admin-overlay) .settings-topbar .btn-back {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  width: 76px; min-width: 76px; height: 46px; border-radius: 18px;
  background: #204f6b; color: #fff; border: 1px solid #527d96;
  font-size: 14px !important; box-shadow: 0 3px 0 #103044;
}
html.mobile-shell.mobile-shell[data-shell-screen] :is(#settings-overlay, #cqhub-overlay, #history-overlay, #admin-overlay) .settings-topbar .btn-back::before { content: none; }
html.mobile-shell.mobile-shell #settings-overlay .timer-pills {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
}
html.mobile-shell.mobile-shell #settings-overlay .timer-pill {
  height: 48px; min-height: 48px; flex-direction: row; align-items: center;
  justify-content: center; gap: 6px; padding: 6px 8px; font-size: 14px;
}
html.mobile-shell.mobile-shell #settings-overlay .timer-pill .tp-sub { font-size: 11px; margin: 0; }
html.mobile-shell[data-appearance="light"] {
  --ms-bg: #eaf5ff; --ms-panel: #f5faff; --ms-ink: #17394e;
  --ms-muted: #496477; --ms-line: #a6c5dc;
}
html.mobile-shell.mobile-shell[data-appearance="light"] #main-menu {
  background: radial-gradient(ellipse at 50% 34%, #c3e4ff, transparent 70%), #eaf5ff;
}
html.mobile-shell[data-appearance="light"] :is(.ms-disclosure, .ms-question-options, .ms-sound .toggle-row, .ms-sound .vol-row, .cqhub-card, .cqhub-locked, .cqhub-composer, .cqhub-row) {
  --ms-panel: #f5faff; --ms-bg: #eaf5ff; --ms-ink: #17394e; --ms-muted: #496477; --ms-line: #a6c5dc;
}
html.mobile-shell.mobile-shell[data-shell-screen] :is(#settings-overlay, #cqhub-overlay, #history-overlay, #admin-overlay) { background-image: url('/assets/home-bg-layer.webp'); }
html.mobile-shell.mobile-shell[data-appearance="light"] :is(#settings-overlay, #cqhub-overlay, #history-overlay, #admin-overlay) { background-image: none; }
html.mobile-shell.mobile-shell[data-shell-screen] :is(#settings-overlay, #cqhub-overlay, #history-overlay, #admin-overlay) .settings-topbar {
  width: calc(100% + 40px); margin-inline: -20px; padding-inline: 20px; box-sizing: border-box;
}
html.mobile-shell.mobile-shell #main-menu :is(.btn-mm-signin, .mm-row, .btn-mm-store),
html.mobile-shell.mobile-shell #main-menu .ms-home-header .btn-mm-join { background: #f3f9ff; color: #204f6b; border-color: #d9e9f5; text-shadow: none; }
html.mobile-shell.mobile-shell #main-menu :is(.btn-mm-settings, .btn-mm-questions) { color: #204f6b; }
html.mobile-shell.mobile-shell #main-menu .btn-mm-questions::after { border-color: #204f6b30; }
html.mobile-shell.mobile-shell[data-shell-screen] :is(#settings-overlay, #cqhub-overlay, #history-overlay, #admin-overlay) {
  background-attachment: fixed;
}
/* Landscape host navigation retains a comfortable touch target. */
html.native-iphone.native-phone-host body.select-phase #top-left-bar {
  top: max(env(safe-area-inset-top), 14px); left: max(env(safe-area-inset-left), 14px);
}
html.native-iphone.native-phone-host body.select-phase #top-left-bar #back-btn {
  min-width: 92px; min-height: 48px; height: 48px; padding: 8px 14px;
  border: 1px solid #527d96; border-radius: 19px; background: #204f6b; color: #fff;
  font-size: 16px; box-shadow: 0 3px 0 #103044; text-shadow: 0 2px 1px #102e41;
}
html.mobile-shell[data-appearance="light"] {
  --ms-button: #f3f9ff; --ms-button-ink: #17394e;
}
html.mobile-shell.mobile-shell[data-appearance="light"] #settings-overlay .ms-appearance button[aria-pressed="true"] {
  background: #d5ebff; border-color: #397ba6; box-shadow: inset 0 0 0 1px #397ba6;
}
/* Each pack is one row; center the combined rows in usable landscape space. */
@media (orientation: landscape) {
  html.mobile-shell.native-iphone.native-phone-host body.select-phase .pack-sections {
    height: auto; max-height: 100%; padding: 0; margin: auto 0; gap: 14px; flex: 0 0 auto;
  }
  html.mobile-shell.native-iphone.native-phone-host body.select-phase .pack-section {
    height: auto; flex: 0 0 auto; padding: 0; gap: 0;
  }
  html.mobile-shell.native-iphone.native-phone-host body.select-phase .pack-section-header { display: none; }
  html.mobile-shell.native-iphone.native-phone-host body.select-phase .game-picker {
    grid-template-rows: auto; margin: 0;
  }
  html.mobile-shell.native-iphone.native-phone-host body.select-phase .btn-game-pick {
    height: min(40dvh, 172px, calc((100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 36px) / 2));
  }
}
html.mobile-shell.mobile-shell[data-shell-screen] #cqhub-overlay .cqhub-card-cta { min-height: 44px; }
/* Clip the decorative card fan in its own box, keeping plan content intact. */
html.mobile-shell #store-overlay .st-deck { bottom: 0; height: 46px; overflow: hidden; }

/* Keep role switching and account controls in the same measured header row. */
html.mobile-shell.mobile-shell #main-menu .ms-home-header { direction:rtl; }
html.mobile-shell.mobile-shell #main-menu .ms-home-header .btn-mm-join {
  position:static !important;flex:0 0 auto;max-width:none;min-width:110px;
  margin:0;padding:9px 12px;transform:none;min-height:44px;
}