.header-bg {
      background: linear-gradient(to right, var(--uc-primary-dark) 0%, var(--uc-primary-dark) 100%);
      border-bottom: 4px solid var(--uc-border-strong);
  min-height: 122px;
      display: flex;
      align-items: center;
  padding: 10px 0;
    }

    .uc-header-inner {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 10px;
      width: 100%;
      text-align: center;
    }

    .urban-logo {
      font-family: "Permanent Marker", cursive;
      color: var(--uc-border-strong);
      text-shadow: 2px 2px 0 var(--uc-surface);
      line-height: 0.8;
      letter-spacing: -2px;
    }

    .uc-logo-sticker {
      flex-shrink: 0;
      width: 190px;
      height: 112px;
      filter: drop-shadow(4px 4px 0 rgba(0,0,0,0.45));
    }

    .uc-logo-svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    .uc-logo-svg .uc-skyline-windows rect {
      fill: #f2bd22;
      opacity: 0.85;
    }

    .uc-logo-svg .uc-skyline-windows rect:nth-child(9n+2),
    .uc-logo-svg .uc-skyline-windows rect:nth-child(13n+4),
    .uc-logo-svg .uc-skyline-windows rect:nth-child(17n+7) {
      animation: uc-window-twinkle 9s steps(1, end) infinite;
    }

    .uc-logo-svg .uc-skyline-windows rect:nth-child(13n+4) {
      animation-delay: 1.4s;
    }

    .uc-logo-svg .uc-skyline-windows rect:nth-child(17n+7) {
      animation-delay: 3.1s;
    }

    @keyframes uc-window-twinkle {
      0%, 70%, 100% { opacity: 0.85; }
      72%, 74% { opacity: 0.2; }
      76%, 84% { opacity: 1; }
      86%, 88% { opacity: 0.25; }
      90%, 92% { opacity: 0.95; }
    }

    .uc-slogan-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .uc-slogan-main {
      font-family: Impact, "Arial Black", sans-serif;
      font-size: 22px;
      color: var(--uc-gold);
      text-transform: uppercase;
      letter-spacing: 0.01em;
      font-style: italic;
      font-weight: 900;
      line-height: 1;
      text-shadow: 2px 2px 0 var(--uc-border-strong);
    }

    .uc-slogan-sub {
      margin-top: 6px;
      color: var(--uc-text-on-primary);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .uc-tm {
      font-family: Arial, Helvetica, sans-serif;
      font-style: normal;
      font-weight: 700;
      font-size: 0.55em;
      letter-spacing: 0;
      margin-left: 1px;
      vertical-align: super;
      line-height: 0;
    }

    .login-bar {
      background-color: var(--uc-chrome);
      color: var(--uc-text-on-primary);
      font-size: 12px;
    }

    .uc-primary-nav {
      background: var(--uc-surface) !important;
      border-bottom: 2px solid var(--uc-gray-300) !important;
      padding: 10px 0;
    }

    .uc-primary-nav-row {
      display: flex;
      flex-wrap: nowrap;
      gap: 8px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      padding-bottom: 1px;
    }

    .uc-primary-nav-row::-webkit-scrollbar {
      display: none;
    }

    .nav-tab {
      background: var(--uc-dna-header-red);
      color: var(--uc-text-on-primary);
      padding: 10px 16px;
      border-radius: 4px;
      font-size: 13px;
      font-weight: 900;
      border: 2px solid var(--uc-dna-border-strong);
      box-shadow: 4px 4px 0 var(--uc-scrim);
      cursor: pointer;
      user-select: none;
      white-space: nowrap;
      flex: 0 0 auto;
      text-transform: none;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .nav-tab__icon {
      display: inline-flex;
      width: 1.35em;
      height: 1.35em;
      flex: 0 0 auto;
      color: inherit;
    }

    .nav-tab__icon svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    .nav-tab__label {
      line-height: 1;
    }

    .nav-tab:hover {
      background: var(--uc-primary);
      color: var(--uc-gold);
      transform: scale(1.02) translateY(-2px);
      box-shadow: 5px 8px 0 var(--uc-scrim);
    }

    .nav-tab:active {
      transform: translate(2px, 2px);
      box-shadow: 0 0 0 var(--uc-scrim);
    }

    .nav-tab-active {
      background: var(--uc-primary-dark);
      color: var(--uc-gold-dim);
      border-color: var(--uc-gold-dim);
      box-shadow: 4px 4px 0 var(--uc-scrim), 0 3px 0 #D4A017;
    }

    .nav-tab-active:hover {
      color: var(--uc-gold-dim);
    }

    @media (max-width: 767px) {
      .uc-slogan-box {
        display: none;
      }
    }

    @media (min-width: 768px) {
      .header-bg {
        min-height: 146px;
        padding: 12px 0;
      }

      .uc-header-inner {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        text-align: left;
      }

      .uc-logo-sticker {
        width: 264px;
        height: 144px;
      }

      .uc-slogan-box {
        align-items: flex-end;
        text-align: right;
      }

      .uc-slogan-main {
        font-size: 36px;
      }
    }

    @media (min-width: 1440px) {
      .header-bg {
        min-height: 160px;
        padding: 14px 0;
      }

      .uc-logo-sticker {
        width: 308px;
        height: 164px;
      }

      .uc-slogan-main {
        font-size: 42px;
      }

      .uc-slogan-sub {
        font-size: 13px;
      }

      .login-bar {
        font-size: 14px;
      }

      .nav-tab {
        font-size: 15px;
        padding: 12px 20px;
      }
    }

    @media (min-width: 1920px) {
      .header-bg {
        min-height: 174px;
        padding: 16px 0;
      }

      .uc-logo-sticker {
        width: 360px;
        height: 190px;
      }

      .uc-slogan-main {
        font-size: 50px;
      }

      .uc-slogan-sub {
        font-size: 15px;
      }

      .login-bar {
        font-size: 15px;
      }

      .nav-tab {
        font-size: 16px;
        padding: 14px 24px;
      }
    }

    @media (min-width: 3840px) {
      .header-bg {
        min-height: 208px;
        padding: 20px 0;
      }

      .uc-logo-sticker {
        width: 428px;
        height: 226px;
      }

      .uc-slogan-main {
        font-size: 60px;
      }

      .uc-slogan-sub {
        font-size: 18px;
      }

      .login-bar {
        font-size: 18px;
      }

      .nav-tab {
        font-size: 19px;
        padding: 16px 28px;
      }
    }

    .main-card {
      background: var(--uc-dna-card-surface);
      border: 2px solid var(--uc-dna-border-strong);
      border-radius: var(--uc-dna-card-radius);
      box-shadow: var(--uc-dna-shadow-soft);
      overflow: hidden;
      transition: transform 120ms ease, box-shadow 120ms ease;
    }

    .uc-card-trippy {
      background: var(--uc-dna-card-surface);
      border: 2px solid var(--uc-dna-border-strong);
      border-radius: var(--uc-dna-card-radius);
      box-shadow: var(--uc-dna-shadow-hard), 0 0 0 1px rgba(255, 223, 0, 0.22);
      overflow: hidden;
      transition: transform 120ms ease, box-shadow 120ms ease;
    }

    .uc-card-trippy > .section-header {
      /* Same dual-gold rail as .section-header (avoid reintroducing white ink). */
      border-bottom-color: var(--uc-gold-dim);
      box-shadow: inset 0 -2px 0 var(--uc-gold);
    }

    @media (hover: hover) and (pointer: fine) {
      .main-card:hover {
        transform: translateY(-1px);
        box-shadow: 4px 5px 0 var(--uc-shadow-ink-strong);
      }

      .uc-card-trippy:hover {
        transform: translateY(-2px);
        box-shadow: var(--uc-dna-shadow-hard), 0 0 0 1px rgba(255, 223, 0, 0.34);
      }
    }

    .uc-gold-border {
      border-color: var(--uc-gold);
      box-shadow: var(--uc-dna-shadow-hard);
    }

    .uc-signature-border {
      position: relative;
      border-width: 3px;
      box-shadow: var(--uc-dna-shadow-hard);
    }

    .uc-signature-border::after {
      content: "";
      position: absolute;
      inset: 6px;
      border: 1px solid var(--uc-scrim-soft);
      border-radius: calc(var(--uc-dna-card-radius) - 2px);
      pointer-events: none;
    }

    .main-card > .section-header {
      border-bottom-color: var(--uc-gold-dim);
      box-shadow: inset 0 -2px 0 var(--uc-gold);
    }

    .uc-card-bottom-banner {
      min-height: 19px;
      padding: 1px 10px;
      display: flex;
      align-items: center;
      /* Dual gold rail matching section-header (outer dim + inner bright). */
      border-top: 2px solid var(--uc-gold-dim);
      box-shadow: inset 0 2px 0 var(--uc-gold);
      background: var(--uc-dna-header-red);
      color: var(--uc-text-on-primary);
      font-size: 9px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .uc-link-gold {
      color: var(--uc-gold);
      text-decoration: underline;
      text-underline-offset: 2px;
      letter-spacing: 0.06em;
      font-weight: 900;
    }

    .uc-link-gold:hover {
      color: #fff3a0;
    }

    .uc-btn-gold {
      background: var(--uc-gold);
      color: var(--uc-text-on-gold);
      border: 2px solid var(--uc-border-strong);
      box-shadow: 3px 3px 0 var(--uc-scrim);
    }

    .uc-btn-gold:hover {
      filter: brightness(1.05);
    }

    .uc-badge-gold {
      border: 1px solid var(--uc-gold);
      box-shadow: 2px 2px 0 var(--uc-scrim);
    }

    .uc-online-gold {
      padding: 1px 6px;
      border: 1px solid #ffdf00;
      border-radius: 999px;
      box-shadow: 2px 2px 0 var(--uc-scrim);
    }

    .section-header {
      background: var(--uc-dna-header-red);
      color: var(--uc-text-on-primary);
      padding: 7.5px 12px;
      font-weight: bold;
      font-size: 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      /* Dual gold rail (inner inset + outer border). Never use --uc-dna-border-strong
         here: on Heat that token is near-white for card outlines and reads as a
         white hairline above the gold accent. */
      border-bottom: 2px solid var(--uc-gold-dim);
      box-shadow: inset 0 -2px 0 var(--uc-gold);
    }

    .wire-item {
      border-bottom: 1px solid var(--uc-surface-muted);
      padding: 8px 0;
    }

    .wire-item:last-child {
      border-bottom: none;
    }

    .spotlight-img {
      border: 3px solid var(--uc-surface-muted);
      box-shadow: 2px 2px 5px var(--uc-shadow-ink-soft);
    }

    .user-thumb {
      width: 50px;
      height: 50px;
      background-color: var(--uc-text-muted);
      border: 1px solid var(--uc-gray-300);
      margin: 0 auto 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .online-count {
      background: #008000;
      color: var(--uc-text-on-primary);
      padding: 2px 6px;
      border-radius: 10px;
      font-size: 10px;
      border: 1px solid var(--uc-scrim);
    }

    .uc-lobby-typing-pulse {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      margin-left: 6px;
      color: var(--uc-primary-ink);
      font-weight: 900;
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      animation: uc-lobby-typing-pulse-anim 1s infinite alternate;
    }

    @keyframes uc-lobby-typing-pulse-anim {
      0% { opacity: 0.4; transform: scale(0.95); }
      100% { opacity: 1; transform: scale(1.05); }
    }

    .uc-lobby-typing-dot {
      width: 4px;
      height: 4px;
      background: currentColor;
      border-radius: 50%;
    }

    .uc-live-count {
      display: inline-block;
    }

    .uc-live-count.is-live-bump {
      animation: uc-live-count-bump 260ms ease;
    }

    @keyframes uc-live-count-bump {
      0% { transform: scale(1); }
      40% { transform: scale(1.08); }
      100% { transform: scale(1); }
    }

    /* ── Activity Intensity & Glitch Effects ─────────── */
    .uc-intensity-low { --uc-intensity-color: rgba(255, 223, 0, 0.1); }
    .uc-intensity-med { --uc-intensity-color: rgba(255, 128, 0, 0.2); animation: uc-pulse-intensity 2s infinite; }
    .uc-intensity-high { --uc-intensity-color: rgba(255, 0, 0, 0.3); animation: uc-pulse-intensity 1s infinite; }

    @keyframes uc-pulse-intensity {
      0% { box-shadow: inset 0 0 10px var(--uc-intensity-color); }
      50% { box-shadow: inset 0 0 25px var(--uc-intensity-color); }
      100% { box-shadow: inset 0 0 10px var(--uc-intensity-color); }
    }

    .uc-glitch-overlay {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 5;
      overflow: hidden;
      opacity: 0.15;
    }

    .uc-glitch-overlay::before {
      content: "";
      position: absolute;
      top: 0; left: 0; width: 100%; height: 100%;
      background: repeating-linear-gradient(0deg, transparent 0, var(--uc-scrim-weak) 1px, transparent 2px);
      background-size: 100% 4px;
      animation: uc-glitch-scan 4s linear infinite;
    }

    @keyframes uc-glitch-scan {
      from { transform: translateY(0); }
      to { transform: translateY(100%); }
    }

    .uc-is-glitching {
      animation: uc-glitch-shake 0.3s cubic-bezier(.25,.46,.45,.94) both;
    }

    @keyframes uc-glitch-shake {
      0% { transform: translate(0); }
      20% { transform: translate(-2px, 2px); }
      40% { transform: translate(-2px, -2px); }
      60% { transform: translate(2px, 2px); }
      80% { transform: translate(2px, -2px); }
      100% { transform: translate(0); }
    }

    .hidden-page {
      display: none !important;
    }

    /* ── 80/20 modern polish (CSS-only, vendorless) ─────────────── */
    .uc-texture-dots {
      background-image: radial-gradient(var(--uc-scrim-weak) 1px, transparent 1px);
      background-size: 10px 10px;
    }

    .uc-texture-grid {
      background-image:
        linear-gradient(var(--uc-scrim-weak) 1px, transparent 1px),
        linear-gradient(90deg, var(--uc-scrim-weak) 1px, transparent 1px);
      background-size: 18px 18px;
    }

    .uc-pulse-heatmap {
      position: absolute;
      inset: 0;
      z-index: 0;
      opacity: 0.15;
      pointer-events: none;
      background: radial-gradient(circle at var(--uc-pulse-x, 50%) var(--uc-pulse-y, 50%), var(--uc-pulse-color, #ff0000) 0%, transparent 70%);
      transition: background 1s ease, opacity 1s ease;
      animation: uc-heatmap-heartbeat 4s ease-in-out infinite;
    }

    @keyframes uc-heatmap-heartbeat {
      0%, 100% { transform: scale(1); opacity: var(--uc-pulse-opacity, 0.15); }
      50% { transform: scale(1.1); opacity: calc(var(--uc-pulse-opacity, 0.15) * 1.5); }
    }

    .uc-home-ticker-sep {
      color: var(--uc-gold);
      font-weight: 900;
      padding: 0 10px;
    }

    /* Shared DNA primitives for all surfaces */
    .uc-dna-btn {
      border: 2px solid var(--uc-dna-border-strong);
      border-radius: 6px;
      box-shadow: 4px 4px 0 var(--uc-scrim);
      padding: 8px 14px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      font-size: 11px;
      cursor: pointer;
      transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.12s ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
    }

    .uc-dna-btn:hover {
      transform: translate(-1px, -1px);
      box-shadow: 5px 5px 0 var(--uc-scrim);
      filter: brightness(1.04);
    }

    .uc-dna-btn:active {
      transform: translate(2px, 2px);
      box-shadow: 0 0 0 var(--uc-scrim);
    }

    .uc-dna-btn-primary {
      background: var(--uc-dna-header-red);
      color: var(--uc-text-on-primary);
    }

    .uc-dna-btn-secondary {
      background: var(--urban-navy);
      color: var(--uc-text-on-primary);
    }

    .uc-dna-btn-neutral {
      background: var(--uc-surface);
      color: var(--uc-border-strong);
    }

    .uc-dna-chip {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      border: 2px solid var(--uc-dna-border-strong);
      border-radius: var(--uc-dna-chip-radius);
      padding: 3px 8px;
      font-size: 10px;
      font-weight: 800;
      background: var(--uc-dna-card-surface-soft);
      color: var(--uc-border-strong);
    }

    .uc-dna-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      border: 1px solid var(--uc-veil-strong);
      border-radius: 4px;
      padding: 4px 9px;
      font-size: 10px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      background: var(--uc-chrome);
      color: var(--uc-text-on-primary);
    }

    /* ── Games (modern-retro, resilient without Tailwind classes) ── */
    .uc-games-layout {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
    }

    @media (min-width: 1024px) {
      .uc-games-layout {
        grid-template-columns: 1fr 2fr 1fr;
        align-items: start;
      }
    }

    .uc-panel-red {
      background: var(--uc-games-panel);
      border: 1px solid rgba(0, 0, 0, 0.45);
      box-shadow:
        0 10px 18px var(--uc-shadow-ink-strong),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
      overflow: hidden;
    }

    .uc-panel-red .section-header {
      background: var(--uc-games-header);
      border-bottom: 1px solid rgba(0, 0, 0, 0.45);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-size: 12px;
      padding: 6px 10px;
    }

    .uc-games-profile-body {
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      color: var(--uc-text-on-primary);
      /* CSS-only “carbon fibre / portal texture” vibe */
      background-color: var(--uc-scrim-weak);
      background-image:
        repeating-linear-gradient(45deg, var(--uc-scrim-soft) 0 6px, var(--uc-veil-weak) 6px 12px),
        radial-gradient(var(--uc-scrim) 1px, transparent 1px);
      background-size: 18px 18px, 12px 12px;
      background-position: 0 0, 6px 6px;
    }

    .uc-avatar-circle {
      width: 132px;
      height: 132px;
      border-radius: 999px;
      background: var(--uc-surface);
      border: 4px solid var(--uc-gold);
      overflow: hidden;
      box-shadow: 0 8px 14px var(--uc-scrim);
    }

    .uc-avatar-circle img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .uc-games-name {
      font-weight: 900;
      font-style: italic;
      text-transform: uppercase;
      color: var(--uc-gold);
      font-size: 20px;
      line-height: 1;
      text-shadow: 1px 1px 0 rgba(0,0,0,0.65);
    }

    .uc-games-role {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.2em;
      opacity: 0.85;
    }

    .uc-btn-yellow {
      width: 100%;
      padding: 10px 12px;
      background: var(--uc-gold);
      color: var(--uc-text-on-gold);
      font-weight: 900;
      text-transform: uppercase;
      font-size: 11px;
      border-radius: 3px;
      border: none;
      box-shadow: inset 0 -4px 0 var(--uc-shadow-ink-strong);
      cursor: pointer;
    }

    .uc-btn-yellow:active {
      box-shadow: none;
      transform: translateY(1px);
    }

    .uc-games-grid {
      padding: 20px;
      background-color: var(--uc-games-base);
      background-image:
        linear-gradient(var(--uc-veil-weak) 1px, transparent 1px),
        linear-gradient(90deg, var(--uc-veil-weak) 1px, transparent 1px);
      background-size: 20px 20px;
      color: var(--uc-text-on-primary);
    }

    .uc-games-grid h3 {
      margin: 0;
      font-weight: 900;
      font-style: italic;
      text-transform: uppercase;
      font-size: 28px;
      text-shadow: 2px 2px 0 rgba(0,0,0,0.45);
    }

    .uc-games-grid p {
      margin: 6px 0 0;
      color: rgba(255,255,255,0.75);
      font-size: 14px;
    }

    .uc-games-headline {
      display: grid;
      gap: 4px;
    }

    .uc-games-hero {
      margin-top: 16px;
      border: 1px solid var(--uc-veil-strong);
      border-radius: 8px;
      padding: 14px;
      background:
        linear-gradient(120deg, var(--uc-scrim), var(--uc-scrim-soft)),
        radial-gradient(circle at 14% 20%, var(--uc-accent-wash-strong), transparent 38%),
        linear-gradient(145deg, #1f4d34, var(--uc-chrome));
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 10px 20px var(--uc-shadow-ink-strong);
    }

    .uc-games-hero-kicker {
      display: inline-flex;
      width: fit-content;
      padding: 3px 8px;
      font-size: 10px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      border-radius: 999px;
      color: var(--uc-text-on-gold);
      background: var(--uc-gold);
    }

    .uc-games-hero-title {
      margin-top: 9px;
      font-size: 30px;
      line-height: 1;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.01em;
      text-shadow: 2px 2px 0 var(--uc-scrim);
    }

    .uc-games-hero-copy {
      margin-top: 8px;
      max-width: 64ch;
      font-size: 13px;
      color: rgba(255,255,255,0.9);
    }

    .uc-games-hero-topline {
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 10px;
    }

    .uc-games-arrow {
      width: 34px;
      height: 34px;
      border-radius: 999px;
      border: 1px solid var(--uc-veil-strong);
      background: var(--uc-scrim);
      color: var(--uc-text-on-primary);
      font-size: 21px;
      line-height: 1;
      cursor: pointer;
    }

    .uc-games-hero-chips {
      margin-top: 10px;
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .uc-games-chip {
      font-size: 10px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      padding: 4px 8px;
      border-radius: 3px;
      border: 1px solid var(--uc-veil-strong);
      background: var(--uc-scrim);
      color: var(--uc-text-on-primary);
    }

    .uc-games-hero-actions {
      margin-top: 12px;
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    .uc-games-hero-btn {
      border: none;
      border-radius: 4px;
      padding: 9px 12px;
      font-size: 11px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      cursor: pointer;
      color: var(--uc-text-on-gold);
      background: var(--uc-gold);
      box-shadow: inset 0 -3px 0 var(--uc-shadow-ink-strong);
    }

    .uc-games-hero-btn.is-alt {
      color: var(--uc-text-on-primary);
      background: var(--uc-chrome);
      border: 1px solid var(--uc-veil-strong);
      box-shadow: none;
    }

    .uc-games-dots {
      margin-top: 10px;
      display: flex;
      gap: 7px;
      align-items: center;
      flex-wrap: wrap;
    }

    .uc-games-dot {
      width: 9px;
      height: 9px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.4);
      background: var(--uc-veil-strong);
      cursor: pointer;
      padding: 0;
    }

    .uc-games-dot.is-active {
      background: var(--uc-gold);
      border-color: var(--uc-gold);
    }

    .uc-game-cards {
      margin-top: 18px;
      display: grid;
      grid-template-columns: 1fr;
      gap: 14px;
    }

    @media (min-width: 640px) {
      .uc-game-cards { grid-template-columns: 1fr 1fr; }
    }

    .uc-game-card {
      background: var(--uc-surface);
      border: 2px solid var(--uc-border-strong);
      padding: 16px;
      transition: transform 120ms ease, background 120ms ease, box-shadow 120ms ease;
      border-radius: 12px;
      box-shadow: var(--uc-dna-shadow-soft, 3px 3px 0 rgba(0, 0, 0, 0.18));
      color: var(--uc-text);
      overflow: hidden;
      position: relative;
    }

    .uc-game-card:hover {
      background: var(--uc-surface-raised);
      color: var(--uc-text);
      transform: translateY(-2px);
    }

    .uc-game-card-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 26px;
      color: var(--uc-text);
    }

    .uc-game-mode {
      font-size: 10px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      border: 1px solid var(--uc-danger-border);
      border-radius: 999px;
      padding: 3px 6px;
      background: var(--uc-danger-surface);
      color: var(--uc-danger-text);
    }

    .uc-game-card-title {
      margin-top: 8px;
      font-weight: 900;
      text-transform: none;
      letter-spacing: 0.01em;
      font-size: 15px;
      color: var(--uc-text);
      font-style: normal;
      text-shadow: none;
    }

    .uc-game-card-copy {
      margin-top: 5px;
      font-size: 12px;
      opacity: 1;
      min-height: 30px;
      color: var(--uc-text-secondary);
      line-height: 1.45;
    }

    .uc-game-card .uc-invite-btn {
      margin-top: 12px;
      width: 100%;
      padding: 6px 8px;
      background: var(--uc-surface-raised);
      border: 2px solid var(--uc-border-strong);
      color: var(--uc-primary-ink);
      font-weight: 800;
      font-size: 10px;
      text-transform: uppercase;
      cursor: pointer;
      border-radius: 999px;
    }

    .uc-game-card:hover .uc-invite-btn {
      background: var(--uc-primary);
      color: var(--uc-text-on-primary);
      border-color: var(--uc-primary);
    }

    .uc-games-arena {
      margin-top: 16px;
      border: 1px solid var(--uc-veil-strong);
      border-radius: 8px;
      background: var(--uc-scrim);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 12px 22px var(--uc-shadow-ink-strong);
      overflow: hidden;
    }

    /* Arena overlay chrome lives in games-shared.css */

    .uc-games-arena-hint {
      margin-top: 16px;
      font-size: 11px;
      font-weight: 800;
      color: rgba(255,255,255,0.76);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .uc-games-overlay {
      position: fixed;
      inset: 0;
      z-index: 12040;
      background: rgba(7, 8, 12, 0.72);
      display: flex;
      align-items: stretch;
      justify-content: stretch;
      padding: 0;
    }

    .uc-games-overlay.hidden,
    .uc-games-overlay.hidden.is-shell-host,
    .uc-games-overlay.hidden.is-shell-host:not(.is-gameplay),
    .uc-games-overlay.hidden.is-shell-host.is-gameplay {
      display: none !important;
    }

    .uc-games-overlay-card {
      width: 100%;
      height: 100%;
      max-width: none;
      max-height: none;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      border: 0;
      border-radius: 0;
      background: linear-gradient(180deg, var(--uc-chrome) 0%, var(--uc-chrome) 100%);
      box-shadow: none;
    }

    /* Compact sheet: mobile / narrow only. Desktop stays edge-to-edge. */
    .uc-games-overlay-card.is-compact-stage {
      width: min(720px, 100%);
      max-height: min(92dvh, 920px);
      height: auto;
      margin: auto;
      border: 2px solid var(--uc-border-strong);
      border-radius: 16px;
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
      background: linear-gradient(180deg, var(--uc-chrome) 0%, var(--uc-chrome) 100%);
    }

    .uc-games-overlay-card.is-lobby.is-compact-stage {
      width: min(560px, 100%);
      max-height: min(88dvh, 720px);
    }

    .uc-games-overlay-card.is-compact-stage .uc-games-arena-body {
      height: auto;
      max-height: min(78dvh, 720px);
      overflow: hidden;
    }

    .uc-games-overlay-card.is-lobby.is-compact-stage .uc-games-arena-body {
      max-height: min(72dvh, 560px);
    }

    .uc-games-overlay-card.is-compact-stage .uc-games-arena-stage {
      height: auto;
      max-height: min(78dvh, 720px);
      overflow-y: auto;
      justify-content: flex-start;
    }

      /* Desktop: always fullscreen arena — lobby + play share the same shell size */
    @media (min-width: 901px) {
      .uc-games-overlay,
      .uc-games-overlay.is-shell-host {
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        overflow: hidden !important;
        background: var(--uc-chrome) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
      }

      .uc-games-overlay-card,
      .uc-games-overlay-card.is-compact-stage,
      .uc-games-overlay-card.is-lobby,
      .uc-games-overlay-card.is-lobby.is-compact-stage,
      .uc-games-overlay-card.is-fill-stage {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        border-radius: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        flex: 1 1 auto;
      }

      .uc-games-overlay-card.is-compact-stage .uc-games-arena-body,
      .uc-games-overlay-card.is-lobby .uc-games-arena-body,
      .uc-games-overlay-card.is-lobby.is-compact-stage .uc-games-arena-body,
      .uc-games-overlay-card.is-fill-stage .uc-games-arena-body {
        height: 100%;
        max-height: none;
        min-height: 0;
        overflow: hidden;
        flex: 1 1 auto;
      }

      .uc-games-overlay-card.is-compact-stage .uc-games-arena-stage,
      .uc-games-overlay-card.is-lobby .uc-games-arena-stage,
      .uc-games-overlay-card.is-fill-stage .uc-games-arena-stage {
        height: 100%;
        max-height: none;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
      }
    }

    .uc-games-overlay-card.is-lobby .uc-games-arena-stage {
      justify-content: safe center;
      align-items: center;
      align-content: safe center;
    }

    body.uc-games-overlay-open {
      overflow: hidden !important;
      overscroll-behavior: none;
    }

    /* Fullscreen Arena: hide site chrome completely (lobby + gameplay). */
    body.uc-games-overlay-open .login-bar,
    body.uc-games-overlay-open .uc-app-topbar,
    body.uc-games-overlay-open .header-bg,
    body.uc-games-overlay-open .uc-primary-nav,
    body.uc-games-overlay-open .uc-global-footer-bar,
    body.uc-games-overlay-open .uc-app-bottom-bar,
    body.uc-games-overlay-open .uc-app-bottom-bar--guest,
    body.uc-games-overlay-open .uc-app-bottom-bar--member,
    body.uc-auth-signed-in.uc-games-overlay-open .login-bar,
    body.uc-auth-signed-in.uc-games-overlay-open .uc-app-topbar,
    body.uc-auth-signed-in.uc-games-overlay-open .header-bg,
    body.uc-auth-signed-in.uc-games-overlay-open .uc-primary-nav,
    body.uc-auth-signed-in.uc-games-overlay-open .uc-global-footer-bar,
    body.uc-auth-signed-in.uc-games-overlay-open .uc-app-bottom-bar {
      display: none !important;
      visibility: hidden !important;
      pointer-events: none !important;
      opacity: 0 !important;
    }

    @media (max-width: 900px) {
      .uc-games-overlay {
        align-items: flex-end;
        justify-content: center;
        background: var(--uc-scrim-strong);
        /* Overlay must pin to the visual viewport, never a tall page shell. */
        position: fixed !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
      }

      .uc-games-overlay-card.is-compact-stage {
        width: 100%;
        max-height: min(92dvh, 920px);
        margin: 0;
        border-radius: 16px 16px 0 0;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
      }

      /* Lobby / picker: size to content so Play alone is in the first fold. */
      .uc-games-overlay-card.is-lobby.is-compact-stage {
        width: 100%;
        height: auto;
        max-height: min(92dvh, 100%);
        margin: 0;
      }

      .uc-games-overlay-card.is-lobby.is-compact-stage .uc-games-arena-body {
        height: auto;
        max-height: min(78dvh, 640px);
        flex: 0 1 auto;
      }

      .uc-games-overlay-card.is-lobby.is-compact-stage .uc-games-arena-stage {
        height: auto;
        max-height: min(78dvh, 640px);
        min-height: 0;
        flex: 0 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start !important;
        align-items: stretch !important;
        align-content: flex-start !important;
        padding: 14px 12px calc(16px + env(safe-area-inset-bottom, 0px));
      }

      .uc-games-overlay-card.is-fill-stage {
        width: 100%;
        height: 100%;
        max-height: none;
        border-radius: 0;
      }

      .uc-games-overlay-card.is-lobby.is-fill-stage .uc-games-arena-stage,
      .uc-games-overlay-card.is-lobby .uc-games-arena-stage {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
        align-content: flex-start;
        align-items: stretch;
      }
    }

    .uc-games-arena-leave.is-close {
      background: var(--uc-primary-darker);
    }

    .uc-players-list {
      background: var(--uc-scrim-weak);
      padding: 10px;
      overflow: auto;
      flex: 1;
    }

    .uc-player-row {
      display: flex;
      gap: 12px;
      align-items: center;
      padding: 10px;
      background: var(--uc-games-row);
      border: 1px solid var(--uc-veil-weak);
      margin-bottom: 10px;
      cursor: pointer;
      border-radius: 3px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
    }

    .uc-player-row:hover { background: var(--uc-games-accent); }

    .uc-player-avatar {
      width: 40px;
      height: 40px;
      background: var(--uc-surface);
      border-radius: 999px;
      border: 1px solid var(--uc-gold);
      overflow: hidden;
      flex-shrink: 0;
    }

    .uc-player-avatar img { width: 100%; height: 100%; object-fit: cover; display:block; }

    @keyframes uc-bounce-in {
      0% { transform: scale(0.6); opacity: 0; }
      65% { transform: scale(1.06); opacity: 1; }
      100% { transform: scale(1); }
    }

    .uc-anim-bounce-in { animation: uc-bounce-in 0.42s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

    /* ── Profile page extras ──────────────────────────── */
    .profile-banner-strip {
      background: linear-gradient(135deg, var(--uc-chrome) 0%, #2c0000 60%, var(--uc-primary-dark) 100%);
      border-bottom: 3px solid var(--uc-primary);
      padding: 12px 16px;
      position: relative;
      overflow: hidden;
    }
    .profile-banner-strip::before {
      content: "";
      position: absolute; inset: 0;
      background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, var(--uc-primary-wash) 10px, var(--uc-primary-wash) 11px);
    }
    .profile-username-lg {
      font-family: "Permanent Marker", cursive;
      font-size: 26px; color: var(--uc-text-on-primary);
      text-shadow: 2px 2px 4px var(--uc-border-strong), 0 0 10px rgba(255, 80, 80, 0.32);
      line-height: 1;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    #profile-target-username {
      max-width: 150px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: inline-block;
      vertical-align: bottom;
    }

    .uc-profile-status-chip {
      box-shadow: 3px 3px 0 var(--uc-scrim);
      border-radius: 999px;
      padding: 2px 10px;
    }
    .avatar-frame-lg {
      border: 3px solid var(--uc-primary);
      box-shadow: 0 0 0 2px var(--uc-border-strong), 3px 3px 8px var(--uc-scrim-strong);
      background: var(--uc-chrome);
      display: block; overflow: hidden;
      width: 110px; height: 110px; flex-shrink: 0;
    }
    .avatar-frame-lg img { width: 100%; height: 100%; object-fit: cover; }
    .profile-contact-btn {
      display: block; width: 100%;
      background: linear-gradient(to bottom, var(--uc-surface-sunken), var(--uc-gray-300));
      border: 1px solid #888; border-bottom: 2px solid var(--uc-gray-600);
      color: var(--uc-border-strong); font-weight: bold; font-size: 11px; text-align: left;
      padding: 4px 8px; margin-bottom: 3px; cursor: pointer;
      border-radius: 2px; text-decoration: none;
    }
    .profile-contact-btn:hover { background: linear-gradient(to bottom, var(--uc-surface), var(--uc-surface-sunken)); }
    .profile-contact-btn.p-red {
      background: linear-gradient(to bottom, var(--uc-primary), var(--uc-primary-dark));
      color: var(--uc-text-on-primary); border-color: var(--uc-primary-darker);
    }
    .profile-contact-btn.p-red:hover { background: linear-gradient(to bottom, #ff3333, var(--uc-primary)); }
    .profile-contact-btn.p-dark {
      background: linear-gradient(to bottom, var(--uc-gray-600), var(--uc-chrome));
      color: var(--uc-text-muted); border-color: var(--uc-border-strong);
    }
    .uc-profile-contact-panel {
      border-top: 1px solid var(--uc-gray-300);
      background: linear-gradient(180deg, var(--uc-surface-soft) 0%, var(--uc-surface-soft) 100%);
    }
    .uc-profile-contact-panel .section-header {
      border-top: 1px solid var(--uc-gray-300);
    }
    .uc-profile-contact-panel .profile-contact-btn {
      width: 100%;
    }
    .uc-profile-about-meta {
      display: grid;
      gap: 12px;
      margin-top: 10px;
    }
    .uc-profile-about-mood,
    .uc-profile-about-info {
      border: 1px solid var(--uc-border);
      border-radius: 8px;
      background: linear-gradient(180deg, var(--uc-surface) 0%, var(--uc-info-surface) 100%);
      overflow: hidden;
    }
    .uc-profile-about-mood .section-header,
    .uc-profile-about-info .section-header {
      border-bottom: 1px solid var(--uc-divider);
    }
    .profile-info-table { width: 100%; border-collapse: collapse; }
    .profile-info-table td { padding: 3px 6px; border-bottom: 1px solid var(--uc-divider); font-size: 11px; vertical-align: top; color: var(--uc-text); }
    .profile-info-table td:first-child { font-weight: bold; color: var(--uc-primary-ink); width: 40%; }
    .profile-info-interests { min-height: 1.2em; }
    .profile-info-inline-select,
    .profile-info-inline-input {
      width: 100%;
      max-width: 220px;
      margin-top: 2px;
      border: 1px solid var(--uc-border);
      background: var(--uc-surface-input);
      color: var(--uc-text);
      font-size: 11px;
      padding: 4px 6px;
      border-radius: 4px;
    }
    .profile-info-edit-status {
      margin-top: 4px;
      font-size: 9px;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--uc-text-muted);
    }
    .profile-counter {
      font-family: monospace; background: #000; color: #0f0;
      font-size: 17px; letter-spacing: 4px;
      padding: 3px 10px; border: 2px inset var(--uc-gray-800); display: inline-block;
    }
    .profile-player-box {
      background: var(--uc-chrome); border: 1px solid var(--uc-gray-800);
      padding: 6px; border-radius: 2px;
    }
    .profile-player-bar {
      height: 4px; background: var(--uc-chrome); border-radius: 2px; margin-top: 5px; overflow: hidden;
    }
    .profile-player-fill { height: 100%; width: 62%; background: linear-gradient(to right, var(--uc-primary), #ff5555); }
    .profile-badge-pill {
      display: inline-flex; align-items: center; gap: 4px;
      background: linear-gradient(to bottom, var(--uc-chrome), var(--uc-chrome));
      border: 1px solid var(--uc-primary); color: var(--uc-gold);
      font-size: 10px; font-weight: bold;
      padding: 3px 8px; margin: 2px; border-radius: 2px;
    }
    .profile-interest-tag {
      display: inline-block;
      background: var(--uc-surface-sunken); border: 1px solid var(--uc-gray-300);
      color: var(--uc-text); font-size: 10px;
      padding: 2px 7px; margin: 2px; border-radius: 2px;
    }
    .profile-neighborhood-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px 8px; }
    .profile-neighborhood-card {
      padding: 4px 2px 2px;
      border-radius: 8px;
      transition: background-color .18s ease, transform .18s ease;
    }
    .profile-neighborhood-card:hover {
      background: var(--uc-primary-wash);
      transform: translateY(-1px);
    }
    .profile-neighborhood-label {
      margin-top: 5px;
      font-size: 11px;
      font-weight: 700;
      color: var(--uc-primary-ink);
      letter-spacing: 0.01em;
    }
    .profile-neighborhood-thumb {
      position: relative;
      width: 58px;
      height: 58px;
      margin: 0 auto;
      overflow: hidden;
      border-radius: 12px;
      border: 1px solid rgba(127, 29, 29, 0.28);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0 2px 6px rgba(127, 29, 29, 0.12);
      color: var(--uc-primary-ink);
      background:
        radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.75), transparent 42%),
        linear-gradient(145deg, var(--uc-surface-soft) 0%, #fecdd3 55%, #fda4af 100%);
    }
    .profile-neighborhood-thumb.tone-1 {
      color: var(--uc-warning-text);
      background:
        radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.7), transparent 42%),
        linear-gradient(145deg, var(--uc-warning-surface) 0%, #fde68a 52%, var(--uc-gold) 100%);
    }
    .profile-neighborhood-thumb.tone-2 {
      color: var(--uc-primary-ink);
      background:
        radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.72), transparent 42%),
        linear-gradient(145deg, var(--uc-surface-soft) 0%, #fecaca 50%, #f87171 100%);
    }
    .profile-neighborhood-thumb.tone-3 {
      color: var(--uc-primary);
      background:
        radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.72), transparent 42%),
        linear-gradient(145deg, var(--uc-surface-soft) 0%, #fdba74 55%, #fb923c 100%);
    }
    .profile-neighborhood-thumb.tone-4 {
      color: var(--uc-primary-ink);
      background:
        radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.7), transparent 42%),
        linear-gradient(145deg, var(--uc-surface-muted) 0%, #f9a8d4 50%, #fb7185 100%);
    }
    .profile-neighborhood-thumb-glow {
      position: absolute;
      inset: auto -20% -35% -10%;
      height: 70%;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.45), transparent 68%);
      pointer-events: none;
    }
    .profile-neighborhood-thumb-skyline {
      position: absolute;
      left: 50%;
      bottom: 4px;
      width: 34px;
      height: 34px;
      transform: translateX(-50%);
      opacity: 0.88;
      filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.35));
    }
    .profile-neighborhood-thumb-initial {
      position: absolute;
      top: 5px;
      right: 7px;
      font-size: 11px;
      font-weight: 800;
      line-height: 1;
      letter-spacing: 0.02em;
      color: rgba(127, 29, 29, 0.88);
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
    }
    .profile-neighborhood-thumb.tone-1 .profile-neighborhood-thumb-initial { color: rgba(146, 64, 14, 0.9); }
    .profile-neighborhood-thumb.tone-2 .profile-neighborhood-thumb-initial { color: rgba(159, 18, 57, 0.9); }
    .profile-neighborhood-thumb.tone-3 .profile-neighborhood-thumb-initial { color: rgba(154, 52, 18, 0.9); }
    .profile-neighborhood-thumb.tone-4 .profile-neighborhood-thumb-initial { color: rgba(136, 19, 55, 0.9); }
    .profile-neighborhood-thumb img { width: 100%; height: 100%; object-fit: cover; }
    .profile-neighborhood-list-mark {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      flex-shrink: 0;
      border-radius: 6px;
      color: var(--uc-primary-ink);
      background: linear-gradient(145deg, var(--uc-surface-soft), #fecdd3);
      border: 1px solid rgba(159, 18, 57, 0.18);
    }
    .profile-neighborhood-list-mark svg { width: 13px; height: 13px; display: block; }
    .profile-comment-block { border-bottom: 1px dotted var(--uc-gray-300); padding: 6px 0; }
    .profile-comment-block:last-child { border-bottom: none; }
    .profile-comment-thumb {
      width: 34px; height: 34px; border: 1px solid var(--uc-gray-400);
      overflow: hidden; flex-shrink: 0;
    }
    .profile-comment-thumb img { width: 100%; height: 100%; object-fit: cover; }
    .profile-section-ul {
      border-bottom: 2px solid var(--uc-primary);
      color: var(--uc-primary-ink); font-weight: bold; font-size: 11px;
      margin-bottom: 5px; padding-bottom: 2px;
    }
    .online-dot-sm { 
      width: 7px; height: 7px; border-radius: 50%; 
      background: #00ee00; box-shadow: 0 0 4px #0f0; 
      display:inline-block; 
      animation: uc-online-pulse 2s infinite;
    }

    @keyframes uc-online-pulse {
      0% { box-shadow: 0 0 0 0 rgba(0, 238, 0, 0.7); }
      70% { box-shadow: 0 0 0 6px rgba(0, 238, 0, 0); }
      100% { box-shadow: 0 0 0 0 rgba(0, 238, 0, 0); }
    }

    @media (max-width: 640px) {
      .profile-neighborhood-grid { grid-template-columns: repeat(2, 1fr); gap: 12px 10px; }
      .profile-neighborhood-thumb { width: 68px; height: 68px; border-radius: 14px; }
      .profile-neighborhood-thumb-skyline { width: 40px; height: 40px; }
      .profile-neighborhood-thumb-initial { font-size: 12px; top: 6px; right: 8px; }
    }

    @media (min-width: 900px) {
      .uc-profile-about-meta {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        align-items: start;
      }
    }

    .login-bar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 11050;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      background: var(--uc-chrome);
      border-bottom: 2px solid var(--uc-border-strong);
      padding-right: 188px;
    }

    .uc-notify-dock {
      z-index: 12000;
      width: min(420px, calc(100vw - 20px));
    }

    .uc-notify-dock.is-in-topbar {
      position: absolute;
      top: 4px;
      right: 10px;
      width: min(360px, calc(100vw - 20px));
    }

    .uc-notify-dock.is-floating {
      position: fixed;
      right: 16px;
      bottom: 16px;
    }

    .uc-notify-toast {
      margin-bottom: 10px;
      border-radius: 10px;
      border: 2px solid var(--uc-border-strong);
      background: linear-gradient(145deg, var(--uc-primary), var(--uc-primary));
      color: var(--uc-text-on-primary);
      box-shadow: 0 10px 28px var(--uc-scrim);
      padding: 10px;
    }

    .uc-notify-toast-text {
      font-size: 12px;
      line-height: 1.35;
      font-weight: 800;
    }

    .uc-notify-toast-action {
      margin-top: 8px;
      border: 1px solid var(--uc-border-strong);
      border-radius: 6px;
      background: var(--uc-gold);
      color: var(--uc-text-on-gold);
      font-size: 11px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      padding: 6px 10px;
      cursor: pointer;
    }

    .uc-notify-toggle {
      width: 100%;
      border: 2px solid var(--uc-border-strong);
      border-radius: 10px;
      background: var(--uc-chrome);
      color: var(--uc-text-muted);
      box-shadow: 0 12px 30px var(--uc-scrim);
      padding: 11px 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      cursor: pointer;
    }

    .uc-notify-toggle-title {
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--uc-gold);
    }

    .uc-notify-unread {
      font-size: 10px;
      font-weight: 900;
      border-radius: 999px;
      background: var(--uc-primary);
      color: var(--uc-text-on-primary);
      padding: 2px 9px;
      border: 1px solid var(--uc-veil-strong);
    }

    .uc-notify-panel {
      margin-top: 8px;
      border-radius: 10px;
      border: 2px solid var(--uc-border-strong);
      background: linear-gradient(150deg, var(--uc-surface-muted), var(--uc-surface-sunken));
      color: var(--uc-text);
      box-shadow: 0 16px 30px var(--uc-scrim);
      overflow: hidden;
    }

    .uc-notify-panel-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 10px 12px;
      border-bottom: 1px solid var(--uc-gray-300);
      background: var(--uc-wash-weak);
    }

    .uc-notify-panel-title {
      font-size: 11px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--uc-danger-text);
    }

    .uc-notify-filter-group {
      display: inline-flex;
      gap: 4px;
    }

    .uc-notify-filter-btn {
      border: 1px solid var(--uc-gray-400);
      background: var(--uc-surface);
      color: var(--uc-text);
      border-radius: 6px;
      padding: 5px 8px;
      font-size: 10px;
      font-weight: 800;
      cursor: pointer;
    }

    .uc-notify-filter-btn.is-active {
      background: var(--uc-chrome);
      color: var(--uc-gold);
      border-color: var(--uc-border-strong);
    }

    .uc-notify-list {
      padding: 10px;
      max-height: 360px;
      overflow: auto;
      display: grid;
      gap: 8px;
    }

    .uc-notify-empty {
      padding: 12px;
      font-size: 12px;
      color: var(--uc-text-secondary);
    }

    .uc-notify-item {
      border: 1px solid var(--uc-gray-300);
      border-radius: 8px;
      background: var(--uc-surface);
      padding: 10px;
    }

    .uc-notify-item-sender {
      color: var(--uc-danger-text);
      font-size: 10px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .uc-notify-item-title {
      font-size: 13px;
      font-weight: 800;
      color: var(--uc-text);
      margin-top: 2px;
    }

    .uc-notify-item-message {
      font-size: 12px;
      color: var(--uc-text-secondary);
      margin-top: 4px;
      line-height: 1.35;
    }

    .uc-notify-item-status {
      margin-top: 4px;
      color: var(--uc-text-muted);
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .uc-notify-item-actions {
      margin-top: 8px;
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .uc-notify-action-btn {
      border: 1px solid var(--uc-gray-400);
      background: var(--uc-surface);
      color: var(--uc-text);
      border-radius: 6px;
      padding: 6px 10px;
      font-size: 10px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      cursor: pointer;
    }

    .uc-notify-action-btn.is-primary {
      border-color: var(--uc-primary);
      background: var(--uc-primary);
      color: var(--uc-text-on-primary);
    }

    .uc-global-footer-bar {
      background: var(--uc-chrome);
      border-top: 2px solid var(--uc-border-strong);
      color: var(--uc-chrome-text);
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 10004;
      margin-top: 0;
      min-height: 42px;
      box-sizing: border-box;
      overflow: visible;
    }

    /* Cap shell: keep chrome out of the physical home indicator / notch. */
    html.uc-cap-native .header-bg {
      padding-top: max(10px, env(safe-area-inset-top, 0px));
      min-height: calc(122px + env(safe-area-inset-top, 0px));
      box-sizing: border-box;
    }

    html.uc-cap-native .uc-global-footer-bar {
      padding-bottom: env(safe-area-inset-bottom, 0px);
      min-height: calc(42px + env(safe-area-inset-bottom, 0px));
    }

    html.uc-cap-native .uc-global-footer-inner {
      padding-bottom: max(4px, env(safe-area-inset-bottom, 0px));
    }

    html.uc-cap-native .uc-primary-nav {
      padding-left: max(0px, env(safe-area-inset-left, 0px));
      padding-right: max(0px, env(safe-area-inset-right, 0px));
    }

    html.uc-cap-native main,
    html.uc-cap-native #uc-slide-layer,
    html.uc-cap-native .uc-page-shell {
      padding-bottom: max(52px, calc(48px + env(safe-area-inset-bottom, 0px)));
    }

    .uc-global-footer-inner {
      width: 100%;
      max-width: none;
      margin: 0;
      min-height: 42px;
      padding: 4px 6px 4px 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      text-align: right;
      box-sizing: border-box;
    }

    .uc-global-footer-brand {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 4px 8px;
      min-width: 0;
      text-align: left;
      color: rgba(249, 250, 251, 0.78);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      line-height: 1.25;
    }

    .uc-global-footer-brand-mark {
      color: var(--uc-gold);
      font-weight: 900;
      letter-spacing: 0.08em;
    }

    .uc-global-footer-links {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 6px 8px;
      margin-bottom: 0;
      flex: 1 1 auto;
    }

    .uc-global-footer-links a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: auto;
      color: var(--uc-text-on-primary);
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      text-decoration: none;
      border: 2px solid var(--uc-border-strong);
      background: var(--uc-primary);
      box-shadow: 3px 3px 0 var(--uc-scrim-strong);
      padding: 4px 18px 7px;
      border-radius: 0;
      position: relative;
      transition: transform 120ms ease, filter 120ms ease, box-shadow 120ms ease;
    }

    .uc-global-footer-links a::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 5px;
      background: var(--uc-gold);
    }

    .uc-global-footer-links a:hover {
      color: var(--uc-text-on-primary);
      filter: brightness(1.04);
      transform: translate(-1px, -1px);
      box-shadow: 4px 4px 0 var(--uc-scrim-strong);
    }

    .uc-global-footer-bar .uc-app-bottom-bar {
      display: none !important;
    }

    body.uc-auth-signed-out .uc-global-footer-inner,
    body:not(.uc-auth-signed-in) .uc-global-footer-inner {
      display: none;
    }

    body.uc-auth-signed-out .uc-global-footer-bar .uc-app-bottom-bar--guest,
    body:not(.uc-auth-signed-in) .uc-global-footer-bar .uc-app-bottom-bar--guest {
      display: flex !important;
    }

    body.uc-auth-signed-in .uc-global-footer-bar {
      background: transparent;
      border-top: 0;
      margin-top: 0;
    }

    body.uc-auth-signed-in .uc-global-footer-inner {
      display: none;
    }

    body.uc-auth-signed-in .uc-global-footer-bar .uc-app-bottom-bar--guest {
      display: none !important;
    }

    body.uc-auth-signed-in .uc-global-footer-bar .uc-app-bottom-bar--member {
      display: flex !important;
    }

    .uc-app-bottom-bar--guest .uc-app-bottom-bar__tab {
      color: rgba(248, 250, 252, 0.94);
    }

    .uc-app-bottom-bar--guest .uc-app-bottom-bar__tab--locked {
      color: rgba(248, 250, 252, 0.82);
    }

    .uc-app-bottom-bar--guest .uc-app-bottom-bar__icon {
      color: var(--uc-gold);
    }

    .uc-app-bottom-bar--guest .uc-app-bottom-bar__tab.is-active,
    .uc-app-bottom-bar--guest .uc-app-bottom-bar__tab.is-active .uc-app-bottom-bar__icon {
      color: var(--uc-danger);
    }

    .uc-app-bottom-bar--guest .uc-app-bottom-bar__tab--guest-center {
      top: -10px;
    }

    .uc-app-bottom-bar__guest-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 64px;
      height: 44px;
      padding: 0 16px;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--uc-primary), var(--uc-primary));
      color: var(--uc-text-on-primary);
      border: 3px solid var(--uc-gold);
      box-shadow: 0 4px 10px rgba(220, 38, 38, 0.32);
      font-size: 14px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      line-height: 1;
    }

    .uc-app-bottom-bar--guest .uc-app-bottom-bar__tab.is-active::after {
      width: 26px;
    }

    @media (max-width: 640px) {
      .login-bar {
        padding-right: 12px;
        padding-top: 62px;
      }
      .uc-notify-dock.is-in-topbar,
      .uc-notify-dock.is-floating {
        left: 8px;
        right: 8px;
        top: 6px;
        width: auto;
      }
      .uc-notify-toggle-title {
        font-size: 10px;
      }
    }

    /* ── Live Pulse Ticker (inline with Urban Chat brand row) ─────────── */
    .uc-home-ticker-wrap {
      display: none;
      position: relative;
      flex: 1 1 auto;
      min-width: 0;
      height: 28px;
      max-width: 100%;
      background: var(--uc-scrim);
      border: 1px solid rgba(250, 204, 21, 0.28);
      border-radius: 999px;
      align-items: center;
      z-index: 35;
      overflow: hidden;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      box-sizing: border-box;
    }

    /* Home only — same row as Urban Chat in the app topbar (Phase 28 gate) */
    html[data-uc-live-pulse="1"] body[data-uc-page="home"] .uc-home-ticker-wrap {
      display: flex;
    }

    body[data-uc-page="signup"] .uc-home-ticker-wrap {
      display: none !important;
    }

    .uc-home-ticker-label {
      background: var(--uc-gold);
      color: var(--uc-text-on-gold);
      font-size: 9px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      padding: 0 8px;
      height: 100%;
      display: flex;
      align-items: center;
      white-space: nowrap;
      border-right: 1px solid var(--uc-scrim);
      flex-shrink: 0;
      position: relative;
      z-index: 2;
    }

    .uc-home-ticker {
      flex: 1;
      min-width: 0;
      height: 100%;
      overflow: hidden;
      position: relative;
      display: flex;
      align-items: center;
    }

    .uc-home-ticker-track {
      display: flex;
      white-space: nowrap;
      will-change: transform;
      animation: uc-ticker-scroll 40s linear infinite;
      padding-left: 12px;
    }

    .uc-home-ticker-item {
      display: inline-block;
      color: var(--uc-text-muted);
      font-size: 11px;
      padding-right: 40px;
      letter-spacing: 0.03em;
      text-transform: none;
      font-weight: 700;
    }

    .uc-home-ticker-item::before {
      content: "•";
      color: var(--uc-gold);
      margin-right: 8px;
    }

    @keyframes uc-ticker-scroll {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }

/* === Signed-in app canvas (desktop letterbox) ============================ */
/* Keep member density; stop ultrawide stretch. Signup keeps its phone canvas. */

@media (min-width: 900px) {
  body.uc-auth-signed-in:not([data-uc-page="signup"]) {
    --uc-app-canvas: 1180px;
    background-color: #140607 !important;
    background-image:
      radial-gradient(ellipse 70% 55% at 50% 35%, var(--uc-primary-wash-strong), transparent 70%),
      linear-gradient(180deg, #1a0809 0%, #0c0405 100%) !important;
  }

  body.uc-auth-signed-in:not([data-uc-page="signup"]).uc-after-hours,
  html[data-uc-after-hours="1"] body.uc-auth-signed-in:not([data-uc-page="signup"]) {
    background-color: var(--uc-chrome) !important;
    background-image:
      radial-gradient(ellipse 70% 55% at 50% 35%, rgba(252, 211, 77, 0.08), transparent 70%),
      linear-gradient(180deg, var(--uc-chrome) 0%, var(--uc-chrome) 100%) !important;
  }

  /* Fixed chrome: left:0+right:0 defeats margin:auto — center with left/transform. */
  body.uc-auth-signed-in:not([data-uc-page="signup"]) .login-bar,
  body.uc-auth-signed-in:not([data-uc-page="signup"]) .uc-app-topbar {
    left: 50%;
    right: auto;
    width: min(var(--uc-app-canvas), calc(100vw - 32px));
    max-width: min(var(--uc-app-canvas), calc(100vw - 32px));
    margin-left: 0;
    margin-right: 0;
    transform: translateX(-50%);
    box-sizing: border-box;
  }

  body.uc-auth-signed-in:not([data-uc-page="signup"]) .header-bg,
  body.uc-auth-signed-in:not([data-uc-page="signup"]) .uc-primary-nav,
  body.uc-auth-signed-in:not([data-uc-page="signup"]) #uc-slide-layer {
    width: min(var(--uc-app-canvas), calc(100vw - 32px));
    max-width: min(var(--uc-app-canvas), calc(100vw - 32px));
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }

  body.uc-auth-signed-in:not([data-uc-page="signup"]) .header-bg,
  body.uc-auth-signed-in:not([data-uc-page="signup"]) .uc-primary-nav {
    border-left: 3px solid var(--uc-border-strong);
    border-right: 3px solid var(--uc-border-strong);
  }

  /* Page surface lives on the canvas so the stage stays dark.
     Grid ink uses --uc-page-canvas-grid so Heat (near-black) can draw light lines;
     classic falls back to --uc-primary-darker red lattice. */
  body.uc-auth-signed-in:not([data-uc-page="signup"]) #uc-slide-layer {
    background-color: var(--uc-page-surface, var(--uc-primary-dark));
    background-image:
      linear-gradient(to right, var(--uc-page-canvas-grid, var(--uc-primary-darker)) 1px, transparent 1px),
      linear-gradient(to bottom, var(--uc-page-canvas-grid, var(--uc-primary-darker)) 1px, transparent 1px);
    background-size: 20px 20px;
    border-left: 3px solid var(--uc-border-strong);
    border-right: 3px solid var(--uc-border-strong);
    border-bottom: 3px solid var(--uc-border-strong);
    box-shadow: 0 28px 60px var(--uc-scrim-strong);
  }

  body.uc-auth-signed-in:not([data-uc-page="signup"]).uc-after-hours #uc-slide-layer,
  html[data-uc-after-hours="1"] body.uc-auth-signed-in:not([data-uc-page="signup"]) #uc-slide-layer {
    background-color: var(--uc-page-surface, var(--uc-chrome));
    background-image:
      linear-gradient(to right, var(--uc-page-canvas-grid, var(--uc-accent-wash)) 1px, transparent 1px),
      linear-gradient(to bottom, var(--uc-page-canvas-grid, var(--uc-accent-wash)) 1px, transparent 1px);
    background-size: 20px 20px;
  }

  body.uc-auth-signed-in:not([data-uc-page="signup"]) .uc-global-footer-bar {
    left: 50% !important;
    right: auto !important;
    width: min(var(--uc-app-canvas), calc(100vw - 32px)) !important;
    max-width: min(var(--uc-app-canvas), calc(100vw - 32px)) !important;
    transform: translateX(-50%);
    border-left: 3px solid var(--uc-border-strong);
    border-right: 3px solid var(--uc-border-strong);
  }

  /* Kill ultrawide .container stretch inside the canvas */
  body.uc-auth-signed-in:not([data-uc-page="signup"]) .container {
    max-width: 100% !important;
  }
}

