/* Peças visuais do estilo de jogo, iguais às do site do hub. Carregue depois de fontes.css e cores.css. */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font: 500 18px/1.45 var(--font); color: var(--ink); background: linear-gradient(var(--sky1), var(--sky2)) fixed; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.05; }
h1 { font-size: clamp(40px, 7vw, 80px); }
h2 { font-size: clamp(30px, 5vw, 52px); }
img, svg { display: block; }
a { color: inherit; }

/* Título com contorno escuro, como os do site */
.loud { color: var(--white); -webkit-text-stroke: .16em var(--ink); paint-order: stroke fill; text-shadow: 0 .09em 0 var(--ink); }
.yellow { color: var(--yellow); }
.pink { color: var(--pink); }

/* Cartão branco com borda grossa e sombra dura */
.card { padding: clamp(18px, 3vw, 30px); background: var(--white); color: var(--ink); border: var(--line); border-radius: var(--radius); box-shadow: var(--drop); }

/* Botão redondo em 3D: brilho no alto, sombra embaixo e um reflexo que atravessa no hover.
   Afunda ao passar o mouse e ao clicar. --drop-y é a altura da sombra; --c, a cor */
.btn { --drop-y: 7px; position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 8px 26px; border: 4px solid var(--ink); border-radius: 999px; background: var(--c, var(--white)); color: var(--ink); font: 600 18px/1.2 var(--font); text-align: center; text-decoration: none; box-shadow: inset 0 -6px 0 rgb(47 42 74 / .16), inset 0 4px 0 rgb(255 255 255 / .55), 0 var(--drop-y) 0 var(--ink); cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.btn::after { content: ""; position: absolute; inset: -4px; z-index: -1; background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .65) 50%, transparent 65%); translate: -110% 0; transition: translate .6s ease; }
.btn:hover::after { translate: 110% 0; }
.btn:hover { --drop-y: 4px; transform: translateY(3px); }
.btn:active { --drop-y: 0px; transform: translateY(7px); }
.btn:focus-visible { outline: 4px solid var(--pink); outline-offset: 3px; }
.btn svg { flex: none; transition: transform .3s var(--bounce); }
.btn:hover svg { transform: scale(1.2) rotate(-8deg); }
.btn--big { min-height: 62px; padding: 10px 30px; font-size: 20px; }
.btn--small { --drop-y: 5px; min-height: 48px; padding: 4px 20px; font-size: 16px; }
.btn--small:hover { --drop-y: 2px; }
.btn--small:active { --drop-y: 0px; transform: translateY(5px); }

/* Uma cor e um ícone para cada ação, em todas as páginas: verde joga, amarelo leva a conhecer,
   rosa fala com a equipe, roxo compartilha e laranja baixa. Branco, sem ícone, é a ação secundária */
.btn--jogar { --c: var(--mint); }
.btn--conhecer { --c: var(--yellow); }
.btn--falar { --c: var(--pink); }
.btn--compartilhar { --c: var(--purple); }
.btn--baixar { --c: var(--orange); }
.btn--white { --c: var(--white); }

/* Cores soltas, de antes das cores por ação. Continuam valendo nas páginas que já usam */
.btn--yellow { --c: var(--yellow); }
.btn--mint { --c: var(--mint); }
.btn--pink { --c: var(--pink); }

/* Etiqueta curta, para idade, nível ou tema */
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 18px; border: 4px solid var(--ink); border-radius: 999px; background: var(--c, var(--white)); color: var(--ink); font-weight: 700; font-size: 15px; box-shadow: 0 6px 0 var(--ink); }

/* Balão de fala do Bit */
.bubble { position: relative; padding: 12px 20px; background: var(--white); color: var(--ink); border: 4px solid var(--ink); border-radius: 24px; font-weight: 600; }
.bubble::before { content: ""; position: absolute; left: -15px; top: 50%; margin-top: -11px; border: 11px solid transparent; border-left: 0; border-right-color: var(--ink); }
.bubble::after { content: ""; position: absolute; left: -8px; top: 50%; margin-top: -8px; border: 8px solid transparent; border-left: 0; border-right-color: var(--white); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } .btn::after { display: none; } }