/* RIFFCADE arcade shell (brand book v1): Cabinet Ink canvas, Extra Life for play, Wildcard + Plot Twist as small accents, Space Grotesk. */
:root {
  --bg: #15171B; --surface: #23262D; --raise: #2C3038; --ink: #F5F3E9; --muted: #B5B7BE; --line: #33363E; --on-coin: #15171B; --coral: #FF785A;
  --accent: #AC9CFF; --coin: #E5FF54; --pad: rgba(255,255,255,.10); --pad-on: rgba(229,255,84,.45);
  --display: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --body: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Space Grotesk", ui-monospace, Menlo, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent }
html, body { height: 100%; margin: 0 }
body { background: var(--bg); color: var(--ink); font: 15px/1.45 var(--body); -webkit-font-smoothing: antialiased }
button { font: inherit; color: inherit }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }

/* ---------- home ---------- */
.home { max-width: 760px; margin: 0 auto; padding: calc(env(safe-area-inset-top, 0px) + 22px) 16px calc(env(safe-area-inset-bottom, 0px) + 40px); display: grid; gap: 22px }
.brand { display: flex; align-items: center; gap: 12px }
.brand img { width: 40px; height: 40px; border-radius: 10px }
.brand h1 { font: 700 22px/1 var(--display); margin: 0; letter-spacing: -.01em }
.brand h1 span { color: var(--coin) }
.eyebrow { font: 600 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted) }
.continue { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: inherit }
.continue img { width: 54px; height: 72px; object-fit: cover; border-radius: 9px }
.continue b { font: 700 16px var(--display) }
.continue .go { margin-left: auto; background: var(--coin); color: var(--on-coin); font-weight: 700; padding: 9px 14px; border-radius: 999px }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px }
.card { display: grid; gap: 8px; text-decoration: none; color: inherit }
.card .shot { aspect-ratio: 3 / 5; border-radius: 18px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); position: relative }
.card .shot img { width: 100%; height: 100%; object-fit: cover; display: block }
.card .badge { position: absolute; left: 8px; bottom: 8px; font: 600 10px/1 var(--mono); letter-spacing: .08em; padding: 5px 7px; border-radius: 6px; background: rgba(0,0,0,.7) }
.card b { font: 700 15px/1.2 var(--display) }
.card p { margin: 0; font-size: 13px; color: var(--muted) }
.banner { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 16px; background: var(--raise); border: 1px solid var(--line) }
.banner p { margin: 0; font-size: 14px; flex: 1 }
.banner .btn { white-space: nowrap }
.btn { border: 0; border-radius: 999px; padding: 9px 14px; font-weight: 700; background: var(--accent); color: #0b0e1a; cursor: pointer }
.btn.ghost { background: transparent; color: var(--muted); padding-inline: 6px }
.foot { color: var(--muted); font-size: 12px }

/* ---------- App Store-style home ---------- */
.home { gap: 26px }
.featured { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px;
  margin-inline: -16px; padding: 4px 16px 18px; scrollbar-width: none }
.featured .hero { flex: 0 0 88% }
.featured::-webkit-scrollbar, .rail::-webkit-scrollbar { display: none }
.hero { position: relative; aspect-ratio: 4 / 5; max-height: 520px; border-radius: 26px; overflow: hidden; background: var(--surface);
  scroll-snap-align: start; text-decoration: none; color: var(--ink); box-shadow: 0 18px 40px rgba(0,0,0,.45); isolation: isolate }
.hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2 }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(21,23,27,0) 45%, rgba(21,23,27,.92) 88%) }
.hero-txt { position: absolute; left: 18px; right: 96px; bottom: 18px; display: grid; gap: 4px }
.hero-txt .eyebrow { color: var(--coin) }
.hero-txt b { font: 700 26px/1.05 var(--display); letter-spacing: -.01em; text-wrap: balance }
.hero-txt p { margin: 0; font-size: 13px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.hero .get { position: absolute; right: 18px; bottom: 22px }
.get { background: var(--coin); color: var(--on-coin); font: 700 13px/1 var(--display); letter-spacing: .04em; padding: 9px 16px; border-radius: 999px; white-space: nowrap }
.shelf { display: grid; gap: 12px }
.shelf header, .chart header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding-top: 14px }
.shelf h2, .chart h2 { font: 700 21px/1.1 var(--display); margin: 0; letter-spacing: -.01em }
.shelf header a { color: var(--accent); font-weight: 600; font-size: 14px; text-decoration: none }
.rail { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 16px;
  margin-inline: -16px; padding: 2px 16px 14px; scrollbar-width: none }
