/* Slices — thumb-first playable feed */
:root {
  --feed-bg: #08090c;
  --feed-ink: #f7f5ef;
  --feed-muted: rgba(247, 245, 239, 0.68);
  --feed-line: rgba(255, 255, 255, 0.16);
  --feed-panel: rgba(10, 11, 15, 0.88);
  --feed-accent: #e7ff56;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --hairline: calc(1px / var(--dpr, 1));
  color-scheme: dark;
}

* { -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; background: var(--feed-bg); overscroll-behavior: none; }
body.feed-page { margin: 0; overflow: hidden; color: var(--feed-ink); font-family: var(--body); }
button, textarea { font: inherit; }
button { color: inherit; }

.feed-scroller {
  position: relative;
  width: min(100%, 520px);
  height: 100vh;
  height: 100dvh;
  margin: 0 auto;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  background: #0b0c10;
}
.feed-scroller::-webkit-scrollbar { display: none; }
body[data-mode="play"] .feed-scroller { overflow: hidden; }

.feed-empty {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: calc(32px + var(--safe-top)) 28px calc(32px + var(--safe-bottom));
  text-align: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(231, 255, 86, 0.11), transparent 28%),
    linear-gradient(155deg, #101219, #07080b 66%);
}
.feed-empty-mark {
  width: 72px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  margin-bottom: 24px;
  border: var(--hairline) solid rgba(231, 255, 86, 0.55);
  border-radius: 50%;
  color: var(--feed-accent);
  font: 800 1rem/1 var(--mono);
  letter-spacing: 0.1em;
  box-shadow: 0 0 0 12px rgba(231, 255, 86, 0.025), 0 0 60px rgba(231, 255, 86, 0.12);
}
.feed-empty h1 { max-width: 14ch; margin: 4px 0 8px; font: 750 clamp(1.7rem, 7vw, 2.4rem)/1.02 var(--display); }
.feed-empty p:last-child { max-width: 32ch; margin: 8px 0 0; color: var(--feed-muted); font-size: 0.9rem; }
.feed-kicker { margin: 0; color: var(--feed-muted); font: 700 0.66rem/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }

/* FEED */
.slice-card {
  --accent: var(--feed-accent);
  position: relative;
  height: 100vh;
  height: 100dvh;
  isolation: isolate;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background: linear-gradient(158deg, #171922 0%, #090a0e 54%, #050608 100%);
  background:
    radial-gradient(circle at 78% 19%, color-mix(in srgb, var(--accent) 54%, transparent), transparent 30%),
    radial-gradient(circle at 18% 72%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 38%),
    linear-gradient(158deg, color-mix(in srgb, var(--accent) 15%, #111218) 0%, #090a0e 54%, #050608 100%);
}
.slice-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.4;
  background-image:
    linear-gradient(118deg, transparent 0 44%, rgba(255,255,255,0.035) 44.2% 44.7%, transparent 45%),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,0.014) 3px 4px);
  pointer-events: none;
}
.slice-card::after {
  content: attr(data-count);
  position: absolute;
  top: calc(74px + var(--safe-top));
  left: calc(22px + var(--safe-left));
  z-index: 0;
  color: rgba(255,255,255,0.055);
  font: 800 clamp(8rem, 48vw, 15rem)/0.8 var(--display);
  letter-spacing: -0.09em;
  pointer-events: none;
}
.poster-hit {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
}
.poster-hit:focus-visible { outline: 3px solid var(--accent); outline-offset: -5px; }
.poster-copy {
  position: absolute;
  z-index: 2;
  right: calc(84px + var(--safe-right));
  bottom: calc(30px + var(--safe-bottom));
  left: calc(22px + var(--safe-left));
  pointer-events: none;
  filter: drop-shadow(0 3px 16px rgba(0,0,0,0.42));
}
.poster-meta { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.poster-meta span {
  padding: 4px 8px;
  border: var(--hairline) solid rgba(255,255,255,0.25);
  border-radius: 999px;
  background: rgba(8,9,12,0.32);
  color: rgba(255,255,255,0.76);
  font: 700 0.61rem/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}
.poster-copy h2 { max-width: 9.5ch; margin: 0 0 9px; font: 800 clamp(2.55rem, 12vw, 4.6rem)/0.88 var(--display); letter-spacing: -0.055em; text-wrap: balance; }
.poster-copy > p { max-width: 30ch; margin: 0; color: rgba(255,255,255,0.78); font-size: clamp(0.9rem, 3.7vw, 1.05rem); line-height: 1.38; text-wrap: pretty; }

.play-affordance {
  position: absolute;
  z-index: 2;
  top: 45%;
  left: 50%;
  display: grid;
  width: 88px;
  height: 88px;
  place-items: center;
  border: var(--hairline) solid rgba(255,255,255,0.64);
  border-radius: 50%;
  background: rgba(7,8,11,0.33);
  box-shadow: 0 18px 55px rgba(0,0,0,0.26);
  transform: translate(-50%, -50%);
  pointer-events: none;
  backdrop-filter: blur(10px);
  animation: play-breathe 2.4s ease-in-out infinite;
}
.play-affordance::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 6px;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 18px solid #fff;
}
.play-affordance::after {
  content: "PLAY";
  position: absolute;
  top: calc(100% + 10px);
  color: #fff;
  font: 800 0.62rem/1 var(--mono);
  letter-spacing: 0.18em;
}
@keyframes play-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 28%, transparent); }
  50% { transform: translate(-50%, -50%) scale(1.06); box-shadow: 0 0 0 15px transparent; }
}

