/* Sparkwire arcade home (v2): hero marquee (a game running live behind the
   title) and cabinet tiles whose screens play a muted attract-mode loop.
   Loaded after app.css; only the home page uses these classes. */
@font-face { font-family: "Press Start 2P"; src: url("/static/fonts/press-start-2p.ttf") format("truetype"); font-display: swap; } /* OFL, from Google Fonts */

:root { --pixel: "Press Start 2P", ui-monospace, "SF Mono", Menlo, Consolas, monospace; }

.marquee {
  position: relative; overflow: hidden; isolation: isolate;
  width: 100vw; margin: -1.4rem 0 0 calc(50% - 50vw);
  min-height: clamp(340px, 62vh, 560px);
  display: flex; align-items: flex-end;
  border-bottom: 2px solid var(--pink);
  box-shadow: 0 10px 60px rgba(255, 46, 151, 0.28);
}
.marquee::after { content: none; }
.marquee-stage { position: absolute; inset: 0; z-index: -2; background: var(--ink); }
.marquee-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s ease; transform: scale(1.04); --accent: var(--cyan); }
.marquee-slide.on { opacity: 1; animation: marquee-drift 14s ease-in-out infinite alternate; }
@keyframes marquee-drift { from { transform: scale(1.04) translateX(-1%); } to { transform: scale(1.1) translateX(1%); } }
.marquee-slide .screen-glyph { font-size: 14rem; opacity: 0.25; }
.marquee-shade {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, var(--ink) 4%, rgba(7, 4, 26, 0.55) 45%, rgba(7, 4, 26, 0.15) 100%),
    linear-gradient(90deg, rgba(7, 4, 26, 0.7), transparent 65%),
    repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, 0.28) 2px 3px);
}
.marquee-copy { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 2rem clamp(0.8rem, 3vw, 1.4rem) 2.4rem; }
.marquee-kicker { margin: 0 0 0.9rem; font: 0.62rem var(--pixel); letter-spacing: 0.06em; color: var(--lime); text-shadow: 0 0 10px rgba(183, 255, 85, 0.6); }
.marquee-kicker span { color: var(--text); }
.marquee h1 {
  margin: 0; max-width: none; font: clamp(1.7rem, 6.2vw, 3.6rem) var(--pixel); line-height: 1.25;
  background: none; color: var(--text); -webkit-background-clip: initial; background-clip: initial;
  text-shadow: 3px 3px 0 var(--pink), 6px 6px 0 rgba(168, 85, 255, 0.7), 0 0 30px rgba(34, 233, 255, 0.45);
}
.marquee h1 span { color: var(--cyan); text-shadow: 3px 3px 0 var(--violet), 0 0 26px var(--cyan); }
.marquee-sub { margin: 1rem 0 0; min-height: 1.4em; color: #cfc6ff; font-size: 1rem; text-shadow: 0 2px 8px #000; }
.marquee-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.4rem; margin-top: 1.3rem; }
.coin-btn {
  display: inline-flex; flex-direction: column; align-items: center; gap: 0.5rem;
  padding: 0.85rem 1.6rem 0.95rem; border-radius: 6px; color: #fff;
  background: linear-gradient(180deg, #ff5db1, var(--pink) 55%, #c4106a);
  border: 3px solid #fff; border-bottom-width: 7px; border-bottom-color: #8b0a4a;
  box-shadow: 0 0 0 3px var(--pink), 0 0 36px rgba(255, 46, 151, 0.7);
  min-height: 44px; transition: transform 0.08s ease, filter 0.12s ease;
}
.coin-btn:hover { text-decoration: none; filter: brightness(1.12); transform: translateY(-2px); }
.coin-btn:active { transform: translateY(3px); border-bottom-width: 4px; }
.coin-btn .coin-blink { font: 0.55rem var(--pixel); letter-spacing: 0.08em; color: #ffe45e; animation: coin-blink 1.1s steps(2, jump-none) infinite; }
.coin-btn b { font: 1.05rem var(--pixel); letter-spacing: 0.05em; }
@keyframes coin-blink { 0% { opacity: 1; } 50% { opacity: 0.15; } }
.marquee-link {
  background: none; border: 0; padding: 0 0.2rem; min-height: 44px; display: inline-flex; align-items: center;
  font: 0.62rem var(--pixel); letter-spacing: 0.05em; color: var(--cyan); cursor: pointer;
}
.marquee-link:hover { color: #fff; text-decoration: none; text-shadow: 0 0 12px var(--cyan); }
.marquee-count { margin: 1rem 0 0; font: 0.55rem var(--pixel); color: var(--muted); letter-spacing: 0.08em; }
.marquee-dots { position: absolute; right: clamp(0.8rem, 3vw, 1.4rem); bottom: 1.1rem; display: flex; gap: 0.45rem; }
.marquee-dots i { width: 10px; height: 10px; background: var(--line); border: 1px solid var(--muted); }
.marquee-dots i.on { background: var(--pink); border-color: #fff; box-shadow: 0 0 10px var(--pink); }

/* ---- shared screen layers (cover poster + clip on top) ---- */
.screen-cover, .screen-clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.screen-clip { opacity: 0; transition: opacity 0.35s ease; }
.screen-clip.live { opacity: 1; }
.screen-glyph { position: absolute; inset: 0; display: grid; place-items: center; font: 700 3rem var(--mono); color: var(--accent); text-shadow: 0 0 22px var(--accent); }

/* ---- cabinets ---- */
.arcade h2 { font: 0.78rem var(--pixel); letter-spacing: 0.1em; color: var(--lime); text-shadow: 0 0 10px rgba(183, 255, 85, 0.45); }
.headline-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.4rem; }
.cab-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1.2rem; }
.cab {
  --accent: var(--cyan);
  display: flex; flex-direction: column; color: var(--text); position: relative;
  padding: 0 0.55rem 0.7rem; border-radius: 12px 12px 6px 6px;
  background: linear-gradient(180deg, #1d1148, #0f0828 70%);
  border: 2px solid color-mix(in srgb, var(--accent) 40%, #2a1c56);
  box-shadow: 0 0 0 1px #000, 0 12px 28px rgba(0, 0, 0, 0.5), 0 0 26px color-mix(in srgb, var(--accent) 16%, transparent);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  will-change: transform;
}
.cab:hover, .cab:focus-visible {
  text-decoration: none; border-color: var(--accent);
  box-shadow: 0 0 0 1px #000, 0 18px 36px rgba(0, 0, 0, 0.55), 0 0 44px color-mix(in srgb, var(--accent) 55%, transparent);
}
.cab-marquee {
  margin: 0 -0.55rem 0.55rem; padding: 0.55rem 0.5rem; text-align: center; border-radius: 10px 10px 0 0;
  font: 0.62rem/1.4 var(--pixel); letter-spacing: 0.05em; text-transform: uppercase;
  color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 70%, #000), color-mix(in srgb, var(--accent) 28%, #0b0620));
  text-shadow: 0 0 10px var(--accent), 0 2px 0 rgba(0, 0, 0, 0.6);
  border-bottom: 2px solid var(--accent);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.cab.small .cab-marquee { font-size: 0.52rem; }
.cab-bezel { display: block; padding: 7px; border-radius: 8px; background: #050310; box-shadow: inset 0 0 0 2px #000, inset 0 3px 8px rgba(0, 0, 0, 0.9); }
.cab-screen {
  position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 6px; background: var(--ink-2);
  box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 35%, transparent);
}
.cab-screen::after { /* scanlines + vignette */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, 0.22) 2px 3px),
              radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.5));
}
.cab-glare { position: absolute; inset: 0; pointer-events: none; z-index: 2; background: linear-gradient(120deg, rgba(255, 255, 255, 0.13), transparent 34%); }
.cab-screen .screen-cover { filter: saturate(0.85) brightness(0.85); transition: filter 0.3s ease; }
.cab:hover .screen-cover, .cab.playing .screen-cover { filter: none; }
.cab-panel { display: flex; align-items: center; gap: 0.6rem; margin: 0.65rem 0.2rem 0; }
.cab-stick { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff7ac0, var(--pink) 60%, #7a0a42); box-shadow: 0 0 0 4px #1a1038, 0 0 0 5px #000; transition: transform 0.15s ease; }
.cab-btn { width: 13px; height: 13px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.4), var(--accent) 45%); box-shadow: 0 0 0 2px #000, 0 0 10px var(--accent); }
.cab-btn.b2 { background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.4), var(--lime) 45%); box-shadow: 0 0 0 2px #000, 0 0 10px var(--lime); }
.cab:hover .cab-stick { transform: translateX(3px) rotate(8deg); }
.cab-cta { margin-left: auto; font: 0.5rem var(--pixel); letter-spacing: 0.08em; color: #ffe45e; animation: coin-blink 1.1s steps(2, jump-none) infinite; }
.cab-tag { display: block; margin: 0.55rem 0.2rem 0; font-size: 0.8rem; line-height: 1.35; color: var(--muted); min-height: 2.7em; }

@media (hover: none) and (pointer: coarse) { .cab-cta { animation: none; } }
@media (max-width: 560px) {
  .marquee { min-height: 380px; }
  .marquee h1 { font-size: clamp(1.4rem, 8vw, 2rem); }
  .cab-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-slide.on { animation: none; }
  .coin-blink, .cab-cta { animation: none !important; }
}

/* long taglines (the Godot blurb) stay tidy */
.marquee-sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 62ch; }
.cab-tag { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.marquee-kicker { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===================== request board: coins, stage meter, ticker ===== */
.sparks h2, .feed h2, .sparks-head h2 { font: 0.78rem var(--pixel); letter-spacing: 0.1em; color: var(--lime); text-shadow: 0 0 10px rgba(183, 255, 85, 0.45); }
.request-form-head h3 { font: 0.78rem/1.5 var(--pixel); letter-spacing: 0.06em; color: var(--text); }
.new-spark .btn[type="submit"] { border-radius: 6px; border: 3px solid #fff; border-bottom-width: 6px; border-bottom-color: #8b0a4a; font-family: var(--pixel); font-size: 0.7rem; letter-spacing: 0.06em; padding: 0.7rem 1.1rem; }
.sparks-head .btn { border-radius: 6px; font-family: var(--pixel); font-size: 0.62rem; letter-spacing: 0.05em; }
.seg a { font-family: var(--pixel); font-size: 0.55rem; letter-spacing: 0.04em; }

.spark { transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease; }
.spark:hover { transform: translateX(3px); border-color: color-mix(in srgb, var(--violet) 60%, var(--line)); }
.spark.status-building { box-shadow: inset 2px 0 0 var(--cyan), 0 0 18px rgba(34, 233, 255, 0.1); }
.spark.status-shipped { box-shadow: inset 2px 0 0 var(--good), 0 0 22px rgba(53, 224, 138, 0.14); }

/* vote = a coin you drop in */
.vote-btn { background: none; border: 0; min-width: 3.4rem; gap: 0.25rem; }
.coin {
  position: relative; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3a8, #ffd23f 45%, #c98a00);
  border: 2px solid #8a5a00; box-shadow: 0 0 0 2px #000, inset 0 -3px 0 rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.coin::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 1px dashed rgba(138, 90, 0, 0.7); }
.coin .count { position: relative; font: 0.7rem var(--pixel); color: #5a3a00; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); }
.coin-label { font: 0.45rem var(--pixel); letter-spacing: 0.08em; color: var(--muted); }
.vote-btn:not(:disabled):hover .coin { transform: translateY(-2px) rotate(-6deg); box-shadow: 0 0 0 2px #000, 0 0 18px rgba(255, 210, 63, 0.7); }
.vote-btn:not(:disabled):hover .coin-label { color: #ffe45e; }
.vote-btn.on { box-shadow: none; }
.vote-btn.on .coin { background: radial-gradient(circle at 35% 30%, #ffd1ea, var(--pink) 50%, #8b0a4a); border-color: #5a0630; box-shadow: 0 0 0 2px #000, 0 0 16px rgba(255, 46, 151, 0.6); }
.vote-btn.on .coin .count { color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); }
.vote-btn.on .coin-label { color: var(--pink); }
.vote-btn.drop .coin { animation: coin-drop 0.5s ease; }
@keyframes coin-drop { 0% { transform: translateY(-16px) rotateY(0); } 55% { transform: translateY(0) rotateY(540deg); } 75% { transform: translateY(-4px) rotateY(720deg); } 100% { transform: translateY(0) rotateY(720deg); } }

/* stage meter: OPEN -> BUILDING -> SHIPPED */
.stages { display: flex; align-items: center; gap: 4px; margin-top: 0.55rem; }
.stages i { width: 26px; height: 8px; background: #1d1448; border: 1px solid var(--line); }
.stages i.lit { background: var(--violet); border-color: #d9b3ff; box-shadow: 0 0 8px var(--violet); }
.stage-building i.lit { background: var(--cyan); border-color: #bff7ff; box-shadow: 0 0 8px var(--cyan); }
.stage-building i:nth-child(2) { background: repeating-linear-gradient(115deg, var(--cyan) 0 6px, #0a6f80 6px 12px); background-size: 24px 100%; animation: stripes 0.7s linear infinite; }
.stage-shipped i.lit { background: var(--good); border-color: #c7ffe2; box-shadow: 0 0 8px var(--good); }
@keyframes stripes { to { background-position: 24px 0; } }
.stage-text { margin-left: 0.5rem; font: 0.5rem var(--pixel); letter-spacing: 0.08em; color: var(--muted); }
.stage-building .stage-text { color: var(--cyan); }
.stage-building .stage-text em { font-style: normal; animation: coin-blink 1s steps(2, jump-none) infinite; }
.stage-shipped .stage-text { color: var(--good); text-shadow: 0 0 10px rgba(53, 224, 138, 0.7); animation: level-up 1.6s ease-in-out infinite alternate; }
@keyframes level-up { from { transform: translateY(0); } to { transform: translateY(-2px); } }

/* shipped feed as a ticker */
.ticker { overflow: hidden; margin-top: 0.8rem; border-block: 2px solid var(--good); background: rgba(53, 224, 138, 0.06); box-shadow: 0 0 20px rgba(53, 224, 138, 0.1); -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.ticker-track { display: flex; width: max-content; animation: ticker 40s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker .feed-list { flex-direction: row; gap: 2rem; margin: 0; padding: 0.55rem 1rem; white-space: nowrap; }
.ticker .feed-list li { min-height: 0; }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .ticker-track, .stage-building i:nth-child(2), .stage-shipped .stage-text, .vote-btn.drop .coin { animation: none !important; }
  .ticker .feed-list[aria-hidden="true"] { display: none; }
}
.seg.small a { font-size: 0.55rem; padding: 0.4rem 0.85rem; }