@media (min-width: 1400px) {
  body.uc-auth-signed-in:not([data-uc-page="signup"]) {
    --uc-app-canvas: 1240px;
  }
}

/* === Trippy stage (social / cultural surfaces) =========================== */
/* Desktop-only dimensional treatment. The page supplies a light curved stage;
   signature cards receive pointer-driven tilt from startup-shell.
   Working UIs (chat, inbox, browse, circles, settings, admin, legal, help) stay flat. */

@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  body:is(
    [data-uc-page="home"],
    [data-uc-page="live"],
    [data-uc-page="wire"],
    [data-uc-page="porch"],
    [data-uc-page="games"],
    [data-uc-page="link-up"],
    [data-uc-page="confessions"],
    [data-uc-page="experts"],
    [data-uc-page="neighborhood-network"],
    [data-uc-page="neighborhood-profile"],
    [data-uc-page="profile"]
  ) #uc-slide-layer {
    perspective: none;
  }

  body[data-uc-page="home"] #page-home,
  body[data-uc-page="live"] #page-live,
  body[data-uc-page="wire"] #page-wire,
  body[data-uc-page="porch"] #page-porch,
  body[data-uc-page="games"] #page-games,
  body[data-uc-page="link-up"] #page-link-up,
  body[data-uc-page="confessions"] #page-confessions,
  body[data-uc-page="experts"] #page-experts,
  body[data-uc-page="neighborhood-network"] #page-neighborhood-network,
  body[data-uc-page="neighborhood-profile"] #page-neighborhood-profile,
  body[data-uc-page="profile"] #page-profile {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 14px 14px 28px 28px / 8px 8px 16px 16px;
    box-shadow:
      inset 14px 0 22px -30px var(--uc-shadow-ink-strong),
      inset -14px 0 22px -30px var(--uc-shadow-ink-strong),
      0 10px 22px var(--uc-shadow-ink-soft);
  }

  body[data-uc-page="home"] #page-home::after,
  body[data-uc-page="live"] #page-live::after,
  body[data-uc-page="wire"] #page-wire::after,
  body[data-uc-page="porch"] #page-porch::after,
  body[data-uc-page="games"] #page-games::after,
  body[data-uc-page="link-up"] #page-link-up::after,
  body[data-uc-page="confessions"] #page-confessions::after,
  body[data-uc-page="experts"] #page-experts::after,
  body[data-uc-page="neighborhood-network"] #page-neighborhood-network::after,
  body[data-uc-page="neighborhood-profile"] #page-neighborhood-profile::after,
  body[data-uc-page="profile"] #page-profile::after {
    content: "";
    position: absolute;
    z-index: 20;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(90deg, var(--uc-scrim-weak), transparent 10%, transparent 90%, var(--uc-scrim-weak)),
      radial-gradient(ellipse 82% 10% at 50% 0%, rgba(255, 223, 0, 0.05), transparent 72%);
    mix-blend-mode: multiply;
  }

  body.uc-trippy-motion-ready:is(
    [data-uc-page="home"],
    [data-uc-page="live"],
    [data-uc-page="wire"],
    [data-uc-page="porch"],
    [data-uc-page="games"],
    [data-uc-page="link-up"],
    [data-uc-page="confessions"],
    [data-uc-page="experts"],
    [data-uc-page="neighborhood-network"],
    [data-uc-page="neighborhood-profile"],
    [data-uc-page="profile"]
  ) .uc-card-trippy {
    --uc-trippy-rotate-x: 0deg;
    --uc-trippy-rotate-y: 0deg;
    --uc-trippy-glow-x: 50%;
    --uc-trippy-glow-y: 35%;
    position: relative;
    transform: perspective(1400px) rotateX(var(--uc-trippy-rotate-x)) rotateY(var(--uc-trippy-rotate-y)) translateZ(0);
    transform-origin: center;
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 220ms ease;
  }

  body.uc-trippy-motion-ready:is(
    [data-uc-page="home"],
    [data-uc-page="live"],
    [data-uc-page="wire"],
    [data-uc-page="porch"],
    [data-uc-page="games"],
    [data-uc-page="link-up"],
    [data-uc-page="confessions"],
    [data-uc-page="experts"],
    [data-uc-page="neighborhood-network"],
    [data-uc-page="neighborhood-profile"],
    [data-uc-page="profile"]
  ) .uc-card-trippy::after {
    content: "";
    position: absolute;
    z-index: 4;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    /* Soft pointer sheen — no screen blend (reads harsh on Heat plates). */
    background: radial-gradient(
      circle at var(--uc-trippy-glow-x) var(--uc-trippy-glow-y),
      rgba(255, 239, 128, 0.05),
      rgba(255, 223, 0, 0.02) 28%,
      transparent 52%
    );
    mix-blend-mode: normal;
    transition: opacity 180ms ease;
  }

  body.uc-trippy-motion-ready:is(
    [data-uc-page="home"],
    [data-uc-page="live"],
    [data-uc-page="wire"],
    [data-uc-page="porch"],
    [data-uc-page="games"],
    [data-uc-page="link-up"],
    [data-uc-page="confessions"],
    [data-uc-page="experts"],
    [data-uc-page="neighborhood-network"],
    [data-uc-page="neighborhood-profile"],
    [data-uc-page="profile"]
  ) .uc-card-trippy:hover {
    transform:
      perspective(1400px)
      rotateX(var(--uc-trippy-rotate-x))
      rotateY(var(--uc-trippy-rotate-y))
      translateY(-1px)
      translateZ(2px);
    box-shadow:
      4px 5px 0 var(--uc-shadow-ink-strong),
      0 0 0 1px rgba(255, 223, 0, 0.12),
      0 8px 16px var(--uc-shadow-ink-soft);
  }

  body.uc-trippy-motion-ready:is(
    [data-uc-page="home"],
    [data-uc-page="live"],
    [data-uc-page="wire"],
    [data-uc-page="porch"],
    [data-uc-page="games"],
    [data-uc-page="link-up"],
    [data-uc-page="confessions"],
    [data-uc-page="experts"],
    [data-uc-page="neighborhood-network"],
    [data-uc-page="neighborhood-profile"],
    [data-uc-page="profile"]
  ) .uc-card-trippy:hover::after {
    opacity: 0.55;
  }

  body.uc-trippy-motion-ready:is(
    [data-uc-page="home"],
    [data-uc-page="live"],
    [data-uc-page="wire"],
    [data-uc-page="porch"],
    [data-uc-page="games"],
    [data-uc-page="link-up"],
    [data-uc-page="confessions"],
    [data-uc-page="experts"],
    [data-uc-page="neighborhood-network"],
    [data-uc-page="neighborhood-profile"],
    [data-uc-page="profile"]
  ) .uc-card-trippy:focus-within {
    transform: perspective(1400px) translateY(-1px) translateZ(1px);
  }

  /* Working surfaces: flat stage, no vignette, no tilt */
  body:is(
    [data-uc-page="chat"],
    [data-uc-page="chat-room"],
    [data-uc-page="browse"],
    [data-uc-page="circles"],
    [data-uc-page="inbox"]
  ) :is(#page-chat, #page-chat-room, #page-browse, #page-circles, #page-inbox) {
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }

  body:is(
    [data-uc-page="chat"],
    [data-uc-page="chat-room"],
    [data-uc-page="browse"],
    [data-uc-page="circles"],
    [data-uc-page="inbox"]
  ) :is(#page-chat, #page-chat-room, #page-browse, #page-circles, #page-inbox)::after {
    content: none;
    display: none;
  }

  body:is(
    [data-uc-page="chat"],
    [data-uc-page="chat-room"],
    [data-uc-page="browse"],
    [data-uc-page="circles"],
    [data-uc-page="inbox"]
  ) .uc-card-trippy,
  body:is(
    [data-uc-page="chat"],
    [data-uc-page="chat-room"],
    [data-uc-page="browse"],
    [data-uc-page="circles"],
    [data-uc-page="inbox"]
  ) .uc-card-trippy:hover,
  body:is(
    [data-uc-page="chat"],
    [data-uc-page="chat-room"],
    [data-uc-page="browse"],
    [data-uc-page="circles"],
    [data-uc-page="inbox"]
  ) .uc-card-trippy:focus-within {
    transform: none !important;
    will-change: auto;
  }

  body:is(
    [data-uc-page="chat"],
    [data-uc-page="chat-room"],
    [data-uc-page="browse"],
    [data-uc-page="circles"],
    [data-uc-page="inbox"]
  ) .uc-card-trippy::after {
    content: none !important;
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:is(
    [data-uc-page="home"],
    [data-uc-page="live"],
    [data-uc-page="wire"],
    [data-uc-page="porch"],
    [data-uc-page="games"],
    [data-uc-page="link-up"],
    [data-uc-page="confessions"],
    [data-uc-page="experts"],
    [data-uc-page="neighborhood-network"],
    [data-uc-page="neighborhood-profile"],
    [data-uc-page="profile"]
  ) :is(
    #page-home,
    #page-live,
    #page-wire,
    #page-porch,
    #page-games,
    #page-link-up,
    #page-confessions,
    #page-experts,
    #page-neighborhood-network,
    #page-neighborhood-profile,
    #page-profile
  ),
  body:is(
    [data-uc-page="home"],
    [data-uc-page="live"],
    [data-uc-page="wire"],
    [data-uc-page="porch"],
    [data-uc-page="games"],
    [data-uc-page="link-up"],
    [data-uc-page="confessions"],
    [data-uc-page="experts"],
    [data-uc-page="neighborhood-network"],
    [data-uc-page="neighborhood-profile"],
    [data-uc-page="profile"]
  ) .uc-card-trippy,
  body:is(
    [data-uc-page="home"],
    [data-uc-page="live"],
    [data-uc-page="wire"],
    [data-uc-page="porch"],
    [data-uc-page="games"],
    [data-uc-page="link-up"],
    [data-uc-page="confessions"],
    [data-uc-page="experts"],
    [data-uc-page="neighborhood-network"],
    [data-uc-page="neighborhood-profile"],
    [data-uc-page="profile"]
  ) .uc-card-trippy:hover,
  body:is(
    [data-uc-page="home"],
    [data-uc-page="live"],
    [data-uc-page="wire"],
    [data-uc-page="porch"],
    [data-uc-page="games"],
    [data-uc-page="link-up"],
    [data-uc-page="confessions"],
    [data-uc-page="experts"],
    [data-uc-page="neighborhood-network"],
    [data-uc-page="neighborhood-profile"],
    [data-uc-page="profile"]
  ) .uc-card-trippy:focus-within {
    transform: none !important;
    transition: none !important;
  }
}