.action-rail {
  position: absolute;
  z-index: 4;
  right: calc(10px + var(--safe-right));
  bottom: calc(24px + var(--safe-bottom));
  display: grid;
  gap: 12px;
}
.rail-action {
  width: 54px;
  min-height: 54px;
  display: grid;
  place-items: center;
  gap: 2px;
  border: 0;
  border-radius: 18px;
  padding: 7px 4px 5px;
  background: rgba(5,6,8,0.48);
  color: #fff;
  cursor: pointer;
  box-shadow: inset 0 0 0 var(--hairline) rgba(255,255,255,0.14), 0 8px 22px rgba(0,0,0,0.24);
  backdrop-filter: blur(12px);
}
.rail-action:hover, .rail-action:focus-visible { background: rgba(28,30,36,0.82); outline: 2px solid var(--accent); outline-offset: 2px; }
.rail-action .rail-icon { font: 800 1.38rem/1 var(--display); }
.rail-action small { font: 700 0.51rem/1 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }
.rail-action.is-liked { color: #ff5576; }
.rail-action.is-liked .rail-icon { transform: scale(1.12); }

.like-burst {
  position: absolute;
  z-index: 8;
  top: 46%;
  left: 50%;
  color: #ff5576;
  font: 800 6rem/1 var(--display);
  text-shadow: 0 12px 38px rgba(0,0,0,0.42);
  pointer-events: none;
  animation: like-pop 0.72s cubic-bezier(.2,.9,.25,1) both;
}
@keyframes like-pop { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.35) rotate(-14deg); } 42% { opacity: 1; transform: translate(-50%,-50%) scale(1.15) rotate(7deg); } 100% { opacity: 0; transform: translate(-50%,-58%) scale(.95) rotate(0); } }

