/* Fundamentos: noite de cinema, luz coral e superfícies levemente azuladas. */
:root {
  color-scheme: dark;
  --nav-height: 76px; --column: 560px; --gutter: clamp(16px, 3.9vw, 64px);
  font-family: var(--g-font-text); font-size: 16px; line-height: 1.5; background: var(--g-bg); color: var(--g-text);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; }
button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }

img, svg, video { display: block; max-width: 100%; }
button, input { min-width: 0; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--g-font-display); font-weight: var(--g-weight-display); font-synthesis: none; letter-spacing: var(--g-tracking-title); line-height: var(--g-leading-tight); text-wrap: balance; }
h1 { font-size: clamp(2rem, 8vw, 2.6rem); letter-spacing: -.025em; }
h2 { font-size: 1.3rem; letter-spacing: -.025em; }
h3 { font-size: 1rem; }
h1, h2, h3, p, .badge, .tag, summary { overflow-wrap: anywhere; min-width: 0; }
summary { cursor: pointer; min-height: var(--g-touch-min); padding-block: var(--g-space-3); }
p { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--g-focus); outline-offset: 3px; }
main:focus { outline: none; }
[hidden] { display: none !important; }
::selection { background: var(--g-brand); color: var(--g-on-brand); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 12px; background: var(--g-brand); color: var(--g-on-brand); transform: translateY(-160%); border-radius: var(--g-radius-md); }
.skip-link:focus { transform: translateY(0); }
.ambient { position: fixed; inset: 0; z-index: -1; background: var(--g-bg); }
.app { width: 100%; max-width: none; position: relative; min-height: 100svh; background: var(--g-bg); overflow: clip; }
.view { width: 100%; min-width: 0; min-height: 100svh; view-transition-name: content; }
.has-nav .view { padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom) + 20px); }
.g-boot { min-height: 100svh; display: grid; place-content: center; justify-items: center; gap: var(--g-space-6); padding: var(--g-space-8); background: var(--g-bg); text-align: center; }
.g-boot > img { width: 80px; height: 80px; }
.boot-message { color: var(--g-text-muted); }
.g-card__link, .nav-item, .genre-links a { touch-action: manipulation; }
.caption { font-size: var(--g-text-xs); color: var(--g-text-muted); }
.eyebrow { display: flex; align-items: center; gap: 8px; font-size: .68rem; letter-spacing: .16em; font-weight: 600; text-transform: uppercase; color: color-mix(in srgb, var(--g-text) 68%, transparent); }
@keyframes g-arrive { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (min-width: 900px) { .app { min-height: 100dvh; } .ambient::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 119px, color-mix(in srgb, var(--g-text) 0.8%, transparent) 120px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* Páginas ocupam toda a janela; somente as mídias têm proporção de retrato. */
input, .form-message, .profile-card, .settings-row > span { overflow-wrap: anywhere; }
@media (min-width: 768px) {
  .has-nav { padding-top: var(--nav-height); }
  .has-nav .view { padding-bottom: 40px; min-height: calc(100svh - var(--nav-height)); }
}

/* Uma transição por troca; shell, avisos e vídeo ficam fora da captura. */
:root { view-transition-name: none; }
.player-view, .feed-view { view-transition-name: none; }
@supports not (view-transition-name: none) { .view { animation: g-route-enter var(--g-dur-normal) var(--g-ease-enter); } }
@keyframes g-route-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes g-route-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes g-reveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes g-reveal-safe { to { opacity: 1; } }
.reveal-pending { opacity: 0; animation: g-reveal-safe 0s 1s forwards; }
.is-revealed { animation: g-reveal var(--g-dur-slow) var(--g-ease-enter) calc(var(--g-stagger-index, 0) * var(--g-stagger)) backwards; }
.reveal-pending:focus-within, .is-revealed:focus-within { opacity: 1; animation: none; }
::view-transition-old(content) { animation: g-route-out var(--g-dur-fast) var(--g-ease-exit) both; }
::view-transition-new(content) { animation: g-route-enter var(--g-dur-slow) var(--g-ease-enter) both; }
@media (prefers-reduced-motion: reduce) {
  .reveal-pending { opacity: 1; }
  ::view-transition-old(content), ::view-transition-new(content) { animation: none !important; }
}

/* A capa só recebe um nome enquanto participa da transição. */
.g-cover-transition { transform: none !important; }
::view-transition-group(*) { animation-duration: var(--g-dur-slow); animation-timing-function: var(--g-ease-enter); }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

/* Pan-up mantém a rolagem normal; pan-down fica com o gesto apenas no topo. */
.app:has(.g-edge-zone) { --gutter: clamp(24px, 3.9vw, 64px); }
html.g-pull-page { overscroll-behavior-y: contain; }
.g-pull-at-top { touch-action: pan-x pan-up pinch-zoom; }
.g-page-dragging { user-select: none; cursor: grabbing; }
.g-edge-zone { position: fixed; left: 0; top: var(--g-safe-top); bottom: calc(var(--nav-height) + var(--g-safe-bottom)); width: 24px; z-index: 12; touch-action: pan-y pinch-zoom; }
.g-edge-zone--native { touch-action: auto; }
.app:not(.has-nav) .g-edge-zone { top: var(--g-safe-top); bottom: var(--g-safe-bottom); }
.g-pull-indicator, .g-edge-indicator { position: fixed; z-index: 22; pointer-events: none; background: var(--g-surface); color: var(--g-text); border: 1px solid var(--g-border-control); box-shadow: var(--g-shadow-md); }
.g-pull-indicator { top: calc(var(--g-safe-top) + var(--g-space-3)); left: 50%; translate: -50% var(--g-pull-offset, 0px); display: flex; align-items: center; gap: var(--g-space-3); padding: var(--g-space-2) var(--g-space-4); border-radius: var(--g-radius-full); max-width: calc(100% - 48px); font-size: var(--g-text-sm); }
.g-pull-ring { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border: 2px solid var(--g-border); border-top-color: var(--g-brand); border-radius: 50%; }
.g-pull-ready { border-color: var(--g-brand); }
.g-pull-loading .g-pull-ring { animation: g-spin var(--g-dur-spin) linear infinite; }
.g-edge-indicator { left: var(--g-space-3); top: 45%; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; transform: scale(var(--g-edge-scale, 1)); }
@media (min-width: 768px) { .has-nav .g-pull-indicator { top: calc(var(--nav-height) + var(--g-space-3)); } .g-edge-zone { top: var(--nav-height); bottom: 0; } }
@media (prefers-reduced-motion: reduce) { .g-pull-indicator { translate: -50% 0; } .g-edge-indicator { transform: none; } }

/* Palco: o fundo é a noite; a capa é que colore a tela. */
.ambient {
  background:
    radial-gradient(ellipse 70% 42% at 50% -8%, color-mix(in srgb, var(--g-brand) 22%, transparent), transparent 58%),
    var(--g-bg);
}
@media (min-width: 900px) {
  .ambient::after { opacity: .25; }
}
.g-boot > img { animation: g-arrive var(--g-dur-slow) var(--g-ease-enter); }

/* Cursor: seta e mão no estilo da referência. Hotspot na ponta. Só com mouse fino. */
@media (hover: hover) and (pointer: fine) {
  html body,
  html body * { cursor: url('/assets/cursor.png?v=7') 1 1, auto !important; }
  html body :is(a, button, [role='button'], summary, label[for], select, .g-chip, .g-card__link, input[type='button'], input[type='submit'], input[type='reset'], input[type='checkbox'], input[type='radio'], input[type='range']),
  html body :is(a, button, [role='button'], summary, label[for], select, .g-chip, .g-card__link) * { cursor: url('/assets/cursor-pointer.png?v=7') 5 1, pointer !important; }
  html body :is(textarea, [contenteditable='true'], input:not([type='range']):not([type='checkbox']):not([type='radio']):not([type='button']):not([type='submit']):not([type='reset'])) { cursor: text !important; }
  html body :is(.g-page-dragging, .g-dragging),
  html body :is(.g-page-dragging, .g-dragging) * { cursor: grabbing !important; }
  html body :is(:disabled, [aria-disabled='true']),
  html body :is(:disabled, [aria-disabled='true']) * { cursor: not-allowed !important; }
}

@keyframes g-progress-timer { to { transform: scaleX(1); } }
/* Só decorações contínuas: não suspender a entrada nem ações do usuário. */
:is(.hero, .g-stage, .login-art).motion-paused::before,
:is(.hero, .g-stage, .login-art).motion-paused::after,
:is(.hero, .g-stage, .login-art).motion-paused :is(.cover-art img, .g-stage-timer__bar, .login-frame),
.login-frame.motion-paused { animation-play-state: paused; }