@layer reset, tokens, base, layout, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { -webkit-text-size-adjust: 100%; }
  img, svg { display: block; max-inline-size: 100%; }
  button, input { font: inherit; color: inherit; }
  button { cursor: pointer; border: 0; background: none; }
  fieldset { border: 0; min-inline-size: 0; }
  [hidden] { display: none !important; }
}

@layer tokens {
  :root {
    color-scheme: dark;
    --fib-1: 0.25rem; --fib-2: 0.5rem; --fib-3: 0.75rem; --fib-5: 1rem;
    --fib-8: 1.5rem; --fib-13: 2rem; --fib-21: 3rem; --fib-34: 4rem; --fib-55: 6rem;

    --noite-900: #0c0509; --noite-800: #12070f; --noite-700: #1c0c18; --noite-600: #2a1224;
    --vinho-500: #b3124a; --rosa-400: #ff4f81; --rosa-300: #ff8fae; --ouro-300: #f3c77a;
    --lavanda-300: #c4a6ff; --creme-100: #fbeef2; --cinza-400: #b9a2b0; --cinza-500: #8a7383;

    --bg: var(--noite-800);
    --bg-fundo: var(--noite-900);
    --surface: rgb(255 255 255 / 0.05);
    --surface-forte: rgb(255 255 255 / 0.09);
    --line: rgb(255 255 255 / 0.1);
    --line-forte: rgb(255 255 255 / 0.2);
    --ink: var(--creme-100);
    --ink-suave: var(--cinza-400);
    --ink-fraco: var(--cinza-500);
    --brand: var(--rosa-400);
    --brand-forte: var(--vinho-500);
    --brand-suave: var(--rosa-300);
    --destaque: var(--ouro-300);
    --par-a: var(--rosa-400);
    --par-b: var(--lavanda-300);

    --grad-brand: linear-gradient(135deg, var(--rosa-400), var(--vinho-500));
    --grad-texto: linear-gradient(100deg, var(--rosa-300), var(--ouro-300));

    --font-display: 'Fraunces', Georgia, serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;
    --fs-caption: 0.75rem; --fs-small: 0.85rem; --fs-body: 1rem; --fs-h3: 1.25rem; --fs-h2: 1.5rem;
    --fs-h1: clamp(2rem, 1.5rem + 2.5vw, 3rem);

    --raio-input: var(--fib-3); --raio-card: var(--fib-8); --raio-pill: 999px;
    --sombra-card: 0 var(--fib-5) var(--fib-21) rgb(0 0 0 / 0.45);
    --brilho-brand: 0 0 var(--fib-13) rgb(255 79 129 / 0.35);
    --blur: 18px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --t-rapida: 180ms; --t-media: 320ms;
    --z-ambiente: 0; --z-conteudo: 1; --z-topo: 10; --z-overlay: 50; --z-toast: 60;
  }
}