/* MODES */
.play-shell { position: fixed; inset: 0; z-index: 20; display: none; background: #050608; }
body[data-mode="play"] .play-shell { display: block; }
.play-shell[aria-hidden="false"] { display: block; }
.play-bar {
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  left: 0;
  min-height: calc(56px + var(--safe-top));
  display: flex;
  align-items: center;
  gap: 11px;
  padding: var(--safe-top) calc(14px + var(--safe-right)) 0 calc(10px + var(--safe-left));
  border-bottom: var(--hairline) solid rgba(255,255,255,0.13);
  background: rgba(7,8,11,0.92);
  backdrop-filter: blur(16px);
}
.play-bar > div { min-width: 0; }
.play-bar span { display: block; color: var(--feed-muted); font: 700 0.55rem/1.1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.play-bar strong { display: block; overflow: hidden; margin-top: 3px; font: 750 0.94rem/1.1 var(--display); text-overflow: ellipsis; white-space: nowrap; }
.icon-button { width: 46px; min-width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(255,255,255,0.09); font-size: 1.9rem; line-height: 1; cursor: pointer; }
.icon-button:hover, .icon-button:focus-visible { background: rgba(255,255,255,0.16); outline: 2px solid var(--feed-accent); }
.frame-mount { position: absolute; inset: calc(56px + var(--safe-top)) 0 0; }
.frame-mount iframe { display: block; width: 100%; height: 100%; border: 0; background: #050608; }
.play-rail { z-index: 4; bottom: calc(28px + var(--safe-bottom)); }

/* FEEDBACK */
.feedback-overlay { position: fixed; inset: 0; z-index: 40; display: grid; align-items: end; }
.feedback-overlay[hidden] { display: none; }
.feedback-scrim { position: absolute; inset: 0; border: 0; background: rgba(2,3,5,0.58); backdrop-filter: blur(4px); }
.feedback-sheet {
  position: relative;
  width: min(100%, 520px);
  max-height: calc(100dvh - var(--safe-top) - 18px);
  margin: 0 auto;
  overflow-y: auto;
  padding: 12px calc(20px + var(--safe-right)) calc(18px + var(--safe-bottom)) calc(20px + var(--safe-left));
  border: var(--hairline) solid rgba(255,255,255,0.16);
  border-bottom: 0;
  border-radius: 26px 26px 0 0;
  background: linear-gradient(165deg, rgba(29,31,38,0.98), rgba(9,10,14,0.99));
  box-shadow: 0 -24px 70px rgba(0,0,0,0.46);
}
.sheet-grip { display: block; width: 42px; height: 4px; margin: 0 auto 14px; border-radius: 999px; background: rgba(255,255,255,0.25); }
.feedback-like { display: flex; align-items: center; gap: 12px; border: 0; padding: 0; background: none; cursor: pointer; }
.feedback-like > span { display: grid; width: 64px; height: 64px; place-items: center; border-radius: 22px; background: rgba(255,85,118,0.12); color: #ff5576; font-size: 2.45rem; transition: transform 160ms ease, background 160ms ease; }
.feedback-like small { color: var(--feed-muted); font: 700 0.67rem/1.2 var(--mono); letter-spacing: 0.07em; text-transform: uppercase; }
.feedback-like.is-liked > span { transform: rotate(-7deg) scale(1.08); background: #ff5576; color: #fff; }
.feedback-sheet .feed-kicker { margin-top: 16px; }
.feedback-sheet h2 { margin: 5px 0 14px; font: 800 clamp(1.65rem, 7vw, 2.2rem)/1 var(--display); letter-spacing: -0.035em; }
.quick-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.quick-tags button { min-height: 40px; border: var(--hairline) solid rgba(255,255,255,0.2); border-radius: 999px; padding: 8px 12px; background: rgba(255,255,255,0.06); cursor: pointer; }
.quick-tags button[aria-pressed="true"] { border-color: var(--feed-accent); background: var(--feed-accent); color: #0a0b0e; font-weight: 800; }
.feedback-copy { display: block; margin: 15px 0 6px; color: var(--feed-muted); font-size: 0.76rem; }
#feedbackText { width: 100%; resize: none; border: var(--hairline) solid rgba(255,255,255,0.2); border-radius: 13px; padding: 11px 12px; background: rgba(255,255,255,0.06); color: #fff; line-height: 1.4; }
#feedbackText:focus { outline: 2px solid var(--feed-accent); outline-offset: 1px; }
.feedback-actions { display: grid; grid-template-columns: 1fr 1.15fr; gap: 9px; margin-top: 12px; }
.feedback-actions button { min-height: 50px; border-radius: 14px; padding: 9px 12px; cursor: pointer; font-weight: 800; }
.feedback-send { border: var(--hairline) solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.07); }
.feedback-next { border: 0; background: var(--feed-accent); color: #090a0d; }
.feedback-next span { margin-left: 5px; }

/* FUNNEL */
.slice-card.promo-card {
  background: linear-gradient(155deg, #191b21, #07080b 68%);
  background:
    radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--accent) 48%, transparent), transparent 27%),
    linear-gradient(155deg, color-mix(in srgb, var(--accent) 12%, #15161d), #07080b 68%);
}
.promo-card::after { content: "↗"; top: 13%; left: 50%; color: color-mix(in srgb, var(--accent) 16%, transparent); transform: translateX(-50%); }
.promo-inner { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: start; padding: calc(32px + var(--safe-top)) calc(28px + var(--safe-right)) calc(32px + var(--safe-bottom)) calc(28px + var(--safe-left)); }
.promo-inner h2 { max-width: 10ch; margin: 10px 0 12px; font: 800 clamp(2.7rem, 13vw, 4.8rem)/0.9 var(--display); letter-spacing: -0.055em; }
.promo-inner p { max-width: 29ch; margin: 0; color: var(--feed-muted); line-height: 1.45; }
.promo-link { min-height: 52px; display: inline-flex; align-items: center; margin-top: 28px; border-radius: 999px; padding: 0 20px; background: var(--accent); color: #090a0d; font-weight: 850; text-decoration: none; box-shadow: 0 13px 35px color-mix(in srgb, var(--accent) 22%, transparent); }
.promo-link:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }

.feed-toast {
  position: fixed;
  z-index: 60;
  top: calc(14px + var(--safe-top));
  left: 50%;
  max-width: calc(100% - 32px);
  padding: 9px 13px;
  border: var(--hairline) solid rgba(255,255,255,0.16);
  border-radius: 999px;
  background: rgba(14,15,20,0.93);
  color: #fff;
  font-size: 0.78rem;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -10px);
  transition: opacity 160ms ease, transform 160ms ease;
  backdrop-filter: blur(12px);
}
.feed-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@media (min-width: 700px) {
  body.feed-page { background: radial-gradient(circle at 50% 25%, #20232d, #08090c 62%); }
  .feed-scroller, .play-shell { border-right: var(--hairline) solid rgba(255,255,255,0.1); border-left: var(--hairline) solid rgba(255,255,255,0.1); box-shadow: 0 0 90px rgba(0,0,0,0.55); }
  .play-shell { right: auto; left: 50%; width: min(100%, 520px); transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

.swipe-hint { margin: 10px 0 0; text-align: center; color: rgba(255,255,255,0.45); font: 700 0.62rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; animation: hint-drift 2.2s ease-in-out infinite; }
@keyframes hint-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* Poster hero capture (ticket #563): real gameplay shot under the accent gradient. */
.poster-hero { position: absolute; inset: -16% 0; z-index: 0; background: center / cover no-repeat; }
/* -16% vertical: crops the hero shot's baked-in HUD strips (score bars, control hints) off the card. */
.slice-card.has-hero .poster-hero { filter: saturate(1.05); }
/* Scrim (no CSS mask — unreliable across webviews): dark top strip for status
   chrome, clear middle for the shot, strong bottom ramp for title/one-liner. */
.slice-card.has-hero::after {
  content: '';
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,9,12,0.78) 0%, rgba(8,9,12,0.12) 26%, rgba(8,9,12,0.1) 50%, rgba(8,9,12,0.72) 68%, rgba(8,9,12,0.96) 84%, rgba(8,9,12,0.99) 100%);
}