/* —— Fullscreen play chrome lock (must win over signed-in canvas rules) —— */
body.uc-games-overlay-open .login-bar,
body.uc-games-overlay-open .uc-app-topbar,
body.uc-games-overlay-open .header-bg,
body.uc-games-overlay-open .uc-primary-nav,
body.uc-games-overlay-open .uc-global-footer-bar,
body.uc-games-overlay-open .uc-app-bottom-bar,
body.uc-games-overlay-open .uc-app-bottom-bar--guest,
body.uc-games-overlay-open .uc-app-bottom-bar--member,
body.uc-auth-signed-in.uc-games-overlay-open .login-bar,
body.uc-auth-signed-in.uc-games-overlay-open .uc-app-topbar,
body.uc-auth-signed-in.uc-games-overlay-open .header-bg,
body.uc-auth-signed-in.uc-games-overlay-open .uc-primary-nav,
body.uc-auth-signed-in.uc-games-overlay-open .uc-global-footer-bar,
body.uc-auth-signed-in.uc-games-overlay-open .uc-app-bottom-bar,
body.uc-room-play-open .login-bar,
body.uc-room-play-open .uc-app-topbar,
body.uc-room-play-open .header-bg,
body.uc-room-play-open .uc-primary-nav,
body.uc-room-play-open .uc-global-footer-bar,
body.uc-room-play-open .uc-app-bottom-bar,
body.uc-auth-signed-in.uc-room-play-open .login-bar,
body.uc-auth-signed-in.uc-room-play-open .uc-app-topbar,
body.uc-auth-signed-in.uc-room-play-open .header-bg,
body.uc-auth-signed-in.uc-room-play-open .uc-primary-nav,
body.uc-auth-signed-in.uc-room-play-open .uc-global-footer-bar,
body.uc-auth-signed-in.uc-room-play-open .uc-app-bottom-bar {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

/* Belt-and-suspenders: hide chrome whenever the arena overlay is actually visible,
   even if body.uc-games-overlay-open briefly drops during a game switch. */
body:has(#games-arena-overlay:not(.hidden)) .login-bar,
body:has(#games-arena-overlay:not(.hidden)) .uc-app-topbar,
body:has(#games-arena-overlay:not(.hidden)) .header-bg,
body:has(#games-arena-overlay:not(.hidden)) .uc-primary-nav,
body:has(#games-arena-overlay:not(.hidden)) .uc-global-footer-bar,
body:has(#games-arena-overlay:not(.hidden)) .uc-app-bottom-bar,
body:has(#games-arena-overlay:not(.hidden)) .uc-app-bottom-bar--guest,
body:has(#games-arena-overlay:not(.hidden)) .uc-app-bottom-bar--member {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}