/* ================= PLAY SCREEN ================= */
#view-play { position: relative; overflow-x: clip; padding-bottom: 20px; }
#view-play > *:not(.play-backdrop) { position: relative; z-index: 1; }

/* drifting loot in the background */
.play-backdrop { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.play-backdrop span { position: absolute; left: var(--x); top: var(--y); font-size: 46px; opacity: .13; filter: blur(.4px) saturate(.8); animation: lootDrift 14s ease-in-out infinite; animation-delay: var(--d); }
@keyframes lootDrift { 0%, 100% { transform: translate(0, 0) rotate(-10deg); } 50% { transform: translate(14px, -26px) rotate(10deg); } }

/* ---------- top row: you + live pulse ---------- */
.home-top { max-width: 1100px; margin: 0 auto; padding: 0 24px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.home-top .home-hero { padding-left: 0; padding-right: 0; margin: 0; }
.pulse-pills { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 10px; }
.pulse-pills { align-items: center; }
.pulse-group { display: inline-flex; gap: 8px; flex-wrap: nowrap; }
.pill { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--muted); background: rgba(255,255,255,.04); border: 1px solid var(--line); padding: 7px 12px; border-radius: 999px; }
.pill i { width: 8px; height: 8px; border-radius: 50%; background: #4a5160; }
.pill.on { color: var(--text); }
.pill.on i { background: var(--green); box-shadow: 0 0 0 0 rgba(61,220,132,.6); animation: pillPing 1.8s infinite; }
.pill.search.on i { background: var(--gold); animation-name: pillPingGold; }
.pill.live.on { border-color: rgba(255,93,93,.4); }
.pill.live.on i { background: var(--red); animation-name: pillPingRed; }
a.pill:hover { border-color: var(--red); }
@keyframes pillPing { 70% { box-shadow: 0 0 0 7px rgba(61,220,132,0); } }
@keyframes pillPingGold { 70% { box-shadow: 0 0 0 7px rgba(245,197,66,0); } }
@keyframes pillPingRed { 70% { box-shadow: 0 0 0 7px rgba(255,93,93,0); } }

/* ---------- recent finds ticker ---------- */
.finds-strip { max-width: 1052px; margin: 16px auto 0; display: flex; align-items: center; gap: 12px; background: linear-gradient(90deg, rgba(245,197,66,.08), rgba(255,255,255,.02)); border: 1px solid rgba(245,197,66,.2); border-radius: 14px; padding: 8px 8px 8px 14px; }
@media (max-width: 1100px) { .finds-strip { margin-left: 24px; margin-right: 24px; } }
.finds-label { flex-shrink: 0; font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.finds-viewport { overflow: hidden; flex: 1; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.finds-track { display: flex; gap: 34px; width: max-content; animation: findsScroll 40s linear infinite; }
.finds-strip:hover .finds-track { animation-play-state: paused; }
@keyframes findsScroll { to { transform: translateX(-50%); } }
.find { white-space: nowrap; font-size: 14px; color: #c3cad6; display: inline-flex; align-items: center; gap: 6px; }
.find b { color: var(--text); }
.find em { font-style: normal; color: var(--text); }
.find strong { font-family: var(--mono); }
.find small { color: #6f7888; font-size: 12px; }

/* ---------- layout ---------- */
.home-grid { padding-top: 18px; }
.home-side { display: grid; gap: 14px; align-content: start; }
.side-title { font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.tips .tip-list { gap: 9px; font-size: 13.5px; }

/* ---------- mode cards ---------- */
.modes { grid-template-columns: 1fr 1fr; }
.mode-card h3 { font-size: 19px; letter-spacing: -.01em; }

/* Quick Match: headline card */
.mode-quick.big { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 26px 28px; min-height: 196px; overflow: hidden;
  background: radial-gradient(120% 140% at 85% 50%, rgba(245,197,66,.22), transparent 55%), linear-gradient(135deg, #2b2208, #15130c 55%, #161a21);
  border-color: rgba(245,197,66,.45); }
.mode-quick.big::after { /* periodic shine across the card */
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.08) 48%, transparent 60%);
  transform: translateX(-120%); animation: cardShine 5s ease-in-out infinite; }
@keyframes cardShine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.mq-text { max-width: 330px; }
.mode-kicker { font-size: 11px; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.mode-quick.big h3 { font-size: clamp(28px, 3.4vw, 36px); font-weight: 900; letter-spacing: -.03em; margin-bottom: 6px; }
.mode-quick.big p { color: #c9ced8; margin-bottom: 16px; }
.play-now { display: inline-flex; align-items: center; gap: 10px; font: 900 15px Inter, sans-serif; letter-spacing: .1em; color: #1a1405; padding: 12px 22px; border-radius: 12px;
  background: linear-gradient(180deg, #ffe48f, var(--gold) 55%, #d99a12); box-shadow: 0 8px 30px rgba(245,197,66,.4); animation: ctaGlow 2.6s ease-in-out infinite; }
.play-now i { font-style: normal; transition: transform .2s; }
.mode-quick.big:hover .play-now i { animation: arrowNudge .7s ease-in-out infinite; }
@keyframes ctaGlow { 50% { box-shadow: 0 8px 46px rgba(245,197,66,.7); } }

.mq-scene { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.mq-me .avatar, .mq-opp { width: 92px; height: 92px; border-radius: 50%; }
.mq-me { animation: squareUpL 2.4s ease-in-out infinite; }
.mq-me .avatar { display: block; border: 4px solid var(--gold); box-shadow: 0 0 30px rgba(245,197,66,.45); }
.mq-opp { position: relative; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #23324a, #0e1520); border: 4px solid #4da3ff; box-shadow: 0 0 30px rgba(77,163,255,.4); animation: squareUpR 2.4s ease-in-out infinite; }
.mq-opp span { font-size: 48px; display: inline-block; }
.mq-opp b { position: absolute; top: -6px; right: -4px; width: 28px; height: 28px; border-radius: 50%; background: #4da3ff; color: #08111d; display: grid; place-items: center; font-size: 16px; font-weight: 900; }
@keyframes squareUpL { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(8px) rotate(3deg); } }
@keyframes squareUpR { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-8px) rotate(-3deg); } }
.mq-vs { position: relative; width: 62px; text-align: center; }
.mq-vs span { font: italic 900 36px Inter, sans-serif; color: var(--gold); text-shadow: 0 0 22px rgba(245,197,66,.7), 0 3px 0 #3a2800; display: inline-block; padding: 0 .2em; animation: vsThrob 1.2s ease-in-out infinite; }
@keyframes vsThrob { 50% { transform: scale(1.15); } }
.mq-vs .bolt { position: absolute; font-style: normal; font-size: 20px; opacity: 0; animation: bolt 2.4s steps(1) infinite; }
.mq-vs .b1 { top: -18px; left: 2px; }
.mq-vs .b2 { bottom: -16px; right: 0; animation-delay: 1.2s; }
@keyframes bolt { 0%, 8% { opacity: 1; } 9%, 100% { opacity: 0; } }

/* swap pop for cycling emoji/text */
.swap { animation: swapPop .45s cubic-bezier(.2,.9,.3,1.5); }
@keyframes swapPop { from { transform: scale(.3) rotate(-14deg); opacity: 0; } }

/* Solo + Bot: scene on top, text below */
.scene-card { flex-direction: column; gap: 14px; }
.scene { position: relative; width: 100%; height: 118px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; }
.solo-scene { background: radial-gradient(circle at 50% 50%, #233024, #0d110e 75%); }
/* "pvf", not "vf": the landing page's .vf viewfinder rules would otherwise pile all four corners top-left */
.pvf { position: absolute; width: 20px; height: 20px; border: 3px solid var(--gold); filter: drop-shadow(0 0 6px rgba(245,197,66,.7)); }
.pvf1 { top: 12px; left: 22%; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
.pvf2 { top: 12px; right: 22%; border-left: 0; border-bottom: 0; border-radius: 0 6px 0 0; }
.pvf3 { bottom: 12px; left: 22%; border-right: 0; border-top: 0; border-radius: 0 0 0 6px; }
.pvf4 { bottom: 12px; right: 22%; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }
.scene-item { font-size: 54px; filter: drop-shadow(0 8px 16px rgba(0,0,0,.6)); }
.scene-money { position: absolute; right: 12%; top: 18px; font: 900 16px var(--mono); color: var(--green); text-shadow: 0 2px 8px #000; opacity: 0; }
.scene-money.swap { animation: moneyUp 1.6s ease-out forwards; }
@keyframes moneyUp { 0% { opacity: 0; transform: translateY(26px) scale(.8); } 15% { opacity: 1; transform: translateY(10px) scale(1.1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }
.solo-scene::after { content: ''; position: absolute; left: 22%; right: 22%; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); box-shadow: 0 0 10px var(--gold); animation: soloScan 1.8s linear infinite; }
@keyframes soloScan { from { top: 14px; } to { top: calc(100% - 14px); } }

.bot-scene { background: radial-gradient(circle at 40% 60%, rgba(77,163,255,.25), transparent 60%), linear-gradient(180deg, #141a2a, #0a0c12);
  grid-template-columns: auto auto; gap: 18px; }
.bot-scene::before { content: ''; position: absolute; inset: 60% 0 0; background: repeating-linear-gradient(90deg, rgba(77,163,255,.14) 0 1px, transparent 1px 22px), repeating-linear-gradient(0deg, rgba(77,163,255,.14) 0 1px, transparent 1px 12px); transform: perspective(160px) rotateX(55deg); transform-origin: top; }
.bot-face { font-size: 56px; animation: botBob 1.6s ease-in-out infinite; position: relative; }
.bot-item { font-size: 42px; position: relative; filter: drop-shadow(0 0 14px rgba(245,197,66,.7)); animation: holdUp 1.8s ease-in-out infinite; }
@keyframes botBob { 50% { transform: translateY(-7px) rotate(-4deg); } }
@keyframes holdUp { 50% { transform: translateY(-10px) rotate(8deg); } }

/* Private room: key + code chip */
.mode-room { align-items: center; grid-column: 1 / -1; }
.mode-room .room-row input { width: 110px; }
.room-scene { display: grid; justify-items: center; gap: 6px; flex-shrink: 0; }
.room-scene span { font-size: 34px; display: inline-block; animation: keyTurn 2.4s ease-in-out infinite; }
@keyframes keyTurn { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-35deg); } 80% { transform: rotate(10deg); } }
.room-demo { font: 800 12px var(--mono); letter-spacing: .14em; color: var(--gold); background: rgba(245,197,66,.1); border: 1px dashed rgba(245,197,66,.4); padding: 3px 7px; border-radius: 6px; }

/* Watch live: TV with reactions floating up */
.mode-live { overflow: hidden; }
.live-scene { position: relative; width: 64px; height: 56px; flex-shrink: 0; }
.live-scene .tv { font-size: 44px; position: absolute; bottom: 0; left: 6px; }
.live-scene i { position: absolute; left: 28px; bottom: 30px; font-style: normal; font-size: 18px; opacity: 0; animation: reactRise 2.8s ease-out infinite; animation-delay: var(--d); }
@keyframes reactRise { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(18px, -46px) scale(1.1); } }

/* ---------- daily challenge ---------- */
.daily { position: relative; overflow: hidden; background: linear-gradient(160deg, #1f1a0c, var(--card) 60%); border-color: rgba(245,197,66,.3); }
.daily-body { display: flex; align-items: center; gap: 12px; font-size: 15px; line-height: 1.35; margin-bottom: 12px; }
.daily-icon { font-size: 34px; flex-shrink: 0; animation: botBob 2.4s ease-in-out infinite; display: inline-block; }
.daily-bar { height: 10px; border-radius: 999px; background: var(--bg2); overflow: hidden; border: 1px solid var(--line); }
.daily-bar span { display: block; height: 100%; min-width: 4px; border-radius: inherit; transition: width .8s cubic-bezier(.2,.8,.2,1);
  background: repeating-linear-gradient(45deg, var(--gold) 0 10px, #ffdf7e 10px 20px); background-size: 28px 28px; animation: barStripes 1s linear infinite; }
@keyframes barStripes { to { background-position: 28px 0; } }
.daily-meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin: 8px 0 12px; font-weight: 600; }
.daily-meta span:first-child { font-family: var(--mono); color: var(--text); }
.daily-go { width: 100%; }
.daily.done { border-color: rgba(61,220,132,.45); background: linear-gradient(160deg, #0f2318, var(--card) 60%); }
.daily.done .side-title { color: var(--green); }
.daily.done .daily-bar span { background: var(--green); animation: none; }
.daily-done { font-size: 13px; color: #b7e8cb; font-weight: 600; }

/* ---------- what should I grab? ---------- */
.grab-slot { height: 76px; overflow: hidden; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line); margin-bottom: 12px; position: relative; }
.grab-slot::before, .grab-slot::after { content: ''; position: absolute; left: 0; right: 0; height: 14px; z-index: 1; pointer-events: none; }
.grab-slot::before { top: 0; background: linear-gradient(var(--bg2), transparent); }
.grab-slot::after { bottom: 0; background: linear-gradient(transparent, var(--bg2)); }
.grab-item { height: 76px; display: grid; grid-template-columns: 48px 1fr; grid-template-rows: auto auto; align-content: center; column-gap: 10px; padding: 0 14px; }
.grab-item span { grid-row: 1 / 3; font-size: 34px; align-self: center; }
.grab-item b { font-size: 15px; }
.grab-item small { color: var(--muted); font-size: 12.5px; }
.grab-item.landed { animation: swapPop .4s cubic-bezier(.2,.9,.3,1.5); }
.grab .btn { width: 100%; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .home-top { padding: 0 16px; }
  .finds-strip { margin: 14px 16px 0; }
  .home-grid { padding-top: 14px; }
}
@media (max-width: 640px) {
  .modes { grid-template-columns: 1fr; }
  .mode-quick.big { flex-direction: column; align-items: flex-start; padding: 20px; min-height: 0; }
  .mq-scene { align-self: center; order: -1; }
  .mq-me .avatar, .mq-opp { width: 68px; height: 68px; }
  .mq-opp span { font-size: 34px; }
  .pulse-pills { padding-bottom: 0; width: 100%; flex-direction: column; align-items: stretch; }
  .pulse-pills .pill-cam { justify-content: center; padding: 10px 14px; font-size: 14px; }
  .pulse-group { justify-content: space-between; }
  .pulse-group .pill { flex: 1; justify-content: center; padding: 7px 8px; }
  .finds-label { display: none; }
  .mode-room { flex-direction: column; align-items: stretch; }
  .mode-room .room-scene { grid-auto-flow: column; justify-content: start; align-items: center; gap: 10px; }
  .mode-room .room-row { flex-wrap: wrap; }
  .mode-room .room-row .btn { flex: 0 0 auto; white-space: nowrap; }
  .mode-room .room-row input { flex: 1 1 80px; min-width: 80px; }
  .play-backdrop span { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  #view-play *, #view-play *::before, #view-play *::after { animation: none !important; }
  .scene-money { opacity: 1; }
}

/* ---------- Quick Match "VS": optically centered ----------
   Heavy italic glyphs lean right of their text box (~0.15em for "VS"), so the box hugs the text and the
   text is nudged left by that lean. The avatars sway less so they never crowd the VS. */
.mq-scene { gap: 20px; }
.mq-vs { width: auto; display: flex; justify-content: center; }
.mq-vs span { padding: 0 .1em; position: relative; left: -.15em; }
@keyframes squareUpL { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px) rotate(3deg); } }
@keyframes squareUpR { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-4px) rotate(-3deg); } }