/* Mobile product pass. Keep the established desktop layout and API-driven content. */
.mobile-welcome { display: none; }

@media (max-width: 700px) {
  :root {
    --bg: #120e1b;
    --surface: #1c1528;
    --surface-2: #261c34;
    --surface-3: #342444;
    --ink: #f5f1fa;
    --muted: #b5a9c2;
    --accent: #bea2ec;
    --lime: #d8f793;
    --line: #ffffff12;
  }
  body { font-size: 14px; }
  .main { padding: 0 20px calc(98px + env(safe-area-inset-bottom)); min-height: 100vh; min-height: 100dvh; }
  .topbar { min-height: 76px; margin-bottom: 12px; }
  .topbar .mobile-brand { font-size: 26px; gap: 8px; letter-spacing: -.055em; }
  .mobile-brand img { width: 28px; height: 28px; }
  .top-actions { gap: 6px; }
  .coin-pill { min-height: 44px; border: 0; background: none; padding: 10px 8px; font-size: 13px; }
  .coin-pill svg { width: 19px; height: 19px; }
  .icon-btn, .top-actions .icon-btn, .screen-heading .icon-btn, .list-toolbar .icon-btn { width: 44px; height: 44px; min-width: 44px; border-radius: 12px; border-color: transparent; background: transparent; }
  .icon-btn svg, .top-actions .icon-btn svg, .screen-heading .icon-btn svg { width: 21px; height: 21px; }
  .icon-btn.accent { background: var(--lime); color: #1b2510; }
  .btn, .screen-heading .btn, .top-actions .btn { min-height: 44px; border-radius: 12px; font-size: 13px; padding: 12px 15px; font-weight: 650; box-shadow: none; }
  .btn.primary, .btn.like, .btn.match-button, .btn.primary:hover, .btn.like:hover, .btn.match-button:hover { background: var(--lime); color: #1b2510; border-color: transparent; box-shadow: none; }
  .btn.secondary, .btn.pass { background: var(--surface-2); color: var(--ink); border-color: var(--line); }
  .screen-heading, .page-heading { margin-bottom: 22px; gap: 10px; }
  .screen-heading h1, .page-heading h1 { font-size: 28px; line-height: 1.2; font-weight: 730; letter-spacing: -.035em; }
  .screen-heading .inline-actions { gap: 2px; }
  .section-title { margin-bottom: 14px; align-items: center; gap: 10px; }
  .section-title h2 { font-size: 17px; line-height: 1.3; letter-spacing: -.015em; }
  .section-title > span { font-size: 11px; }
  .romeo-text-link { color: var(--muted); font-size: 12px; min-height: 44px; padding: 10px 0 10px 10px; }

  /* A compact invitation leaves the first profile close to the fold. */
  .welcome-hero { display: none; }
  .mobile-welcome { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 124px; background: #2a1d3d; border: 1px solid #b99bdf20; border-radius: 18px; padding: 19px 20px; }
  .mobile-welcome > div { min-width: 0; }
  .welcome-kicker { display: block; color: #c7b2df; font-size: 10px; font-weight: 650; letter-spacing: .08em; margin-bottom: 9px; }
  .mobile-welcome h2 { font-size: 23px; font-weight: 650; letter-spacing: -.04em; line-height: 1.2; }
  .mobile-welcome p { color: #c0b1d0; font-size: 12px; margin-top: 6px; }
  .welcome-room-link { display: grid; place-items: center; width: 48px; height: 48px; min-width: 48px; border-radius: 50%; background: var(--lime); color: #1b2510; }
  .welcome-room-link svg { width: 23px; height: 23px; }
  .launchpad { gap: 0; margin: 12px 0 28px; border: 1px solid var(--line); border-radius: 15px; overflow: hidden; background: var(--surface); }
  .launchpad > button { flex-direction: row; justify-content: center; align-items: center; flex-wrap: wrap; gap: 7px; min-height: 61px; padding: 12px 7px; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: none; }
  .launchpad > button:last-child { border-right: 0; }
  .launchpad > button > svg, .launchpad small { display: none; }
  .launchpad strong { font-size: 11px; font-weight: 600; white-space: normal; }
  .launchpad .launch-icon { width: 24px; height: 24px; border-radius: 0; color: var(--accent); background: none; }
  .launchpad .launch-icon svg { width: 20px; height: 20px; }
  .home-stories { margin-bottom: 22px; }
  .home-stories .section-title { margin-bottom: 10px; }
  .home-stories .section-title h2 { font-size: 17px; }
  .story-strip { gap: 16px; padding: 3px 0 8px; }
  .story-item { width: 62px; min-width: 62px; gap: 8px; font-size: 11px; }
  .story-ring { width: 58px; height: 58px; padding: 2px; background: var(--accent); }
  .story-ring .avatar { width: 54px; height: 54px; border-width: 3px; }
  .create-story .story-ring { background: #51405f; }
  .create-story .story-ring > b { width: 23px; height: 23px; background: var(--lime); color: #1b2510; }
  .story-item .demo-label { font-size: 9px; line-height: 1.3; }
  .list-toolbar { gap: 0; margin-bottom: 14px; }
  .text-tabs { gap: 21px; }
  .text-tabs button { font-size: 14px; min-height: 48px; padding: 13px 0; font-weight: 600; }
  .text-tabs button.active:after { height: 2px; width: 100%; left: 0; border-radius: 0; background: var(--lime); }
  .person-row { gap: 12px; min-height: 105px; padding: 18px 0; }
  .person-avatar .avatar { width: 56px; height: 56px; font-size: 21px; }
  .person-details h3 { font-size: 16px; line-height: 1.3; font-weight: 650; }
  .person-details p { font-size: 12px; line-height: 1.6; color: var(--muted); }
  .person-tags span { font-size: 11px; max-width: 140px; }
  .person-action, .discovery-card .person-controls .person-action { width: 44px; height: 44px; border-radius: 12px; background: #bca0ed12; color: var(--accent); }
  .hide-recommendation { width: 44px; height: 44px; min-width: 44px; }
  .discovery-card { grid-template-columns: 60px minmax(0,1fr) 44px; align-items: start; gap: 12px; border-radius: 18px; border-color: #bc9cdf25; background: var(--surface); box-shadow: none; }
  .person-row.discovery-card { padding: 19px 16px; }
  .discovery-card .person-avatar .avatar { width: 60px; height: 68px; border-radius: 14px; font-size: 23px; border: 0; }
  .discovery-card .person-details h3 { font-size: 21px; letter-spacing: -.03em; }
  .discovery-card .person-details > p { font-size: 12px; -webkit-line-clamp: 2; }
  .discovery-card .person-controls { gap: 0; }
  .recommendation-reason { color: #cbb5e2 !important; font-size: 11px !important; }
  .shared-interests { gap: 5px; margin-top: 10px; }
  .shared-interests > span { color: #d5c5e6; background: #ffffff05; border-color: var(--line); border-radius: 5px; font-size: 10px; }
  .discovery-actions { grid-template-columns: 1fr 1.4fr; gap: 9px; padding-top: 7px; }
  .discovery-actions .btn { min-height: 46px; font-size: 13px; }
  .demo-label, .room-body > .demo-label { font-size: 10px; color: #e1c796; background: #dac0900a; }
  .feed-end { font-size: 11px; padding: 22px 0 10px; }
  .home-columns { gap: 24px; }
  .home-community { gap: 24px; }
  .home-shortcuts > button { min-height: 60px; border-radius: 12px; background: transparent; }
  .home-shortcuts strong { font-size: 12px; }
  .home-shortcuts > button[data-page=match], .home-shortcuts > button[data-page=games] { display: none; }
  .shortcut-icon, .launch-icon.cyan, .shortcut-icon.teal, .shortcut-icon.yellow { color: var(--accent); background: #bca0ed12; }

  /* Photograph + readable room details instead of tiny poster cards. */
  .category-tabs { gap: 8px; margin-bottom: 26px; padding-bottom: 2px; }
  .category-tabs button { min-height: 44px; border-radius: 22px; padding: 11px 15px; gap: 7px; font-size: 12px; }
  .category-tabs button.active { color: var(--ink); background: #3b2a4e; border-color: #b99bdf42; }
  .category-tabs button svg { width: 16px; height: 16px; }
  .rooms-grid, .home-room-grid { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .room-card { display: grid; grid-template-columns: 108px minmax(0,1fr); min-height: 138px; border-radius: 16px; border-color: var(--line); background: var(--surface); animation: none; }
  .room-card:hover { transform: none; }
  .room-photo { height: 100%; min-height: 138px; aspect-ratio: auto; }
  .room-photo > img { height: 100%; filter: saturate(.8); object-fit: cover; }
  .room-photo:after { background: linear-gradient(180deg,#1e102d08 35%,#110a2266); }
  .room-label { top: 9px; left: 9px; font-size: 9px; border: 0; border-radius: 5px; padding: 5px 7px; }
  .room-label svg { width: 12px; height: 12px; color: var(--ink); }
  .room-count { right: 8px; bottom: 10px; font-size: 10px; padding: 5px 7px; border-radius: 6px; }
  .room-wave { left: 11px; bottom: 16px; height: 16px; gap: 2px; color: var(--lime); }
  .room-wave i { width: 2px; }
  .room-wave:not(.is-live) { display: none; }
  .room-body { padding: 16px 14px; align-self: center; min-width: 0; }
  .room-body h3 { font-size: 16px; font-weight: 650; line-height: 1.3; letter-spacing: -.015em; margin-bottom: 6px; }
  .room-body p.room-description { font-size: 12px; line-height: 1.5; color: var(--muted); -webkit-line-clamp: 2; }
  .host-line, .room-body .host-line { margin-top: 13px; font-size: 11px; gap: 6px; }
  .host-line .avatar { width: 22px; height: 22px; font-size: 9px; }
  .host-line .live-label { font-size: 9px; color: var(--muted); }
  .agency-label { left: 8px; bottom: 41px; max-width: calc(100% - 16px); font-size: 9px; padding: 4px 5px; }

  /* Stable bottom bar, without a floating panel obscuring content. */
  .mobile-nav { left: 0; right: 0; bottom: 0; min-height: 78px; padding: 8px 12px max(10px,env(safe-area-inset-bottom)); border: 0; border-top: 1px solid var(--line); border-radius: 0; background: #181120; box-shadow: none; backdrop-filter: none; }
  .mobile-nav button { min-height: 56px; font-size: 10px; gap: 5px; color: #a495b5; }
  .mobile-nav button.active { color: var(--lime); font-weight: 650; }
  .mobile-nav .nav-symbol { width: 43px; height: 27px; }
  .mobile-nav .active .nav-symbol:before, .mobile-nav .active .nav-symbol:after { display: none; }
  .mobile-nav .active .avatar { outline-color: var(--lime); outline-width: 1px; }
  .mobile-nav .nav-symbol > .badge { border-color: #181120; }
  .room-mini, .room-popup { bottom: calc(87px + env(safe-area-inset-bottom)); border-radius: 14px; box-shadow: 0 4px 18px #0005; }
  .room-popup { padding: 14px; gap: 10px; font-size: 13px; }
  #toasts { bottom: calc(90px + env(safe-area-inset-bottom)); }
  .toast { padding: 14px 16px; border-radius: 12px; font-size: 13px; line-height: 1.5; background: #322440; }

  .profile-cover { border: 0; border-radius: 0; padding: 2px 0 22px; background: none; }
  .profile-identity { gap: 14px; }
  .profile-identity .avatar.xl { width: 76px; height: 76px; font-size: 26px; }
  .profile-identity h1 { font-size: 24px; line-height: 1.15; }
  .profile-identity p { font-size: 12px; margin: 7px 0; }
  .profile-identity .icon-btn { width: 44px; height: 44px; }
  .avatar-edit > span:last-child { background: var(--lime); color: #1b2510; border-color: var(--bg); width: 27px; height: 27px; }
  .profile-bio { font-size: 13px; margin-top: 18px; }
  .role-tag { font-size: 10px; padding: 4px 7px; }
  .creator-title { color: var(--accent); font-size: 11px; }
  .profile-level { margin-top: 22px; min-height: 68px; padding: 12px; background: var(--surface); border-color: var(--line); border-radius: 14px; gap: 10px; }
  .profile-level strong { font-size: 13px; }
  .profile-level small { font-size: 11px; }
  .profile-xp { font-size: 12px; white-space: nowrap; }
  .profile-stats { margin-top: 22px; padding-top: 20px; }
  .profile-stats b { font-size: 23px; }
  .profile-stats span { font-size: 12px; }
  .profile-wallet { padding: 0 0 24px; gap: 10px; }
  .profile-wallet > button { border-radius: 14px; border-color: var(--line); padding: 16px 14px; background: var(--surface); }
  .profile-wallet small { font-size: 11px; }
  .profile-wallet button:nth-child(2) > svg:first-child { color: var(--accent); }
  .profile-destinations { grid-template-columns: minmax(0,1fr); gap: 0; border: 1px solid var(--line); border-radius: 15px; overflow: hidden; margin-bottom: 23px; }
  .profile-destinations .setting-row { min-height: 60px; padding: 13px 15px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; gap: 13px; }
  .profile-destinations .setting-row:last-child { border-bottom: 0; }
  .profile-destinations strong { font-size: 13px; font-weight: 550; }
  .profile-destinations .setting-row > svg { width: 16px; height: 16px; }
  .profile-destinations .shortcut-icon { width: 30px; height: 30px; }
  .setting-row { min-height: 57px; font-size: 14px; }

  .activity-row { min-height: 80px; padding: 12px 0 22px; }
  .activity-symbol { width: 45px; height: 45px; border-radius: 13px; color: var(--accent); background: var(--surface-2); }
  .activity-copy { min-width: 0; }
  .activity-copy > span { font-size: 11px; line-height: 1.5; }
  .conversation { min-height: 91px; gap: 13px; padding: 18px 0; }
  .conversation .avatar.lg { width: 53px; height: 53px; font-size: 18px; }
  .conversation h3 { font-size: 15px; font-weight: 650; }
  .conversation p { font-size: 13px; line-height: 1.5; margin-top: 5px; }
  .conversation aside { max-width: 76px; font-size: 10px; line-height: 1.5; }
  .post { padding: 18px 0 24px; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
  .post-author b { font-size: 14px; }
  .post-author small { font-size: 11px; }
  .post-text { font-size: 15px; line-height: 1.65; }
  .post-image { border-radius: 14px; }
  .post-actions { margin-top: 12px; gap: 25px; }
  .post-actions button { min-height: 44px; font-size: 12px; }
  .post-author > button { min-width: 44px; min-height: 44px; }

  .creator-identity { margin: 24px 0; }
  .creator-progress { background: var(--surface); border-color: #b99bdf28; border-radius: 17px; padding: 20px 17px; }
  .creator-level { gap: 12px; }
  .creator-level .hero-eyebrow { font-size: 9px; line-height: 1.6; letter-spacing: .04em; }
  .creator-level strong { font-size: 24px; }
  .creator-level p { font-size: 11px; }
  .level-emblem { width: 49px; height: 56px; min-width: 49px; background: #39264d; box-shadow: none; }
  .level-emblem svg { width: 25px; height: 25px; color: var(--accent); }
  .xp-total { font-size: 22px; }
  .xp-total small { font-size: 10px; }
  .level-progress-label, .progress-note { font-size: 11px; line-height: 1.6; }
  .creator-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
  .creator-metric { padding: 14px 11px; border-radius: 12px; }
  .creator-metric > span { font-size: 10px; }
  .creator-metric.teal svg, .creator-metric.yellow svg { color: var(--accent); }
  .creator-metric > strong { font-size: 24px; margin-top: 9px; }
  .achievement-list { grid-template-columns: minmax(0,1fr); gap: 9px; }
  .achievement-row { display: grid; grid-template-columns: 46px minmax(0,1fr); column-gap: 13px; row-gap: 4px; align-items: center; text-align: left; padding: 14px; border-radius: 13px; }
  .achievement-symbol { grid-row: 1/3; width: 44px; height: 49px; }
  .achievement-symbol svg { width: 23px; height: 23px; }
  .achievement-row > strong { align-self: end; font-size: 13px; }
  .achievement-status { align-self: start; margin: 0; font-size: 11px; }
  .achievement-row.earned .achievement-symbol, .achievement-row.earned.badge-tone-1 .achievement-symbol, .achievement-row.earned.badge-tone-2 .achievement-symbol { background: var(--lime); color: #263719; }

  .game-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 22px 0; }
  .game-tile, .game-tile:nth-child(2), .game-tile:nth-child(3) { padding: 20px 12px 17px; min-height: 160px; background: var(--surface); border: 1px solid #b99bdf25; border-radius: 16px; box-shadow: none; gap: 13px; font-size: 34px; }
  .game-tile span { font-size: 15px; }
  .game-tile small, .game-tile:nth-child(2) small, .game-tile:nth-child(3) small { font-size: 11px; color: var(--muted); line-height: 1.65; }
  .notice { border-radius: 12px; font-size: 12px; line-height: 1.65; padding: 15px; }
  .slot-machine { margin: 30px 0 22px; }
  .slot-machine span { background: var(--surface-2); box-shadow: none; border: 1px solid var(--line); padding: 14px 12px; }
  .memory-card { min-height: 66px; border-radius: 10px; }
  .roulette-bets { gap: 6px; }
  .roulette-bets .btn { font-size: 11px; padding: 12px 5px; min-height: 52px; }
  .game-outcome { padding: 17px; }
  .game-outcome small { font-size: 12px; display: block; margin-top: 6px; }
  [data-screen=agencies] .person-avatar { width: 50px; height: 58px; min-width: 50px; border-radius: 12px; background: var(--surface-2); color: var(--accent); display: grid; place-items: center; }
  [data-screen=agencies] .person-avatar svg { width: 24px; height: 24px; }
  .match-card { background: var(--surface); box-shadow: none; border-radius: 18px; }
  .match-card .match-body { padding: 18px; }
  .match-filters { gap: 8px; }
  .match-filters .btn { font-size: 12px; }

  /* All forms share the same dimensions; vh/% fallbacks support old WebView. */
  .modal-backdrop { backdrop-filter: none; }
  .modal { border-radius: 20px 20px 0 0; padding: 36px 22px max(25px,env(safe-area-inset-bottom)); max-height: 92%; max-height: 94dvh; overflow-y: auto; background: #20162d; -webkit-overflow-scrolling: touch; }
  .modal > h2 { font-size: 24px; line-height: 1.25; padding-right: 26px; }
  .modal > p { font-size: 13px; line-height: 1.65; }
  .modal-close { top: 17px; right: 13px; width: 44px; height: 44px; }
  .field { margin-top: 18px; }
  .field label { font-size: 12px; margin-bottom: 8px; color: #d1c2df; }
  .field input, .field textarea, .field select, .modal .field input, .modal .field textarea, .modal .field select { font-size: 16px; min-height: 49px; border: 1px solid #c3acd02b; border-radius: 11px; padding: 12px 13px; background: #160f21; }
  .form-error { font-size: 13px; line-height: 1.6; padding: 13px; }
  .auth-tabs button { min-height: 44px; }
  .verification-banner { padding: 12px; font-size: 12px; line-height: 1.5; border-radius: 12px; }
  .verification-banner .btn { min-height: 44px; padding: 10px; }
  .preference-section { padding: 18px 15px; border-radius: 14px; }
  .preference-toggle { min-height: 60px; }
  .interest-option > span { min-height: 44px; }
  .balance { padding: 18px 13px; border-radius: 15px; }
  .balance .label { font-size: 11px; }
  .balance .amount { font-size: 32px; }
  .balance .btn { font-size: 11px; padding: 12px 8px; }

  [data-screen=chat] .main { height: 100vh; height: 100dvh; padding: 10px 16px max(12px,env(safe-area-inset-bottom)); }
  [data-screen=chat] .chat-head { gap: 9px; min-height: 68px; padding-bottom: 12px; }
  [data-screen=chat] .chat-head h2 { font-size: 16px; line-height: 1.25; }
  [data-screen=chat] .chat-head p { font-size: 11px; line-height: 1.4; }
  [data-screen=chat] .chat-head > .avatar { width: 39px; height: 39px; min-width: 39px; font-size: 14px; }
  [data-screen=chat] .chat-head .icon-btn { width: 44px; min-width: 44px; height: 44px; }
  [data-screen=chat] .chat-log { background: var(--bg); margin: 6px 0 0; padding: 10px 0 16px; border: 0; border-radius: 0; }
  [data-screen=chat] .message { font-size: 14px; line-height: 1.55; padding: 11px 13px 8px; background: #2b2038; max-width: 88%; }
  [data-screen=chat] .message.mine { background: #50316b; }
  .message-meta { gap: 7px; margin-top: 4px; }
  .message-tools { opacity: .85; }
  .message-tools button { min-width: 32px; min-height: 32px; padding: 7px; }
  .message-tools svg { width: 16px; height: 16px; }
  .reaction-chip { min-height: 34px; min-width: 38px; padding: 5px 9px; }
  .reply-bar { margin-top: 8px; border-radius: 11px; }
  .composer { gap: 8px; padding-top: 10px; }
  .composer input { font-size: 16px; min-height: 48px; border-radius: 13px; padding: 12px 14px; }
  .composer .send { width: 48px; height: 48px; min-width: 48px; color: #1b2510; background: var(--lime); border-radius: 13px; }
  [data-page=chat] #toasts { bottom: 78px; }
  [data-screen=room] .main { min-height: 100vh; min-height: 100dvh; background: var(--bg); padding: 12px 18px max(14px,env(safe-area-inset-bottom)); }
  [data-screen=room] .main:before { display: none; }
  [data-screen=room] #page { min-height: calc(100vh - 28px); min-height: calc(100dvh - 28px); }
  [data-screen=room] .chat-head h2 { font-size: 17px; }
  [data-screen=room] .room-banner { height: auto; margin: 0 0 25px; background: var(--surface); border-radius: 12px; }
  [data-screen=room] .banner-caption { position: static; background: none; padding: 13px 14px; font-size: 12px; color: var(--muted); }
  [data-screen=room] .seats { gap: 25px 8px; }
  [data-screen=room] .seat strong { font-size: 11px; }
  [data-screen=room] .seat small, [data-screen=room] .empty-seat { font-size: 10px; }
  [data-screen=room] .seat.speaking .avatar { animation: none; border-color: var(--lime); box-shadow: 0 0 0 2px #d8f79325; }
  [data-screen=room] .room-controls .mic-on { color: #1b2510; background: var(--lime); }
  [data-screen=room] .status-strip { font-size: 11px; line-height: 1.5; }
  [data-screen=room] .room-chat-log { font-size: 13px; }
  [data-screen=room] .composer .send { background: var(--lime); }
}

@media (max-width: 360px) {
  .main { padding-left: 16px; padding-right: 16px; }
  .screen-heading h1, .page-heading h1 { font-size: 25px; }
  .screen-heading .btn { padding-inline: 12px; font-size: 12px; }
  .mobile-welcome { padding: 18px 16px; gap: 12px; }
  .mobile-welcome h2 { font-size: 21px; }
  .launchpad > button { flex-direction: column; gap: 7px; min-height: 75px; }
  .launchpad strong { font-size: 11px; }
  .text-tabs { gap: 17px; }
  .text-tabs button { font-size: 13px; }
  .person-row.discovery-card { padding: 16px 13px !important; grid-template-columns: 48px minmax(0,1fr) 40px; gap: 9px; }
  .discovery-card .person-avatar .avatar { width: 48px; height: 60px; font-size: 20px; }
  .discovery-card .person-details h3 { font-size: 19px; }
  .discovery-card .person-controls .person-action { width: 40px; height: 44px; }
  .room-card { grid-template-columns: 92px minmax(0,1fr); }
  .room-body { padding: 14px 12px; }
  .room-body h3 { font-size: 15px; }
  .room-body .host-line { font-size: 10px; }
  .room-label { top: 8px; left: 7px; padding: 5px; }
  .room-wave { display: none; }
  .profile-identity { gap: 11px; }
  .profile-identity .avatar.xl { width: 66px; height: 66px; }
  .profile-identity h1 { font-size: 22px; }
  .creator-level { gap: 9px; }
  .creator-level .hero-eyebrow { font-size: 8px; }
  .creator-level strong { font-size: 22px; }
  .xp-total { font-size: 20px; }
  [data-screen=chat] .main { padding-left: 12px; padding-right: 12px; }
  [data-screen=chat] .chat-head { gap: 6px; }
  [data-screen=chat] .chat-head > .avatar { width: 32px; height: 32px; min-width: 32px; }
  [data-screen=chat] .chat-head h2 { font-size: 14px; }
  [data-screen=chat] .chat-head .icon-btn { width: 44px; min-width: 44px; }
}
/* Compact product controls for real filtering, mutual matches and story viewing. */
.match-filter-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px;padding:14px;margin:14px 0;background:linear-gradient(145deg,#21162f,#171121);border:1px solid #ffffff14;border-radius:18px}
.match-filter-form label{display:grid;gap:6px;color:var(--muted);font-size:.78rem;font-weight:650}
.match-filter-form input,.match-filter-form select{width:100%;min-width:0;min-height:42px;padding:9px 10px;color:var(--ink);background:#100b19;border:1px solid #ffffff1b;border-radius:11px;font:inherit}
.match-filter-form .btn{align-self:end;min-height:42px}
.match-filter-form .form-error{grid-column:1/-1}
.match-shortcuts{display:flex;gap:8px;margin:10px 0 16px}.match-shortcuts .btn{flex:1}
.mutual-matches{margin:24px 0;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:18px}
.mutual-matches h2{display:flex;align-items:center;gap:8px;font-size:1.05rem}
.mutual-match{display:flex;align-items:center;gap:11px;width:100%;padding:11px 2px;color:var(--ink);text-align:left;background:none;border:0;border-top:1px solid var(--line)}
.mutual-match>span:nth-child(2){display:grid;gap:3px;flex:1}.mutual-match small{color:var(--muted)}
.story-viewer{display:flex;align-items:center;gap:12px;margin:12px 32px 18px 0}.story-viewer>div{display:grid;gap:4px}.story-viewer small{color:var(--muted)}
.story-photo{display:block;width:100%;max-height:56dvh;object-fit:contain;border-radius:16px;background:#0b0710}.story-copy{white-space:pre-wrap;line-height:1.6}
.game-result-card{margin:18px 0;padding:16px;border:1px solid #ffffff18;border-radius:16px;background:linear-gradient(135deg,#251838,#181223);animation:result-in .35s ease-out both}
.game-result-card.win{border-color:#ddfc9680}.game-result-card.loss{border-color:#ffffff20}.game-result-card strong{font-size:1.1rem}.game-result-card p{margin:7px 0}.game-result-card small{color:var(--muted)}
.memory-meta{display:flex;justify-content:space-between;margin:8px 2px;color:var(--muted);font-variant-numeric:tabular-nums}
.memory-card{transition:transform .18s ease,background .18s ease,border-color .18s ease}.memory-card.open{background:#302141;border-color:#c4a0ff88;transform:translateY(-2px)}.memory-card.matched{background:#243120;border-color:#ddfc96aa;color:var(--lime)}
.slot-machine span.spinning{animation:reel .14s linear infinite}
@keyframes result-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes reel{50%{transform:translateY(-4px);filter:blur(1px)}}
@media(max-width:380px){.match-filter-form{grid-template-columns:repeat(2,minmax(0,1fr));padding:11px}.match-shortcuts .btn{padding-inline:8px;font-size:.82rem}}
@media(prefers-reduced-motion:reduce){.game-result-card,.slot-machine span.spinning{animation:none}.memory-card{transition:none}}