.rail .tile { flex: 0 0 132px }
.tile { display: grid; gap: 4px; text-decoration: none; color: inherit; scroll-snap-align: start; min-width: 0 }
.tile img { width: 132px; height: 132px; border-radius: 30px; object-fit: cover; background: var(--surface);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 10px 22px rgba(0,0,0,.35) }
.tile b { font: 600 14px/1.2 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px }
.tile span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.chart { display: grid; gap: 4px }
.row { display: grid; grid-template-columns: 22px 64px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--line) }
.row .rank { font: 700 15px var(--display); color: var(--muted); text-align: center }
.row img { width: 64px; height: 64px; border-radius: 16px; object-fit: cover; background: var(--surface); box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset }
.row div { min-width: 0; display: grid; gap: 2px }
.row b { font: 600 15px/1.2 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.row p { margin: 0; font-size: 12.5px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden }
.row .sub { font-size: 11.5px; color: var(--muted); opacity: .8 }
.star { color: var(--coin) }
@media (min-width: 700px) { .featured .hero { flex-basis: 46% } .rail .tile { flex-basis: 150px } .tile img { width: 150px; height: 150px; border-radius: 34px } }
@media (prefers-reduced-motion: reduce) { .hero video { display: none } .hero { background-size: cover } }

/* ---------- player ---------- */
.player { position: fixed; inset: 0; display: grid; grid-template-rows: auto 1fr auto; background: #000;
  padding: 0 env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px) }
