/* === MERGE THE BUBBLES (inline, inside the Lab image) === */
#lab .x-dz { top: calc(var(--navh, 100px) + 14px) !important; }
#lab.mg-playing #dzintro, #lab.mg-playing .x-dzp, #lab.mg-playing .clip-txt, #lab.mg-playing .x-burst, #lab.mg-playing .x-squig, #lab.mg-playing .x-bbl { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
#lab .clip-img.mg-host::after { z-index: 1; }
#mgl { position: absolute; inset: 0; z-index: 5; display: none; flex-direction: column; gap: 10px; padding: 12px 14px 14px; color: #f3f3ee; font-family: inherit;
  background: radial-gradient(ellipse at 50% 40%, rgba(10,11,14,.45), rgba(10,11,14,.78)); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); overscroll-behavior: contain; }
#mgl.is-on { display: flex; animation: mgin .45s ease both; }
@keyframes mgin { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }
#mgl * { box-sizing: border-box; }
html.x-facecur #mgl, html.x-facecur #mgl * { cursor: auto !important; }
html.x-facecur #mgl button, html.x-facecur #mgl a { cursor: pointer !important; }
html.x-facecur #mgl canvas.mg-cv { cursor: pointer !important; }
html.mg-over .curd, html.mg-over .x-curpill, html.mg-over .x-curfx { display: none !important; }
.mg-hud { display: flex; align-items: center; gap: 6px 16px; flex-wrap: wrap; padding: 7px 8px 7px 16px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: rgba(11,11,15,.82); font-size: 13px; color: #a9aab1; align-self: center; max-width: 100%; }
.mg-hud b { color: #fff; font-size: 15px; font-variant-numeric: tabular-nums; }
.mg-hud .mg-sp { flex: 1; min-width: 4px; }
.mg-hud button { font: inherit; font-size: 13px; color: #fff; background: transparent; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 6px 12px; }
.mg-hud button:hover { border-color: #c8ff3d; }
.mg-main { flex: 1; min-height: 0; display: flex; gap: 16px; align-items: center; justify-content: center; }
.mg-jarw { position: relative; flex: 0 0 auto; }
.mg-cv { display: block; border-radius: 0 0 26px 26px; border: 2px solid rgba(255,255,255,.28); border-top: 0; background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(200,255,61,.06)); box-shadow: inset 0 -40px 60px rgba(200,255,61,.06), 0 20px 50px -20px rgba(0,0,0,.6); touch-action: none; }
.mg-next { position: absolute; right: 8px; top: 6px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #a9aab1; display: flex; align-items: center; gap: 4px; pointer-events: none; z-index: 2; }
.mg-next canvas { width: 30px; height: 30px; }
.mg-side { flex: 0 1 320px; min-width: 220px; align-self: stretch; display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.14); border-radius: 20px; background: rgba(11,11,15,.82); padding: 12px; overflow: hidden; }
.mg-side h4 { margin: 0 0 8px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #a9aab1; font-weight: 600; }
.mg-side h4 b { color: #c8ff3d; }
.mg-list { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 7px; padding-right: 2px; }
.mg-c { position: relative; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 8px 10px 8px 36px; font-size: 12.5px; line-height: 1.35; min-height: 38px; transition: border-color .3s, background .3s; }
.mg-c i { position: absolute; left: 10px; top: 8px; font-style: normal; font-size: 15px; }
.mg-c span { display: block; filter: blur(4px); opacity: .3; user-select: none; transition: filter .5s, opacity .5s; }
.mg-c.is-on span { filter: none; opacity: 1; }
.mg-c.is-new { border-color: #c8ff3d; background: rgba(200,255,61,.1); animation: mgflip .6s ease; }
.mg-c.is-gold.is-on { border-color: #f5c542; background: rgba(245,197,66,.12); }
@keyframes mgflip { 0% { transform: rotateX(90deg); } 100% { transform: none; } }
.mg-fact { position: absolute; left: 50%; top: 22%; width: min(92%, 340px); transform: translate(-50%, 10px) scale(.92); opacity: 0; pointer-events: none; z-index: 4; text-align: center;
  background: rgba(14,15,19,.94); border: 1.5px solid #c8ff3d; border-radius: 18px; padding: 14px 16px 12px; box-shadow: 0 18px 50px -12px rgba(0,0,0,.8), 0 0 0 6px rgba(200,255,61,.08); transition: opacity .3s, transform .35s cubic-bezier(.2,1.4,.4,1); }
.mg-fact.is-on { opacity: 1; transform: translate(-50%, 0) scale(1); }
.mg-fact small { display: block; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: #c8ff3d; margin-bottom: 6px; }
.mg-fact b { display: block; font-size: 26px; margin-bottom: 4px; }
.mg-fact p { margin: 0; font-size: 15px; line-height: 1.4; font-weight: 600; color: #fff; }
.mg-fact.is-gold { border-color: #ffd257; }
.mg-fact.is-gold small { color: #ffd257; }
.mg-ov { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 18px; border-radius: 0 0 26px 26px; background: rgba(10,11,14,.88); z-index: 5; overflow: auto; }
.mg-ov[hidden] { display: none; }
.mg-ov h3 { margin: 0; font-size: clamp(22px, 3vw, 30px); line-height: 1.05; color: #fff; }
.mg-ov p { margin: 0; max-width: 32ch; font-size: 13.5px; line-height: 1.45; color: rgba(255,255,255,.85); }
.mg-ov .mg-eye { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #c8ff3d; }
.mg-ov .mg-big { font-size: 40px; font-weight: 800; color: #c8ff3d; font-variant-numeric: tabular-nums; line-height: 1; }
.mg-ov ul { list-style: none; margin: 0; padding: 0; font-size: 12.5px; text-align: left; display: grid; gap: 5px; color: rgba(255,255,255,.9); max-width: 34ch; }
.mg-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.mg-btn { font: inherit; font-weight: 700; font-size: 13.5px; border-radius: 999px; padding: 10px 16px; border: 1px solid transparent; background: #c8ff3d; color: #101113; text-decoration: none; display: inline-flex; align-items: center; }
.mg-btn.is-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.mg-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.mg-latest { display: none; }
@media (max-width: 760px) {
  #mgl { padding: 8px; gap: 6px; }
  .mg-hud { border-radius: 16px; font-size: 11.5px; gap: 3px 10px; padding: 6px 6px 6px 10px; }
  .mg-hud b { font-size: 13px; }
  .mg-hud button { padding: 5px 9px; font-size: 11.5px; }
  .mg-main { flex-direction: column; gap: 6px; }
  .mg-side { display: none; }
  .mg-latest { display: block; font-size: 12px; line-height: 1.35; color: #fff; text-align: center; min-height: 32px; padding: 0 6px; }
  .mg-fact p { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) { .mg-c.is-new, #mgl.is-on { animation: none; } }

/* === Contact photo (Round 12) === */
.x-talk__photo { position: absolute; top: 0; right: 0; height: 100%; width: 68%; object-fit: cover; object-position: 50% 30%; z-index: 0; opacity: .62;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%); mask-image: linear-gradient(90deg, transparent 0%, #000 45%); }
.x-talk__bg::before { z-index: 1; opacity: .45; }
.x-talk__bg::after { z-index: 2; }
@media (max-width: 760px) {
  .x-talk__photo { width: 100%; opacity: .35; object-position: 55% 20%; -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 95%); mask-image: linear-gradient(180deg, #000 30%, transparent 95%); }
}

/* === Hiring strip (Round 13) === */
.x-hire { position: relative; z-index: 2; margin-top: clamp(8px, 2vw, 24px); margin-bottom: clamp(24px, 4vw, 48px); }
.x-hire__in { display: flex; align-items: center; gap: 14px 26px; flex-wrap: wrap; padding: 16px 18px 16px 22px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); box-shadow: 0 18px 50px -34px rgba(0,0,0,.45); }
.x-hire__k { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); white-space: nowrap; }
.x-hire__dot { width: 9px; height: 9px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 0 rgba(61,220,132,.6); animation: xhire 2s infinite; }
@keyframes xhire { 70% { box-shadow: 0 0 0 10px rgba(61,220,132,0); } 100% { box-shadow: 0 0 0 0 rgba(61,220,132,0); } }
.x-hire__t { margin: 0; flex: 1 1 360px; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.45; color: var(--ink-2); }
.x-hire__t b { color: var(--ink); font-weight: 600; }
.x-hire__b { display: flex; gap: 8px; flex-wrap: wrap; }
.x-hire__b .btn { min-height: 42px; }
@media (max-width: 760px) { .x-hire__in { padding: 14px; border-radius: 18px; } .x-hire__b .btn { flex: 1 1 auto; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .x-hire__dot { animation: none; } }

/* === Numbers-first work cards (Round 13) === */
.x-kpi { margin: 0 0 6px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; line-height: 1.1; }
.x-kpi b { font-family: var(--display); font-size: clamp(20px, 1.9vw, 26px); font-weight: 800; letter-spacing: -.02em; color: var(--accent); }
html:not([data-theme="dark"]) .x-kpi b { color: #3d5a00; }
.x-kpi span { font-size: 12.5px; color: var(--ink-3); }
/* r13b: hiring strip sits above TIC; TIC no longer overlaps it */
#hire + .x-tic, .x-hire + .x-tic { margin-top: 0 !important; }
.x-hire { z-index: 4; }
/* KPI line brighter in dark; cards without a KPI keep the same vertical rhythm */
html[data-theme="dark"] .x-kpi b, [data-theme="dark"] .x-kpi b { color: #c6ff3d; }
.card__body .x-kpi--none { visibility: hidden; }
/* r13c: readable lists + no slow-motion */
.mg-ov { justify-content: flex-start; padding-top: 22px; padding-bottom: 22px; }
.mg-ov > :first-child { margin-top: auto; }
.mg-ov > :last-child { margin-bottom: auto; }
.mg-list { padding-bottom: 10px; scroll-padding-bottom: 10px; }
.mg-list > .mg-c { flex-shrink: 0; }
/* fact card no longer slows the game: it sits high in the jar, translucent, game keeps full speed */
.mg-fact { top: 10px; width: min(88%, 300px); padding: 10px 12px 9px; background: rgba(14,15,19,.86); }
.mg-fact b { font-size: 20px; margin-bottom: 2px; }
.mg-fact p { font-size: 13.5px; }

/* r13d: tidy story panel */
.mg-list { scrollbar-width: thin; scrollbar-color: rgba(200,255,61,.35) transparent; }
.mg-list::-webkit-scrollbar { width: 6px; }
.mg-list::-webkit-scrollbar-track { background: transparent; }
.mg-list::-webkit-scrollbar-thumb { background: rgba(200,255,61,.35); border-radius: 6px; }
.mg-c:not(.is-on) { height: 44px; min-height: 44px; overflow: hidden; }
.mg-c:not(.is-on) span { white-space: nowrap; overflow: hidden; text-overflow: clip; }
.mg-next { top: 8px; right: 10px; gap: 8px; }

/* r13e: mobile QA fixes */
@media (max-width: 600px) {
  .reel-track .card { flex: 0 0 82vw !important; max-width: 82vw !important; }
  .x-tic__card { grid-template-columns: 1fr !important; }
  .x-tic__card .x-seal { width: 92px; justify-self: start; }
  body { padding-bottom: 84px; }
}

/* r13f: small polish */
html:not([data-theme="dark"]) .x-mint__badge { color: #fff; }
.x-mint__stats { align-items: stretch; }
.x-mint__stats div { margin: 0 !important; transform: none; }
@media (max-width: 600px) {
  #mintchips .x-mchip { transform: none !important; translate: none !important; }
  .x-stats { margin-inline: 0; padding-inline: 0; }
  .reel-hint { white-space: nowrap; font-size: 10.5px; letter-spacing: .12em; }
  .x-tic__card [class*="x-tic__k"], .x-tic__card .x-tic__meta { word-spacing: -1px; }
}
@media (max-width: 760px) {
  #builder ::-webkit-scrollbar, #ailab ::-webkit-scrollbar { height: 0; background: transparent; }
  #builder *, #ailab * { scrollbar-width: none; }
}

/* ===== r14 (2026-10-16) mobile fixes from Saurav's phone screenshots ===== */
html, body { overflow-x: clip; }
@media (max-width: 900px) {
  .x-tic__card::before { display: none; }
  .x-tic__card { background: radial-gradient(130% 70% at 100% 0%, color-mix(in srgb, var(--glow) 70%, transparent), transparent 62%), var(--ink); }
}
/* r14: "Who I'm becoming" — no pinned scroll scene on phones; both cards visible, no empty gap */
@media (max-width: 760px) {
  .x-bec { height: auto !important; margin-top: 36px; }
  .x-bec__pin { position: relative !important; height: auto !important; min-height: 0 !important; padding: 8px 0 12px !important; overflow: hidden; }
  .x-bec__word { opacity: 0.55; }
  .x-become > div { transform: none !important; opacity: 1 !important; filter: none !important; }
  .x-bec .x-bw { opacity: 1 !important; color: inherit; }
  .x-bec .x-hl { background-size: 100% 100% !important; }
  .x-bec__title { padding: 0; }
}
/* r14: Work on phones = swipe row; every card shows title + description + Read more */
@media (max-width: 900px) {
  .reel-track { flex-direction: row !important; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 14px; padding-bottom: 16px; scrollbar-width: none; transform: none !important; }
  .reel-track::-webkit-scrollbar { display: none; }
  .reel-track .card { flex: 0 0 82vw !important; width: 82vw; max-width: 82vw !important; height: auto !important; max-height: none !important; scroll-snap-align: center; }
  .reel-track .card__media { aspect-ratio: 16 / 10 !important; flex: none !important; height: auto !important; max-height: none !important; min-height: 0 !important; }
  .reel-track .card__media > img { width: 100%; height: 100%; object-fit: cover; }
  .reel-track .card__body { flex: 1 0 auto; padding: 14px 16px 14px !important; }
  .reel-track .card h3 { font-size: 22px; margin: 6px 0 6px; }
  .reel-track .card p:not(.x-kpi) { display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical; overflow: hidden !important; }
}
@media (max-width: 900px) { .reel-track .card { opacity: 1 !important; transform: none !important; } }
@media (max-width: 760px) { .x-bec__in { padding: 0 var(--gut); } }
/* r14: Tools — filters, tap-to-reveal readout, cascade + idle float */
.x-toolsec { padding-left: var(--gut) !important; padding-right: var(--gut) !important; }
.x-t14 .x-tool::after { display: none; }
.x-t14 .x-tool { cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; animation: x-t14float 4.2s ease-in-out var(--fd, 0s) infinite; transition: transform 0.35s var(--ease), opacity 0.35s, background 0.25s, color 0.25s, border-color 0.25s, filter 0.35s; }
.x-t14 .x-tool:hover, .x-t14 .x-tool:focus-visible { background: var(--card); color: var(--ink); border-color: var(--accent); }
.x-t14 .x-tool.is-pick { background: var(--accent); color: var(--accent-ink); border-color: transparent; box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--accent) 80%, transparent); animation: none; transform: translateY(-3px) scale(1.04); z-index: 2; }
.x-t14 .x-tool.is-dim { opacity: 0.22; filter: grayscale(1); transform: scale(0.94); animation: none; }
.x-t14 .x-tool.is-flash { animation: x-t14flash 0.5s cubic-bezier(.2,1.4,.4,1) calc(var(--j, 0) * 40ms) both, x-t14float 4.2s ease-in-out var(--fd, 0s) infinite; }
.x-t14 .x-tool.is-flash.is-pick { animation: none; }
@keyframes x-t14float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
@keyframes x-t14flash { 0% { transform: scale(0.85); } 60% { transform: scale(1.06); } 100% { transform: none; } }
.x-t14--wait .x-tool { opacity: 0; transform: translateY(18px) scale(0.9); }
.x-t14--in .x-tool:not(.is-dim):not(.is-pick) { animation: x-t14in 0.55s cubic-bezier(.2,1.3,.4,1) calc(var(--k, 0) * 35ms) both, x-t14float 4.2s ease-in-out var(--fd, 0s) infinite; }
@keyframes x-t14in { from { opacity: 0; transform: translateY(18px) scale(0.9); } to { opacity: 1; transform: none; } }
.x-t14__head { margin: 18px 0 0; }
.x-t14__f { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 4px; }
.x-t14__f::-webkit-scrollbar { display: none; }
.x-t14__fb { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px dashed var(--line); background: transparent; color: var(--ink-2); font: 600 13px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: background 0.25s, color 0.25s, border-color 0.25s; }
.x-t14__fb i { font-style: normal; font-size: 11px; opacity: 0.6; }
.x-t14__fb.is-on { background: var(--ink); color: var(--bg); border-style: solid; border-color: var(--ink); }
.x-t14 .x-tools { margin-top: 16px; }
.x-t14__read { position: relative; margin-top: 20px; padding: 16px 18px 18px; border-radius: 20px; border: 1px solid var(--line); background: radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%), var(--card); min-height: 104px; display: grid; gap: 4px; align-content: start; }
.x-t14__k { font: 500 11px/1.2 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.x-t14__n { font-family: var(--display); font-weight: 800; font-size: clamp(22px, 3vw, 32px); letter-spacing: -0.03em; line-height: 1.05; color: var(--ink); }
.x-t14__read:not(.is-set) .x-t14__n { font-size: clamp(17px, 2vw, 22px); color: var(--ink-2); }
.x-t14__t { font-size: 15px; color: var(--ink-2); min-height: 1.4em; }
.x-t14__t::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--accent); animation: x-type-blink 1s steps(1) infinite; }
.x-t14__read:not(.is-set) .x-t14__t::after { display: none; }
@keyframes x-type-blink { 50% { opacity: 0; } }
.x-t14__read.is-pop { animation: x-t14pop 0.4s cubic-bezier(.2,1.3,.4,1); }
@keyframes x-t14pop { 0% { transform: scale(0.98); } 60% { transform: scale(1.01); } 100% { transform: none; } }
@media (min-width: 901px) { .x-t14__read { max-width: 640px; } }
@media (max-width: 600px) { .x-t14 .x-tool { min-height: 42px; padding: 9px 15px; font-size: 14px; } .x-tools { gap: 8px; } }
@media (prefers-reduced-motion: reduce) { .x-t14 .x-tool, .x-t14--in .x-tool, .x-t14 .x-tool.is-flash { animation: none !important; } }
/* r14: reel hints read "Swipe" on touch screens */
.x-hmob { display: none; }
@media (max-width: 900px), (pointer: coarse) { .x-hmob { display: inline; } .x-hdesk { display: none; } }
@media (max-width: 760px) { .x-bhint { white-space: normal !important; max-width: 100%; letter-spacing: 0.12em; } }
/* r14: hero keeps side padding on phones; chips stay inside the screen */
.hero__in.wrap { padding-left: var(--gut); padding-right: var(--gut); }
@media (max-width: 900px) {
  .x-stage .x-fchip[style*="right:-"] { right: 1% !important; }
  .x-stage .x-fchip[style*="left:-"] { left: 1% !important; }
}
/* r14b: when the "A non-tech guy who builds" card appears, the game intro shrinks to a slim bar so the heading stays readable */
#lab #dzintro { transition: transform 0.45s var(--ease), opacity 0.35s, width 0.45s var(--ease), padding 0.45s var(--ease); }
#lab.x-txton:not(.mg-playing) #dzintro { width: auto; max-width: calc(100% - 2 * var(--gut)); padding: 8px 8px 8px 18px; border-radius: 999px; display: flex; align-items: center; gap: 14px; text-align: left; }
#lab.x-txton:not(.mg-playing) #dzintro .x-dz__line,
#lab.x-txton:not(.mg-playing) #dzintro .x-dz__rules { display: none; }
#lab.x-txton:not(.mg-playing) #dzintro .x-dz__eye { margin: 0; white-space: nowrap; }
#lab.x-txton:not(.mg-playing) #dzintro .x-dz__btns { margin: 0; flex-wrap: nowrap; gap: 6px; }
#lab.x-txton:not(.mg-playing) #dzintro .x-dz__btns button { min-height: 38px; padding: 0 16px; font-size: 14px; white-space: nowrap; }
@media (max-width: 600px) {
  #lab.x-txton:not(.mg-playing) #dzintro { padding: 6px 6px 6px 14px; gap: 8px; }
  #lab.x-txton:not(.mg-playing) #dzintro .x-dz__eye { font-size: 10px; letter-spacing: 0.12em; }
  #lab.x-txton:not(.mg-playing) #dzintro [data-dzskip] { display: none; }
}