/* ========================================================================== Blind Pick: tema Hextech Atributos no : data-theme (dark | light), data-motion (reduce), data-palette (cb), data-font (legible) ========================================================================== */ /* Paleta bruta: não muda com o tema. As molduras do jogo usam estes tokens direto. */ :root { --abyss: #010a13; --navy: #091428; --navy-2: #0a1e38; --gold: #c8aa6e; --gold-dark: #785a28; --gold-deep: #463714; --gold-light: #f0e6d2; --teal: #0ac8b9; --teal-deep: #005a82; --teal-ice: #cdfafa; --right: #2fd087; --wrong: #e84057; --text: #d8d1c1; --muted: #a09b8c; --font-display: "Marcellus", "Times New Roman", serif; --font-ui: "Barlow Semi Condensed", "Arial Narrow", system-ui, sans-serif; --radius-s: 2px; --ease-out: cubic-bezier(.2, .8, .2, 1); --gutter: 16px; /* Canais RGB para transparências: rgba(var(--teal-rgb), .5) */ --abyss-rgb: 1, 10, 19; --gold-rgb: 200, 170, 110; --gold-deep-rgb: 70, 55, 20; --gold-light-rgb: 240, 230, 210; --teal-rgb: 10, 200, 185; --teal-deep-rgb: 0, 90, 130; --teal-ice-rgb: 205, 250, 250; --muted-rgb: 160, 155, 140; --right-rgb: 47, 208, 135; --wrong-rgb: 232, 64, 87; --right-ice: #c9f7df; --right-ice-rgb: 201, 247, 223; --right-bright: #8ff0c1; --wrong-ice: #ffd6dc; --wrong-ice-rgb: 255, 214, 220; --wrong-bright: #ff8f9f; --wrong-deep: #8a1d2e; --gold-bright: #f3d58c; /* Marcas de acerto/erro: fontes que têm ✓ e ✗ */ --font-mark: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", "DejaVu Sans", system-ui, sans-serif; /* Acento do modo Campeões */ --violet: #a98bf5; --violet-ice: #ece4ff; --violet-deep: #4b3590; --violet-rgb: 169, 139, 245; /* Keycaps do bônus e selo da tecla (modo Habilidades) */ --key-top: #2c323a; --key-bottom: #181d23; --key-edge: #3a3f47; --key-lip: #0b0f13; --key-idle-top: #161b21; --key-idle-bottom: #10151a; --key-idle-lip: #070a0d; --key-right-top: #1c5a40; --key-right-bottom: #0e2c22; --key-right-lip: #06150f; --key-wrong-top: #5a1c27; --key-wrong-bottom: #2c0e14; --key-wrong-lip: #160609; --key-slot-top: #2b323b; --key-slot-bottom: #151b21; } /* Tokens semânticos, valores do tema escuro. A mesma lista re-declara esses valores dentro das superfícies escuras do tema claro (tooltip, moldura do mosaico, splash, bandeja de teclas, anúncios de sequência e topo do resultado), para tudo lá dentro ficar igual ao tema escuro. */ :root, :root[data-theme="light"] :is(.tooltip, .ability, .ability-frame, .champ, .champ-frame, .keypick, .keycap, .callout, .result-hero) { color-scheme: dark; --page-bg: var(--abyss); --page-art: radial-gradient(ellipse 80% 55% at 50% -12%, rgba(10, 200, 185, .13), transparent 70%), radial-gradient(ellipse 60% 50% at 100% 110%, rgba(200, 170, 110, .09), transparent 70%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0 56 16v32L28 64 0 48V16zM28 64v33' fill='none' stroke='%23c8aa6e' stroke-opacity='.05'/%3E%3C/svg%3E"), linear-gradient(180deg, var(--navy) 0%, var(--abyss) 60%); --ink: var(--text); --ink-strong: var(--gold-light); --ink-hover: #fff; --ink-muted: var(--muted); --accent-ink: var(--gold); --accent-ink-strong: var(--gold-bright); --petrol-ink: var(--teal); --petrol-ink-strong: var(--teal-ice); --petrol-rgb: var(--teal-rgb); --violet-ink: var(--violet); --focus: var(--teal); --line: var(--gold-deep); --line-strong: var(--gold-dark); --line-accent: var(--gold); --control-line: var(--gold-deep); --control-line-hover: var(--gold-dark); --divider: rgba(70, 55, 20, .8); --divider-strong: rgba(70, 55, 20, .9); --well: rgba(1, 10, 19, .6); --row-bg: rgba(1, 10, 19, .5); --panel-bg: linear-gradient(180deg, rgba(9, 20, 40, .86), rgba(1, 10, 19, .94)); --panel-line: var(--gold-dark); --panel-frame: inset 0 0 0 3px rgba(1, 10, 19, .9), inset 0 0 0 4px rgba(70, 55, 20, .9); --panel-drop: 0 30px 70px -30px rgba(0, 0, 0, .9); --card-bg: linear-gradient(180deg, rgba(9, 20, 40, .82), rgba(var(--abyss-rgb), .92)); --medallion-bg: rgba(var(--abyss-rgb), .96); --medallion-ring: var(--gold-deep); --glow-k: 1; --btn-fill-base: linear-gradient(180deg, #1e2328, #141a20); --btn-line: linear-gradient(180deg, var(--gold), var(--gold-dark)); --btn-line-hover: linear-gradient(180deg, var(--gold-light), var(--gold)); --btn-ink: var(--gold-light); --btn-glow: inset 0 0 18px -6px rgba(200, 170, 110, .5), 0 0 18px -8px rgba(200, 170, 110, .7); --play-glow: 0 0 28px -10px rgba(10, 200, 185, .8); --play-glow-hover: inset 0 0 22px -6px rgba(10, 200, 185, .6), 0 0 34px -6px rgba(10, 200, 185, .8); --ghost-fill: linear-gradient(180deg, rgba(1, 10, 19, .7), rgba(1, 10, 19, .7)); --ghost-line: linear-gradient(180deg, var(--gold-dark), var(--gold-deep)); --ghost-ink: var(--gold); --control-glow-on: inset 0 0 16px -6px rgba(200, 170, 110, .7); --icon-btn-glow: 0 0 14px -4px rgba(200, 170, 110, .6); --drain: var(--gold); --title-fill: linear-gradient(180deg, #fbf6ea 10%, var(--gold) 70%, #a88a4e); --score-fill: linear-gradient(180deg, #fbf6ea 10%, var(--gold) 75%); --art-opacity: .4; --art-filter: none; --hint-opacity: .75; --legal-opacity: .8; /* Anúncios: contêiner neutro, sem o dourado das molduras */ --ad-line: rgba(200, 170, 110, .22); --ad-bg: rgba(9, 20, 40, .45); --ad-ink: rgba(160, 155, 140, .6); --ad-label-ink: var(--muted); --ad-label-opacity: .7; --error-line: var(--wrong); --error-bg: rgba(232, 64, 87, .1); --error-ink: #f6c3cb; --pip-idle: rgba(200, 170, 110, .16); --pip-current: var(--teal); --pip-current-glow: 0 0 10px rgba(10, 200, 185, .7); --timer-line: var(--gold-deep); --timer-track: rgba(1, 10, 19, .85); --timer-tick: rgba(1, 10, 19, .95); --timer-tick-minor: rgba(1, 10, 19, .8); --timer-sheen: rgba(255, 255, 255, .28); --timer-a: var(--teal-deep); --timer-b: var(--teal); --timer-warn-a: var(--gold-dark); --timer-warn-b: var(--gold); --timer-danger-a: var(--wrong-deep); --timer-danger-b: var(--wrong); --timer-glow: 12px; --streak-ink: var(--teal); --streak-glow: 0 0 12px rgba(10, 200, 185, .6); --opt-fill: linear-gradient(180deg, rgba(30, 35, 40, .92), rgba(1, 10, 19, .92)); --opt-line: linear-gradient(180deg, rgba(200, 170, 110, .75), rgba(120, 90, 40, .75)); --opt-glow: inset 0 0 20px -8px rgba(200, 170, 110, .55); --opt-base: rgba(1, 10, 19, .92); --right-tint: rgba(var(--right-fill-rgb), .22); --wrong-tint: rgba(var(--wrong-fill-rgb), .22); --slot-fill: radial-gradient(circle at 50% 40%, rgba(10, 30, 56, .9), rgba(1, 10, 19, .95) 70%); --slot-shadow: inset 0 0 0 1px rgba(1, 10, 19, .9), inset 0 0 8px rgba(0, 0, 0, .85); --slot-ring: rgba(var(--abyss-rgb), .9); --badge-bg: var(--abyss); --review-key-shadow: inset 0 -2px 0 rgba(0, 0, 0, .35); /* Acento de cada modo na tela inicial */ --mode-items: var(--gold); --mode-items-ice: var(--gold-light); --mode-items-deep: var(--gold-dark); --mode-items-rgb: var(--gold-rgb); --mode-abilities: var(--teal); --mode-abilities-ice: var(--teal-ice); --mode-abilities-deep: var(--teal-deep); --mode-abilities-rgb: var(--teal-rgb); --mode-champions: var(--violet); --mode-champions-ice: var(--violet-ice); --mode-champions-deep: var(--violet-deep); --mode-champions-rgb: var(--violet-rgb); /* Acerto e erro fora das molduras: texto (-ink), barras e selos (-fill) */ --right-ink: var(--right); --wrong-ink: var(--wrong-bright); --right-fill: var(--right); --wrong-fill: var(--wrong); --right-fill-rgb: var(--right-rgb); --wrong-fill-rgb: var(--wrong-rgb); --right-edge: var(--right-bright); --wrong-edge: var(--wrong-bright); --on-fill: var(--abyss); --mark-ring: rgba(1, 10, 19, .92); } /* Tema claro: pergaminho, tinta azul-marinho, latão e azul-petróleo. Contrastes medidos sobre o fundo mais escuro da página (#ebe1ca). */ :root[data-theme="light"] { color-scheme: light; --page-bg: #ebe1ca; --page-art: radial-gradient(ellipse 80% 55% at 50% -12%, rgba(10, 95, 107, .1), transparent 70%), radial-gradient(ellipse 60% 50% at 100% 110%, rgba(150, 110, 40, .1), transparent 70%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0 56 16v32L28 64 0 48V16zM28 64v33' fill='none' stroke='%236e5220' stroke-opacity='.07'/%3E%3C/svg%3E"), linear-gradient(180deg, #f4ecdc 0%, #ebe1ca 60%); --ink: #2f2a21; --ink-strong: #14253a; --ink-hover: #0a5f6b; --ink-muted: #5d5445; --accent-ink: #7a5716; --accent-ink-strong: #6b4a0f; --petrol-ink: #0a5f6b; --petrol-ink-strong: #064650; --petrol-rgb: 10, 95, 107; --violet-ink: #5b3fb4; --focus: #0a5f6b; --line: #cdb88c; --line-strong: #8f6f33; --line-accent: #6b4a0f; --control-line: #a88a4f; --control-line-hover: #7a5c26; --divider: rgba(143, 111, 51, .35); --divider-strong: rgba(143, 111, 51, .45); --well: rgba(122, 87, 22, .07); --row-bg: rgba(122, 87, 22, .06); --panel-bg: linear-gradient(180deg, rgba(253, 250, 243, .94), rgba(246, 238, 222, .96)); --panel-line: #a88a4f; --panel-frame: inset 0 0 0 3px rgba(253, 250, 243, .96), inset 0 0 0 4px rgba(168, 138, 79, .55); --panel-drop: 0 22px 50px -30px rgba(60, 40, 10, .4); --card-bg: linear-gradient(180deg, rgba(255, 253, 248, .92), rgba(248, 241, 227, .96)); --medallion-bg: #fbf7ee; --medallion-ring: #d9c7a0; --glow-k: .35; --btn-fill-base: linear-gradient(180deg, #fffaf0, #f0e5cd); --btn-line: linear-gradient(180deg, #a8843f, #6f5220); --btn-line-hover: linear-gradient(180deg, #7a5716, #4a3509); --btn-ink: #4a3509; --btn-glow: inset 0 0 16px -8px rgba(122, 87, 22, .35), 0 3px 12px -6px rgba(122, 87, 22, .5); --play-glow: 0 12px 26px -16px rgba(4, 50, 60, .8); --play-glow-hover: inset 0 0 22px -6px rgba(10, 200, 185, .45), 0 14px 30px -14px rgba(4, 50, 60, .85); --ghost-fill: linear-gradient(180deg, rgba(255, 252, 246, .82), rgba(255, 252, 246, .82)); --ghost-line: linear-gradient(180deg, #9a7636, #7a5c26); --ghost-ink: #7a5716; --control-glow-on: inset 0 0 0 1px #6b4a0f, inset 0 0 18px -8px rgba(122, 87, 22, .45); --icon-btn-glow: 0 2px 10px -4px rgba(122, 87, 22, .5); --drain: #7a5716; --title-fill: linear-gradient(180deg, #1d2f45 10%, #6e4f14 72%, #5a3f0d); --score-fill: linear-gradient(180deg, #1d2f45 10%, #6e4f14 75%); --art-opacity: .24; --art-filter: sepia(.3) saturate(.85); --hint-opacity: 1; --legal-opacity: 1; --ad-line: rgba(60, 60, 60, .45); --ad-bg: rgba(60, 60, 60, .05); --ad-ink: rgba(60, 60, 60, .7); --ad-label-ink: #57534c; --ad-label-opacity: 1; --error-line: #b3263a; --error-bg: rgba(179, 38, 58, .08); --error-ink: #8a1d2e; --pip-idle: rgba(122, 87, 22, .3); --pip-current: #0a6470; --pip-current-glow: none; --timer-line: #b69b66; --timer-track: #e4d8bf; --timer-tick: rgba(236, 227, 207, .95); --timer-tick-minor: rgba(236, 227, 207, .8); --timer-sheen: rgba(255, 255, 255, .3); --timer-a: #06505b; --timer-b: #0a7f7b; --timer-warn-a: #6f5220; --timer-warn-b: #9a6c22; --timer-danger-a: #6e1220; --timer-danger-b: var(--wrong-fill); --timer-glow: 0px; --streak-ink: #0a5f6b; --streak-glow: none; --opt-fill: linear-gradient(180deg, #fffcf6, #f5ecda); --opt-line: linear-gradient(180deg, #9a7636, #7a5c26); --opt-glow: inset 0 0 20px -10px rgba(122, 87, 22, .4); --opt-base: #fbf5e8; --right-tint: #dce4d2; --wrong-tint: #f1d8d0; --slot-fill: radial-gradient(circle at 50% 40%, #fffaf0, #efe4cc 70%); --slot-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), inset 0 0 6px rgba(122, 87, 22, .25); --slot-ring: rgba(255, 252, 246, .9); --badge-bg: #fffcf6; --review-key-shadow: inset 0 -2px 0 rgba(10, 60, 70, .16); --mode-items: #7a5716; --mode-items-ice: #4a3509; --mode-items-deep: #a07f42; --mode-items-rgb: 122, 87, 22; --mode-abilities: #0a6470; --mode-abilities-ice: #064650; --mode-abilities-deep: #4f9197; --mode-abilities-rgb: 10, 100, 112; --mode-champions: #5b3fb4; --mode-champions-ice: #3b2786; --mode-champions-deep: #8f7fd0; --mode-champions-rgb: 91, 63, 180; --right-ink: #17663f; --wrong-ink: #a3202f; --right-fill: #1f7a4d; --wrong-fill: #b3263a; --right-fill-rgb: 31, 122, 77; --wrong-fill-rgb: 179, 38, 58; --right-edge: var(--right-fill); --wrong-edge: var(--wrong-fill); --on-fill: #fff; --mark-ring: #fbf5e8; } /* Superfícies escuras no tema claro: fundo opaco (o painel escuro é translúcido e, sobre o pergaminho, ficaria acinzentado) e sombra externa mais leve. A moldura interna é a mesma. */ html:root[data-theme="light"] :is(.tooltip, .ability, .champ) { --panel-bg: linear-gradient(180deg, rgba(9, 20, 40, .86), rgba(1, 10, 19, .94)), var(--abyss); --panel-drop: 0 24px 50px -28px rgba(30, 20, 5, .55); } :where(:root[data-theme="light"]) :where(.tooltip, .ability, .champ, .result-hero) { color: var(--ink); } /* Topo do resultado no tema claro: vira uma moldura escura com a arte recortada dentro. Especificidade zero de propósito: qualquer regra própria de .result-hero vence esta. */ :where(:root[data-theme="light"]) :where(.result-hero) { position: relative; isolation: isolate; overflow: hidden; padding: 28px 16px 22px; border: 1px solid var(--gold-dark); background: linear-gradient(180deg, rgba(9, 20, 40, .9), rgba(1, 10, 19, .96)), var(--abyss); box-shadow: var(--panel-frame); } /* Paleta para daltonismo: azul e laranja (seguros para deuteranopia, protanopia e tritanopia) */ :root[data-palette="cb"] { --right: #4aa8ff; --right-rgb: 74, 168, 255; --right-ice: #d6ebff; --right-ice-rgb: 214, 235, 255; --right-bright: #9fd1ff; --wrong: #f28c28; --wrong-rgb: 242, 140, 40; --wrong-ice: #ffe3c8; --wrong-ice-rgb: 255, 227, 200; --wrong-bright: #ffb36b; --wrong-deep: #8a4a10; --key-right-top: #1c4470; --key-right-bottom: #0e2240; --key-right-lip: #06111f; --key-wrong-top: #5e3510; --key-wrong-bottom: #2e1a07; --key-wrong-lip: #170d03; } :root[data-theme="light"][data-palette="cb"] { --right-ink: #1a55a0; --wrong-ink: #8f3f00; --right-fill: #1f63b8; --wrong-fill: #a34a00; --right-fill-rgb: 31, 99, 184; --wrong-fill-rgb: 163, 74, 0; --right-tint: #d3dbdf; --wrong-tint: #ebd6be; } /* Fonte de leitura fácil (o JS carrega a fonte só quando ativada) */ :root[data-font="legible"] { --font-display: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, sans-serif; --font-ui: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, sans-serif; } /* Registradas para permitir transição e para o JS poder mandar número puro */ @property --reveal { syntax: ""; inherits: true; initial-value: 0; } @property --keypick-ms { syntax: ""; inherits: true; initial-value: 5000; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background-color: var(--page-bg); color: var(--ink); font-family: var(--font-ui); font-size: 1.0625rem; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* Fundo fixo em pseudo-elemento (background-attachment: fixed falha no iOS) */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--page-art); } img { max-width: 100%; display: block; } button { font: inherit; color: inherit; } a { color: var(--petrol-ink); text-underline-offset: 3px; } a:hover { color: var(--petrol-ink-strong); } :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } [hidden] { display: none !important; } /* -------------------------------------------------------------------------- Cabeçalho e rodapé -------------------------------------------------------------------------- */ .site-header { width: 100%; max-width: 1060px; margin: 0 auto; padding: 14px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 16px; } .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-strong); text-decoration: none; } .brand:hover { color: var(--ink-hover); } .brand-mark { width: 32px; height: 32px; flex: none; } .brand-name { font-family: var(--font-display); font-size: 1.2rem; letter-spacing: .02em; } .brand-patch { padding: 2px 7px; border: 1px solid var(--line); background: var(--well); color: var(--accent-ink); font-size: .72rem; font-weight: 600; letter-spacing: .06em; line-height: 1.3; text-transform: uppercase; white-space: nowrap; } .brand-patch:empty { display: none; } @media (max-width: 399px) { .brand-patch { display: none; } } .icon-btn { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--well); color: var(--accent-ink); cursor: pointer; transition: color .2s, border-color .2s, box-shadow .2s; } .icon-btn:hover { color: var(--ink-strong); border-color: var(--line-accent); box-shadow: var(--icon-btn-glow); } .icon-btn svg { width: 20px; height: 20px; } .icon-btn .icon-sound-off { display: none; } .icon-btn[aria-pressed="false"] .icon-sound-on { display: none; } .icon-btn[aria-pressed="false"] .icon-sound-off { display: block; } .site-footer { margin-top: auto; padding: 40px var(--gutter) 32px; text-align: center; color: var(--ink-muted); font-size: .875rem; } .footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; margin-bottom: 16px; } .footer-nav a { color: var(--accent-ink); text-decoration: none; } .footer-nav a:hover { color: var(--ink-strong); text-decoration: underline; } .legal { max-width: 70ch; margin: 8px auto 0; font-size: .8rem; line-height: 1.55; opacity: var(--legal-opacity); } /* -------------------------------------------------------------------------- Layout principal + espaços de anúncio -------------------------------------------------------------------------- */ .layout { width: 100%; max-width: 1060px; margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr); gap: 150px; align-items: start; } .stage { width: 100%; max-width: 680px; margin: 0 auto; min-width: 0; } .side { display: flex; justify-content: center; } /* Coluna lateral só quando cabem o palco (680px), 150px de folga e o anúncio (300px) */ @media (min-width: 1200px) { .site-header, .layout { max-width: calc(680px + 150px + 300px + 2 * var(--gutter)); } .layout { grid-template-columns: minmax(0, 1fr) 300px; } .side { position: sticky; top: 24px; } } .ad-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; } .ad-wrap--top { padding: 16px 0 28px; } .ad-label { font-size: .7rem; letter-spacing: .04em; color: var(--ad-label-ink); opacity: var(--ad-label-opacity); } /* Tamanhos reservados evitam deslocamento de layout (CLS) quando o anúncio carrega */ .ad-slot { position: relative; max-width: 100%; overflow: hidden; } .ad-slot:not(.is-filled) { display: grid; place-items: center; border: 1px dashed var(--ad-line); background: var(--ad-bg); color: var(--ad-ink); font-size: .8rem; } .ad-slot:not(.is-filled)::after { content: attr(data-size); } .ad-slot > ins { display: block; width: 100%; height: 100%; } .ad-slot--top { width: 320px; height: 50px; } .ad-slot--side { width: 300px; height: 250px; } .ad-slot--result { width: 300px; height: 250px; } @media (min-width: 768px) { .ad-slot--top { width: 728px; height: 90px; } } @media (min-width: 1200px) { .ad-slot--side { height: 600px; } } /* -------------------------------------------------------------------------- Componentes base: painel e botões Hextech -------------------------------------------------------------------------- */ .screen--start, .screen--result, .tooltip, .ability, .champ { position: relative; background: var(--panel-bg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--panel-line); box-shadow: var(--panel-frame), var(--panel-drop); } .btn { --btn-border: var(--btn-line); --btn-fill: var(--btn-fill-base); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 10px 22px; border: 2px solid transparent; border-radius: var(--radius-s); background: var(--btn-fill) padding-box, var(--btn-border) border-box; color: var(--btn-ink); font-weight: 600; font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: box-shadow .2s, transform .1s, filter .2s; -webkit-tap-highlight-color: transparent; } .btn:hover:not(:disabled) { --btn-border: var(--btn-line-hover); box-shadow: var(--btn-glow); } .btn:active:not(:disabled) { transform: translateY(1px); } .btn:disabled { cursor: default; filter: grayscale(.6) brightness(.8); } /* Botão principal no estilo "Jogar" do cliente */ .btn--play { --btn-border: linear-gradient(180deg, var(--teal), var(--teal-deep)); --btn-fill: linear-gradient(180deg, #0a323c, #051a22); width: 100%; max-width: 340px; min-height: 62px; font-size: 1.3rem; letter-spacing: .12em; color: var(--teal-ice); overflow: hidden; box-shadow: var(--play-glow); } .btn--play:hover:not(:disabled) { --btn-border: linear-gradient(180deg, var(--teal-ice), var(--teal)); box-shadow: var(--play-glow-hover); } .btn--play::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(205, 250, 250, .22) 50%, transparent 70%); transform: translateX(-120%); pointer-events: none; } .btn--play:hover:not(:disabled)::after { transition: transform .7s var(--ease-out); transform: translateX(120%); } .btn--ghost { --btn-fill: var(--ghost-fill); --btn-border: var(--ghost-line); min-height: 44px; font-size: .9rem; color: var(--ghost-ink); } /* -------------------------------------------------------------------------- Tela inicial -------------------------------------------------------------------------- */ .screen--start { padding: 44px 28px 32px; text-align: center; isolation: isolate; } /* Arte do campeão do dia: dentro da moldura dupla (inset 4px), sem bordas retas nem movimento */ .start-art { position: absolute; inset: 4px 4px auto; height: min(480px, calc(100% - 8px)); z-index: -1; overflow: hidden; pointer-events: none; -webkit-mask-image: radial-gradient(closest-side at 50% 42%, #000 25%, transparent 100%); mask-image: radial-gradient(closest-side at 50% 42%, #000 25%, transparent 100%); } .start-art picture, .result-art picture { display: block; height: 100%; } .start-art img, .result-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; } .start-art img { opacity: var(--art-opacity); filter: var(--art-filter); } .title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(2.5rem, 9vw, 4rem); line-height: 1.05; letter-spacing: .01em; background: var(--title-fill); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Ornamento hextech: linha com losango central */ .title::after { content: ""; display: block; width: 180px; height: 9px; margin: 18px auto 0; background: linear-gradient(45deg, transparent 38%, var(--accent-ink) 38% 62%, transparent 62%) center / 9px 9px no-repeat, linear-gradient(90deg, transparent, var(--line-strong) 30%, var(--line-strong) 45%, transparent 45% 55%, var(--line-strong) 55% 70%, transparent) center / 100% 1px no-repeat; } .lede { max-width: 36ch; margin: 18px auto 28px; font-size: 1.2rem; color: var(--ink); } .rounds { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto 24px; padding: 0; border: 0; } .rounds-legend { width: 100%; text-align: center; margin-bottom: 10px; font-size: .9rem; color: var(--ink-muted); } .rounds-opt { position: relative; cursor: pointer; } .rounds-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .rounds-opt span { display: block; min-width: 128px; padding: 10px 18px; border: 1px solid var(--control-line); background: var(--well); color: var(--ink-muted); font-weight: 600; font-size: 1.05rem; transition: color .2s, border-color .2s, box-shadow .2s; } .rounds-opt:hover span { color: var(--ink-strong); border-color: var(--control-line-hover); } .rounds-opt input:checked + span { color: var(--ink-strong); border-color: var(--line-accent); box-shadow: var(--control-glow-on); } .rounds-opt input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 3px; } /* Seletor de modo: cada card tem o seu acento (Itens em ouro, Habilidades em teal, Campeões em violeta) */ .modes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; max-width: 560px; margin: 0 auto 22px; padding: 0; border: 0; } /* Três cards: em pé lado a lado a partir de 560px; empilhados e mais baixos no mobile */ @media (min-width: 560px) { .modes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 600px; } .modes .mode-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; justify-items: center; align-content: start; row-gap: 6px; padding: 16px 14px 14px; text-align: center; } .modes .mode-glyph { grid-row: auto; margin-bottom: 2px; } .modes .mode-name, .modes .mode-desc { align-self: auto; } } @media (max-width: 559px) { .modes { gap: 8px; } .modes .mode-card { grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; min-height: 64px; padding: 9px 34px 9px 12px; } .modes .mode-glyph { width: 40px; height: 46px; } .modes .mode-glyph svg { width: 23px; height: 23px; } .modes .mode-name { font-size: 1.12rem; } .modes .mode-desc { font-size: .88rem; } } .mode-opt { position: relative; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; } .mode-opt input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; } .mode-card { --accent: var(--mode-items); --accent-ice: var(--mode-items-ice); --accent-deep: var(--mode-items-deep); --accent-rgb: var(--mode-items-rgb); position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 14px; min-height: 76px; height: 100%; padding: 12px 36px 12px 14px; border: 1px solid var(--control-line); background: radial-gradient(120% 90% at 0% 50%, rgba(var(--accent-rgb), .07), transparent 60%), var(--card-bg); text-align: left; transition: border-color .2s, box-shadow .25s; } .mode-card[data-mode="abilities"] { --accent: var(--mode-abilities); --accent-ice: var(--mode-abilities-ice); --accent-deep: var(--mode-abilities-deep); --accent-rgb: var(--mode-abilities-rgb); } .mode-card[data-mode="champions"] { --accent: var(--mode-champions); --accent-ice: var(--mode-champions-ice); --accent-deep: var(--mode-champions-deep); --accent-rgb: var(--mode-champions-rgb); } /* Indicador de seleção: losango vazado que se preenche */ .mode-card::after { content: ""; position: absolute; top: 14px; right: 14px; width: 9px; height: 9px; border: 1px solid var(--line-strong); transform: rotate(45deg); transition: background-color .2s, border-color .2s, box-shadow .2s; } .mode-glyph { position: relative; grid-row: 1 / 3; width: 46px; height: 52px; display: grid; place-items: center; color: var(--accent); isolation: isolate; } .mode-glyph::before, .mode-glyph::after { content: ""; position: absolute; z-index: -1; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); } .mode-glyph::before { inset: 0; background: linear-gradient(180deg, var(--accent-deep), var(--medallion-ring)); transition: filter .25s; } .mode-glyph::after { inset: 2px; background: radial-gradient(circle at 50% 42%, rgba(var(--accent-rgb), .16), var(--medallion-bg) 72%); } .mode-glyph svg { width: 26px; height: 26px; transition: filter .25s; } /* Sem SVG no HTML, o medalhão ganha um losango central próprio */ .mode-glyph:not(:has(svg))::after { background: linear-gradient(45deg, transparent 41%, var(--accent) 41% 59%, transparent 59%) center / 16px 16px no-repeat, radial-gradient(circle at 50% 42%, rgba(var(--accent-rgb), .16), var(--medallion-bg) 72%); } .mode-name { align-self: end; font-family: var(--font-display); font-size: 1.22rem; line-height: 1.2; color: var(--ink-strong); } .mode-desc { align-self: start; font-size: .92rem; line-height: 1.35; color: var(--ink-muted); } .mode-opt:hover .mode-card { border-color: var(--accent-deep); } .mode-opt:hover .mode-card::after { border-color: var(--accent); } .mode-opt input:checked + .mode-card { border-color: var(--accent); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .28), inset 0 0 26px -8px rgba(var(--accent-rgb), .6); } .mode-opt input:checked + .mode-card::after { border-color: var(--accent-ice); background: var(--accent); box-shadow: 0 0 8px rgba(var(--accent-rgb), .8); } .mode-opt input:checked + .mode-card .mode-glyph::before { background: linear-gradient(180deg, var(--accent-ice), var(--accent) 45%, var(--accent-deep)); } .mode-opt input:checked + .mode-card .mode-glyph svg { filter: drop-shadow(0 0 5px rgba(var(--accent-rgb), calc(.75 * var(--glow-k)))); } .mode-opt input:checked + .mode-card .mode-name { color: var(--accent-ice); } .mode-opt input:checked + .mode-card .mode-desc { color: var(--ink); } .mode-opt input:focus-visible + .mode-card { outline: 2px solid var(--focus); outline-offset: 3px; } .screen--start .btn--play { display: flex; margin: 0 auto; } /* Faíscas hextech: uma vez, quando o botão fica pronto para jogar */ .screen--start .btn--play[data-state="play"]::before { content: ""; position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; border-radius: 50%; pointer-events: none; opacity: 0; box-shadow: -146px 4px 0 0 var(--teal), -120px -14px 0 0 var(--teal-ice), -84px 12px 0 1px var(--teal), -46px -20px 0 0 var(--gold-light), -8px 22px 0 0 var(--teal-ice), 10px -24px 0 1px var(--teal), 38px 18px 0 0 var(--teal-ice), 72px -16px 0 1px var(--teal), 118px 10px 0 0 var(--gold-light), 142px -6px 0 0 var(--teal-ice); animation: hex-sparks 1.1s var(--ease-out) .15s both; } .start-record { margin: 16px 0 0; color: var(--accent-ink); font-size: 1rem; } .start-record strong { color: var(--ink-strong); font-variant-numeric: tabular-nums; } .start-error { max-width: 44ch; margin: 16px auto 0; padding: 10px 14px; border-left: 3px solid var(--error-line); background: var(--error-bg); color: var(--error-ink); text-align: left; font-size: .95rem; } .rules { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin: 32px 0 0; padding: 20px 0 0; border-top: 1px solid var(--divider); list-style: none; font-size: .95rem; color: var(--ink-muted); } .rules strong { color: var(--ink-strong); font-weight: 600; } .hint-keys { margin: 12px 0 0; font-size: .85rem; color: var(--ink-muted); opacity: var(--hint-opacity); } @media (hover: none) { .hint-keys { display: none; } } /* -------------------------------------------------------------------------- Tela de jogo: HUD, timer e progresso -------------------------------------------------------------------------- */ .hud { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; margin-bottom: 10px; color: var(--ink-muted); font-size: 1rem; } .hud p { margin: 0; white-space: nowrap; } .hud span { color: var(--ink-strong); font-weight: 700; font-variant-numeric: tabular-nums; } .hud-score { display: inline-flex; align-items: center; gap: 6px; } .hud-score span { font-size: 1.2rem; color: var(--accent-ink-strong); } .pips { display: flex; justify-content: center; gap: 5px; margin: 0; padding: 0; list-style: none; } .pips li { flex: 1 1 0; max-width: 30px; height: 7px; transform: skewX(-24deg); background: var(--pip-idle); transition: background-color .3s, box-shadow .3s; } .pips li.is-current { background: var(--pip-current); box-shadow: var(--pip-current-glow); } .pips li.is-right { background: var(--right-fill); } .pips li.is-wrong { background: var(--wrong-fill); } /* Barra de vida: marca curta a cada segundo e marca inteira a cada 5 segundos */ .timer { --seg: calc(100% / var(--timer-secs, 20)); position: relative; height: 10px; padding: 1px; border: 1px solid var(--timer-line); background: var(--timer-track); overflow: hidden; } .timer::after { content: ""; position: absolute; inset: 1px; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 calc(var(--seg) * 5 - 1px), var(--timer-tick) 0 calc(var(--seg) * 5)), repeating-linear-gradient(90deg, transparent 0 calc(var(--seg) - 1px), var(--timer-tick-minor) 0 var(--seg)) top / 100% 50% no-repeat; } .timer-fill { height: 100%; background: linear-gradient(180deg, var(--timer-sheen), transparent 55%), linear-gradient(90deg, var(--timer-a), var(--timer-b)); box-shadow: 0 0 var(--timer-glow) var(--timer-b); transform-origin: left center; will-change: transform; } .timer-fill.is-warn { background: linear-gradient(180deg, var(--timer-sheen), transparent 55%), linear-gradient(90deg, var(--timer-warn-a), var(--timer-warn-b)); box-shadow: 0 0 var(--timer-glow) var(--timer-warn-b); } .timer-fill.is-danger { background: linear-gradient(180deg, var(--timer-sheen), transparent 55%), linear-gradient(90deg, var(--timer-danger-a), var(--timer-danger-b)); box-shadow: 0 0 var(--timer-glow) var(--timer-danger-b); } .streak { min-height: 1.6em; margin: 8px 0 10px; text-align: center; font-size: .95rem; font-weight: 600; color: var(--streak-ink); text-shadow: var(--streak-glow); } /* -------------------------------------------------------------------------- Tooltip do item (a pergunta) -------------------------------------------------------------------------- */ .tooltip { padding: 20px 22px 18px; transition: box-shadow .35s, border-color .35s; } .tooltip.is-entering, .ability.is-entering, .champ.is-entering { animation: tip-in .32s var(--ease-out) both; } .tooltip.is-right, .ability.is-right, .champ.is-right { border-color: var(--right); box-shadow: inset 0 0 0 3px rgba(1, 10, 19, .9), inset 0 0 0 4px rgba(var(--right-rgb), .35), 0 0 40px -10px rgba(var(--right-rgb), .6); } .tooltip.is-wrong, .ability.is-wrong, .champ.is-wrong { border-color: var(--wrong); box-shadow: inset 0 0 0 3px rgba(1, 10, 19, .9), inset 0 0 0 4px rgba(var(--wrong-rgb), .35), 0 0 40px -10px rgba(var(--wrong-rgb), .6); animation: shake .36s ease-in-out; } .tip-head { position: relative; display: flex; align-items: center; gap: 16px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid rgba(70, 55, 20, .9); } .tip-icon-frame { position: relative; flex: none; width: 68px; height: 68px; border: 2px solid transparent; background: linear-gradient(var(--navy), var(--navy)) padding-box, linear-gradient(180deg, var(--gold), var(--gold-dark)) border-box; overflow: hidden; } .tip-icon { width: 100%; height: 100%; object-fit: cover; } .tooltip.is-revealed .tip-icon { transition: filter .6s var(--ease-out), transform .6s var(--ease-out); } .tip-icon.is-hidden { filter: blur(9px) saturate(1.3) brightness(.75); transform: scale(1.4); } .tip-icon.is-broken { opacity: 0; } .tip-icon-mark { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: 2.2rem; color: var(--gold-light); text-shadow: 0 0 14px var(--teal), 0 0 2px var(--abyss); transition: opacity .35s; } .tooltip.is-revealed .tip-icon-mark { opacity: 0; } .tooltip.is-revealed .tip-icon-frame { animation: icon-pop .55s var(--ease-out); } .tooltip.is-right .tip-icon-frame { background: linear-gradient(var(--navy), var(--navy)) padding-box, linear-gradient(180deg, var(--right-bright), var(--right)) border-box; } /* Compra na loja: anel dourado em box-shadow (o frame corta o que estiver dentro dele) */ .tooltip.is-right .tip-icon-frame { animation: icon-pop .55s var(--ease-out), shop-ring .9s var(--ease-out) both; } :root[data-motion="reduce"] .tooltip.is-right .tip-icon-frame { animation: none; box-shadow: 0 0 0 2px rgba(200, 170, 110, .75); } .tip-title { min-width: 0; } .tip-name { margin: 0 0 4px; font-family: var(--font-display); font-weight: 400; font-size: 1.45rem; line-height: 1.2; color: var(--gold-light); } .tip-name-hidden { font-family: var(--font-ui); font-style: italic; font-size: 1.15rem; color: var(--muted); } .tip-name-real { display: inline-block; animation: name-in .45s var(--ease-out) both; } .tip-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 0; font-size: 1rem; } .tip-cost { position: relative; display: inline-flex; align-items: center; gap: 6px; color: #f3d58c; font-weight: 700; font-variant-numeric: tabular-nums; } .coin { width: 16px; height: 16px; } /* Moedas saltam do custo só para cima e para a esquerda, longe do anúncio lateral */ .coin-burst { position: absolute; left: 3px; top: 50%; width: 10px; height: 10px; margin-top: -5px; pointer-events: none; z-index: 2; } .coin-burst i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--gold-dark); background: radial-gradient(circle at 35% 35%, #fbf0c8, #c8aa6e 60%, #785a28); opacity: 0; } .coin-burst i:nth-child(1) { --dx: -10px; --dy: -30px; } .coin-burst i:nth-child(2) { --dx: -24px; --dy: -22px; animation-delay: 70ms; } .coin-burst i:nth-child(3) { --dx: 0px; --dy: -40px; animation-delay: 140ms; } .tooltip.is-right .coin-burst i { animation-name: coin-pop; animation-duration: .8s; animation-timing-function: var(--ease-out); animation-fill-mode: both; } :root[data-motion="reduce"] .tooltip.is-right .coin-burst i { animation: none; opacity: 0; } .tip-tier { color: var(--muted); font-size: .9rem; } .gain { position: absolute; top: 2px; right: 0; font-family: var(--font-display); font-size: 1.6rem; color: var(--right); text-shadow: 0 0 16px rgba(var(--right-rgb), .7); opacity: 0; pointer-events: none; } .gain.is-showing { animation: gain-up 1.3s var(--ease-out) forwards; } /* gain-up termina em opacity 0: encurtada pela regra global, o "+pts" nunca apareceria */ :root[data-motion="reduce"] .gain.is-showing { animation: none; opacity: 1; } @media (max-width: 559px) { .tip-title { padding-right: 4.75rem; } } /* Receita (componentes do item): espaço reservado desde o início da rodada, só a partir de 560px */ .tip-recipe { display: none; } @media (min-width: 560px) { .tip-recipe { display: flex; flex: none; align-self: flex-end; justify-content: flex-end; gap: 4px; width: 108px; height: 24px; margin-left: auto; } } .tip-recipe img { width: 24px; height: 24px; border: 1px solid var(--gold-dark); animation: fade-in .3s ease both; } .tooltip:not(.is-revealed) .tip-recipe { visibility: hidden; } .tip-body { font-size: 1.05rem; line-height: 1.6; overflow-wrap: anywhere; } .tip-plain { margin: 14px 0 0; font-style: italic; font-size: .95rem; color: var(--muted); } .tip-plain:empty { display: none; } /* Tags do Data Dragon convertidas em spans .t-* */ .t-stats { display: block; } .t-stats:not(:last-child) { margin-bottom: .7em; padding-bottom: .7em; border-bottom: 1px solid rgba(70, 55, 20, .6); } .t-attention { color: var(--gold-light); font-weight: 700; } .t-passive, .t-unique, .t-spellname { color: var(--gold); font-weight: 700; } .t-active { color: var(--teal); font-weight: 700; } .t-keyword, .t-keywordmajor, .t-keywordstealth { color: var(--gold-light); font-weight: 600; } .t-magicdamage, .t-scaleap { color: #7fb4ff; } .t-physicaldamage, .t-scalead, .t-onhit { color: #ff9a4d; } .t-truedamage { color: #fff; } .t-healing, .t-health, .t-scalehealth { color: #6ad67a; } .t-shield { color: #b8cbe8; } .t-speed { color: #e0c6ff; } .t-status { color: #b58cff; } .t-scalemana { color: #52c8ff; } .t-scalearmor { color: #e6bb5a; } .t-scalemr { color: #b5a6ff; } .t-attackspeed { color: #f5d27a; } .t-lifesteal, .t-omnivamp { color: #ec6b7c; } .t-gold { color: #f3d58c; } .t-raritylegendary, .t-raritymythic, .t-raritygeneric { color: var(--gold); } .t-rules, .t-flavortext { display: inline-block; font-style: italic; font-size: .92em; color: var(--muted); } .t-li { display: block; padding-left: 14px; position: relative; } .t-li::before { content: ""; position: absolute; left: 2px; top: .65em; width: 5px; height: 5px; background: var(--gold-dark); transform: rotate(45deg); } .t-mask { display: inline-block; padding: 0 6px; background: rgba(200, 170, 110, .18); color: var(--gold); letter-spacing: .1em; } .t-var { text-decoration: underline dotted; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: help; } /* Anúncio de sequência: nasce e morre dentro da tooltip */ .callout { position: absolute; left: 0; right: 0; top: 50%; display: grid; justify-items: center; gap: 2px; padding: 16px 8px; overflow: hidden; transform: translateY(-50%); pointer-events: none; z-index: 3; opacity: 0; visibility: hidden; } .callout-text { max-width: 100%; padding: 6px 32px; font-family: var(--font-display); font-size: clamp(1.7rem, 7.5vw, 3rem); line-height: 1.05; letter-spacing: .06em; text-align: center; color: var(--gold-light); -webkit-text-stroke: 1px var(--gold-dark); text-shadow: 0 0 18px rgba(200, 170, 110, .55), 0 2px 0 var(--abyss); background: linear-gradient(90deg, transparent, rgba(1, 10, 19, .88) 18% 82%, transparent); } .callout-sub { padding: 2px 14px; background: rgba(1, 10, 19, .8); color: var(--gold); font-size: .9rem; font-weight: 600; letter-spacing: .04em; } .callout-sub:empty { display: none; } .callout[data-tier="first"] .callout-text { color: #ffe1c2; -webkit-text-stroke-color: #8a3a1d; text-shadow: 0 0 18px rgba(255, 140, 70, .5), 0 2px 0 var(--abyss); } .callout[data-tier="top"] .callout-text { color: var(--teal-ice); -webkit-text-stroke-color: var(--teal-deep); text-shadow: 0 0 18px rgba(10, 200, 185, .6), 0 2px 0 var(--abyss); } .callout[data-tier="shutdown"] .callout-text { color: var(--wrong-ice); -webkit-text-stroke-color: var(--wrong-deep); text-shadow: 0 0 18px rgba(var(--wrong-rgb), .5), 0 2px 0 var(--abyss); } .callout[data-tier="shutdown"] .callout-sub { color: var(--wrong-bright); } .callout.is-showing { visibility: visible; animation: callout 1.5s var(--ease-out) forwards; } .callout.is-showing .callout-text { animation: callout-slam .45s var(--ease-out) both; } :root[data-motion="reduce"] .callout.is-showing, :root[data-motion="reduce"] .callout.is-showing .callout-text { animation: none; } :root[data-motion="reduce"] .callout.is-showing { opacity: 1; } /* -------------------------------------------------------------------------- Opções de resposta -------------------------------------------------------------------------- */ .options:focus { outline: none; } .result-title:focus { outline: none; } .options { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 18px; } @media (min-width: 560px) { .options { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .opt { --btn-border: var(--opt-line); --btn-fill: var(--opt-fill); position: relative; display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 10px 14px; border: 2px solid transparent; border-radius: var(--radius-s); background: var(--btn-fill) padding-box, var(--btn-border) border-box; color: var(--ink-strong); font-size: 1.08rem; font-weight: 500; line-height: 1.25; text-align: left; cursor: pointer; transition: box-shadow .2s, transform .1s, opacity .3s; -webkit-tap-highlight-color: transparent; } .opt:hover:not(:disabled) { --btn-border: var(--btn-line-hover); box-shadow: var(--opt-glow); } .opt:active:not(:disabled) { transform: translateY(1px); } .opt:disabled { cursor: default; } /* Slot vazio do inventário, com a tecla no canto como no atalho de item */ .opt-key { flex: none; width: 30px; height: 30px; display: grid; place-items: end; padding: 0 3px 1px 0; border: 1px solid var(--line-strong); background: var(--slot-fill); box-shadow: var(--slot-shadow); color: var(--accent-ink); font-size: .72rem; font-weight: 700; line-height: 1; transition: border-color .2s, color .2s; } .opt:hover:not(:disabled) .opt-key { border-color: var(--line-accent); color: var(--ink-strong); } .opt-icon { flex: none; width: 30px; height: 30px; border: 1px solid var(--line-strong); animation: fade-in .3s ease both; } .opt-name { min-width: 0; overflow-wrap: anywhere; } .opt.is-correct { --btn-border: linear-gradient(180deg, var(--right-edge), var(--right-fill)); --btn-fill: linear-gradient(180deg, var(--right-tint), var(--opt-base)); box-shadow: 0 0 22px -8px rgba(var(--right-fill-rgb), .9); } .opt.is-wrong { --btn-border: linear-gradient(180deg, var(--wrong-edge), var(--wrong-fill)); --btn-fill: linear-gradient(180deg, var(--wrong-tint), var(--opt-base)); } .opt.is-dim { opacity: .45; } .after { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; margin-top: 16px; visibility: hidden; } .after.is-visible { visibility: visible; animation: fade-in .25s ease both; } /* Duas linhas sempre reservadas (mensagem + detalhe dos pontos): nada se desloca ao revelar */ .after-msg { display: grid; gap: 2px; min-width: 0; min-height: calc(1.05rem * 1.5 + 24px); margin: 0; font-size: 1.05rem; font-weight: 600; } .after-msg.is-right { color: var(--right-ink); } .after-msg.is-wrong { color: var(--wrong-ink); } .after-pts { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 12px; min-height: 22px; font-size: .88rem; font-weight: 500; color: var(--ink-muted); } .pts-part { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; } .pts-part b { color: var(--ink-strong); font-weight: 700; font-variant-numeric: tabular-nums; } .pts-icon { flex: none; width: 20px; height: 20px; border: 1px solid var(--line-strong); } .btn--next { flex: none; overflow: hidden; } /* Barra que esvazia até o avanço automático para a próxima rodada */ .btn--next::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--drain); transform-origin: left center; transform: scaleX(0); } .btn--next.is-counting::before { animation: drain var(--advance, 3s) linear forwards; } /* -------------------------------------------------------------------------- Modo Habilidades: o ícone "sai da recarga" (mosaico P&B → nítido e colorido) -------------------------------------------------------------------------- */ .ability { --frame: 192px; --ring-w: 6px; display: grid; grid-template-columns: var(--frame) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto minmax(0, 1fr) auto; grid-template-areas: "frame ." "frame name" "frame info" "frame ." "keys keys"; column-gap: 24px; padding: 20px 22px 18px; /* Contém qualquer efeito dentro do card, longe dos anúncios */ overflow: hidden; transition: box-shadow .35s, border-color .35s; } .ability-stage { display: contents; } /* Moldura chanfrada: o anel é o fundo e enche em sentido horário com --reveal. Tudo fica recortado aqui dentro: sem brilho para fora nem escala acima de 1. */ .ability-frame { --ring: var(--teal); --ring-ice: var(--teal-ice); --ring-rgb: var(--teal-rgb); --c: calc(var(--frame) * .13); grid-area: frame; position: relative; z-index: 1; width: var(--frame); height: var(--frame); overflow: hidden; clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c)); background: linear-gradient(135deg, rgba(var(--gold-light-rgb), .28), transparent 34% 66%, rgba(var(--abyss-rgb), .45)), conic-gradient( rgba(var(--ring-rgb), .5) 0deg, var(--ring) calc(var(--reveal) * 1turn - 28deg), var(--ring-ice) calc(var(--reveal) * 1turn), var(--gold-dark) calc(var(--reveal) * 1turn), var(--gold-deep) 1turn); } .ability.is-right .ability-frame { --ring: var(--right); --ring-ice: var(--right-ice); --ring-rgb: var(--right-rgb); } .ability.is-wrong .ability-frame { --ring: var(--wrong); --ring-ice: var(--wrong-ice); --ring-rgb: var(--wrong-rgb); } /* Na revelação a cor completa mesmo se o jogador respondeu cedo */ .ability.is-revealed .ability-frame { --reveal: 1 !important; transition: --reveal .7s var(--ease-out); background: linear-gradient(135deg, rgba(var(--gold-light-rgb), .28), transparent 34% 66%, rgba(var(--abyss-rgb), .45)), linear-gradient(180deg, var(--ring-ice), var(--ring) 45%, rgba(var(--ring-rgb), .7)); } .ability-canvas, .ability-frame::after, .ability-shine { --c-in: calc(var(--frame) * .13 - var(--ring-w) * .4142); position: absolute; top: var(--ring-w); left: var(--ring-w); width: calc(100% - 2 * var(--ring-w)); height: calc(100% - 2 * var(--ring-w)); clip-path: polygon(var(--c-in) 0, calc(100% - var(--c-in)) 0, 100% var(--c-in), 100% calc(100% - var(--c-in)), calc(100% - var(--c-in)) 100%, var(--c-in) 100%, 0 calc(100% - var(--c-in)), 0 var(--c-in)); pointer-events: none; } .ability-canvas { display: block; background: var(--navy); image-rendering: pixelated; filter: grayscale(calc(1 - var(--reveal))) contrast(calc(1.15 - var(--reveal) * .15)) brightness(calc(.92 + var(--reveal) * .08)); } .ability.is-revealed .ability-canvas { image-rendering: auto; } /* Lente holográfica: tinta teal, scanlines e grade hex; some a cada passo de nitidez. O brilho que cresce com --reveal é só interno (inset). */ .ability-frame::after { content: ""; z-index: 1; background: repeating-linear-gradient(180deg, rgba(var(--abyss-rgb), .32) 0 1px, transparent 1px 4px), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='34' viewBox='0 0 20 34'%3E%3Cpath d='M10 0 20 5.7v11.5L10 23 0 17.2V5.7zM10 23v11' fill='none' stroke='%230ac8b9' stroke-opacity='.2'/%3E%3C/svg%3E"), radial-gradient(closest-side, transparent 62%, rgba(var(--abyss-rgb), .45)), linear-gradient(180deg, rgba(var(--teal-rgb), .1), rgba(var(--teal-deep-rgb), .14)); box-shadow: inset 0 0 calc(4px + var(--reveal) * 22px) rgba(var(--ring-rgb), calc(.18 + var(--reveal) * .5)); opacity: .8; transition: opacity .5s var(--ease-out); } .ability-frame[data-step="1"]::after { opacity: .64; } .ability-frame[data-step="2"]::after { opacity: .5; } .ability-frame[data-step="3"]::after { opacity: .36; } .ability-frame[data-step="4"]::after { opacity: .22; } .ability-frame[data-step="5"]::after { opacity: .1; } .ability-frame[data-step="6"]::after, .ability.is-revealed .ability-frame::after { opacity: 1; background: none; box-shadow: inset 0 0 18px rgba(var(--ring-rgb), .45); } .ability-shine { z-index: 2; overflow: hidden; } .ability-shine::before, .ability-shine::after { content: ""; position: absolute; left: 0; right: 0; opacity: 0; } /* Varredura de scanner a cada passo (dura o mesmo que o .is-step) */ .ability-shine::after { top: 0; height: 28%; background: linear-gradient(180deg, transparent, rgba(var(--ring-rgb), .3) 70%, rgba(var(--teal-ice-rgb), .55) 96%, transparent); } .ability-frame.is-step .ability-shine::after { animation: step-scan .25s linear; } /* Faixa de luz diagonal, uma vez, na revelação */ .ability-shine::before { top: -20%; bottom: -20%; background: linear-gradient(105deg, transparent 30%, rgba(240, 250, 250, .1) 42%, rgba(240, 250, 250, .55) 50%, rgba(240, 250, 250, .1) 58%, transparent 70%); transform: translateX(-110%); } .ability.is-revealed .ability-shine::before { animation: reveal-shine .9s var(--ease-out) .08s; } /* Pulso de "nitidez subiu": só brilho, sem escala */ .ability-frame.is-step { animation: step-flash .25s ease-out; } /* Selo da tecla: keycap pequeno, centralizado na base da moldura */ .ability-slot { position: absolute; z-index: 3; left: 50%; bottom: calc(var(--ring-w) + 8px); min-width: 38px; height: 34px; margin-left: -19px; padding: 0 8px; display: grid; place-items: center; border: 1px solid var(--gold); border-radius: 7px; background: linear-gradient(180deg, var(--key-slot-top), var(--key-slot-bottom) 70%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -3px 0 rgba(0, 0, 0, .55); color: var(--gold-light); font-family: var(--font-display); font-size: 1.2rem; line-height: 1; opacity: 0; transform: translateY(14px); transition: opacity .3s, transform .45s cubic-bezier(.3, 1.5, .5, 1); } .ability-slot.is-shown { opacity: 1; transform: none; } /* Nome da habilidade e dica */ .ability-name { grid-area: name; min-width: 0; margin: 0 0 6px; padding-right: 4.75rem; font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; line-height: 1.2; color: var(--gold-light); overflow-wrap: anywhere; } /* O nome real chega junto com o selo da tecla, depois do bônus (revealSpell) */ .ability:has(.ability-slot.is-shown) .ability-name { animation: name-in .45s var(--ease-out) both; } .ability-name-hidden { display: inline-flex; align-items: center; gap: .55em; font-family: var(--font-ui); font-style: italic; font-size: 1.15rem; color: var(--muted); } .ability-name-hidden::before { content: ""; flex: none; width: .5em; height: .5em; border: 1px solid var(--teal); transform: rotate(45deg); box-shadow: 0 0 6px rgba(var(--teal-rgb), .6); } /* Dica e retrato ocupam a mesma célula: um sai quando o outro entra (sem salto) */ .ability-hint, .ability-champ { grid-area: info; min-width: 0; } .ability-hint { align-self: start; max-width: 40ch; margin: 0; font-size: .98rem; line-height: 1.5; color: var(--muted); transition: opacity .25s, visibility 0s .25s; } .ability.is-revealed .ability-hint { opacity: 0; visibility: hidden; } .ability-champ { align-self: start; display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 12px; min-height: 60px; opacity: 0; visibility: hidden; transform: translateX(-16px); transition: opacity .35s, transform .5s var(--ease-out), visibility 0s .5s; } .ability-champ.is-visible { opacity: 1; visibility: visible; transform: none; transition: opacity .35s .1s, transform .5s var(--ease-out) .1s, visibility 0s; } .ability-champ-icon { grid-row: 1 / 3; width: 56px; height: 56px; border: 2px solid transparent; background: linear-gradient(var(--navy), var(--navy)) padding-box, linear-gradient(180deg, var(--gold), var(--gold-dark)) border-box; } .ability.is-right .ability-champ-icon { background: linear-gradient(var(--navy), var(--navy)) padding-box, linear-gradient(180deg, var(--right-bright), var(--right)) border-box; } .ability-champ-name { align-self: end; font-family: var(--font-display); font-size: 1.3rem; line-height: 1.2; color: var(--gold-light); overflow-wrap: anywhere; } .ability-champ-title { align-self: start; font-size: .95rem; line-height: 1.35; color: var(--muted); } /* "+pts" e anúncio de sequência dentro do card; o anúncio fica centrado na faixa da moldura para nunca cobrir o bônus da tecla, que é respondido nesse mesmo 1,5 s */ .ability .gain { top: 14px; right: 18px; z-index: 4; } .ability .callout { top: calc(20px + var(--frame) / 2); } /* -------------------------------------------------------------------------- Bônus "Qual tecla?": teaser apagado desde o início (mesma altura), acende em .is-visible -------------------------------------------------------------------------- */ .keypick { --key: 48px; --key-gap: 8px; grid-area: keys; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title keys"; align-items: center; column-gap: 16px; margin-top: 16px; padding: 10px 14px 14px; border: 1px solid rgba(var(--gold-deep-rgb), .9); background: rgba(var(--abyss-rgb), .55); transition: border-color .3s, background-color .3s, box-shadow .3s; } .keypick.is-visible { border-color: var(--teal-deep); background-color: rgba(var(--teal-deep-rgb), .16); box-shadow: inset 0 0 0 1px rgba(var(--abyss-rgb), .8), inset 0 0 24px -10px rgba(var(--teal-rgb), .6); animation: keypick-in .42s var(--ease-out) both; } .ability.is-wrong .keypick:not(.is-visible) { opacity: .5; } /* Lampejo interno único quando o bônus abre */ .keypick::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 20%, rgba(var(--teal-ice-rgb), .28) 50%, transparent 80%); opacity: 0; transform: translateX(-100%); } .keypick.is-visible::after { animation: keypick-sweep .6s var(--ease-out) .08s; } .keypick-title { grid-area: title; margin: 0; font-size: 1rem; font-weight: 600; line-height: 20px; color: var(--muted); transition: color .3s; } .keypick-title b { display: inline-block; margin-left: 6px; padding: 0 7px; border: 1px solid var(--gold-deep); color: var(--muted); font-variant-numeric: tabular-nums; transition: color .3s, border-color .3s, background-color .3s; } .keypick.is-visible .keypick-title { color: var(--teal-ice); } .keypick.is-visible .keypick-title b { border-color: var(--gold-dark); background-color: rgba(var(--gold-rgb), .14); color: var(--gold-bright); } .keypick-keys { grid-area: keys; display: flex; gap: var(--key-gap); } .keypick-keys:focus { outline: none; } /* Tecla de teclado mecânico: topo côncavo, lábio frontal e filete teal (não é o slot do HUD). No teaser ela fica rebaixada e sem cor; o lábio é box-shadow, então a altura não muda. */ .keycap { position: relative; flex: none; width: var(--key); height: var(--key); padding: 0; display: grid; place-items: center; border: 1px solid rgba(var(--muted-rgb), .16); border-radius: 9px; background: linear-gradient(180deg, var(--key-idle-top), var(--key-idle-bottom)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 1px 0 var(--key-idle-lip); color: rgba(var(--muted-rgb), .55); font-family: var(--font-display); font-size: 1.35rem; line-height: 1; transform: translateY(3px); cursor: default; transition: transform .2s var(--ease-out), box-shadow .2s, border-color .2s, background-color .2s, opacity .25s, color .2s; -webkit-tap-highlight-color: transparent; } .keypick.is-visible .keycap { border-color: var(--key-edge); background: radial-gradient(ellipse 70% 55% at 50% 38%, rgba(255, 255, 255, .09), transparent 70%), linear-gradient(180deg, var(--key-top), var(--key-bottom)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -1px 0 rgba(var(--teal-rgb), .45), 0 4px 0 var(--key-lip), 0 5px 0 rgba(var(--teal-rgb), .25); color: var(--gold-light); transform: none; cursor: pointer; animation: key-rise .34s var(--ease-out) backwards; } .keypick.is-visible .keycap:nth-child(2) { animation-delay: 40ms; } .keypick.is-visible .keycap:nth-child(3) { animation-delay: 80ms; } .keypick.is-visible .keycap:nth-child(4) { animation-delay: 120ms; } .keypick.is-visible .keycap:nth-child(5) { animation-delay: 160ms; } .keypick.is-visible .keycap:hover:not(:disabled) { border-color: var(--teal); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(var(--teal-rgb), .7), inset 0 0 14px -4px rgba(var(--teal-rgb), .6), 0 4px 0 var(--key-lip), 0 5px 0 rgba(var(--teal-rgb), .45); } .keypick.is-visible .keycap:active:not(:disabled) { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 -1px 0 rgba(var(--teal-rgb), .45), 0 1px 0 var(--key-lip), 0 2px 0 rgba(var(--teal-rgb), .25); } .keypick.is-visible .keycap:disabled { cursor: default; } .keycap:focus-visible { outline-offset: 4px; } .keypick.is-visible .keycap.is-correct { border-color: var(--right); background: radial-gradient(ellipse 70% 55% at 50% 38%, rgba(var(--right-ice-rgb), .25), transparent 70%), linear-gradient(180deg, var(--key-right-top), var(--key-right-bottom)); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 16px -4px rgba(var(--right-rgb), .9), 0 4px 0 var(--key-right-lip), 0 5px 0 rgba(var(--right-rgb), .6); animation: key-confirm .4s var(--ease-out); } .keypick.is-visible .keycap.is-wrong { border-color: var(--wrong); background: radial-gradient(ellipse 70% 55% at 50% 38%, rgba(var(--wrong-ice-rgb), .16), transparent 70%), linear-gradient(180deg, var(--key-wrong-top), var(--key-wrong-bottom)); color: var(--wrong-ice); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 4px 0 var(--key-wrong-lip), 0 5px 0 rgba(var(--wrong-rgb), .5); animation: shake .3s ease-in-out; } .keypick.is-visible .keycap.is-dim { opacity: .38; } /* Barra do bônus colada na base da bandeja (sem altura própria no fluxo). O JS controla o scaleX; a cor esquenta sozinha ao longo de --keypick-ms. */ .keypick-timer { position: absolute; left: 14px; right: 14px; bottom: 5px; height: 4px; background: rgba(var(--abyss-rgb), .9); box-shadow: 0 0 0 1px rgba(var(--gold-deep-rgb), .9); overflow: hidden; } .keypick-fill { height: 100%; background-color: var(--teal); background-image: linear-gradient(180deg, rgba(255, 255, 255, .35), transparent 60%); transform-origin: left center; will-change: transform; opacity: 0; } .keypick.is-visible .keypick-fill { opacity: 1; animation: keypick-heat calc(var(--keypick-ms) * 1ms) linear both; } .keypick.is-done .keypick-fill { animation-play-state: paused; opacity: .5; } /* Alternativas com retrato: o número vira um selo no canto do retrato */ .opt.opt--champ { gap: 12px; } .opt-champ { flex: none; width: 34px; height: 34px; border: 1px solid var(--line-strong); box-shadow: 0 0 0 1px var(--slot-ring); transition: border-color .2s, filter .3s; } .opt-champ.is-broken { visibility: hidden; } .opt--champ .opt-key { position: absolute; z-index: 1; left: 38px; top: calc(50% + 5px); width: auto; min-width: 17px; height: 17px; padding: 0 3px; place-items: center; border-color: var(--line-strong); background: var(--badge-bg); box-shadow: none; font-size: .7rem; } .opt--champ:hover:not(:disabled) .opt-champ { border-color: var(--line-accent); } .opt--champ.is-correct .opt-champ, .opt--champ.is-correct .opt-key { border-color: var(--right-fill); } .opt--champ.is-wrong .opt-champ, .opt--champ.is-wrong .opt-key { border-color: var(--wrong-fill); } .opt--champ.is-dim .opt-champ { filter: grayscale(.85); } @media (min-width: 560px) and (max-width: 767px) { .ability { --frame: 168px; } } /* Bandeja empilhada até caber título e teclas na mesma linha */ @media (max-width: 639px) { .keypick { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "keys"; justify-items: center; row-gap: 6px; padding: 8px 10px 14px; text-align: center; } .keypick-title { font-size: .92rem; line-height: 18px; } .keypick-timer { left: 10px; right: 10px; } } /* Mobile: moldura ao lado do texto para as 4 alternativas caberem na primeira dobra */ @media (max-width: 559px) { .ability { --frame: 124px; column-gap: 14px; padding: 14px 14px 12px; } .ability-name { padding-right: 0; margin-bottom: 4px; font-size: 1.18rem; } .ability-name-hidden { font-size: 1.02rem; } .ability-hint { font-size: .9rem; line-height: 1.4; } .ability-champ { grid-template-columns: 44px minmax(0, 1fr); column-gap: 10px; min-height: 48px; } .ability-champ-icon { width: 44px; height: 44px; } .ability-champ-name { font-size: 1.1rem; } .ability-champ-title { font-size: .85rem; line-height: 1.3; } /* "+pts" sobre a moldura: a coluna do texto é estreita demais para dividir com ele */ .ability .gain { top: 38px; left: 14px; right: auto; width: var(--frame); text-align: center; -webkit-text-stroke: 1px rgba(var(--abyss-rgb), .85); text-shadow: 0 2px 0 var(--abyss), 0 0 4px var(--abyss), 0 0 10px rgba(var(--abyss-rgb), .9), 0 0 18px rgba(var(--right-rgb), .6); } .ability .callout { top: calc(14px + var(--frame) / 2); padding: 6px 4px; } .ability .callout-text { padding: 4px 20px; font-size: 1.55rem; } .ability .callout-sub { font-size: .8rem; } .keypick { --key: 44px; --key-gap: 6px; margin-top: 12px; } #screen-game[data-mode="abilities"] .options { gap: 8px; margin-top: 12px; } /* Até 4 partes de pontos podem quebrar em duas linhas: reservadas para não deslocar nada abaixo */ #screen-game[data-mode="abilities"] .after-msg { min-height: calc(1.05rem * 1.5 + 50px); } .opt.opt--champ { min-height: 52px; padding-top: 7px; padding-bottom: 7px; } } @media (max-width: 379px) { .ability { --frame: 116px; } } :root[data-motion="reduce"] .ability-shine { display: none; } :root[data-motion="reduce"] .ability-frame.is-step, :root[data-motion="reduce"] .ability.is-wrong, :root[data-motion="reduce"] .ability:has(.ability-slot.is-shown) .ability-name, :root[data-motion="reduce"] .keypick.is-visible, :root[data-motion="reduce"] .keypick.is-visible::after, :root[data-motion="reduce"] .keypick.is-visible .keycap, :root[data-motion="reduce"] .keypick.is-visible .keycap.is-correct, :root[data-motion="reduce"] .keypick.is-visible .keycap.is-wrong, :root[data-motion="reduce"] .keypick.is-visible .keypick-fill { animation: none; } :root[data-motion="reduce"] .ability-champ, :root[data-motion="reduce"] .ability-champ.is-visible, :root[data-motion="reduce"] .ability-slot { transform: none; } /* -------------------------------------------------------------------------- Modo Campeões: a splash vista de perto, com a câmera se afastando -------------------------------------------------------------------------- */ .champ { padding: 18px 20px 16px; /* Contém qualquer efeito dentro do card, longe dos anúncios */ overflow: hidden; transition: box-shadow .35s, border-color .35s; } /* Moldura chanfrada na proporção da splash. O anel é o fundo e enche em sentido horário conforme a câmera se afasta (--zoom-out, de 0 a 1, vem do canvas). Tudo fica recortado aqui dentro. */ .champ-frame { --ring: var(--violet); --ring-ice: var(--violet-ice); --ring-rgb: var(--violet-rgb); --ring-w: 4px; --c: 18px; position: relative; z-index: 1; aspect-ratio: 1215 / 717; overflow: hidden; clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c)); background: linear-gradient(135deg, rgba(var(--gold-light-rgb), .28), transparent 30% 70%, rgba(var(--abyss-rgb), .45)), conic-gradient( rgba(var(--ring-rgb), .5) 0deg, var(--ring) calc(var(--zoom-out) * 1turn - 24deg), var(--ring-ice) calc(var(--zoom-out) * 1turn), var(--gold-dark) calc(var(--zoom-out) * 1turn), var(--gold-deep) 1turn); } .champ.is-right .champ-frame { --ring: var(--right); --ring-ice: var(--right-ice); --ring-rgb: var(--right-rgb); } .champ.is-wrong .champ-frame { --ring: var(--wrong); --ring-ice: var(--wrong-ice); --ring-rgb: var(--wrong-rgb); } .champ.is-revealed .champ-frame { background: linear-gradient(135deg, rgba(var(--gold-light-rgb), .28), transparent 30% 70%, rgba(var(--abyss-rgb), .45)), linear-gradient(180deg, var(--ring-ice), var(--ring) 45%, rgba(var(--ring-rgb), .7)); } .champ-canvas, .champ-lens { --c-in: calc(var(--c) - var(--ring-w) * .4142); position: absolute; top: var(--ring-w); left: var(--ring-w); width: calc(100% - 2 * var(--ring-w)); height: calc(100% - 2 * var(--ring-w)); clip-path: polygon(var(--c-in) 0, calc(100% - var(--c-in)) 0, 100% var(--c-in), 100% calc(100% - var(--c-in)), calc(100% - var(--c-in)) 100%, var(--c-in) 100%, 0 calc(100% - var(--c-in)), 0 var(--c-in)); pointer-events: none; } .champ-canvas { display: block; background: var(--navy); } /* Lente: vinheta e linhas finas que somem conforme a câmera se afasta, e quatro cantos de mira que se abrem até a borda. Só brilho interno (inset), nada vaza da moldura. */ .champ-lens { z-index: 1; background: repeating-linear-gradient(180deg, rgba(var(--abyss-rgb), .22) 0 1px, transparent 1px 4px), radial-gradient(closest-side, transparent 55%, rgba(var(--abyss-rgb), .6)); box-shadow: inset 0 0 26px rgba(var(--ring-rgb), .3); opacity: calc(1 - var(--zoom-out) * .75); } .champ-lens i { --gap: calc((1 - var(--zoom-out)) * 34px + 12px); --arm: 18px; position: absolute; width: var(--arm); height: var(--arm); border: 2px solid rgba(var(--ring-rgb), .95); filter: drop-shadow(0 0 4px rgba(var(--ring-rgb), .7)); } .champ-lens i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; transform: translate(var(--gap), var(--gap)); } .champ-lens i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; transform: translate(calc(-1 * var(--gap)), var(--gap)); } .champ-lens i:nth-child(3) { bottom: 0; right: 0; border-left: 0; border-top: 0; transform: translate(calc(-1 * var(--gap)), calc(-1 * var(--gap))); } .champ-lens i:nth-child(4) { bottom: 0; left: 0; border-right: 0; border-top: 0; transform: translate(var(--gap), calc(-1 * var(--gap))); } .champ.is-revealed .champ-lens { opacity: 0; transition: opacity .5s var(--ease-out); } /* Leitura do zoom, como numa câmera. Só troca de número: sem pulso nem loop. */ .champ-zoom { position: absolute; z-index: 2; top: calc(var(--ring-w) + 10px); left: calc(var(--c) + 8px); display: inline-flex; align-items: baseline; gap: 6px; padding: 2px 9px; border: 1px solid rgba(var(--ring-rgb), .55); background: rgba(var(--abyss-rgb), .78); color: var(--violet-ice); font-size: .95rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.4; transition: opacity .3s; } .champ-zoom::before { content: "Zoom"; font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .champ-zoom:empty { display: none; } .champ.is-revealed .champ-zoom { opacity: 0; } /* Nome da skin na base da arte, só na revelação */ .champ-skin { position: absolute; z-index: 2; left: var(--ring-w); right: var(--ring-w); bottom: var(--ring-w); display: flex; align-items: center; gap: 8px; padding: 26px calc(var(--c) + 10px) 10px; background: linear-gradient(0deg, rgba(var(--abyss-rgb), .92), rgba(var(--abyss-rgb), .55) 60%, transparent); color: var(--gold-light); font-family: var(--font-display); font-size: 1.05rem; line-height: 1.2; opacity: 0; transform: translateY(10px); transition: opacity .35s, transform .45s var(--ease-out); } .champ-skin::before { content: ""; flex: none; width: 7px; height: 7px; border: 1px solid var(--gold); background: rgba(var(--gold-rgb), .35); transform: rotate(45deg); } .champ-skin:empty { display: none; } .champ.is-revealed .champ-skin { opacity: 1; transform: none; transition-delay: .35s; } /* O anúncio de sequência fica centrado na arte, recortado pela moldura */ .champ-frame .callout { z-index: 3; } .champ-info { position: relative; margin-top: 14px; } .champ-name { min-width: 0; margin: 0 0 4px; padding-right: 4.75rem; font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; line-height: 1.2; color: var(--gold-light); overflow-wrap: anywhere; } .champ.is-revealed .champ-name { animation: name-in .45s var(--ease-out) both; } .champ-name-hidden { display: inline-flex; align-items: center; gap: .55em; font-family: var(--font-ui); font-style: italic; font-size: 1.15rem; color: var(--muted); } .champ-name-hidden::before { content: ""; flex: none; width: .5em; height: .5em; border: 1px solid var(--violet); transform: rotate(45deg); box-shadow: 0 0 6px rgba(var(--violet-rgb), .6); } /* Uma linha só, sempre reservada: a dica vira a pista e depois o título, sem deslocar as opções */ .champ-clue { min-height: 1.5em; margin: 0; font-size: .98rem; line-height: 1.5; color: var(--muted); } .champ-clue.is-clue { color: var(--violet-ice); animation: fade-in .35s ease both; } .champ-clue-label { margin-right: .15em; color: var(--violet); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: .82rem; } .champ-clue.is-title { color: var(--text); } .champ .gain { top: 0; right: 0; z-index: 4; } @media (max-width: 559px) { .champ { padding: 12px 12px 12px; } .champ-frame { --c: 12px; --ring-w: 3px; } .champ-lens i { --arm: 14px; --gap: calc((1 - var(--zoom-out)) * 22px + 9px); } .champ-zoom { top: calc(var(--ring-w) + 7px); padding: 1px 7px; font-size: .85rem; } .champ-skin { padding: 20px calc(var(--c) + 6px) 7px; font-size: .92rem; } .champ-info { margin-top: 10px; } .champ-name { font-size: 1.22rem; margin-bottom: 2px; } .champ-name-hidden { font-size: 1.02rem; } /* Dica, pista e título quebram em até 2 linhas nesta largura: as duas ficam reservadas */ .champ-clue { min-height: 3em; font-size: .9rem; } .champ .callout-text { padding: 4px 20px; font-size: 1.55rem; } .champ .callout-sub { font-size: .8rem; } /* Nomes de campeão são curtos: 2 × 2 para as 4 opções caberem na primeira dobra */ #screen-game[data-mode="champions"] .options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; } #screen-game[data-mode="champions"] .opt { min-height: 52px; padding: 7px 10px; gap: 9px; font-size: 1rem; overflow-wrap: break-word; } #screen-game[data-mode="champions"] .opt-name { overflow-wrap: break-word; } #screen-game[data-mode="champions"] .opt { --mark-x: 31px; --mark-y: 3px; } } :root[data-motion="reduce"] .champ.is-wrong, :root[data-motion="reduce"] .champ.is-revealed .champ-name, :root[data-motion="reduce"] .champ-clue.is-clue { animation: none; } :root[data-motion="reduce"] .champ-skin { transform: none; } /* -------------------------------------------------------------------------- Tela de resultado -------------------------------------------------------------------------- */ .screen--result { padding: 36px 24px 28px; text-align: center; animation: tip-in .4s var(--ease-out) both; isolation: isolate; } /* Paleta aproximada por nível do quiz (não reproduz os emblemas oficiais): --rk1 metal claro, --rk2 metal escuro, --rk3 brilho */ .result-hero { --rk1: #f0cf7a; --rk2: #8a6420; --rk3: #fff1c4; margin-bottom: 8px; overflow: hidden; } .result-hero[data-rank="iron"] { --rk1: #a89d97; --rk2: #4a403c; --rk3: #d8d0cb; } .result-hero[data-rank="bronze"] { --rk1: #d49a70; --rk2: #6b3b22; --rk3: #f3cfb1; } .result-hero[data-rank="silver"] { --rk1: #d5dde3; --rk2: #66737d; --rk3: #f4f8fb; } .result-hero[data-rank="gold"] { --rk1: #f0cf7a; --rk2: #8a6420; --rk3: #fff1c4; } .result-hero[data-rank="platinum"] { --rk1: #7fe3d6; --rk2: #1d6b73; --rk3: #d5fff8; } .result-hero[data-rank="emerald"] { --rk1: #5fe0a0; --rk2: #0f6b45; --rk3: #c9ffe4; } .result-hero[data-rank="diamond"] { --rk1: #a9c3ff; --rk2: #3a4fa8; --rk3: #e6eeff; } .result-hero[data-rank="master"] { --rk1: #d59bff; --rk2: #5b2a86; --rk3: #f1dcff; } .result-hero[data-rank="grandmaster"] { --rk1: #ff8a7a; --rk2: #8a1d2e; --rk3: #ffd6cf; } .result-hero[data-rank="challenger"] { --rk1: #f7e7a3; --rk2: #2f9fd8; --rk3: #fffbe6; } /* Arte do campeão da partida: some antes das estatísticas, longe do anúncio */ .result-art { position: absolute; top: 4px; left: 4px; right: 4px; height: 330px; z-index: -1; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(transparent, #000 72px), radial-gradient(ellipse 62% 100% at 50% 0%, #000 30%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(transparent, #000 72px), radial-gradient(ellipse 62% 100% at 50% 0%, #000 30%, transparent 100%); mask-composite: intersect; } .result-art img { opacity: .38; } /* Brasão com a borda do nível. Coreografia da vitória (uma vez só, termina parada): carga 0–0,6 s → montagem 0,4–1,25 s → impacto 1,2 s (flash, onda, faíscas, tremida) → varredura 1,45–2,2 s. Tudo fica dentro desta faixa (overflow hidden), que começa a 150px ou mais do anúncio do topo. */ .rank-crest { --crest-w: 228px; --shake: 0px; --flash-peak: .3; --wave-peak: .85; --charge-peak: .75; position: relative; display: flex; justify-content: center; margin: 12px 0 4px; overflow: hidden; isolation: isolate; } .rank-crest[data-fx="dry"] { --charge-peak: .3; } .rank-crest[data-fx="lite"] { --shake: .8px; --wave-peak: .5; --charge-peak: .5; } .rank-crest[data-fx="bright"] { --shake: 1.5px; } .rank-crest[data-fx="epic"] { --shake: 3px; --flash-peak: .42; } .crest-svg { display: block; width: var(--crest-w); height: auto; aspect-ratio: 244 / 212; } .crest-stop-1 { stop-color: var(--rk1); } .crest-stop-2 { stop-color: var(--rk2); } .crest-stop-3 { stop-color: var(--rk3); } .crest-core-base { fill: var(--navy); } .crest-core-cut { stroke: var(--abyss); } .crest-core, .frame-plate, .frame-gem { transform-box: fill-box; transform-origin: center; } .frame-line { fill: none; stroke-linejoin: miter; } .frame-ray { fill: none; stroke: var(--rk1); stroke-opacity: .45; stroke-linecap: round; } .frame-base { fill: var(--rk2); } .frame-face { fill-opacity: .92; } .frame-edge { fill: none; stroke: var(--rk3); stroke-opacity: .5; stroke-width: .8; stroke-linejoin: round; } .frame-gem .frame-base { fill: var(--rk1); } .frame-gem .frame-face { fill: var(--rk3); fill-opacity: .7; } .crest-sweep-bar { opacity: 0; } /* Camadas de efeito centradas no hexágono (55,7% da altura do viewBox), com borda esfumada */ .crest-fx { position: absolute; inset: 0; pointer-events: none; -webkit-mask-image: radial-gradient(ellipse 50% 44% at 50% 55.7%, #000 60%, transparent 100%); mask-image: radial-gradient(ellipse 50% 44% at 50% 55.7%, #000 60%, transparent 100%); } .crest-fx--back { z-index: -1; } .crest-fx > * { position: absolute; left: 50%; top: 55.7%; } .crest-charge, .crest-rays, .crest-wave, .crest-flash { border-radius: 50%; } .crest-charge { width: calc(var(--crest-w) * .96); height: calc(var(--crest-w) * .96); margin: calc(var(--crest-w) * -.48) 0 0 calc(var(--crest-w) * -.48); background: radial-gradient(closest-side, var(--rk1), transparent); opacity: calc(.1 + var(--tier, 0) * .025); } .crest-rays { display: none; width: calc(var(--crest-w) * 1.3); height: calc(var(--crest-w) * 1.3); margin: calc(var(--crest-w) * -.65) 0 0 calc(var(--crest-w) * -.65); background: repeating-conic-gradient(var(--rk1) 0 3deg, transparent 3deg 15deg); -webkit-mask-image: radial-gradient(closest-side, transparent 32%, #000 46%, transparent 100%); mask-image: radial-gradient(closest-side, transparent 32%, #000 46%, transparent 100%); opacity: .14; } .rank-crest[data-fx="epic"] .crest-rays { display: block; } .crest-wave { width: calc(var(--crest-w) * .42); height: calc(var(--crest-w) * .42); margin: calc(var(--crest-w) * -.21) 0 0 calc(var(--crest-w) * -.21); border: 2px solid var(--rk3); box-shadow: 0 0 12px var(--rk1), inset 0 0 12px var(--rk1); opacity: 0; } .crest-flash { width: calc(var(--crest-w) * 1.1); height: calc(var(--crest-w) * 1.1); margin: calc(var(--crest-w) * -.55) 0 0 calc(var(--crest-w) * -.55); background: radial-gradient(closest-side, var(--rk3), transparent 75%); opacity: 0; } .crest-spark, .crest-mote { position: absolute; left: 0; top: 0; opacity: 0; } .crest-spark { width: 14px; height: 2px; margin: -1px 0 0 -7px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--rk3)); } .crest-mote { width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: var(--rk3); box-shadow: 0 0 6px var(--rk1); } /* Vitória: as animações usam `backwards`, então o estado final é o próprio estilo de base */ .result-hero[data-outcome="win"] .crest-charge { animation: crest-charge 2.2s var(--ease-out) backwards; } .result-hero[data-outcome="win"] .crest-core { animation: core-charge .55s var(--ease-out) .05s backwards, core-thump .3s ease-out 1.2s; } .result-hero[data-outcome="win"] .frame-line { animation: frame-draw .5s cubic-bezier(.5, 0, .2, 1) var(--d) backwards; } .result-hero[data-outcome="win"] .frame-plate { animation: frame-snap .42s cubic-bezier(.2, 1.5, .45, 1) var(--d) backwards; } .result-hero[data-outcome="win"] .frame-gem { animation: frame-pop .4s cubic-bezier(.3, 1.8, .5, 1) calc(var(--d) + .12s) backwards; } .result-hero[data-outcome="win"] .frame-ray { animation: frame-draw .6s var(--ease-out) 1.2s backwards; } .result-hero[data-outcome="win"] .crest-svg { animation: crest-shake .32s linear 1.2s; } .result-hero[data-outcome="win"] .rank-crest:not([data-fx="dry"]) .crest-wave:not(.crest-wave--late) { animation: crest-wave .7s cubic-bezier(.1, .7, .3, 1) 1.2s backwards; } .result-hero[data-outcome="win"][data-rank="diamond"] .crest-wave--late, .result-hero[data-outcome="win"] .rank-crest[data-fx="epic"] .crest-wave--late { animation: crest-wave .75s cubic-bezier(.1, .7, .3, 1) 1.34s backwards; } .result-hero[data-outcome="win"] .rank-crest:is([data-fx="bright"], [data-fx="epic"]) .crest-flash { animation: crest-flash .34s ease-out 1.2s backwards; } .result-hero[data-outcome="win"] .crest-rays { animation: crest-rays 1.2s var(--ease-out) 1.05s backwards; } .result-hero[data-outcome="win"] .rank-crest:not([data-fx="dry"]) .crest-sweep-bar { animation: crest-sweep .75s cubic-bezier(.4, 0, .2, 1) 1.45s backwards; } .result-hero[data-outcome="win"] .crest-spark { animation: crest-spark .75s cubic-bezier(.15, .7, .3, 1) calc(1.2s + var(--k) * 40ms) backwards; } .result-hero[data-outcome="win"] .crest-mote { animation: crest-mote .7s cubic-bezier(.5, 0, .8, .4) calc(.05s + var(--k) * 80ms) backwards; } /* Derrota: a borda do nível aparece sóbria, sem efeitos */ .result-hero[data-outcome="loss"] .crest-fx { display: none; } .result-hero[data-outcome="loss"] .crest-svg { opacity: .82; animation: crest-sober .6s ease-out .15s backwards; } .result-title { margin: 0; font-family: var(--font-display); font-weight: 400; color: var(--gold-light); } .result-banner { display: block; padding-left: .16em; font-size: clamp(2.3rem, 9vw, 3.3rem); line-height: 1.05; letter-spacing: .16em; text-transform: uppercase; background: linear-gradient(180deg, #fbf6ea 15%, var(--gold) 85%); -webkit-background-clip: text; background-clip: text; color: transparent; } .result-hero[data-outcome="loss"] .result-banner { background-image: linear-gradient(180deg, #ffd6dc 10%, #c2485a 90%); } .result-rank { display: block; margin-top: 6px; font-size: clamp(1.1rem, 4vw, 1.35rem); color: var(--gold-light); } .result-rank-name { color: var(--rk1); } .result-mvp { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; margin: 12px 0 0; font-size: .95rem; color: var(--muted); } .result-mvp img { width: 28px; height: 28px; border: 1px solid var(--gold-dark); } .result-mvp-label { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); } .result-mvp strong { color: var(--gold-light); font-weight: 600; } .result-score { margin: 6px 0 0; display: flex; flex-direction: column; align-items: center; font-family: var(--font-display); font-size: clamp(3.6rem, 16vw, 5.6rem); line-height: 1; font-variant-numeric: tabular-nums; } .result-score > span:first-child { background: var(--score-fill); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 .05em; } .result-unit { margin-top: 6px; font-family: var(--font-ui); font-size: 1rem; color: var(--ink-muted); } .result-record { display: inline-block; margin: 14px 0 0; padding: 4px 14px; border: 1px solid var(--petrol-ink); color: var(--petrol-ink-strong); font-weight: 600; box-shadow: 0 0 18px -6px var(--petrol-ink); } .result-stats { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; margin: 26px 0 28px; padding: 14px 0; border-top: 1px solid var(--divider-strong); border-bottom: 1px solid var(--divider-strong); } .result-stats div + div { border-left: 1px solid var(--divider-strong); } .result-stats dt { font-size: .9rem; color: var(--ink-muted); } .result-stats dd { margin: 2px 0 0; font-size: 1.6rem; font-weight: 700; color: var(--ink-strong); font-variant-numeric: tabular-nums; } .result-keys dd { color: var(--petrol-ink-strong); } /* Com a 4ª estatística (Teclas certas), o mobile vira uma grade 2 × 2 */ @media (max-width: 559px) { .result-stats:has(> .result-keys:not([hidden])) { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; } .result-stats:has(> .result-keys:not([hidden])) > div:nth-child(odd) { border-left: 0; } .result-stats:has(> .result-keys:not([hidden])) > div:nth-child(n + 3) { padding-top: 12px; border-top: 1px solid var(--divider-strong); } } .result-actions { display: flex; flex-direction: column; align-items: center; gap: 14px; } .btn--again { max-width: 380px; min-height: 68px; font-size: 1.4rem; } .result-secondary { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } /* Com o título "Suas rodadas" acima, ficam 150px ou mais até os botões mesmo com a lista vazia */ .ad-wrap--result { margin: 80px 0 8px; } .review-title { margin: 32px 0 12px; font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; color: var(--accent-ink); text-align: left; } .review { margin: 0; padding: 0; list-style: none; text-align: left; } .review li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 10px; border-left: 3px solid var(--wrong-fill); background: var(--row-bg); } .review li + li { margin-top: 6px; } .review li.is-right { border-left-color: var(--right-fill); } .review img { width: 40px; height: 40px; border: 1px solid var(--line-strong); } .review-name { color: var(--ink-strong); font-weight: 600; overflow-wrap: anywhere; } .review-pick { display: block; font-size: .88rem; color: var(--ink-muted); font-weight: 400; } .review-pts { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--right-ink); white-space: nowrap; } .review li:not(.is-right) .review-pts { color: var(--wrong-ink); } .review-recipe { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; } .review .review-recipe img { width: 20px; height: 20px; border-color: var(--line); } .review-ability { display: block; width: 40px; height: 40px; border: 1px solid var(--line-strong); background: var(--navy); } .review--ability .review-name, .review--champ .review-name { font-family: var(--font-ui); } .review-skin { display: block; font-size: .92rem; font-weight: 500; color: var(--violet-ink); } .review-spell { display: block; font-size: .92rem; font-weight: 500; color: var(--petrol-ink); } .review-key { display: inline-flex; align-items: center; margin-top: 5px; padding: 1px 8px; border: 1px solid rgba(var(--petrol-rgb), .45); border-radius: 4px; background: rgba(var(--petrol-rgb), .1); box-shadow: var(--review-key-shadow); color: var(--petrol-ink-strong); font-size: .8rem; font-weight: 600; line-height: 1.5; } /* -------------------------------------------------------------------------- Item do dia -------------------------------------------------------------------------- */ .screen--start .btn--daily { display: flex; width: 100%; max-width: 340px; margin: 12px auto 0; } .daily-status { min-height: 3em; margin: 8px 0 0; font-size: .95rem; color: var(--ink-muted); } .daily-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 10px; } .daily-title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; line-height: 1.2; color: var(--ink-strong); } .daily-title:focus { outline: none; } .daily-date { margin: 0; color: var(--ink-muted); font-variant-numeric: tabular-nums; } .daily-tries { display: flex; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; } .daily-tries li { flex: 1 1 0; height: 7px; background: var(--pip-idle); } .daily-tries li.is-current { background: var(--pip-current); } .daily-tries li.is-right { background: var(--right-fill); } .daily-tries li.is-wrong { background: var(--wrong-fill); } .screen--daily .is-concealed { visibility: hidden; } .screen--daily .tip-body.is-concealed .t-stats { visibility: visible; } .screen--daily .tip-icon { transition: filter .6s var(--ease-out), transform .6s var(--ease-out); } .screen--daily .tip-icon.is-hidden.is-hinted { filter: blur(4px) saturate(1.1) brightness(.9); transform: scale(1.15); } .screen--daily .tip-icon.is-hinted + .tip-icon-mark { opacity: .35; } .daily-msg { min-height: 3em; margin: 16px 0 0; text-align: center; font-size: 1.05rem; font-weight: 600; } .daily-msg.is-right { color: var(--right-ink); } .daily-msg.is-wrong { color: var(--wrong-ink); } .daily-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 12px; } @media (max-width: 559px) { .daily-msg { min-height: 4.5em; } } /* -------------------------------------------------------------------------- Marcas de acerto e erro (WCAG 1.4.1: não depender só da cor) Só pseudo-elementos absolutos ou texto que aparece junto com a mensagem: nenhuma caixa muda de tamanho. O texto alternativo vazio evita leitura duplicada. -------------------------------------------------------------------------- */ /* Alternativas: selo no canto do slot (número ou ícone), dentro do botão */ .opt.is-correct::after, .opt.is-wrong::after { position: absolute; z-index: 2; left: var(--mark-x, 35px); top: calc(50% + var(--mark-y, 6px)); width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: var(--right-fill); box-shadow: 0 0 0 2px var(--mark-ring); color: var(--on-fill); font: 700 12px/1 var(--font-mark); pointer-events: none; } .opt.is-correct::after { content: "✓"; content: "✓" / ""; } .opt.is-wrong::after { content: "✗"; content: "✗" / ""; background: var(--wrong-fill); } /* Com retrato, o selo toma o lugar do número da tecla */ .opt--champ { --mark-x: 37px; --mark-y: 4px; } .opt--champ:is(.is-correct, .is-wrong) .opt-key { visibility: hidden; } /* Pips do HUD: a marca vira uma plaquinha mais alta que a barra, sem mudar a caixa */ .pips li { position: relative; } .pips li:is(.is-right, .is-wrong)::before { content: ""; position: absolute; inset: -3px 0; background: inherit; } .pips li:is(.is-right, .is-wrong)::after { position: absolute; inset: -3px 0; display: grid; place-items: center; transform: skewX(24deg); color: var(--on-fill); font: 700 10px/1 var(--font-mark); } .pips li.is-right::after { content: "✓"; content: "✓" / ""; } .pips li.is-wrong::after { content: "✗"; content: "✗" / ""; } /* Tentativas do Item do dia: plaquinha no centro da barra */ .daily-tries li { position: relative; } .daily-tries li:is(.is-right, .is-wrong)::after { position: absolute; left: 50%; top: -4px; width: 22px; height: 15px; margin-left: -11px; display: grid; place-items: center; background: inherit; color: var(--on-fill); font: 700 11px/1 var(--font-mark); } .daily-tries li.is-right::after { content: "✓"; content: "✓" / ""; } .daily-tries li.is-wrong::after { content: "✗"; content: "✗" / ""; } /* Mensagens: a marca entra junto com o texto */ .after-msg:is(.is-right, .is-wrong) .after-main::before, .daily-msg:is(.is-right, .is-wrong)::before, .review-pts::before { margin-right: .35em; font-family: var(--font-mark); font-weight: 700; /* A fonte de símbolos tem métricas mais altas: sem isto a linha cresce 1px */ line-height: 1; } .after-msg.is-right .after-main::before, .daily-msg.is-right::before, .review li.is-right .review-pts::before { content: "✓"; content: "✓" / ""; } .after-msg.is-wrong .after-main::before, .daily-msg.is-wrong::before, .review li:not(.is-right) .review-pts::before { content: "✗"; content: "✗" / ""; } /* Keycaps do bônus: selo no canto superior, dentro da bandeja */ .keycap.is-correct::after, .keycap.is-wrong::after { position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: var(--right); box-shadow: 0 0 0 2px var(--abyss); color: var(--abyss); font: 700 11px/1 var(--font-mark); pointer-events: none; } .keycap.is-correct::after { content: "✓"; content: "✓" / ""; } .keycap.is-wrong::after { content: "✗"; content: "✗" / ""; background: var(--wrong); } /* -------------------------------------------------------------------------- Fonte de leitura fácil: é mais larga que a condensada, então o espaçamento das caixas altas cai e as áreas reservadas ganham uma linha onde o texto passa a quebrar -------------------------------------------------------------------------- */ :root[data-font="legible"] .btn { letter-spacing: .04em; } :root[data-font="legible"] .btn--play { letter-spacing: .06em; } :root[data-font="legible"] .brand-patch, :root[data-font="legible"] .champ-zoom::before, :root[data-font="legible"] .champ-clue-label { letter-spacing: .03em; } :root[data-font="legible"] .callout-text { letter-spacing: .02em; } /* "Item misterioso" quebrava em 2 linhas a 360px; antes da revelação a folga do "+pts" está livre */ :root[data-font="legible"] .tip-name-hidden { white-space: nowrap; } @media (max-width: 767px) { :root[data-font="legible"] .champ-clue { min-height: 3em; } } @media (max-width: 559px) { :root[data-font="legible"] .after-msg { min-height: calc(1.05rem * 1.5 + 50px); } :root[data-font="legible"] .btn--play { font-size: 1.15rem; } } /* -------------------------------------------------------------------------- Páginas institucionais (sobre, privacidade, termos) -------------------------------------------------------------------------- */ .page { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 var(--gutter); } .page-body { padding: 36px 28px; background: var(--panel-bg); border: 1px solid var(--panel-line); box-shadow: var(--panel-frame); } .page h1 { margin: 0 0 8px; font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 6vw, 2.6rem); color: var(--ink-strong); } .page h2 { margin: 32px 0 8px; font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; color: var(--accent-ink); } .page p, .page li { max-width: 68ch; line-height: 1.65; } .page .updated { color: var(--ink-muted); font-size: .9rem; margin-top: 0; } .page .back { display: inline-block; margin-top: 28px; } /* -------------------------------------------------------------------------- Responsivo -------------------------------------------------------------------------- */ @media (max-width: 559px) { .screen--start { padding: 36px 18px 26px; } .rounds-opt span { min-width: 0; padding: 10px 16px; } .tooltip { padding: 16px 16px 14px; } .tip-icon-frame { width: 60px; height: 60px; } .tip-name { font-size: 1.28rem; } .hud { gap: 10px; font-size: .95rem; } .pips { gap: 3px; } .after { flex-wrap: wrap; } .btn--next { width: 100%; } .after-msg { width: 100%; } .screen--result { padding: 30px 16px 22px; } .result-stats dd { font-size: 1.35rem; } .result-stats dt { font-size: .82rem; } .rank-crest { --crest-w: 196px; margin-top: 24px; } .page-body { padding: 28px 18px; } } /* -------------------------------------------------------------------------- Animações -------------------------------------------------------------------------- */ @keyframes tip-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes drain { from { transform: scaleX(1); } to { transform: scaleX(0); } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } } @keyframes icon-pop { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } } @keyframes name-in { from { opacity: 0; letter-spacing: .12em; filter: blur(4px); } to { opacity: 1; letter-spacing: normal; filter: none; } } @keyframes gain-up { 0% { opacity: 0; transform: translateY(8px); } 20% { opacity: 1; transform: translateY(0); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-22px); } } @keyframes shop-ring { 0% { box-shadow: 0 0 0 0 rgba(240, 230, 210, .9), 0 0 0 0 rgba(200, 170, 110, .8); } 35% { box-shadow: 0 0 0 2px rgba(240, 230, 210, .7), 0 0 0 5px rgba(200, 170, 110, .55); } 100% { box-shadow: 0 0 0 3px rgba(240, 230, 210, 0), 0 0 0 11px rgba(200, 170, 110, 0); } } @keyframes coin-pop { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 15% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1); } } @keyframes callout { 0% { opacity: 0; } 14% { opacity: 1; } 80% { opacity: 1; transform: translateY(-50%); } 100% { opacity: 0; transform: translateY(calc(-50% - 8px)); } } @keyframes callout-slam { from { transform: scale(1.35); filter: blur(6px); } to { transform: none; filter: none; } } @keyframes step-flash { 0% { filter: brightness(1); } 35% { filter: brightness(1.35) saturate(1.2); } 100% { filter: brightness(1); } } @keyframes step-scan { 0% { opacity: 1; transform: translateY(-100%); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(357%); } } @keyframes reveal-shine { 0% { opacity: 1; transform: translateX(-110%); } 100% { opacity: 1; transform: translateX(110%); } } @keyframes keypick-in { 0% { opacity: 0; transform: translateY(10px); filter: brightness(1.8); } 60% { opacity: 1; filter: brightness(1.25); } 100% { opacity: 1; transform: none; filter: none; } } @keyframes keypick-sweep { 0% { opacity: 1; transform: translateX(-100%); } 100% { opacity: 0; transform: translateX(100%); } } @keyframes key-rise { from { transform: translateY(3px); filter: brightness(1.8); } to { transform: none; filter: none; } } @keyframes key-confirm { 0% { transform: translateY(3px); } 60% { transform: translateY(-2px); } 100% { transform: none; } } @keyframes keypick-heat { 0% { background-color: var(--teal); box-shadow: 0 0 8px rgba(10, 200, 185, .7); } 55% { background-color: var(--gold); box-shadow: 0 0 8px rgba(200, 170, 110, .7); } 80%, 100% { background-color: var(--wrong); box-shadow: 0 0 8px rgba(var(--wrong-rgb), .8); } } @keyframes crest-charge { 0% { opacity: 0; transform: scale(.25); } 25% { opacity: var(--charge-peak); transform: scale(.6); } 55% { opacity: calc(var(--charge-peak) * .9); transform: scale(1.1); } } @keyframes core-charge { from { opacity: 0; transform: scale(.7); } } @keyframes core-thump { 40% { transform: scale(1.07); } } @keyframes frame-draw { from { stroke-dasharray: 1 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1 1; stroke-dashoffset: 0; } } @keyframes frame-snap { from { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)) scale(.6); } 40% { opacity: 1; } } @keyframes frame-pop { from { opacity: 0; transform: scale(0); } } @keyframes crest-shake { 0%, 100% { transform: none; } 20% { transform: translate(calc(var(--shake) * -1), calc(var(--shake) * .6)); } 45% { transform: translate(var(--shake), calc(var(--shake) * -.5)); } 70% { transform: translate(calc(var(--shake) * -.5), calc(var(--shake) * .3)); } } @keyframes crest-wave { 0% { opacity: var(--wave-peak); transform: scale(.4); } 100% { opacity: 0; transform: scale(2.8); } } @keyframes crest-flash { 0% { opacity: 0; transform: scale(.6); } 30% { opacity: var(--flash-peak); } 100% { opacity: 0; transform: scale(1.1); } } @keyframes crest-rays { 0% { opacity: 0; transform: rotate(-24deg) scale(.55); } 30% { opacity: .6; } } @keyframes crest-sweep { from { opacity: 1; transform: translateX(-150px); } to { opacity: 1; transform: translateX(150px); } } @keyframes crest-spark { 0% { opacity: 1; transform: rotate(var(--a)) translateX(calc(var(--crest-w) * .22)) scaleX(.4); } 60% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateX(calc(var(--crest-w) * (.6 + var(--k) * .08))); } } @keyframes crest-mote { 0% { opacity: 0; transform: rotate(var(--a)) translateX(calc(var(--crest-w) * .6)); } 30% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateX(calc(var(--crest-w) * .08)); } } @keyframes crest-sober { from { opacity: 0; transform: translateY(6px); } } @keyframes crest-fade { from { opacity: 0; } } /* Movimento reduzido (sistema ou preferência do site, sempre em data-motion): o brasão aparece pronto, com um fade curto */ :root[data-motion="reduce"] .rank-crest * { animation: none !important; } :root[data-motion="reduce"] .rank-crest .crest-svg { animation: crest-fade .2s ease-out backwards !important; } /* Movimento reduzido: o JS põe data-motion="reduce" quando o sistema pede ou quando o jogador escolhe, e mantém o atributo sincronizado com a media query. Fonte única. */ :root[data-motion="reduce"] .screen--start .btn--play[data-state="play"]::before, :root[data-motion="reduce"] .rank-crest::after { display: none; } :root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before, :root[data-motion="reduce"] *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } /* ========================================================================== Preferências, sugestão de idioma e treino ========================================================================== */ .screen--start .btn--prefs { display: inline-flex; align-items: center; gap: 8px; margin: 18px auto 0; } .btn--prefs svg { width: 18px; height: 18px; flex: none; } .lang-suggest { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; max-width: 560px; margin: -6px auto 18px; padding: 8px 12px; border: 1px solid rgba(var(--petrol-rgb), .35); color: var(--ink); font-size: .95rem; } .lang-suggest[hidden] { display: none; } .lang-suggest-btn, .lang-suggest-close { font: inherit; cursor: pointer; background: none; border: 0; color: var(--petrol-ink); padding: 6px 4px; min-height: 32px; } .lang-suggest-btn { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .lang-suggest-close { color: var(--ink-muted); font-size: 1.2rem; line-height: 1; min-width: 32px; } .lang-suggest-btn:hover, .lang-suggest-close:hover { color: var(--ink-hover); } .lang-suggest-btn:focus-visible, .lang-suggest-close:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .prefs { width: min(560px, calc(100vw - 2 * var(--gutter))); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--panel-line); background: var(--panel-bg), var(--page-bg); color: var(--ink); box-shadow: var(--panel-frame), var(--panel-drop); } .prefs::backdrop { background: rgba(var(--abyss-rgb), .72); } .prefs-form { padding: 18px 20px 20px; } .prefs-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; } .prefs-title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; color: var(--ink-strong); } .prefs-group { margin: 14px 0 0; padding: 12px 0 0; border: 0; border-top: 1px solid var(--divider); } .prefs-group legend { padding: 0; font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); } .prefs-choices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .prefs-choices label { position: relative; cursor: pointer; } .prefs-choices input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .prefs-choices span { display: block; padding: 8px 14px; border: 1px solid var(--control-line); background: var(--well); color: var(--ink-muted); font-weight: 600; } .prefs-choices label:hover span { color: var(--ink-strong); border-color: var(--control-line-hover); } .prefs-choices input:checked + span { color: var(--ink-strong); border-color: var(--line-accent); box-shadow: var(--control-glow-on); } .prefs-choices input:checked + span::before { content: "✓ " / ""; color: var(--petrol-ink); } .prefs-choices input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 3px; } .prefs-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .prefs-select { flex: 1 1 200px; min-height: 42px; padding: 8px 10px; border: 1px solid var(--control-line-hover); background: var(--page-bg); color: var(--ink-strong); font: 600 1rem var(--font-ui); } .prefs-select:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .prefs-note { margin: 8px 0 0; font-size: .85rem; color: var(--ink-muted); } .prefs-range { display: flex; align-items: center; gap: 12px; margin-top: 10px; } .prefs-range input { flex: 1; accent-color: var(--petrol-ink); min-height: 32px; } .prefs-volume-out { min-width: 3.5em; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-strong); } .prefs-check { display: flex; align-items: center; gap: 10px; margin-top: 10px; cursor: pointer; } .prefs-check input { width: 20px; height: 20px; accent-color: var(--petrol-ink); flex: none; } .prefs-keys { display: grid; gap: 6px; margin: 12px 0 0; font-size: .9rem; } .prefs-keys div { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; } .prefs-keys dt { min-width: 150px; color: var(--ink-strong); } .prefs-keys dd { margin: 0; color: var(--ink-muted); } .prefs-keys kbd { display: inline-block; min-width: 1.8em; padding: 1px 6px; border: 1px solid var(--control-line); border-bottom-width: 2px; background: var(--well); font: 600 .85rem var(--font-ui); text-align: center; } .prefs-actions { display: flex; justify-content: flex-end; margin-top: 20px; } /* Treino: sem timer, sem pontos e sem recorde */ .hud-practice { display: none; margin: 0; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--petrol-ink); } .screen--game[data-practice] .hud-score, .screen--game[data-practice] .timer { display: none; } .screen--game[data-practice] .hud-practice { display: block; } .keypick.is-untimed .keypick-timer { visibility: hidden; } .screen--result[data-practice] .result-score, .screen--result[data-practice] .result-best { display: none; } .result-hero[data-outcome="practice"] .rank-crest { display: none; }