@layer base {
  html { scroll-behavior: smooth; }
  body {
    min-block-size: 100dvh;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.6;
    color: var(--ink);
    background: var(--bg-fundo);
    overflow-x: hidden;
  }
  h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
  em { font-style: italic; }
  :focus-visible { outline: 2px solid var(--brand-suave); outline-offset: 3px; }
  ::selection { background: var(--brand); color: #fff; }
}

@layer layout {
  .ambiente { position: fixed; inset: 0; z-index: var(--z-ambiente); overflow: hidden; pointer-events: none;
    background: radial-gradient(ellipse at 50% -10%, var(--noite-600), var(--bg) 55%, var(--bg-fundo)); }
  .ambiente span { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.45; animation: flutuar 18s var(--ease) infinite alternate; }
  .ambiente span:nth-child(1) { inline-size: 40vmax; block-size: 40vmax; background: var(--vinho-500); inset-block-start: -12vmax; inset-inline-start: -10vmax; }
  .ambiente span:nth-child(2) { inline-size: 32vmax; block-size: 32vmax; background: #5b2a86; inset-block-end: -10vmax; inset-inline-end: -8vmax; animation-delay: -6s; }
  .ambiente span:nth-child(3) { inline-size: 18vmax; block-size: 18vmax; background: #8c4a1c; inset-block-start: 40%; inset-inline-start: 55%; opacity: 0.25; animation-delay: -12s; }
  @keyframes flutuar { to { transform: translate3d(4vmax, 3vmax, 0) scale(1.1); } }

  .topo { position: relative; z-index: var(--z-topo); display: flex; align-items: center; justify-content: space-between;
    gap: var(--fib-5); inline-size: min(100% - var(--fib-13), 44rem); margin-inline: auto; padding-block: var(--fib-8) 0; }
  .palco { position: relative; z-index: var(--z-conteudo); inline-size: min(100% - var(--fib-13), 44rem);
    margin-inline: auto; padding-block: var(--fib-8) var(--fib-34); container-type: inline-size; }
  .tela { display: none; }
  .tela.ativa { display: grid; gap: var(--fib-8); animation: entrar var(--t-media) var(--ease); }
  @keyframes entrar { from { opacity: 0; transform: translateY(var(--fib-3)); } }

  @media (max-width: 480px) {
    .topo, .palco { inline-size: calc(100% - var(--fib-13)); }
  }
}

@layer components {
  .marca { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; color: var(--ink); text-decoration: none; }
  .marca em { background: var(--grad-texto); -webkit-background-clip: text; background-clip: text; color: transparent; }

  .cartao { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--raio-card);
    padding: var(--fib-8); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); box-shadow: var(--sombra-card); }
  @container (min-width: 36rem) { .cartao { padding: var(--fib-13); } }
  .hero { display: grid; gap: var(--fib-5); }

  .sobretitulo { font-size: var(--fs-caption); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--destaque); }
  .titulo { font-size: var(--fs-h1); }
  .titulo em { background: var(--grad-texto); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .titulo-2 { font-size: var(--fs-h2); }
  .titulo-3 { font-size: var(--fs-h3); margin-block-end: var(--fib-5); }
  .lead { color: var(--ink-suave); }

  .form { display: grid; gap: var(--fib-5); margin-block-start: var(--fib-3); }
  .campo { display: grid; gap: var(--fib-2); }
  .campo span, .escolha legend { font-size: var(--fs-small); font-weight: 600; color: var(--ink-suave); }
  input:not([type=radio]) { inline-size: 100%; min-block-size: var(--fib-21); padding-inline: var(--fib-5); background: rgb(0 0 0 / 0.25);
    border: 1px solid var(--line-forte); border-radius: var(--raio-input); transition: border-color var(--t-rapida), box-shadow var(--t-rapida); }
  input:not([type=radio]):focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 var(--fib-1) rgb(255 79 129 / 0.25); }
  input::placeholder { color: var(--ink-fraco); }

  .escolha { display: flex; flex-wrap: wrap; gap: var(--fib-2); }
  .escolha legend { inline-size: 100%; margin-block-end: var(--fib-2); }
  .escolha label { position: relative; }
  .escolha input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
  .escolha span { display: inline-flex; align-items: center; min-block-size: var(--fib-21); padding-inline: var(--fib-8);
    border: 1px solid var(--line-forte); border-radius: var(--raio-pill); transition: all var(--t-rapida); }
  .escolha input:checked + span { background: var(--grad-brand); border-color: transparent; box-shadow: var(--brilho-brand); font-weight: 600; }
  .escolha input:focus-visible + span { outline: 2px solid var(--brand-suave); outline-offset: 2px; }

  .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--fib-2); min-block-size: var(--fib-21);
    padding-inline: var(--fib-8); border-radius: var(--raio-pill); font-weight: 600; transition: transform var(--t-rapida) var(--ease), box-shadow var(--t-rapida), background var(--t-rapida), opacity var(--t-rapida); }
  .btn:active { transform: scale(0.97); }
  .btn:disabled { opacity: 0.5; cursor: not-allowed; }
  .btn-primario { inline-size: 100%; background: var(--grad-brand); color: #fff; box-shadow: var(--brilho-brand); }
  .btn-primario:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 0 var(--fib-21) rgb(255 79 129 / 0.5); }
  .btn-secundario { background: var(--surface-forte); border: 1px solid var(--line-forte); white-space: nowrap; }
  .btn-secundario:hover { border-color: var(--brand-suave); }
  .btn-fantasma { color: var(--brand-suave); text-decoration: underline; text-underline-offset: var(--fib-1); }
  .btn-icone { min-block-size: var(--fib-13); padding-inline: var(--fib-5); border: 1px solid var(--line-forte); border-radius: var(--raio-pill);
    font-size: var(--fs-small); font-weight: 600; color: var(--ink-suave); background: var(--surface); }
  .btn-icone:hover { color: var(--ink); border-color: var(--brand-suave); }

  .linha { display: flex; gap: var(--fib-2); }
  .entrar-codigo summary { cursor: pointer; color: var(--ink-suave); font-size: var(--fs-small); text-align: center; list-style: none; }
  .entrar-codigo summary::-webkit-details-marker { display: none; }
  .entrar-codigo summary:hover { color: var(--ink); }
  .entrar-codigo[open] summary { margin-block-end: var(--fib-3); }
  .entrar-codigo input { text-transform: uppercase; letter-spacing: 0.3em; font-weight: 600; }

  .convite { display: grid; gap: var(--fib-3); margin-block: var(--fib-5); padding: var(--fib-5); border: 1px dashed var(--line-forte); border-radius: var(--raio-input); }
  .convite p { font-size: var(--fs-small); color: var(--ink-suave); }
  .aguardando { display: flex; align-items: center; gap: var(--fib-2); font-size: var(--fs-small); color: var(--ink-suave); }
  .pulso { inline-size: var(--fib-3); block-size: var(--fib-3); border-radius: 50%; background: var(--brand); animation: pulso 1.4s infinite; }
  @keyframes pulso { 0% { box-shadow: 0 0 0 0 rgb(255 79 129 / 0.6); } 100% { box-shadow: 0 0 0 var(--fib-5) rgb(255 79 129 / 0); } }

  .regras { display: grid; gap: var(--fib-3); margin-block: var(--fib-5); padding-inline-start: var(--fib-8); color: var(--ink-suave); font-size: var(--fs-small); }
  .regras strong { color: var(--ink); }
  .regras li::marker { color: var(--brand); font-weight: 700; }

  .spinner { justify-self: center; margin-block: var(--fib-34); inline-size: var(--fib-21); block-size: var(--fib-21); border-radius: 50%;
    border: 3px solid var(--line); border-block-start-color: var(--brand); animation: girar 0.8s linear infinite; }
  @keyframes girar { to { transform: rotate(360deg); } }

  /* placar */
  .placar { display: grid; gap: var(--fib-5); }
  .jogadores { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fib-3); }
  .chip { display: flex; align-items: center; gap: var(--fib-3); padding: var(--fib-3) var(--fib-5); border-radius: var(--raio-pill);
    background: var(--surface); border: 1px solid var(--line); min-inline-size: 0; transition: all var(--t-media) var(--ease); }
  .chip .avatar { flex: none; display: grid; place-items: center; inline-size: var(--fib-13); block-size: var(--fib-13); border-radius: 50%;
    font-weight: 700; font-size: var(--fs-small); color: var(--noite-900); }
  .chip .nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
  .chip small { display: block; font-size: var(--fs-caption); color: var(--ink-fraco); font-weight: 500; }
  .chip.vez { border-color: var(--brand); box-shadow: var(--brilho-brand); background: var(--surface-forte); }
  .chip[data-i="0"] .avatar { background: var(--par-a); }
  .chip[data-i="1"] .avatar { background: var(--par-b); }
  .progresso-info { display: flex; justify-content: space-between; font-size: var(--fs-caption); color: var(--ink-suave); margin-block-end: var(--fib-2); }
  .barra { block-size: var(--fib-2); border-radius: var(--raio-pill); background: var(--surface-forte); overflow: hidden; }
  .barra i { display: block; block-size: 100%; inline-size: 0; background: var(--grad-brand); border-radius: inherit; transition: inline-size var(--t-media) var(--ease); }

  /* roleta */
  .roleta-area { display: grid; justify-items: center; gap: var(--fib-8); }
  .roleta { position: relative; inline-size: min(100%, 24rem); aspect-ratio: 1; }
  .roleta::before { content: ""; position: absolute; inset: calc(-1 * var(--fib-3)); border-radius: 50%;
    background: conic-gradient(from 0deg, var(--ouro-300), var(--rosa-400), var(--lavanda-300), var(--ouro-300)); opacity: 0.6; filter: blur(var(--fib-3)); }
  .roda { position: relative; inline-size: 100%; block-size: 100%; border-radius: 50%; transform: rotate(0deg); will-change: transform;
    box-shadow: 0 0 0 var(--fib-2) var(--noite-700), 0 var(--fib-8) var(--fib-34) rgb(0 0 0 / 0.6); }
  .roda.girando { transition: transform 4.6s cubic-bezier(0.12, 0.72, 0.1, 1); }
  .roda text { font-family: var(--font-body); font-weight: 700; font-size: 7.5px; fill: #fff; letter-spacing: 0.04em; paint-order: stroke; stroke: rgb(0 0 0 / 0.25); stroke-width: 1.2px; }
  .ponteiro { position: absolute; z-index: 2; inset-block-start: calc(-1 * var(--fib-5)); inset-inline-start: 50%; translate: -50% 0;
    inline-size: var(--fib-21); fill: var(--creme-100); filter: drop-shadow(0 var(--fib-1) var(--fib-2) rgb(0 0 0 / 0.6)); }
  .miolo { position: absolute; inset: 50% auto auto 50%; translate: -50% -50%; inline-size: 18%; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff5f8, var(--rosa-300) 45%, var(--vinho-500)); box-shadow: 0 0 0 var(--fib-1) var(--noite-800), var(--brilho-brand); }
  .dica { min-block-size: 1.6em; text-align: center; color: var(--ink-suave); }
  .dica b { color: var(--ink); }
  .btn-girar { min-inline-size: 16rem; min-block-size: var(--fib-34); font-size: var(--fs-h3); background: var(--grad-brand); color: #fff; box-shadow: var(--brilho-brand); }
  .btn-girar:hover:not(:disabled) { transform: translateY(-2px) scale(1.02); }

  /* pergunta */
  .pergunta { display: grid; gap: var(--fib-8); animation: entrar var(--t-media) var(--ease); }
  .pergunta-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--fib-3); }
  .selo { display: inline-flex; align-items: center; gap: var(--fib-2); padding: var(--fib-1) var(--fib-5); border-radius: var(--raio-pill);
    font-size: var(--fs-caption); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; background: var(--cor, var(--brand)); }
  .vez { font-size: var(--fs-small); color: var(--ink-suave); }
  .vez b { color: var(--brand-suave); }
  .pergunta-texto { font-size: clamp(1.5rem, 1.25rem + 1.5vw, 2rem); }
  .opcoes { display: grid; gap: var(--fib-3); }
  .opcao { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--fib-5); inline-size: 100%; text-align: start;
    padding: var(--fib-3) var(--fib-5); min-block-size: var(--fib-34); border-radius: var(--raio-input); background: rgb(0 0 0 / 0.2);
    border: 1px solid var(--line); transition: all var(--t-rapida) var(--ease); }
  .opcao .letra { display: grid; place-items: center; inline-size: var(--fib-13); block-size: var(--fib-13); border-radius: 50%;
    font-weight: 700; font-size: var(--fs-small); background: var(--surface-forte); color: var(--brand-suave); transition: all var(--t-rapida); }
  .opcao:not(:disabled):hover { border-color: var(--brand); background: var(--surface-forte); transform: translateX(var(--fib-1)); }
  .opcao:not(:disabled):hover .letra { background: var(--brand); color: #fff; }
  .opcao:disabled { cursor: default; opacity: 0.55; }
  .opcao.escolhida { opacity: 1; border-color: var(--brand); background: rgb(255 79 129 / 0.14); box-shadow: var(--brilho-brand); }
  .opcao.escolhida .letra { background: var(--grad-brand); color: #fff; }
  .opcoes.revelado .opcao:not(.escolhida) { opacity: 0.3; }
  .quem-box { display: grid; gap: var(--fib-3); padding: var(--fib-5); border-radius: var(--raio-input);
    background: rgb(255 79 129 / 0.08); border: 1px solid var(--brand); animation: entrar var(--t-media) var(--ease); }
  .quem-box .campo span { color: var(--brand-suave); }
  .aviso { text-align: center; color: var(--ink-suave); font-size: var(--fs-small); }
  .aviso b { color: var(--ink); }
  .aviso:empty { display: none; }

  /* final */
  .final-cabeca { display: grid; gap: var(--fib-3); text-align: center; }
  .radar-wrap { inline-size: min(100%, 26rem); margin-inline: auto; }
  #radar text { font-family: var(--font-body); font-size: 9px; font-weight: 600; fill: var(--ink-suave); }
  .legenda { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--fib-5); margin-block-start: var(--fib-5); font-size: var(--fs-small); }
  .legenda span { display: inline-flex; align-items: center; gap: var(--fib-2); }
  .legenda i { inline-size: var(--fib-3); block-size: var(--fib-3); border-radius: 50%; }
  .afinidade { margin-block-start: var(--fib-8); text-align: center; }
  .afinidade strong { display: block; font-family: var(--font-display); font-size: var(--fs-h1); background: var(--grad-texto); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .afinidade p { color: var(--ink-suave); font-size: var(--fs-small); }

  .perfis { display: grid; gap: var(--fib-8); }
  @container (min-width: 40rem) { .perfis { grid-template-columns: 1fr 1fr; } }
  .perfil { display: grid; gap: var(--fib-5); align-content: start; border-block-start: 3px solid var(--cor-par); }
  .perfil-nome { font-family: var(--font-display); font-size: var(--fs-h2); }
  .arquetipo { display: grid; gap: var(--fib-2); padding: var(--fib-5); border-radius: var(--raio-input); background: rgb(0 0 0 / 0.22); }
  .arquetipo small { font-size: var(--fs-caption); letter-spacing: 0.16em; text-transform: uppercase; color: var(--destaque); font-weight: 600; }
  .arquetipo strong { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--brand-suave); }
  .arquetipo p { font-size: var(--fs-small); color: var(--ink-suave); }
  .eixo { display: grid; grid-template-columns: 6.5rem 1fr 2rem; align-items: center; gap: var(--fib-3); font-size: var(--fs-small); }
  .eixo span:last-child { text-align: end; font-weight: 700; }
  .eixo .trilho { block-size: var(--fib-2); border-radius: var(--raio-pill); background: var(--surface-forte); overflow: hidden; }
  .eixo .trilho i { display: block; block-size: 100%; border-radius: inherit; background: var(--cor-par); transform-origin: left; animation: crescer 1.2s var(--ease) both; }
  @keyframes crescer { from { transform: scaleX(0); } }

  .sugestoes { display: grid; gap: var(--fib-3); list-style: none; }
  .sugestoes li { padding: var(--fib-3) var(--fib-5); border-inline-start: 3px solid var(--destaque); background: rgb(0 0 0 / 0.2); border-radius: 0 var(--raio-input) var(--raio-input) 0; font-size: var(--fs-small); }
  .historico summary { cursor: pointer; font-weight: 600; }
  .historico ol { display: grid; gap: var(--fib-3); margin-block-start: var(--fib-5); padding-inline-start: var(--fib-8); font-size: var(--fs-small); color: var(--ink-suave); }
  .historico b { color: var(--ink); }
  .acoes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fib-3); }
  @media (max-width: 480px) { .acoes { grid-template-columns: 1fr; } }

  .overlay { position: fixed; inset: 0; z-index: var(--z-overlay); display: grid; place-items: center; padding: var(--fib-8);
    background: rgb(8 3 6 / 0.72); backdrop-filter: blur(6px); animation: entrar var(--t-media) var(--ease); }
  .overlay-cartao { display: grid; gap: var(--fib-5); inline-size: min(100%, 26rem); text-align: center; background: var(--noite-700); }

  .historico-partidas { display: grid; gap: var(--fib-5); }
  .lista-partidas { display: grid; gap: var(--fib-2); list-style: none; }
  .lista-partidas li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fib-3); padding: var(--fib-3) var(--fib-5);
    border-radius: var(--raio-input); background: rgb(0 0 0 / 0.2); border: 1px solid var(--line); font-size: var(--fs-small); }
  .lista-partidas span { font-weight: 600; }
  .lista-partidas i { font-style: italic; color: var(--ink-fraco); }
  .lista-partidas time { flex: none; min-inline-size: 3rem; font-size: var(--fs-caption); font-weight: 700; color: var(--destaque); }

  .toast { position: fixed; z-index: var(--z-toast); inset-block-end: var(--fib-8); inset-inline-start: 50%; translate: -50% 0;
    max-inline-size: calc(100% - var(--fib-13)); padding: var(--fib-3) var(--fib-8); border-radius: var(--raio-pill);
    background: var(--noite-600); border: 1px solid var(--line-forte); box-shadow: var(--sombra-card); font-size: var(--fs-small); }
}

@layer utilities {
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
    .roda.girando { transition-duration: 1.2s; }
  }
}