/* =============================================================================
   Tema do estúdio aplicado às páginas do Fliper IA (que usam a estrutura do
   styles.css). Troca o roxo de fliperama pelo preto do estúdio, a tipografia
   pela do estúdio e os botões pelos do estúdio. A demo jogável e o mockup do
   app continuam com as cores de fliperama: são telas dentro da página.
   ============================================================================= */
:root{
  --ink: #050505; --ink-1: #0d0d0d; --ink-2: #161616; --line: #262626; --line-hi: #3a3a3a;
  --text: #f2f2f2; --muted: #a8a8a8; --dim: #707070;
  --magenta: #ff2e88; --cyan: #ffc531; --amber: #ffc531;
  --display: "Archivo", "Arial Narrow", Impact, sans-serif;
  --body: "Inter", "Segoe UI", system-ui, sans-serif;
  --col: 1240px;
}
body{ padding-top: var(--s-navh, 72px); background: var(--ink); }
h1, h2, h3{ font-family: var(--display); font-stretch: 75%; font-weight: 900; letter-spacing: -.005em; }
h1{ font-size: clamp(44px, 8vw, 120px); line-height: .9; }
.pagehead{ background: radial-gradient(70% 120% at 85% 0%, rgba(255,46,136,.14), transparent 60%), var(--ink); }
.slot{ font-family: var(--body); font-weight: 700; letter-spacing: .18em; color: var(--muted); }
.slot::before{ background: var(--magenta); }
.crumbs, .crumbs a{ font-family: var(--body); letter-spacing: .14em; }

.cta{ font-family: var(--body); font-weight: 800; font-size: 14px; letter-spacing: .12em; background: #fff; color: #000; border-radius: 0; padding: 17px 26px; }
.cta:hover{ background: var(--amber); }
.cta:disabled{ background: #fff; }
.cta-sm{ font-size: 12px; padding: 12px 16px; }
.cta .coin{ color: #000; opacity: .6; }
.cta-ghost{ background: transparent; color: #fff; border: 0; box-shadow: inset 0 0 0 2px rgba(255,255,255,.75); }
.cta-ghost:hover{ background: #fff; color: #000; }

.row input, .row select{ background: var(--ink-2); border-color: var(--line); border-radius: 0; }
.row input:hover, .row select:hover{ border-color: #555; }

/* telas de fliperama dentro da página continuam com as cores originais */
.machine, .appshot{
  --ink: #0A0713; --ink-1: #100B1D; --ink-2: #17102A; --line: #2A1F45; --line-hi: #3D2D63;
  --text: #EDE7F7; --muted: #9E95B8; --dim: #6E6689; --cyan: #3FE0FF; --amber: #FFB629;
  --display: "Bahnschrift", "Arial Narrow", sans-serif;
}
.machine .cta{ background: var(--magenta); color: #12040A; border-radius: 4px; }
.machine h1, .machine h2, .machine h3{ font-stretch: 100%; }