.topbar { display: flex; align-items: center; gap: 8px; padding: calc(env(safe-area-inset-top, 0px) + 6px) 10px 6px; background: var(--bg) }
.topbar .t { font: 700 14px var(--display); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.icon { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; cursor: pointer; font-size: 16px }
.stage { position: relative; overflow: hidden; min-height: 0 }
.stage iframe { position: absolute; border: 0; background: #000; left: 0; top: 0; width: 100%; height: 100% }
.stage iframe.fit { transform-origin: 0 0 }

/* on-screen controls */
.pad { display: none; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px calc(env(safe-area-inset-bottom, 0px) + 14px); background: var(--bg); touch-action: none; user-select: none; -webkit-user-select: none }
.pad.on { display: flex }
.dpad { display: grid; grid-template-columns: repeat(3, 58px); grid-template-rows: repeat(3, 58px); gap: 4px }
.key { border: 1px solid var(--line); background: var(--pad); border-radius: 14px; display: grid; place-items: center; font: 600 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); touch-action: none }
.key.down { background: var(--pad-on); color: var(--ink); transform: scale(.96) }
.k-up { grid-area: 1 / 2 } .k-left { grid-area: 2 / 1 } .k-right { grid-area: 2 / 3 } .k-down { grid-area: 3 / 2 }
.ab { display: flex; gap: 14px; align-items: center }
.ab .key { width: 76px; height: 76px; border-radius: 50% }
.ab .key.b { width: 56px; height: 56px }
.ab .key.a { background: rgba(125,140,255,.22); color: var(--ink) }

/* overlays */
.overlay { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(8,10,15,.92); z-index: 5; text-align: center }
.overlay .box { display: grid; gap: 14px; justify-items: center; max-width: 340px }
.overlay h2 { font: 700 24px/1.15 var(--display); margin: 0; text-wrap: balance }
.overlay p { margin: 0; color: var(--muted); font-size: 14px }
.overlay .credit { font: 11px/1.4 var(--mono); color: var(--muted) }
.playbtn { width: 96px; height: 96px; border-radius: 50%; border: 0; background: var(--coin); color: var(--on-coin); font: 700 15px var(--display); cursor: pointer; box-shadow: 0 0 0 10px rgba(229,255,84,.15) }
.loadbar { width: 200px; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden }
.loadbar i { display: block; height: 100%; width: 40%; background: var(--coin); animation: slide 1.1s ease-in-out infinite }
.loadbar.done i { width: 100%; animation: none }
@keyframes slide { 0% { transform: translateX(-100%) } 100% { transform: translateX(250%) } }
.rotate { font-size: 42px; animation: tilt 1.6s ease-in-out infinite }
@keyframes tilt { 50% { transform: rotate(90deg) } }
.ad { background: #f2f3f6; color: #222; border-radius: 16px; padding: 18px; width: min(320px, 90vw); display: grid; gap: 10px }
.ad .tag { font: 600 10px var(--mono); letter-spacing: .12em; color: #777 }
.ad .creative { height: 200px; border-radius: 10px; display: grid; place-items: center; background: repeating-linear-gradient(45deg, #e3e5ea 0 12px, #eceef2 12px 24px); font: 600 13px var(--mono); color: #666 }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; background: var(--surface); border-top: 1px solid var(--line); border-radius: 18px 18px 0 0; padding: 18px 18px calc(env(safe-area-inset-bottom, 0px) + 18px); display: grid; gap: 8px }
.sheet h3 { margin: 0; font: 700 16px var(--display) }
.sheet p { margin: 0; font-size: 14px; color: var(--muted) }
.sheet a { color: var(--accent) }
@media (prefers-reduced-motion: reduce) { .loadbar i, .rotate { animation: none } }

/* while playing: no toolbar at all. The stage is the safe area; only the pause bubble floats. */
.player.playing { grid-template-rows: 1fr auto; padding-top: env(safe-area-inset-top, 0px) }
.player.playing .topbar { display: none }
.player.playing:not(:has(.pad.on)) { padding-bottom: env(safe-area-inset-bottom, 0px) }
.bubble { position: fixed; z-index: 15; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.28); background: rgba(13,16,23,.6);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; gap: 4px; align-items: center; justify-content: center; touch-action: none; cursor: pointer;
  transition: opacity .4s, left .2s, top .2s; box-shadow: 0 4px 14px rgba(0,0,0,.4) }
.bubble span { width: 4px; height: 14px; border-radius: 2px; background: #fff }
.bubble.idle { opacity: .32 }
.bubble.dragging { transition: none; opacity: 1 }
.pmenu .box { width: min(300px, 90vw) }
.pmenu .btn { width: 100% }
.overlay .hint-old { font-size: 13px; color: var(--ink); background: var(--raise); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px }

/* install prompt */
.ibtn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(229,255,84,.45); background: rgba(229,255,84,.10); color: var(--ink); font-size: 14px; text-align: left; cursor: pointer }
.ibtn .gl { width: 22px; height: 22px; color: var(--coin); flex: none }
.isheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 12px 12px calc(env(safe-area-inset-bottom, 0px) + 12px); background: linear-gradient(transparent, rgba(0,0,0,.55) 30%) }
.isheet.top { bottom: auto; top: 0; padding: calc(env(safe-area-inset-top, 0px) + 12px) 12px 12px; background: linear-gradient(rgba(0,0,0,.55) 70%, transparent) }
.icard { max-width: 460px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 16px; display: grid; gap: 12px; box-shadow: 0 20px 50px -20px #000 }
.ihead { display: flex; gap: 12px; align-items: center }
.ihead img { width: 48px; height: 48px; border-radius: 12px }
.ihead b { font: 700 16px var(--display) }
.ihead p { margin: 2px 0 0; font-size: 13px; color: var(--muted) }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.steps li { display: flex; gap: 10px; align-items: center; font-size: 14px; background: var(--raise); border-radius: 12px; padding: 10px 12px }
.steps .n { width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--coin); color: var(--on-coin); display: grid; place-items: center; font: 700 12px var(--mono) }
.steps .gl { width: 18px; height: 18px; vertical-align: -4px; color: var(--accent) }
.steps .glt { color: var(--accent); font-size: 18px; line-height: 0 }
.btn.big { padding: 14px; font-size: 16px; background: var(--coin); color: var(--on-coin) }
.iarrow { position: fixed; z-index: 21; font: 700 40px/1 var(--body); color: var(--coin); text-shadow: 0 2px 10px #000; pointer-events: none; animation: nudge 1s ease-in-out infinite }
.iarrow.top-right { top: calc(env(safe-area-inset-top, 0px) + 2px); right: 14px }
.iarrow.bottom { bottom: calc(env(safe-area-inset-bottom, 0px) + 4px); left: 50%; margin-left: -12px; animation-name: nudge-down }
.iarrow.bottom-right { bottom: calc(env(safe-area-inset-bottom, 0px) + 4px); right: 18px; animation-name: nudge-down }
@keyframes nudge { 50% { transform: translateY(-8px) } }
@keyframes nudge-down { 50% { transform: translateY(8px) } }
@media (prefers-reduced-motion: reduce) { .iarrow { animation: none } }

/* catalogue */
.brand .eyebrow { margin-top: 6px }
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px }
.chips::-webkit-scrollbar { display: none }
.chip { flex: none; font: 600 13px var(--body); border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 7px 13px; cursor: pointer }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink) }
.card .shot .new { position: absolute; top: 8px; left: 8px; font: 700 10px/1 var(--mono); letter-spacing: .08em; padding: 5px 7px; border-radius: 6px; background: var(--coin); color: var(--on-coin) }
.card .meta { font: 12px var(--mono); color: var(--muted) }
.card .star, .stars button.on { color: var(--coin) }
.stars { display: flex; gap: 6px; justify-content: center }
.stars button { border: 0; background: none; font-size: 34px; line-height: 1; color: var(--line); cursor: pointer; padding: 2px }
.stars button:hover { color: var(--coin) }

/* inside a chat app the host card has its own title bar */
.embed .topbar { display: none !important }
.embed .player { grid-template-rows: 1fr auto }

/* reception elsewhere (public, linked) */
.meta .ext { color: var(--muted) }
.praise { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font: 600 12px/1.4 var(--mono) }
.praise a { color: var(--coin); text-decoration: none }
.praise a:hover { text-decoration: underline }
.praise-quote { margin: 10px 0 0; padding: 0 0 0 10px; border-left: 2px solid var(--coin); font-size: 13px; line-height: 1.45; opacity: .9 }
.praise-quote cite { display: block; margin-top: 4px; font: 600 11px/1.4 var(--mono); font-style: normal }
.praise-quote cite a { color: var(--coin); text-decoration: none }

/* RIFFCADE header mark */
.brand svg.logo { width: 38px; height: 38px; flex: none }
.brand h1 { letter-spacing: .02em }
.brand h1 span { color: inherit }
.brand a { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 12px }

/* sticky category bar (after the base .chips rule so it wins) */
.chips { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--bg); padding-block: 8px; margin-block: -8px }