/* Kit de UI do Necromancer Arise — playables-ui (FB-20261031-11), sem cara de I.A. (FB-20261030-23). FICHA DE IDENTIDADE - Material: lápides de ardósia da própria masmorra (#2D3349, risco e grão de pedra) presas em moldura de bronze velho (#8A6238 → #C9A06A); placas de osso (#E9DFC8) para o que é escolha ou recompensa. - Forma assinatura: "lápide rúnica" — retângulo com dois cantos opostos cortados fundo (sup. esq. e inf. dir.) e os outros dois quase retos. Painel, botão, rótulo, contador e retrato usam a mesma silhueta. - Letreiro: Cinzel (capitulares romanas gravadas, como as inscrições da sala); títulos em bronze com sulco escuro, números grandes em Cinzel 900 com algarismos tabulares. - Personagem: o próprio necromante (retrato da máscara renderizado do modelo do jogo) no HUD e nas telas; Gorrak na barra do chefe. - Paleta (amostrada da cena e do style guide): ardósia #2D3349 / #1B2230, bronze #8A6238 / #C9A06A, osso #E9DFC8, creme #F7F1E3, alma #6FE3FF, legião #7B4DFF, perigo #FF3B3B (só ameaça), ouro #F5C542. - Detalhe narrativo: a mana é a "chama de alma" (a mesma do custo em cima das almas no chão); as estrelas são três chamas de alma acesas; o baú é um relicário de bronze. Referências de estúdio da mesma tela: Hades (Supergiant, 2020) — HUD de vida/recursos em placas escuras com moldura de ouro e retrato do Zagreus; Archero (Habby, 2019) — HUD mínimo em cima, ação embaixo. */ /* Fontes no próprio pacote (Cinzel, Alegreya e Alegreya Sans, licença SIL Open Font License; só o subconjunto latino) */ @font-face { font-family: 'Alegreya'; font-style: italic; font-weight: 500; font-display: swap; src: url('assets/fontes/alegreya-italico-0.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Alegreya'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fontes/alegreya-1.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Alegreya Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fontes/alegreya-sans-2.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Alegreya Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fontes/alegreya-sans-3.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Alegreya Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url('assets/fontes/alegreya-sans-4.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fontes/cinzel-5.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 900; font-display: swap; src: url('assets/fontes/cinzel-5.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --ardosia: #2d3349; --ardosia-esc: #1d222b; --ardosia-clara: #45556a; --bronze: #8a6238; --bronze-claro: #c9a06a; --bronze-esc: #2e1f10; --osso: #e9dfc8; --osso-esc: #b9a98a; --creme: #f7f1e3; --tinta: #14182a; --alma: #6fe3ff; --legiao: #7b4dff; --legiao-clara: #c9b6ff; --perigo: #ff3b3b; --ouro: #f5c542; --vida: #52e07c; --vida-vazia: #10141f; --seguro-top: max(10px, env(safe-area-inset-top)); --seguro-bot: max(12px, env(safe-area-inset-bottom)); --letra: 'Cinzel', 'Trajan Pro', Georgia, serif; --corpo: 'Alegreya Sans', 'Segoe UI', Roboto, system-ui, sans-serif; --tela: #0c0d17; --placa: #171a28; --placa-clara: #20243a; --linha-fina: rgba(201,160,106,.28); --texto: #efe9da; --texto-suave: #a9a6a0; --grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .6 0 0 0 0 .75 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); --risco: repeating-linear-gradient(-28deg, transparent 0 22px, rgba(0,0,0,.12) 22px 23px, transparent 23px 61px); } /* lápide rúnica: cantos sup. esq. e inf. dir. cortados fundo (--c), os outros quase retos (--c2) */ :where(.moldura, .btn, #painel, .linha, .portao, .skill, #btn-pausa, #btn-dash, #progresso, #chefe-barra, #hud-heroi) { --c: 12px; --c2: 3px; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; height: 100%; background: var(--ardosia-esc); color: var(--creme); overflow: hidden; font-family: var(--letra); font-weight: 700; user-select: none; -webkit-user-select: none; touch-action: none; font-variant-numeric: tabular-nums lining-nums; } #app { position: fixed; inset: 0; } #tela { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } [hidden] { display: none !important; } #carregando { position: absolute; inset: 0; display: grid; place-items: center; background: var(--ardosia-esc) var(--grao); z-index: 50; font-weight: 900; letter-spacing: .18em; font-size: clamp(18px, 5vw, 34px); color: var(--bronze-claro); text-shadow: 0 2px 0 #000; } #vinheta { position: absolute; inset: 0; pointer-events: none; z-index: 4; background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(6,7,14,.3) 82%, rgba(6,7,14,.6) 100%); } #flash { position: absolute; inset: 0; pointer-events: none; background: #fff; opacity: 0; z-index: 5; } /* moldura de bronze + miolo de pedra, num elemento só (::before = bronze, ::after = pedra) */ :where(.moldura, .btn, #painel, .linha, .portao, .skill, #btn-pausa, #btn-dash, #progresso, #chefe-barra, #hud-heroi) { position: relative; isolation: isolate; } :where(.moldura, .btn, #painel, .linha, .portao, .skill, #btn-pausa, #btn-dash, #progresso, #chefe-barra, #hud-heroi)::before, :where(.moldura, .btn, #painel, .linha, .portao, .skill, #btn-pausa, #btn-dash, #progresso, #chefe-barra, #hud-heroi)::after { content: ''; position: absolute; z-index: -1; pointer-events: none; clip-path: polygon(var(--c) 0, calc(100% - var(--c2)) 0, 100% var(--c2), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c2) 100%, 0 calc(100% - var(--c2)), 0 var(--c)); } :where(.moldura, .btn, #painel, .linha, .portao, .skill, #btn-pausa, #btn-dash, #progresso, #chefe-barra, #hud-heroi)::before { inset: 0; background: linear-gradient(170deg, var(--bronze-claro), var(--bronze) 45%, var(--bronze-esc)); filter: drop-shadow(0 3px 0 rgba(0,0,0,.55)); } :where(.moldura, .btn, #painel, .linha, .portao, .skill, #btn-pausa, #btn-dash, #progresso, #chefe-barra, #hud-heroi)::after { inset: 3px; background: var(--grao), repeating-linear-gradient(-28deg, transparent 0 22px, rgba(0,0,0,.12) 22px 23px, transparent 23px 61px), linear-gradient(180deg, #3a425c, var(--ardosia) 40%, var(--ardosia-esc)); } /* números do mundo */ #numeros, #rotulos { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } #numeros { z-index: 6; } #rotulos { z-index: 6; } .num { position: absolute; font-weight: 900; font-size: 16px; color: var(--creme); transform: translate(-50%, -50%); will-change: transform, opacity; text-shadow: 0 2px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 -1px 0 #000; } .num.ouro { color: var(--ouro); } .num.roxo { color: var(--legiao-clara); font-size: 18px; letter-spacing: .06em; } .num.grande { font-size: 26px; } .num.aliado { color: var(--legiao-clara); font-size: 13px; } .num.dano { color: var(--perigo); font-size: 26px; text-shadow: 0 3px 0 #000, 2px 0 0 #f7f1e3, -2px 0 0 #f7f1e3, 0 -2px 0 #f7f1e3; } /* custo de mana em cima de cada alma (FB-20261031-08): a mesma chama do contador de mana */ .custo-alma { position: absolute; left: 0; top: 0; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; font-weight: 900; font-size: 11px; line-height: 1; color: #062631; background: var(--alma); border: 2px solid #0b0815; border-radius: 9px; box-shadow: 0 1px 0 #0b0815; } .custo-alma.nao { color: var(--creme); background: #4a5266; } /* ---------- HUD ---------- */ #hud { position: absolute; inset: 0; pointer-events: none; z-index: 10; } #hud button, #pacto { pointer-events: auto; } /* placa do herói (canto sup. esq.): retrato + vida em hits + mana livre em número grande */ #hud-heroi { position: absolute; left: max(10px, env(safe-area-inset-left)); top: var(--seguro-top); display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; --c: 14px; --c2: 3px; } .retrato { width: 58px; height: 58px; flex: none; overflow: hidden; --c: 12px; --c2: 3px; clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); background: linear-gradient(180deg, #4a5468, #22262f); box-shadow: inset 0 0 0 2px var(--bronze-claro); } .retrato img { width: 140%; margin: -10% 0 0 -24%; display: block; } #hud-heroi .dados { display: flex; flex-direction: column; gap: 4px; } #vida { display: flex; align-items: center; gap: 6px; } #vida-pips { display: flex; gap: 2px; } .pip { width: 9px; height: 13px; background: var(--vida); transform: skewX(-12deg); box-shadow: inset 0 -3px 0 rgba(0,0,0,.25), 0 0 0 1px #0b0815; } .pip.vazio { background: var(--vida-vazia); box-shadow: inset 0 0 0 1px #3a425c, 0 0 0 1px #0b0815; } .pip.quebra { animation: quebra .35s; } @keyframes quebra { 30% { transform: skewX(-12deg) translateY(-4px) scale(1.4); background: #fff; } } #vida-num { font-size: 15px; font-weight: 900; color: var(--creme); text-shadow: 0 2px 0 #000; min-width: 20px; } #mana { position: relative; display: flex; align-items: baseline; gap: 5px; padding: 1px 0 4px; } .chama-alma { width: 18px; height: 22px; align-self: center; background: var(--alma); border-radius: 50% 50% 45% 45% / 62% 62% 38% 38%; box-shadow: inset -3px -4px 0 rgba(0,40,60,.35), 0 0 0 2px #0b0815; transform: rotate(-6deg); } #mana-livre { font-size: 28px; line-height: 1; font-weight: 900; color: var(--alma); text-shadow: 0 2px 0 #000, 1px 0 0 #000, -1px 0 0 #000; } #mana-max { font-size: 14px; color: var(--osso); text-shadow: 0 1px 0 #000; } #mana-rotulo { font-size: 14px; letter-spacing: .12em; color: var(--osso); text-shadow: 0 1px 0 #000; align-self: center; } #mana-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--alma); transform-origin: left; transition: transform .2s; } #mana.alerta { animation: alerta .35s; } #mana.alerta #mana-livre { color: var(--perigo); } @keyframes alerta { 25%, 75% { transform: translateX(-4px); } 50% { transform: translateX(4px); } } #hud-ouro { position: absolute; right: max(14px, env(safe-area-inset-right)); top: calc(var(--seguro-top) + 56px); display: flex; align-items: center; gap: 6px; font-weight: 900; font-size: 18px; color: var(--ouro); text-shadow: 0 2px 0 #000; } .moeda { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe9a0, var(--ouro) 45%, #a8741c); border: 2px solid #3b2508; display: inline-block; flex: none; } /* topo: pausa (lápide), portão (corrente de lápides até a caveira) e chefe */ /* linha 1: placa do herói (esq.) · pausa e pacto (dir.); linha 2: portão e chefe na largura toda */ #topo { position: absolute; top: calc(var(--seguro-top) + 84px); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(calc(100vw - 48px), 420px); } #btn-pausa { position: absolute; top: var(--seguro-top); right: calc(max(10px, env(safe-area-inset-right)) + 58px + 8px); width: 48px; height: 48px; padding: 0; cursor: pointer; border: 0; background: none; color: var(--creme); display: grid; place-items: center; --c: 10px; } #btn-pausa svg { fill: var(--osso); filter: drop-shadow(0 2px 0 #000); } #progresso { position: relative; width: 100%; height: 14px; --c: 5px; --c2: 2px; } #progresso::after { background: var(--ardosia-esc); } #progresso-fill { position: absolute; left: 3px; top: 3px; bottom: 3px; width: 0; background: linear-gradient(180deg, #a888ff, var(--legiao)); transition: width .3s; } .caveira { position: absolute; right: -12px; top: 50%; width: 24px; height: 26px; transform: translateY(-50%); z-index: 1; background: var(--osso); border: 2px solid #0b0815; border-radius: 48% 48% 40% 40% / 55% 55% 45% 45%; box-shadow: 0 2px 0 #000; } .caveira::before, .caveira::after { content: ''; position: absolute; top: 9px; width: 6px; height: 7px; background: #14110f; border-radius: 50%; } .caveira::before { left: 4px; } .caveira::after { right: 4px; } #chefe { width: 100%; display: flex; align-items: center; gap: 6px; } #chefe .retrato { width: 40px; height: 40px; --c: 9px; background: radial-gradient(circle at 50% 30%, #6b5a4a, #241a14); } #chefe .retrato img { width: 150%; margin: -12% 0 0 -30%; } #chefe-corpo { flex: 1; min-width: 0; } #chefe-nome { display: block; font-size: 14px; font-weight: 900; letter-spacing: .08em; color: var(--osso); text-shadow: 0 2px 0 #000; text-align: left; } #chefe-barra { position: relative; height: 14px; margin-top: 2px; --c: 5px; --c2: 2px; } #chefe-barra::after { background: #2a0e12; } #chefe-fill { position: absolute; left: 3px; top: 3px; bottom: 3px; width: 0; background: linear-gradient(180deg, #ff7a6a, var(--perigo) 55%, #a8141e); transition: width .12s; } #chefe-marca { position: absolute; top: 2px; bottom: 2px; left: 50%; width: 3px; background: var(--osso); box-shadow: 0 0 0 1px #000; z-index: 1; } #pacto { position: absolute; top: calc(var(--seguro-top) + 2px); right: max(10px, env(safe-area-inset-right)); width: 48px; height: 48px; display: grid; place-items: center; cursor: pointer; } .anel-fundo { fill: var(--ardosia-esc); stroke: var(--bronze); stroke-width: 3; } .anel { fill: none; stroke: var(--alma); stroke-width: 3; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .5s; } .chama { fill: var(--legiao); } #pacto.cheio { animation: pulsa 0.8s infinite; } #pacto.cheio .chama { fill: var(--ouro); } @keyframes pulsa { 50% { transform: scale(1.15); } } /* canto inf. dir.: skills (lápides de bronze), cargas de dash (gemas) e botão de dash no toque */ #hud-dir { position: absolute; right: max(14px, env(safe-area-inset-right)); bottom: var(--seguro-bot); display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } #skills { display: flex; gap: 6px; } .skill { width: 46px; height: 46px; display: grid; place-items: center; font-size: 12px; font-weight: 900; color: var(--ouro); text-shadow: 0 1px 0 #000; --c: 10px; } .skill svg { width: 26px; height: 26px; fill: var(--legiao-clara); filter: drop-shadow(0 1px 0 #000); } .skill .nv { position: absolute; right: 3px; bottom: 1px; font-size: 11px; } .skill.vazia { opacity: .4; } #cargas { display: flex; gap: 6px; margin-right: 14px; } .carga { width: 18px; height: 22px; clip-path: polygon(50% 0, 100% 35%, 80% 100%, 20% 100%, 0 35%); background: conic-gradient(from 180deg, var(--legiao-clara) var(--p, 100%), #23272f 0); filter: drop-shadow(0 1px 0 #000); } .carga.cheia { background: linear-gradient(180deg, #e2d6ff, var(--legiao)); } #btn-dash { width: 78px; height: 78px; padding: 0; cursor: pointer; border: 0; background: none; display: grid; place-items: center; --c: 18px; --c2: 4px; touch-action: none; -webkit-touch-callout: none; transition: transform .06s; } #btn-dash::after { background: var(--grao), linear-gradient(180deg, #3a425c, var(--ardosia-esc)); } #btn-dash svg { width: 44px; height: 44px; } #btn-dash .dash-a { fill: var(--legiao); } #btn-dash .dash-b { fill: #e2d6ff; } #btn-dash.ativo { transform: translateY(3px) scale(.94); } #btn-dash.ativo::before { filter: drop-shadow(0 0 10px rgba(201,182,255,.8)); } .modo-mouse #btn-dash { display: none; } #btn-pausa:active, #pacto:active { transform: translateY(2px); } #btn-pausa:disabled, #btn-dash:disabled { opacity: .5; cursor: default; } @media (hover: hover) { #btn-pausa:hover svg, #pacto:hover .anel-fundo { fill: #3a425c; } #btn-dash:hover::before { filter: drop-shadow(0 0 6px rgba(201,182,255,.6)); } } #aviso { position: absolute; left: 50%; top: 32%; transform: translate(-50%, -50%); font-weight: 900; font-size: clamp(26px, 7vw, 54px); letter-spacing: .08em; color: var(--legiao-clara); text-shadow: 0 3px 0 #000, 0 0 18px var(--legiao); pointer-events: none; z-index: 8; opacity: 0; white-space: nowrap; } /* joystick fixo no canto inferior esquerdo (FB-20261031-05); começa a valer num raio ~2× em volta dele */ border: 3px solid rgba(201,160,106,.45); background: radial-gradient(circle, rgba(27,34,48,.55), rgba(27,34,48,.2)); pointer-events: none; } background: radial-gradient(circle at 40% 35%, var(--osso), var(--osso-esc)); box-shadow: 0 3px 0 #0b0815, inset 0 0 0 3px var(--bronze); transition: transform .08s; } #mao { position: absolute; pointer-events: none; z-index: 12; transform: translate(-50%, -50%); } .mao-anel { fill: none; stroke: var(--creme); stroke-width: 3; opacity: .85; } .mao-dedo { fill: var(--creme); } #debug { position: absolute; left: 8px; top: 140px; font: 11px/1.4 monospace; background: rgba(0,0,0,.6); padding: 4px 6px; z-index: 30; pointer-events: none; white-space: pre; } /* ---------- Telas (modal): a cena atrás, desfocada e tingida de pedra (nada de vazio roxo) ---------- */ #modal { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(24,26,30,.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); z-index: 20; padding: 16px; } #painel { width: min(92vw, 430px); max-height: 92vh; overflow: auto; padding: 22px 20px 20px; text-align: center; --c: 22px; --c2: 5px; animation: lapide-cai .42s cubic-bezier(.2,1.4,.4,1) both; } @keyframes lapide-cai { 0% { transform: translateY(-40px) rotate(-2deg); opacity: 0; } 60% { transform: translateY(4px) rotate(.6deg); opacity: 1; } 100% { transform: none; } } .cabeca-tela { display: flex; align-items: center; justify-content: center; gap: 10px; margin: -4px 0 8px; } .cabeca-tela .retrato { width: 64px; height: 64px; transform: rotate(-3deg); } #painel h2 { margin: 0; font-size: clamp(20px, 6.6vw, 30px); font-weight: 900; min-width: 0; overflow-wrap: anywhere; letter-spacing: .06em; line-height: 1.05; background: linear-gradient(180deg, #ffe7b8, var(--bronze-claro) 50%, var(--bronze)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 #000) drop-shadow(0 0 1px #000); } #painel h2.derrota { background: linear-gradient(180deg, #d9dde8, #8a93a8); -webkit-background-clip: text; background-clip: text; } #painel p { color: var(--osso); margin: 6px 0 12px; font-size: 15px; } #painel small { font-size: 13px; } .aba { display: inline-block; padding: 3px 12px 2px; margin-bottom: 4px; font-size: 13px; letter-spacing: .14em; color: var(--tinta); background: var(--osso); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); } .botoes { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 16px; } /* botão lápide: moldura de bronze, pedra (secundário) ou osso (principal), lábio embaixo, 5 estados */ .btn { min-height: 52px; min-width: 124px; padding: 2px 20px 0; border: 0; background: none; font-family: var(--letra); font-weight: 900; font-size: 16px; letter-spacing: .06em; color: var(--creme); text-shadow: 0 2px 0 #000; cursor: pointer; transition: transform .06s; --c: 12px; --c2: 3px; } .btn.prim { color: var(--tinta); text-shadow: 0 1px 0 rgba(255,255,255,.5); } .btn.prim::after { background: var(--grao), linear-gradient(180deg, #fbf4e2, var(--osso) 45%, var(--osso-esc)); } .btn:active:not(:disabled) { transform: translateY(3px); } .btn:active:not(:disabled)::before { filter: none; } .btn:disabled { cursor: default; color: #8a93a8; } .btn:disabled::before { background: #4a4f60; } .btn:disabled::after { background: var(--ardosia-esc); } .btn:focus-visible, .portao:focus-visible, #btn-pausa:focus-visible, #btn-dash:focus-visible { outline: 3px solid var(--creme); outline-offset: 3px; } @media (hover: hover) { .btn:hover:not(:disabled)::before, .portao:hover:not(:disabled)::before { background: linear-gradient(170deg, #f0cf98, var(--bronze-claro) 45%, var(--bronze)); } } /* recompensas: três chamas de alma (vencer · 3+ corações · intocável) que acendem como carimbo */ .estrelas { display: flex; justify-content: center; gap: 14px; margin: 8px 0 2px; } .estrela { width: 40px; height: 50px; background: #2b2f38; border-radius: 50% 50% 45% 45% / 62% 62% 38% 38%; box-shadow: inset 0 0 0 2px #3a425c; transform: scale(.75) rotate(-6deg); transition: transform .22s cubic-bezier(.2,1.6,.4,1), background .2s; } .estrela:nth-child(2) { transform: scale(.85) rotate(4deg); width: 46px; height: 58px; } .estrela.on { background: radial-gradient(circle at 45% 70%, #e8fbff, var(--alma) 45%, #2a8fb0); box-shadow: 0 0 16px rgba(111,227,255,.7), inset 0 0 0 2px #0b3a48; transform: scale(1) rotate(-6deg); } .estrela:nth-child(2).on { transform: scale(1.08) rotate(4deg); } .estrela-legenda { display: flex; justify-content: center; gap: 8px; font-size: 11px; color: var(--osso-esc); } .estrela-legenda span { width: 76px; } .mini-estrelas { color: var(--alma); letter-spacing: 2px; } /* linhas de escolha e portões: placas de osso (claras) com tinta escura, tamanhos pela importância */ .linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; margin: 10px 0; text-align: left; color: var(--tinta); --c: 10px; } .linha::after, .portao::after { background: var(--grao), linear-gradient(180deg, #f6eed9, var(--osso) 55%, var(--osso-esc)); } .linha b { font-size: 15px; } .linha small { color: #4a3d2a; display: block; font-family: Georgia, serif; font-weight: 400; font-size: 14px; } .portoes { display: flex; flex-direction: column-reverse; gap: 10px; margin: 8px 0; } .portao { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; padding: 6px 14px; border: 0; background: none; cursor: pointer; color: var(--tinta); font-family: var(--letra); font-weight: 900; font-size: 16px; --c: 12px; } .portao .mini-estrelas { color: #1d7d9a; } .portao.atual { transform: rotate(-1.5deg) scale(1.03); } .portao.atual::before { background: linear-gradient(170deg, #e2d6ff, #9b7bff 50%, #5b46a8); } .portao:disabled { cursor: default; color: #6d6f7c; } .portao:disabled::after { background: var(--ardosia-esc); } /* relicário de bronze (baú do portão) */ .bau { width: 92px; height: 74px; margin: 12px auto 4px; position: relative; background: linear-gradient(180deg, #d4a868, var(--bronze) 55%, var(--bronze-esc)); border: 3px solid #1b1206; clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); } .bau::after { content: ''; position: absolute; left: 36%; top: 30%; width: 28%; height: 34%; background: var(--alma); border: 2px solid #0b0815; border-radius: 50% 50% 45% 45% / 62% 62% 38% 38%; box-shadow: 0 0 10px var(--alma); } .bau.abre { animation: abre .5s; } @keyframes abre { 30% { transform: translateY(-8px) rotate(-5deg) scale(1.12); } 60% { transform: translateY(2px) rotate(2deg) scale(.96); } } .opcao { display: flex; justify-content: space-between; align-items: center; margin: 10px 0; gap: 10px; font-size: 15px; color: var(--osso); } .opcao input[type=range] { width: 50%; accent-color: var(--bronze-claro); } .opcao .btn { min-width: 96px; } @media (prefers-reduced-motion: reduce) { #painel, .pip.quebra, #pacto.cheio, .bau.abre { animation: none; } .estrela, .btn, #btn-dash { transition: none; } } /* paisagem: portão e chefe sobem para a linha de cima, entre a placa do herói e a pausa (a arena fica livre) */ @media (min-aspect-ratio: 4/3) { #topo { top: calc(var(--seguro-top) + 4px); width: min(40vw, 420px); } } .num.cura { color: var(--vida); font-size: 22px; } /* ---------- progressão v2: nível e XP na placa, mapa por reino, Ritual, talentos, relíquias ---------- */ .retrato { position: relative; } #nivel-heroi { position: absolute; right: 1px; bottom: 1px; min-width: 20px; height: 18px; padding: 0 4px; display: grid; place-items: center; font-size: 12px; font-weight: 900; color: var(--tinta); background: var(--osso); box-shadow: 0 0 0 2px var(--bronze-esc); clip-path: polygon(5px 0, 100% 0, 100% 100%, 0 100%, 0 5px); } #xp-barra { height: 5px; background: var(--vida-vazia); box-shadow: 0 0 0 1px #0b0815; } #xp-fill { display: block; height: 100%; background: linear-gradient(90deg, #b89cff, #e2d6ff); transform-origin: left; transform: scaleX(0); transition: transform .25s; } .xp-mini { display: inline-block; width: 70px; height: 6px; vertical-align: middle; background: var(--vida-vazia); box-shadow: 0 0 0 1px #0b0815; } .xp-mini.largo { display: block; width: 100%; margin: 4px 0 10px; } .xp-mini i, .barra-missao i { display: block; height: 100%; background: linear-gradient(90deg, #b89cff, #e2d6ff); } .reinos { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0; } .btn.seta { min-width: 48px; padding: 0; } .portoes.grade { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; } .portoes.grade .portao { min-height: 52px; padding: 4px; flex-direction: column; justify-content: center; gap: 2px; font-size: 15px; --c: 8px; } .portoes.grade .portao .mini-estrelas { font-size: 9px; letter-spacing: 0; } .portao.trono::before { background: linear-gradient(170deg, #ffe7b8, var(--bronze-claro) 50%, var(--bronze)); } .portao.horda::after { background: var(--grao), linear-gradient(180deg, #f3e7c4, #d9c590); } .barra-missao { height: 6px; margin-top: 4px; background: #c9bb9a; box-shadow: inset 0 0 0 1px #8a7a5a; } .missao.feita { opacity: .6; } .carimbo { font-weight: 900; font-size: 13px; color: #5a3a10; border: 2px solid #5a3a10; padding: 2px 8px; transform: rotate(-6deg); } .sobe { color: #e2d6ff; } .linha.reliquia::before { background: linear-gradient(170deg, var(--rar), var(--bronze) 55%, var(--bronze-esc)); } .linha .passiva { color: #5b2f9a; font-style: italic; } .acoes-rel { display: flex; flex-direction: column; gap: 6px; } .acoes-rel .btn { min-width: 96px; min-height: 48px; font-size: 14px; } .vazio-rel { opacity: .7; } .icone-rel { flex: none; width: 34px; height: 34px; border: 5px solid var(--rar, #8a6238); border-radius: 50%; box-shadow: 0 0 0 2px #2e1f10; } .icone-rel.colar { border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%; border-top-color: transparent; } .icone-rel.pulseira { border-radius: 40%; height: 26px; } .linha > .btn { min-width: 76px; flex: none; } /* ---------- Rodada 1 de sensação ---------- */ /* vida baixa: bordas vermelhas pulsando no ritmo do coração (vermelho = perigo, cor reservada) */ #vinheta::after { content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity .4s; background: radial-gradient(ellipse at 50% 50%, transparent 50%, rgba(255,59,59,.22) 80%, rgba(255,59,59,.5) 100%); } #vinheta.perigo::after { opacity: 1; animation: batida .95s ease-out infinite; } @keyframes batida { 0% { opacity: .55; } 12% { opacity: 1; } 30% { opacity: .65; } 42% { opacity: .9; } 100% { opacity: .5; } } /* esquiva perfeita: o mundo perde a cor por um instante e volta */ #app.esquiva #tela { animation: esquiva-cor .5s ease-out; } @keyframes esquiva-cor { 0% { filter: saturate(.15) brightness(1.25) contrast(1.15); } 100% { filter: none; } } /* combo de levantar alto: brilho violeta no número */ .num.combo-alto { color: #e2d6ff; text-shadow: 0 0 10px rgba(123,77,255,.95), 0 2px 0 #000, 0 0 2px #000; } @media (prefers-reduced-motion: reduce) { #vinheta.perigo::after { animation: none; opacity: .8; } #app.esquiva #tela { animation: none; } } /* ---------- Run: cartas, série, sala, moedas e resumo ---------- */ #sala-num { font-weight: 900; font-size: 13px; letter-spacing: .1em; color: var(--creme); text-shadow: 0 2px 0 #000; margin-bottom: -4px; } #serie { position: absolute; left: max(14px, env(safe-area-inset-left)); top: 40%; font-weight: 900; font-size: 20px; color: var(--legiao-clara); transform-origin: left center; text-shadow: 0 0 12px rgba(123,77,255,.9), 0 2px 0 #000, 1px 0 0 #000, -1px 0 0 #000; } .num.critico { color: #fff3c4; font-size: 24px; letter-spacing: .02em; text-shadow: 0 0 10px rgba(245,197,66,.95), 0 3px 0 #000, 2px 0 0 #000, -2px 0 0 #000; } .moeda-voa { position: absolute; width: 14px; height: 14px; will-change: transform; } #chefe-rastro { position: absolute; left: 3px; top: 3px; bottom: 3px; width: 0; background: #f7f1e3; transition: width .55s cubic-bezier(.5,0,.3,1) .12s; } #chefe-fill { z-index: 1; } /* HUD: fileira compacta de skills da run */ #skills.run { flex-wrap: wrap-reverse; justify-content: flex-end; max-width: 164px; gap: 3px; } #skills.run .skill { width: 30px; height: 30px; --c: 7px; } #skills.run .skill svg { width: 18px; height: 18px; fill: var(--rar); } #skills.run .skill .nv { font-size: 8px; right: 2px; bottom: 0; } @media (prefers-reduced-motion: reduce) { .carta, .cartas-titulo, .build-carta, #cartas, .carta.rar-lendaria.parou, .carta.parou .fita span:last-child svg { animation: none; } .carta.escolhida { animation: none; transform: scale(1.03); } .carta, .info { transition: none; } } /* Cartão entre capítulos e faixa de sala */ #entrada { position: absolute; inset: 0; z-index: 25; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 20px; text-align: center; background: radial-gradient(ellipse at 50% 50%, #1d1533, #07070f 75%); animation: cartas-escurece .25s ease-out; } #entrada small { font-size: 13px; letter-spacing: .06em; color: var(--ouro); } #entrada span { font-size: clamp(15px, 4.4vw, 22px); letter-spacing: .3em; text-transform: uppercase; color: var(--bronze-claro); animation: titulo-bate .4s cubic-bezier(.2,1.5,.4,1) .08s backwards; } #entrada b { font-size: clamp(32px, 10vw, 58px); font-weight: 900; line-height: 1.05; color: var(--creme); text-shadow: 0 4px 0 #000, 0 0 26px rgba(123,77,255,.8); animation: titulo-bate .46s cubic-bezier(.2,1.5,.4,1) .18s backwards; } .cap-pips { display: flex; gap: 8px; margin-top: 12px; } .cap-pips i { width: 26px; height: 6px; background: #342c4a; } .cap-pips i.feito { background: var(--bronze-claro); } .cap-pips i.atual { background: var(--legiao-clara); box-shadow: 0 0 10px var(--legiao); } #banner-sala { position: absolute; left: 50%; top: 27%; z-index: 7; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 26px; pointer-events: none; white-space: nowrap; transform: translate(-50%, -50%); background: linear-gradient(90deg, transparent, rgba(8,8,18,.82) 22%, rgba(8,8,18,.82) 78%, transparent); } #banner-sala small { font-size: 11px; letter-spacing: .18em; color: var(--bronze-claro); } #banner-sala b { font-size: clamp(22px, 6.6vw, 34px); font-weight: 900; letter-spacing: .05em; color: var(--creme); text-shadow: 0 2px 0 #000; } #banner-sala.destaque small { color: var(--ouro); } @media (prefers-reduced-motion: reduce) { .btn.jogar-grande, #entrada, #entrada span, #entrada b { animation: none; } } /* ========================================================================== UI v4: segue as telas de referência do dono (ferramentas/dev/capturas/ui-v4). Fundo pintado de cripta ou salão; placas índigo com fio de bronze e chanfro; ação principal em pergaminho dourado; títulos em Cinzel; leitura em Alegreya Sans; roxo = poder, dourado = recompensa. */ :root { --fundo-tela: #0b0a16; --placa: #171728; --placa-clara: #201f33; --fio: rgba(201,160,106,.34); --fio-roxo: rgba(142,102,255,.38); --texto: #f2ecdc; --texto-suave: #aaa6ad; --roxo: #8e5cff; --roxo-claro: #c9a8ff; --pergaminho: #f8eccd; --pergaminho-2: #e9d3a0; --dourado: #f2bb45; --letra2: 'Alegreya', Georgia, serif; --corpo: 'Alegreya Sans', 'Segoe UI', Roboto, system-ui, sans-serif; } /* forma assinatura: chanfro nos 4 cantos */ .btn, .btn-voltar, #btn-pausa, #btn-dash, .capitulo-sel, .atalho, .linha, .talento, .carta, .dado, .moldura-item, .t-ic, .pausa-painel, .opcao { --k: 12px; --oct: polygon(var(--k) 0, calc(100% - var(--k)) 0, 100% var(--k), 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, var(--k) 100%, 0 calc(100% - var(--k)), 0 var(--k)); } /* ---------- Base ---------- */ #modal { padding: 0; place-items: stretch; background: var(--fundo-tela); backdrop-filter: none; -webkit-backdrop-filter: none; } #modal[data-fundo='salao'] { background: var(--fundo-tela) url('assets/ui/v4/bg_salao.webp') center top / cover no-repeat; } #modal[data-fundo='cripta'] { background: var(--fundo-tela) url('assets/ui/v4/bg_cripta.webp') center / cover no-repeat; } #modal[data-fundo='cena'] { background: rgba(9,8,20,.78); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } #painel { width: 100%; max-width: 560px; height: 100%; max-height: none; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; padding: calc(var(--seguro-top) + 6px) 14px calc(var(--seguro-bot) + 14px); text-align: left; font-family: var(--corpo); font-weight: 500; animation: tela-entra .22s ease-out both; } #painel::before, #painel::after { display: none; } @keyframes tela-entra { from { opacity: 0; transform: translateY(8px); } } #painel h2, .cartas-titulo, .pausa-titulo { margin: 0; font-family: var(--letra); font-weight: 900; font-size: clamp(32px, 10vw, 44px); line-height: 1.05; letter-spacing: .02em; text-align: center; background: linear-gradient(180deg, #fff8e6, #d9c6a0); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 rgba(0,0,0,.65)); } #painel h2.derrota { background: linear-gradient(180deg, #f6efdc, #b9b3a4); -webkit-background-clip: text; background-clip: text; } .cabeca-tela { display: block; margin: 8px 0 4px; } .cabeca-tela .retrato { display: none; } #painel p { margin: 2px 0; font-size: 15px; color: var(--texto-suave); } #painel small { font-size: 14px; } .tela-barra { flex: none; display: flex; align-items: center; justify-content: space-between; min-height: 46px; } .tela-titulo { flex: none; display: flex; align-items: center; justify-content: center; gap: 6px; } .tela-sub { text-align: center; font-size: 16px !important; color: var(--texto-suave) !important; } .ornamento { flex: none; display: flex; align-items: center; justify-content: center; gap: 5px; height: 16px; } .ornamento i { width: 90px; height: 2px; background: linear-gradient(90deg, transparent, var(--roxo)); } .ornamento i:last-child { transform: scaleX(-1); } .ornamento i.meio { flex: none; width: 11px; height: 11px; background: var(--roxo-claro); transform: rotate(45deg); box-shadow: 0 0 10px var(--roxo), -11px 11px 0 -3px var(--roxo-claro), 11px -11px 0 -3px var(--roxo-claro); } .ornamento.dourado i { background: linear-gradient(90deg, transparent, var(--bronze-claro)); } .ornamento.dourado i.meio { background: #7a3cff; border: 2px solid var(--bronze-claro); box-shadow: 0 0 8px var(--roxo); } .btn-voltar { width: 46px; height: 46px; padding: 0; border: 0; background: var(--bronze-claro); clip-path: var(--oct); position: relative; display: grid; place-items: center; cursor: pointer; --k: 10px; } .btn-voltar::after { content: ''; position: absolute; inset: 2px; background: linear-gradient(180deg, #2e2c45, #1a1929); clip-path: var(--oct); } .btn-voltar svg { position: relative; z-index: 1; width: 22px; height: 22px; fill: var(--creme); } .btn-voltar.fixo { position: absolute; left: 14px; top: calc(var(--seguro-top) + 6px); z-index: 2; } .pill-ouro { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px 0 8px; border: 1px solid var(--fio); border-radius: 18px; background: rgba(13,12,24,.82); font: 700 18px var(--letra2); color: var(--creme); } .pill-ouro .moeda, .moeda { width: 20px; height: 20px; border: 0; background: radial-gradient(circle at 35% 30%, #fff1a8, #f5c542 48%, #b97a16); box-shadow: inset 0 0 0 2px #e6a52b, 0 1px 2px rgba(0,0,0,.6); } .aba { padding: 0; margin: 6px 0 0; background: none; clip-path: none; font: 800 14px var(--corpo); letter-spacing: .12em; text-transform: uppercase; color: var(--dourado); } .faixa { flex: none; align-self: center; display: grid; place-items: center; width: 62px; height: 66px; margin: -8px 0 2px; background: linear-gradient(180deg, #5b2bb0, #3a1a78); clip-path: polygon(0 0, 100% 0, 100% 74%, 50% 100%, 0 74%); } .faixa svg { width: 32px; height: 32px; fill: #e0a884; margin-top: -10px; } .louro { flex: none; width: 34px; height: 34px; fill: var(--bronze-claro); transform: scaleX(-1); } .louro.inv { transform: none; } .com-louros h2 { font-size: clamp(27px, 8.4vw, 40px) !important; } /* botões */ .btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 2px 14px 0; border: 0; background: none; font-family: var(--letra); font-weight: 900; font-size: 17px; letter-spacing: .03em; text-transform: uppercase; color: var(--creme); text-shadow: none; cursor: pointer; transition: transform .07s, filter .15s; --k: 13px; } .btn::before, .btn::after { content: ''; position: absolute; z-index: -1; clip-path: var(--oct); filter: none; } .btn::before { inset: 0; background: linear-gradient(180deg, #7f6242, #4b3a55); } .btn::after { inset: 2px; background: linear-gradient(180deg, #2b2a42, #1b1a2c); } .btn svg { flex: none; width: 24px; height: 24px; fill: currentColor; } .btn.prim { color: #2c2030; text-shadow: none; filter: drop-shadow(0 0 9px rgba(242,187,69,.5)); } .btn.prim::before { background: linear-gradient(180deg, #ffd777, #d99a35 60%, #b27620); } .btn.prim::after { inset: 3px; background: linear-gradient(180deg, #fff6df, var(--pergaminho) 45%, var(--pergaminho-2)); } .btn:active:not(:disabled) { transform: translateY(2px) scale(.99); } .btn:disabled { color: #7c7a88; } .btn:disabled::before { background: #3b3a4c; } .btn:disabled::after { background: #1b1a29; } .btn:focus-visible, .btn-voltar:focus-visible, .atalho:focus-visible, .seta-cap:focus-visible, .carta:focus-visible, .talento:focus-visible, .chave:focus-visible { outline: 2px solid var(--creme); outline-offset: 2px; } .botoes { flex: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: auto; padding-top: 12px; } .botoes .btn { min-width: 0; } .botoes .btn.prim { grid-column: 1 / -1; min-height: 66px; font-size: 24px; } .botoes .btn:only-child { grid-column: 1 / -1; } .botoes .btn:nth-child(even):last-child { grid-column: 1 / -1; } /* placas */ .lista-tela { flex: none; display: flex; flex-direction: column; gap: 10px; } .linha { position: relative; display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 12px 12px 16px; background: linear-gradient(120deg, var(--placa-clara), var(--placa)); color: var(--texto); clip-path: var(--oct); box-shadow: inset 0 0 0 1px var(--fio-roxo); --k: 10px; } .linha::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--rar, var(--roxo)); display: block; inset: 0 auto 0 0; clip-path: none; filter: none; z-index: 0; } .linha::after { display: none; } .linha b { font: 700 17px/1.15 var(--corpo); color: var(--texto); } .linha small { display: block; font: 500 14px/1.25 var(--corpo); color: var(--texto-suave); } .moldura-item { flex: none; display: grid; place-items: center; width: 74px; height: 74px; background: linear-gradient(135deg, #2c2a42, #141322); clip-path: var(--oct); box-shadow: inset 0 0 0 2px var(--rar, var(--fio)); --k: 11px; } .moldura-item img { width: 88%; height: 88%; object-fit: contain; } .moldura-item.apagada img { opacity: .45; filter: grayscale(.6); } .rel-info { flex: 1; min-width: 0; } .cor-rar { font-style: normal; font-weight: 700; color: var(--rar); } .linha.rar-comum .cor-rar { color: var(--texto-suave); } .linha .passiva { color: var(--roxo-claro); } .vazio-rel { opacity: .8; --rar: #5e5c6c; } .carimbo { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border: 2px solid #41d873; border-radius: 4px; color: #6fe68f; font: 700 14px var(--corpo); background: rgba(40,160,80,.1); transform: rotate(-5deg); } .carimbo svg { width: 16px; height: 16px; fill: #6fe68f; } .acoes-rel { flex: none; display: flex; flex-direction: column; gap: 6px; width: 108px; } .acoes-rel .btn { width: 100%; min-width: 0; min-height: 40px; padding: 2px 4px 0; gap: 4px; font: 700 15px var(--corpo); text-transform: none; --k: 9px; } .acoes-rel .moeda { width: 15px; height: 15px; } .titulo-bolsa { display: flex; align-items: center; gap: 8px; margin-top: 4px; font: 800 15px var(--letra2); letter-spacing: .05em; text-transform: uppercase; color: var(--creme); } .titulo-bolsa svg { width: 22px; height: 22px; fill: var(--dourado); } .titulo-bolsa i { flex: 1; height: 1px; background: linear-gradient(90deg, var(--fio), transparent); } .vazio-txt { text-align: center; } /* altar */ .altar-arte { flex: none; display: flex; justify-content: center; height: clamp(110px, 21vh, 190px); margin-top: -6px; } .altar-arte img { height: 100%; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 0 22px rgba(142,92,255,.45)); } .circulo-ic { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--roxo), 0 0 12px rgba(142,92,255,.35); background: rgba(142,92,255,.1); } .circulo-ic svg { width: 30px; height: 30px; fill: var(--roxo-claro); } .altar-info { flex: 1; min-width: 0; } .segmentos { display: flex; gap: 2px; margin-top: 6px; } .segmentos i { flex: 1; max-width: 22px; height: 7px; background: #2c2b40; border-radius: 2px; } .segmentos i.on { background: linear-gradient(180deg, #b48bff, var(--roxo)); box-shadow: 0 0 6px rgba(142,92,255,.6); } .btn.preco { flex: none; width: 84px; min-width: 0; min-height: 48px; padding: 2px 4px 0; gap: 5px; font: 800 17px var(--corpo); text-transform: none; } /* ritual */ .missao-txt { flex: 1; min-width: 0; } .missao-premio { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 92px; } .missao-premio > span:first-child { display: inline-flex; align-items: center; gap: 4px; font: 700 15px var(--corpo); color: var(--texto); } .missao-premio .moeda { width: 17px; height: 17px; } .barra-missao { height: 8px; margin-top: 6px; border-radius: 4px; overflow: hidden; background: #0f0e1c; box-shadow: none; } .barra-missao i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(180deg, #b48bff, #7a48e6); } .linha.missao .moldura-item { width: 58px; height: 58px; } .btn.coletar { width: 100%; min-width: 0; min-height: 38px; padding: 2px 2px 0; font: 800 14px var(--corpo); letter-spacing: .02em; --k: 9px; } .btn.coletar.pronta { color: #3a2410; } .btn.coletar.pronta::before { background: linear-gradient(180deg, #ffe08a, #d4932b); } .btn.coletar.pronta::after { inset: 2px; background: linear-gradient(180deg, #ffe48f, #f6bf3f); } .btn.coletar.pronta i, .missao.feita .missao-txt { opacity: .7; } /* opções */ .pausa-brasao { flex: none; align-self: center; display: grid; place-items: center; width: 58px; height: 58px; margin-top: 3vh; background: #2e1c63; clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); box-shadow: inset 0 0 0 2px var(--roxo); } .pausa-brasao svg { width: 34px; height: 34px; fill: var(--roxo-claro); } .pausa-painel { flex: none; display: flex; flex-direction: column; gap: 6px; padding: 8px; margin-top: 8px; background: rgba(20,18,36,.9); clip-path: var(--oct); box-shadow: inset 0 0 0 1px var(--fio-roxo); } .opcao { display: flex; align-items: center; gap: 10px; min-height: 54px; margin: 0; padding: 4px 12px; background: var(--placa); clip-path: var(--oct); font: 700 16px var(--corpo); color: var(--texto); --k: 7px; } .opcao > svg { flex: none; width: 24px; height: 24px; fill: var(--bronze-claro); } .opcao > span { flex: 1; } .opcao input[type=range] { flex: 0 0 46%; width: 46%; height: 26px; margin: 0; background: none; -webkit-appearance: none; appearance: none; accent-color: var(--roxo); --p: 50%; } .opcao input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--roxo) var(--p), #3a3852 var(--p)); } .opcao input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -6px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff1a8, #f5c542 55%, #b97a16); box-shadow: 0 1px 3px #000; } .opcao input[type=range]::-moz-range-track { height: 8px; border-radius: 4px; background: #3a3852; } .opcao input[type=range]::-moz-range-progress { height: 8px; border-radius: 4px; background: var(--roxo); } .opcao input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: #f5c542; } .chave { flex: none; position: relative; width: 84px; height: 36px; padding: 0 0 0 12px; border: 2px solid #4b4860; border-radius: 18px; background: #1a1929; color: var(--texto-suave); font: 800 15px var(--corpo); text-align: left; cursor: pointer; } .chave i { position: absolute; left: 4px; top: 4px; width: 24px; height: 24px; border-radius: 50%; background: #6d6a80; transition: left .12s; } .chave span { position: absolute; right: 12px; top: 7px; } .chave.on { border-color: var(--roxo); background: #291a54; color: var(--creme); box-shadow: 0 0 10px rgba(142,92,255,.4); } .chave.on i { left: 52px; background: radial-gradient(circle at 35% 30%, #fff, #d48bff 60%, #a35be0); } .chave.on span { right: auto; left: 13px; } .pausa-botoes { margin-top: 12px; } /* ---------- Tela inicial ---------- */ .inicio { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; } .inicio-topo { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 38px; } .chip-pacto { min-height: 36px; padding: 0 12px; border: 1px solid var(--dourado); border-radius: 18px; background: rgba(245,197,66,.14); color: var(--dourado); font: 700 13px var(--corpo); cursor: pointer; animation: pulsa-suave 1.6s ease-in-out infinite; } @keyframes pulsa-suave { 50% { background: rgba(245,197,66,.3); } } .marca { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; } .marca img { flex: 0 1 auto; min-height: 0; width: auto; max-width: 92%; height: clamp(110px, 31vh, 300px); margin-bottom: -18px; object-fit: contain; } .logo { position: relative; margin: 0; font: 900 clamp(26px, 8.9vw, 44px)/1 var(--letra); letter-spacing: .01em; text-align: center; background: linear-gradient(180deg, #fffaf0, #cfc4a8); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 #000); } .logo span { display: block; margin: 4px 0 0 .22em; font-size: .68em; letter-spacing: .22em; background: linear-gradient(180deg, #f6d994, #b98843); -webkit-background-clip: text; background-clip: text; color: transparent; } .marca .ornamento { width: 100%; margin-top: 6px; } .acao { flex: none; display: flex; flex-direction: column; gap: 12px; } .capitulo-sel { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px; align-items: center; padding: 10px 4px; min-height: 124px; background: linear-gradient(90deg, rgba(14,12,28,.1), rgba(14,12,28,.82) 32%, rgba(14,12,28,.82) 68%, rgba(14,12,28,.1)), var(--cap) center / cover no-repeat, var(--placa); clip-path: var(--oct); box-shadow: inset 0 0 0 1px var(--bronze-claro); --k: 14px; } .seta-cap { width: 42px; height: 60px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; } .seta-cap svg { width: 26px; height: 26px; fill: var(--bronze-claro); filter: drop-shadow(0 1px 2px #000); } .seta-cap:disabled { cursor: default; } .seta-cap:disabled svg { fill: #4a4860; } .capitulo-nome { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; text-align: center; } .tag-cap { display: inline-block; padding: 3px 18px; font: 700 13px var(--letra); letter-spacing: .16em; text-transform: uppercase; color: var(--bronze-claro); background: rgba(10,9,20,.6); clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%); box-shadow: inset 0 0 0 1px var(--fio); } .capitulo-nome b { font: 900 clamp(24px, 7.5vw, 32px)/1.1 var(--letra); color: var(--creme); text-shadow: 0 2px 0 #000; } .capitulo-nome em { font: italic 500 15px var(--letra2); color: #bfb8c4; } .cap-pips { display: flex; gap: 6px; margin-top: 4px; } .cap-pips i { width: 24px; height: 6px; border-radius: 3px; background: #3b3753; } .cap-pips i.feito { background: linear-gradient(90deg, #f0c56c, #c99a4a); } .cap-pips i.atual { background: var(--roxo); box-shadow: 0 0 9px var(--roxo); } .btn.jogar-grande { width: 100%; min-height: 84px; font-size: clamp(32px, 10vw, 44px); letter-spacing: .04em; color: #16142c; --k: 22px; animation: jogar-pulsa 1.8s ease-in-out infinite; } @keyframes jogar-pulsa { 50% { filter: drop-shadow(0 0 20px rgba(242,187,69,.75)); } } .friso { width: 44px; height: 2px; background: #a57a3c; position: relative; flex: none; } .friso::after { content: ''; position: absolute; right: -4px; top: -4px; width: 10px; height: 10px; background: #a57a3c; transform: rotate(45deg); } .friso.inv { transform: scaleX(-1); } .atalhos { flex: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .atalho { position: relative; min-height: 80px; padding: 8px 2px 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 0; background: linear-gradient(180deg, #1f1e33, #151425); color: var(--creme); font: 700 clamp(13px, 3.6vw, 16px) var(--letra2); cursor: pointer; clip-path: var(--oct); box-shadow: inset 0 0 0 1px var(--fio); --k: 11px; } .atalho svg { width: 30px; height: 30px; fill: var(--bronze-claro); } .atalho:active { filter: brightness(1.25); } .selo { position: absolute; top: 6px; right: 8px; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: radial-gradient(circle at 40% 30%, #ffdf80, #eba92e); color: #271a0c; font: 800 13px var(--letra2); font-style: normal; } @media (min-aspect-ratio: 1/1) { #painel { max-width: 900px; } .inicio { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr auto; column-gap: 20px; row-gap: 8px; } .inicio-topo { grid-column: 1 / -1; } .marca { grid-row: 2 / 4; justify-content: center; } .marca img { height: clamp(90px, 42vh, 280px); } .acao { justify-content: center; gap: 8px; } .capitulo-sel { padding: 4px; min-height: 96px; } .btn.jogar-grande { min-height: 58px; font-size: 28px; } .atalho { min-height: 46px; flex-direction: row; gap: 5px; padding: 4px; } .atalho svg { width: 18px; height: 18px; } .selo { position: static; } .botoes { grid-template-columns: repeat(3, minmax(0, 1fr)); } .botoes .btn.prim { grid-column: auto; min-height: 54px; font-size: 18px; } .altar-arte { display: none; } } /* ---------- Cartas e talentos ---------- */ #cartas { position: absolute; inset: 0; z-index: 15; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: calc(var(--seguro-top) + 8px) 14px calc(var(--seguro-bot) + 12px); overflow-y: auto; touch-action: pan-y; font-family: var(--corpo); background: var(--fundo-tela) url('assets/ui/v4/bg_cripta.webp') center / cover no-repeat; animation: cartas-escurece .16s ease-out; } #cartas[hidden] { display: none; } @keyframes cartas-escurece { from { opacity: 0; } } .cartas-topo { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; } .cartas-titulo { animation: titulo-bate .32s cubic-bezier(.2,1.5,.4,1); } @keyframes titulo-bate { from { transform: scale(1.45); opacity: 0; } } .cartas-sub { font-size: 17px; font-weight: 500; color: var(--texto-suave); } .mesa { flex: none; display: flex; flex-direction: column; gap: 12px; width: min(100%, 440px); } .carta { position: relative; display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 14px; min-height: 122px; padding: 12px; border: 0; background: linear-gradient(120deg, var(--placa-clara), var(--placa)); color: var(--texto); font: inherit; text-align: left; cursor: pointer; clip-path: var(--oct); box-shadow: inset 0 0 0 2px #34324a; --k: 14px; animation: carta-sobe .34s cubic-bezier(.2,1.25,.4,1) backwards; animation-delay: calc(var(--i) * 70ms); transition: transform .12s, opacity .18s, box-shadow .15s; touch-action: manipulation; } @keyframes carta-sobe { from { transform: translateY(60px) scale(.94); opacity: 0; } } .carta:disabled { cursor: default; color: var(--texto); } .carta.parou { box-shadow: inset 0 0 0 2px var(--rar), inset 0 0 32px -12px var(--rar); } .carta.rar-comum.parou { box-shadow: inset 0 0 0 2px #77746e; } .carta.rar-lendaria.parou { animation: lendaria 1.1s ease-in-out infinite; } @keyframes lendaria { 50% { box-shadow: inset 0 0 0 2px var(--rar), inset 0 0 56px -6px var(--rar); } } #cartas.pronta .carta:active:not(:disabled) { transform: scale(.98); } .rolo { width: 92px; height: 92px; overflow: hidden; border-radius: 50%; background: #090a12; box-shadow: inset 0 0 0 2px #34324a; } .carta.parou .rolo { box-shadow: inset 0 0 0 2px var(--rar), 0 0 14px -3px var(--rar); } .fita { display: block; will-change: transform; } .fita span { display: grid; place-items: center; width: 92px; height: 92px; } .fita svg { width: 56px; height: 56px; fill: #6d6f7c; } .carta.parou .fita span:last-child svg { fill: var(--rar); filter: drop-shadow(0 0 8px var(--rar)); animation: icone-bate .3s cubic-bezier(.2,1.6,.4,1); } @keyframes icone-bate { from { transform: scale(1.5); } } .info { display: flex; flex-direction: column; gap: 3px; min-width: 0; opacity: 0; transform: translateX(8px); transition: opacity .15s, transform .15s; } .carta.parou .info { opacity: 1; transform: none; } .info .rar { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--rar); } .carta.rar-comum .info .rar { color: var(--texto-suave); } .info b { font: 900 19px/1.12 var(--letra); } .info small { font-size: 15px; font-weight: 500; line-height: 1.22; color: #d0ccc0; } .pips { display: flex; gap: 4px; margin-top: 3px; } .pips i { width: 22px; height: 5px; border-radius: 2px; background: #34324a; } .pips i.on { background: var(--rar); } .carta.rar-comum .pips i.on { background: var(--texto); } .carta.escolhida { z-index: 2; animation: carimbo .34s cubic-bezier(.2,1.5,.4,1) forwards; } @keyframes carimbo { 0% { transform: scale(1.1); } 45% { transform: scale(.97); } 100% { transform: scale(1.03); filter: brightness(1.35); } } .carta.recusada { opacity: .15; transform: scale(.95); } .cartas-build { flex: none; display: flex; align-items: center; gap: 8px; max-width: 100%; } .cartas-build small { flex: none; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--dourado); } .cartas-build > div { display: flex; flex-wrap: wrap; gap: 4px; } .cartas-build span { position: relative; display: grid; place-items: center; width: 30px; height: 30px; background: var(--placa); box-shadow: inset 0 0 0 1px var(--fio); } .cartas-build svg { width: 19px; height: 19px; fill: var(--rar); } .cartas-build i { position: absolute; right: 2px; bottom: 0; font: 800 9px var(--corpo); font-style: normal; color: var(--ouro); } .saldo-pontos { display: inline-flex; align-items: center; gap: 8px; height: 46px; margin-top: 6px; padding: 0 20px 0 6px; font-size: 18px; font-weight: 500; color: var(--creme); background: rgba(24,22,38,.92); clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%); box-shadow: inset 0 0 0 1px var(--fio); } .saldo-pontos b { font: 900 30px var(--letra); color: var(--dourado); } .estrela-pontos { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #2c1d5e; box-shadow: inset 0 0 0 1px var(--roxo); } .estrela-pontos svg { width: 24px; height: 24px; fill: #e6d8ff; } .nivel-necro { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; width: min(100%, 320px); margin: 4px auto 0; font: 700 14px var(--corpo); color: var(--texto-suave); text-align: center; } .nivel-necro b { color: var(--dourado); font-weight: 800; } .nivel-necro i { display: block; width: 100%; height: 5px; border-radius: 3px; overflow: hidden; background: #0f0e1c; } .nivel-necro u { display: block; height: 100%; background: linear-gradient(90deg, #a988ff, #e2d6ff); } .talentos-grade { flex: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; width: min(100%, 440px); } .talento { display: grid; grid-template-columns: 46px minmax(0, 1fr); grid-template-areas: 'ic nome' 'ic valor' 'nv nv'; column-gap: 10px; row-gap: 1px; align-items: center; min-height: 92px; padding: 10px; border: 0; background: linear-gradient(135deg, #24233a, #17162a); color: var(--texto); font: inherit; text-align: left; cursor: pointer; clip-path: var(--oct); box-shadow: inset 0 0 0 1px #3c3a56; touch-action: manipulation; transition: transform .1s; --k: 11px; } .t-ic { grid-area: ic; display: grid; place-items: center; width: 44px; height: 44px; background: #1b1830; clip-path: var(--oct); box-shadow: inset 0 0 0 1px #4a3a7e; --k: 9px; } .t-ic svg { width: 28px; height: 28px; fill: #dcc8ff; } .t-nome { grid-area: nome; align-self: end; font-size: 16px; font-weight: 800; line-height: 1.08; } .t-valor { grid-area: valor; align-self: start; font-size: 15px; font-weight: 700; color: #8e8b98; } .t-valor b { color: #ffd84d; font-weight: 800; white-space: nowrap; } .t-nv { grid-area: nv; height: 7px; margin-top: 8px; border-radius: 4px; overflow: hidden; background: #0e0d1b; } .t-nv i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(180deg, #c9a8ff, #a176f0); } .talento:active:not(:disabled) { transform: scale(.97); } .talento:disabled { cursor: default; color: var(--texto); } .talento:disabled:not(.cheio) { opacity: .62; } .talento.cheio .t-valor { color: var(--dourado); } .talento.comprou { opacity: 1 !important; box-shadow: inset 0 0 0 2px var(--roxo), inset 0 0 26px -6px var(--roxo); animation: talento-pop .3s cubic-bezier(.2,1.6,.4,1); } @keyframes talento-pop { 0% { transform: scale(1.08); filter: brightness(1.4); } } .btn.guardar { flex: none; width: min(92%, 400px); min-height: 60px; font-size: 20px; text-transform: none; } .no-menu .cartas-topo { margin-top: 18px; } @media (min-aspect-ratio: 1/1) { #cartas { gap: 8px; } .mesa { flex-direction: row; justify-content: center; width: min(100%, 900px); } .carta { flex: 1 1 0; min-width: 0; grid-template-columns: 1fr; justify-items: center; align-content: start; text-align: center; gap: 6px; padding: 10px; } .info { align-items: center; transform: translateY(6px); } .talentos-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(100%, 860px); } .talento { min-height: 76px; padding: 8px; } .btn.guardar { width: 240px; min-height: 42px; font-size: 16px; } .cartas-build, .nivel-necro { display: none; } } @media (max-height: 460px) { .rolo, .fita span { width: 58px; height: 58px; } .fita svg { width: 36px; height: 36px; } .cartas-titulo { font-size: 24px; } .cartas-sub, #cartas .ornamento { display: none; } .info b { font-size: 15px; } .info small { font-size: 13px; } .saldo-pontos { height: 30px; margin: 0; } .saldo-pontos b { font-size: 20px; } .estrela-pontos { display: none; } .cartas-topo { flex-direction: row; justify-content: center; gap: 12px; } } @media (max-height: 640px) and (max-aspect-ratio: 1/1) { .carta { min-height: 96px; grid-template-columns: 70px minmax(0, 1fr); padding: 8px 10px; } .rolo, .fita span { width: 70px; height: 70px; } .fita svg { width: 42px; height: 42px; } .talento { min-height: 76px; } .nivel-necro { display: none; } } /* ---------- Cartão de capítulo ---------- */ #entrada { position: absolute; inset: 0; z-index: 25; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px; text-align: center; background: var(--fundo-tela) url('assets/ui/v4/bg_salao.webp') center top / cover no-repeat; animation: cartas-escurece .25s ease-out; } .entrada-linha { display: flex; align-items: center; gap: 7px; margin-bottom: 14px; padding: 8px 14px; border-top: 1px solid var(--fio); border-bottom: 1px solid var(--fio); flex-direction: row-reverse; } #entrada small { font: italic 500 17px var(--letra2); letter-spacing: 0; color: var(--dourado); } #entrada .tag-cap.grande { padding: 7px 28px; font: 700 clamp(15px, 4.6vw, 20px) var(--letra); letter-spacing: .18em; color: var(--bronze-claro); animation: titulo-bate .4s cubic-bezier(.2,1.5,.4,1) .08s backwards; } #entrada b { font: 900 clamp(46px, 15vw, 76px)/1.05 var(--letra); letter-spacing: .05em; text-transform: uppercase; background: linear-gradient(180deg, #fffaf0, #cfc4a8); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 0 #000); animation: titulo-bate .46s cubic-bezier(.2,1.5,.4,1) .18s backwards; } #entrada .ornamento { width: 80%; } #entrada .cap-pips { margin-top: 16px; gap: 10px; } #entrada .cap-pips i { width: 34px; height: 9px; border-radius: 5px; } /* ---------- Resumo ---------- */ .run-dados { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 2px; } .dado { position: relative; display: flex; flex-direction: column; align-items: center; padding: 18px 2px 8px; background: linear-gradient(180deg, #24233a, #17162a); clip-path: none; box-shadow: inset 0 0 0 1px var(--fio-roxo); border-radius: 6px; } .dado img { position: absolute; top: -17px; left: 50%; width: 34px; height: 34px; transform: translateX(-50%); object-fit: contain; } .dado small { font: 800 12px var(--corpo) !important; letter-spacing: .08em; text-transform: uppercase; color: #bab6c0; } .dado b { font: 900 26px/1.1 var(--letra); color: var(--creme); } .golpe-de { font-size: 16px !important; padding-bottom: 6px; border-bottom: 1px solid var(--fio-roxo); } .build { flex: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin: 2px 0; } .build-carta { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 7px 8px; background: var(--placa); box-shadow: inset 3px 0 0 var(--rar), inset 0 0 0 1px #2f2e45; border-radius: 3px; animation: build-entra .28s cubic-bezier(.2,1.4,.4,1) backwards; animation-delay: calc(200ms + var(--i) * 130ms); } @keyframes build-entra { from { transform: scale(1.3); opacity: 0; } } .build-carta svg { flex: none; width: 20px; height: 20px; fill: var(--rar); } .build-carta b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 14px var(--corpo); color: var(--texto); } .build-carta span { flex: none; font: 800 12px var(--corpo); color: var(--dourado); } #painel .run-ouro { flex: none; display: flex; align-items: center; justify-content: center; gap: 6px; margin: 6px 0 2px; font: 900 30px var(--letra); color: var(--dourado); } #painel .run-ouro .moeda { width: 30px; height: 30px; } #painel .run-ouro b { font: 900 34px var(--letra); } .run-ouro small { font: 500 13px var(--corpo); color: var(--texto-suave); } .linha .icone-rel { display: none; } /* ---------- HUD ---------- */ #hud-heroi { padding: 0; gap: 0; align-items: center; } #hud-heroi::before, #hud-heroi::after { display: none; } #hud-heroi .retrato { z-index: 1; width: 60px; height: 60px; --oct: polygon(22% 0, 78% 0, 100% 22%, 100% 78%, 78% 100%, 22% 100%, 0 78%, 0 22%); clip-path: var(--oct); background: linear-gradient(160deg, var(--bronze-claro), var(--bronze) 50%, var(--bronze-esc)); padding: 3px; box-shadow: none; } #hud-heroi .retrato img { width: 100%; height: 100%; margin: 0; object-fit: cover; clip-path: var(--oct); background: #272340; display: block; } #nivel-heroi { right: 1px; bottom: 1px; min-width: 20px; height: 20px; color: #2a1b08; background: linear-gradient(180deg, #ffd777, #dc9e36); box-shadow: none; clip-path: polygon(4px 0, 100% 0, 100% 100%, 0 100%, 0 4px); font: 900 13px var(--letra); } #hud-heroi .dados { gap: 2px; margin-left: -6px; padding: 5px 16px 5px 12px; background: rgba(13,12,24,.74); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 60%, calc(100% - 12px) 100%, 0 100%); } #vida { gap: 4px; } .ic-vida { width: 15px; height: 15px; fill: #52e07c; } .pip { width: 6px; height: 11px; } #vida-num { font: 800 15px var(--corpo); } #mana { padding: 0; gap: 3px; align-items: center; } .chama-alma { width: 11px; height: 14px; background: #58c7f2; box-shadow: none; } #mana-livre { font: 800 18px var(--corpo); color: #72d5fb; } #mana-max { font: 700 13px var(--corpo); } #mana-rotulo { display: inline; font: 700 11px var(--corpo); letter-spacing: .06em; color: var(--texto-suave); } #mana-fill { display: none; } #xp-barra { width: 118px; height: 4px; border-radius: 2px; box-shadow: none; background: rgba(0,0,0,.6); overflow: hidden; } #xp-fill { background: linear-gradient(90deg, #b48bff, #e2d6ff); } #btn-pausa { width: 44px; height: 44px; right: calc(max(10px, env(safe-area-inset-right)) + 48px); --k: 11px; } #btn-pausa::before { clip-path: var(--oct); background: var(--bronze); filter: none; } #btn-pausa::after { clip-path: var(--oct); inset: 2px; background: rgba(23,22,39,.92); } #pacto { width: 44px; height: 44px; } #hud-ouro { top: calc(var(--seguro-top) + 48px); height: 28px; padding: 0 10px 0 6px; border-radius: 14px; background: rgba(13,12,24,.72); font: 800 16px var(--corpo); } #hud-ouro .moeda { width: 16px; height: 16px; } #topo { top: calc(var(--seguro-top) + 76px); gap: 4px; width: min(calc(100vw - 54px), 420px); } #sala-num { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 17px var(--letra2); letter-spacing: .01em; color: var(--creme); text-shadow: 0 1px 2px #000; } #sala-num::before, #sala-num::after { content: ''; width: 30px; height: 2px; background: linear-gradient(90deg, transparent, var(--bronze-claro)); } #sala-num::after { transform: scaleX(-1); } #progresso { position: relative; height: 10px; border-radius: 5px; background: rgba(9,8,20,.85); box-shadow: 0 0 0 1px var(--bronze); } #progresso::before, #progresso::after { display: none; } #progresso-fill { left: 1px; top: 1px; bottom: 1px; border-radius: 4px; background: linear-gradient(180deg, #a57dff, #7443e8); } .caveira-ic { position: absolute; right: -14px; top: 50%; width: 28px; height: 28px; padding: 3px; transform: translateY(-50%); border-radius: 50%; background: #17162a; box-shadow: 0 0 0 1px var(--bronze); fill: var(--osso); z-index: 1; } #chefe-nome { font: 700 14px var(--corpo); letter-spacing: .02em; } #btn-dash { width: 76px; height: 76px; --k: 22px; } #btn-dash::before { clip-path: var(--oct); background: linear-gradient(170deg, var(--bronze-claro), #55406c); filter: none; } #btn-dash::after { clip-path: var(--oct); inset: 3px; background: radial-gradient(circle at 50% 40%, #3f2b83, #1d1540); } #skills.run .skill { width: 38px; height: 38px; --c: 8px; --c2: 8px; } #skills.run .skill::before { background: var(--bronze); filter: none; } #skills.run .skill::after { inset: 2px; background: rgba(23,22,39,.92); } #skills.run .skill svg { width: 22px; height: 22px; } #skills.run .skill .nv { font-size: 9px; right: 4px; bottom: 1px; color: var(--dourado); } #skills.run { max-width: 200px; gap: 4px; } #banner-sala { top: 25%; } #banner-sala small { font: 800 12px var(--corpo); color: var(--texto); text-shadow: 0 1px 0 #000; } #banner-sala b { font-family: var(--letra); text-shadow: 0 3px 0 #000, 0 0 14px rgba(0,0,0,.8); } #banner-sala { background: none; } @media (min-aspect-ratio: 4/3) { #topo { top: calc(var(--seguro-top) + 2px); width: min(38vw, 420px); } } @media (prefers-reduced-motion: reduce) { #painel, #cartas, #entrada, #entrada .tag-cap.grande, #entrada b, .carta, .carta.rar-lendaria.parou, .cartas-titulo, .talento.comprou, .chip-pacto, .btn.jogar-grande, .build-carta { animation: none; } .carta.escolhida { animation: none; transform: scale(1.03); } .info { transition: none; } } /* borda que acompanha o chanfro: o elemento é a borda, o ::before é o miolo (box-shadow seria cortado pelo clip-path) */ .atalho, .capitulo-sel, .linha, .talento, .carta, .moldura-item, .t-ic, .pausa-painel { position: relative; isolation: isolate; box-shadow: none; background: var(--borda); } .atalho::before, .capitulo-sel::before, .linha::before, .talento::before, .carta::before, .moldura-item::before, .t-ic::before, .pausa-painel::before { content: ''; position: absolute; z-index: -1; inset: var(--esp, 1px); display: block; width: auto; clip-path: var(--oct); filter: none; background: var(--miolo); } .atalho { --borda: #6d5338; --miolo: linear-gradient(180deg, #1f1e33, #151425); } .capitulo-sel { --borda: linear-gradient(180deg, #d6a968, #7c5c3a); --esp: 2px; --miolo: linear-gradient(90deg, rgba(14,12,28,.05), rgba(14,12,28,.84) 32%, rgba(14,12,28,.84) 68%, rgba(14,12,28,.05)), var(--cap) center / cover no-repeat, var(--placa); } .linha { --borda: #3e3a58; --miolo: linear-gradient(120deg, var(--placa-clara), var(--placa)); } .linha::after { content: ''; position: absolute; z-index: 0; display: block; left: 0; top: 10px; bottom: 10px; width: 5px; background: var(--rar, var(--roxo)); clip-path: none; } .moldura-item { --borda: var(--rar, #5c4a7c); --esp: 2px; --miolo: linear-gradient(135deg, #2c2a42, #141322); } .linha.rar-comum .moldura-item { --borda: #6f6d7c; } .talento { --borda: #3e3b5a; --miolo: linear-gradient(135deg, #24233a, #17162a); } .talento.comprou { --borda: var(--roxo); --esp: 2px; box-shadow: none; --miolo: linear-gradient(135deg, #2f2554, #1a1534); } .t-ic { --borda: #4c3a80; --miolo: #1b1830; } .pausa-painel { --borda: rgba(142,102,255,.5); --miolo: rgba(20,18,36,.95); } .carta { --borda: #38364e; --esp: 2px; --miolo: linear-gradient(120deg, var(--placa-clara), var(--placa)); } .carta.parou { --borda: var(--rar); box-shadow: none; --miolo: radial-gradient(ellipse at 15% 50%, color-mix(in srgb, var(--rar) 22%, transparent), transparent 62%), linear-gradient(120deg, var(--placa-clara), var(--placa)); } .carta.rar-comum.parou { --borda: #77746e; box-shadow: none; } .carta.rar-lendaria.parou { filter: drop-shadow(0 0 10px var(--rar)); animation: lendaria 1.1s ease-in-out infinite; } @keyframes lendaria { 50% { filter: drop-shadow(0 0 20px var(--rar)); } } .dado { box-shadow: inset 0 0 0 1px #45406a; } #entrada b { text-shadow: none; } .linha.reliquia::before { background: var(--miolo); } .linha .passiva { font-style: normal; } .botoes .btn:not(.prim) { font-size: 15px; white-space: nowrap; gap: 7px; padding-left: 8px; padding-right: 8px; } .botoes .btn:not(.prim) svg { width: 20px; height: 20px; } .tag-cap { white-space: nowrap; } @media (min-aspect-ratio: 1/1) { .inicio { grid-template-columns: 1fr 1.15fr; } .logo { font-size: clamp(22px, 4.6vw, 38px); } .capitulo-nome b { font-size: 20px; } .capitulo-nome em { font-size: 13px; } .tag-cap { font-size: 11px; padding: 2px 14px; } .atalho svg { display: none; } .atalho { font-size: 12px; min-height: 40px; } .selo { position: absolute; top: -1px; right: 0; min-width: 15px; height: 15px; font-size: 10px; padding: 0 3px; } } /* ---------- dica de arrastar: a mão desenhando o infinito, no início de cada run ---------- */ #infinito { position: absolute; left: 50%; top: 73%; width: 200px; height: 100px; margin: -50px 0 0 -100px; z-index: 41; pointer-events: none; filter: drop-shadow(0 2px 4px rgba(0,0,0,.7)); } #infinito[hidden] { display: none; } #infinito > svg:first-child { position: absolute; inset: 0; overflow: visible; } #infinito > svg:first-child path { fill: none; } #infinito > svg:first-child path { stroke: rgba(226,214,255,.5); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 2 15; } .inf-mao { position: absolute; left: 0; top: 0; offset-path: path("M100 50C130 15 175 15 175 50C175 85 130 85 100 50C70 15 25 15 25 50C25 85 70 85 100 50Z"); offset-rotate: 0deg; offset-anchor: 40% 12%; animation: inf-anda 2.4s linear infinite; } #infinito .inf-mao path { fill: var(--creme); stroke: #14182a; stroke-width: 2.6; stroke-linejoin: round; } @keyframes inf-anda { to { offset-distance: 100%; } } /* ---------- tutorial: só o alvo fica aceso e tocável ---------- */ #foco { position: absolute; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; } #foco[hidden] { display: none; } .fc-b { position: absolute; pointer-events: auto; background: transparent; touch-action: none; } .fc-tampa[hidden] { display: none; } .fc-furo { position: absolute; pointer-events: none; border-radius: 12px; box-shadow: 0 0 0 200vmax rgba(7,6,18,.76), inset 0 0 0 3px #e7c27a; animation: furo-pulsa 1.3s ease-in-out infinite; } .fc-furo.chama { animation: furo-chama .32s ease-in-out, furo-pulsa 1.3s ease-in-out .32s infinite; } @keyframes furo-pulsa { 50% { box-shadow: 0 0 0 200vmax rgba(7,6,18,.76), inset 0 0 0 4px #fff0c8, 0 0 22px 4px rgba(231,194,122,.7); } } @keyframes furo-chama { 25% { transform: scale(1.07); } 60% { transform: scale(.97); } } .fc-mao { position: absolute; width: 52px; height: 52px; pointer-events: none; transform: translate(-30%, -10%); animation: fc-toca 1.1s ease-in-out infinite; } .fc-mao[hidden] { display: none; } .fc-mao path { fill: var(--creme); stroke: #14182a; stroke-width: 2.6; stroke-linejoin: round; } @keyframes fc-toca { 50% { transform: translate(-30%, 8%) scale(.9); } } .fc-balao { position: absolute; left: 50%; translate: -50% 0; width: min(350px, 92vw); display: flex; align-items: flex-end; gap: 8px; pointer-events: none; font-family: var(--corpo); } .fc-retrato { flex: none; width: 62px; height: 62px; object-fit: cover; object-position: center 20%; clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px); background: #241d3c; } .fc-fala { flex: 1; padding: 11px 14px; background: linear-gradient(135deg, #24233a, #151425); box-shadow: inset 0 0 0 1.5px #b79560, 0 4px 14px rgba(0,0,0,.6); border-radius: 12px 12px 12px 3px; } .fc-texto { margin: 0; font-size: 16.5px; font-weight: 600; line-height: 1.25; color: var(--texto); } .fc-texto b { color: #e7c27a; font-weight: 800; } .fc-segue { display: block; margin-top: 5px; font-size: 12.5px; font-weight: 700; color: var(--texto-suave); } .fc-segue[hidden] { display: none; } @media (prefers-reduced-motion: reduce) { .fc-furo, .fc-mao, .inf-mao { animation: none; } .inf-mao { offset-distance: 25%; } } /* ---------- troca de cartas e eventos ---------- */ .btn-troca { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 18px; font-size: 16px; } .btn-troca svg { width: 20px; height: 20px; fill: currentColor; } .btn-troca b { color: #e7c27a; } .num.gelo { color: #bfe9ff; font-size: 20px; } #cartas.modo-evento { gap: 14px; } .evento-ic { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 4px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--ev) 34%, #14122a), #14122a 72%); box-shadow: inset 0 0 0 2px var(--ev), 0 0 26px -6px var(--ev); } .evento-ic svg { width: 40px; height: 40px; fill: var(--ev); } .evento-opcoes { flex: none; display: flex; flex-direction: column; gap: 10px; width: min(420px, 100%); } .evento-op { --k: 12px; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 72px; padding: 10px 14px; font: inherit; color: var(--texto); text-align: left; cursor: pointer; border: 0; clip-path: polygon(var(--k) 0, calc(100% - var(--k)) 0, 100% var(--k), 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, var(--k) 100%, 0 calc(100% - var(--k)), 0 var(--k)); background: linear-gradient(120deg, var(--placa-clara), var(--placa)); box-shadow: inset 0 0 0 1.5px var(--rar); } .evento-op:active:not(:disabled) { transform: scale(.98); } .evento-op:disabled { opacity: .42; cursor: default; } .evento-op:focus-visible { outline: 2px solid var(--creme); outline-offset: -4px; } .evento-op .t-ic { flex: none; display: grid; place-items: center; width: 46px; height: 46px; } .evento-op .t-ic svg { width: 30px; height: 30px; fill: var(--rar); } .ev-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ev-info b { font-family: var(--letra); font-size: 18px; font-weight: 800; } .ev-info small { font-size: 14.5px; line-height: 1.2; color: var(--texto-suave); } .ev-preco { flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: 17px; font-weight: 800; color: #f5d27a; } .roda { position: relative; flex: none; width: min(68vw, 280px, 42vh); aspect-ratio: 1; } .roda-seta { position: absolute; z-index: 2; left: 50%; top: -6px; width: 26px; height: 30px; margin-left: -13px; background: #e7c27a; clip-path: polygon(0 0, 100% 0, 50% 100%); filter: drop-shadow(0 2px 2px #000); } .roda-disco { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 4px #b79560, 0 0 0 7px #2a2036, 0 0 34px -4px rgba(139,92,246,.8); } .roda-face { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)); } .roda-face span { position: absolute; left: -17px; top: calc(min(68vw, 280px, 42vh) * -0.38 - 17px); display: grid; place-items: center; width: 34px; height: 34px; } .roda-face svg { width: 30px; height: 30px; fill: #e2d6ff; } .fim-aviso { flex: none; margin: 0 0 6px; padding: 8px 12px; text-align: center; font: 600 15px/1.25 var(--corpo); color: var(--texto); border-radius: 10px; background: rgba(231,194,122,.12); box-shadow: inset 0 0 0 1.5px #b79560; } .fim-aviso b { display: block; font: 800 17px var(--letra); color: #e7c27a; } /* inventário durante a partida: no canto livre, longe do dash */ #btn-inv { --k: 11px; position: absolute; left: max(14px, env(safe-area-inset-left)); bottom: calc(var(--seguro-bot) + 8px); width: 52px; height: 52px; padding: 0; border: 0; cursor: pointer; display: grid; place-items: center; color: var(--creme); clip-path: polygon(var(--k) 0, calc(100% - var(--k)) 0, 100% var(--k), 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, var(--k) 100%, 0 calc(100% - var(--k)), 0 var(--k)); background: linear-gradient(180deg, #2a2640, #16152a); box-shadow: inset 0 0 0 2px #8a6c46; } #btn-inv[hidden] { display: none; } #btn-inv svg { fill: #e7c27a; filter: drop-shadow(0 2px 0 #000); } #btn-inv:active { transform: translateY(2px); } #btn-inv:focus-visible { outline: 3px solid var(--creme); outline-offset: 3px; } /* abas do inventário durante a run */ .abas { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin: 2px 0 10px; } .aba-inv { --k: 9px; min-height: 44px; padding: 6px 10px; border: 0; cursor: pointer; font: 700 16px var(--corpo); color: var(--texto-suave); clip-path: polygon(var(--k) 0, calc(100% - var(--k)) 0, 100% var(--k), 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, var(--k) 100%, 0 calc(100% - var(--k)), 0 var(--k)); background: linear-gradient(180deg, #1f1e33, #151425); box-shadow: inset 0 0 0 1.5px #3e3a58; } .aba-inv b { margin-left: 4px; color: inherit; font-weight: 800; } .aba-inv.on { color: var(--creme); background: linear-gradient(180deg, #33295a, #1f1838); box-shadow: inset 0 0 0 2px #e7c27a; } .aba-inv.on b { color: #e7c27a; } .aba-inv:focus-visible { outline: 2px solid var(--creme); outline-offset: -5px; } .skill-inv .moldura-item svg { width: 62%; height: 62%; fill: var(--rar); filter: drop-shadow(0 0 6px var(--rar)); } /* botões com anúncio */ .ad-ico { position: relative; flex: none; display: inline-block; width: 30px; height: 22px; margin-left: 8px; border-radius: 6px; background: linear-gradient(#ffe88a, #f2a91e); box-shadow: inset 0 0 0 1.5px #14182a; vertical-align: middle; } .ad-ico::after { content: ""; position: absolute; left: 36%; top: 50%; translate: 0 -50%; border-style: solid; border-width: 5px 0 5px 9px; border-color: transparent transparent transparent #14182a; } .btn-dobro { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 8px 18px; font-size: 16px; font-weight: 800; } .btn-dobro:disabled { opacity: .55; } #entrada .btn-dobro { margin-top: 18px; color: var(--creme); } #painel > .btn-dobro { align-self: center; margin: 4px auto 8px; } #aviso-ad { position: absolute; left: 50%; top: calc(var(--seguro-top) + 70px); z-index: 45; transform: translateX(-50%); max-width: 88vw; padding: 10px 16px; font: 700 15px/1.25 var(--corpo); text-align: center; color: var(--creme); pointer-events: none; border-radius: 10px; background: rgba(12,10,26,.95); box-shadow: inset 0 0 0 1.5px #b79560; } #aviso-ad[hidden] { display: none; } /* ---------- telas com rodapé: conteúdo rola por dentro, botões sempre à vista ---------- */ #painel.com-corpo { overflow: hidden; } .corpo-tela { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; } .rodape-tela { flex: none; display: flex; flex-direction: column; gap: 8px; padding-top: 8px; } .rodape-tela .botoes { margin-top: 0; padding-top: 0; } .rodape-tela .btn-dobro { align-self: stretch; } .com-corpo > .botoes { margin-top: 0; } /* retrato baixo: corta o supérfluo, mantém as ações */ @media (max-height: 640px) and (max-aspect-ratio: 1/1) { .faixa, .pausa-brasao, .tela-sub, .altar-arte { display: none; } #painel h2, .pausa-titulo { font-size: 28px; } .corpo-tela, #painel { gap: 6px; } .opcao { min-height: 44px; } .pausa-painel { margin-top: 2px; padding: 5px; gap: 4px; } .botoes { gap: 6px; padding-top: 6px; } .botoes .btn { min-height: 44px; } .botoes .btn.prim { min-height: 52px; font-size: 20px; } .btn-dobro { min-height: 44px; } .linha.missao { padding-top: 4px; padding-bottom: 4px; } .linha.missao .moldura-item { width: 46px; height: 46px; } .run-dados { gap: 6px; } #cartas.modo-evento { gap: 6px; } .evento-ic { display: none; } .evento-op { min-height: 60px; padding: 6px 10px; } .evento-opcoes { gap: 6px; } .ev-info small { font-size: 13.5px; } } /* paisagem baixa: conteúdo à esquerda, ações em coluna à direita */ @media (max-height: 520px) and (min-aspect-ratio: 1/1), (max-height: 620px) and (min-aspect-ratio: 5/4) { #painel { max-width: 1040px; } #painel.com-corpo { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(170px, .9fr); grid-template-rows: minmax(0, 1fr); column-gap: 14px; padding-top: calc(var(--seguro-top) + 4px); padding-bottom: calc(var(--seguro-bot) + 6px); } .com-corpo > .corpo-tela { grid-column: 1; grid-row: 1; gap: 5px; } .com-corpo > .botoes, .com-corpo > .rodape-tela { grid-column: 2; grid-row: 1; align-self: center; margin: 0; padding: 0; } .com-corpo .botoes { display: flex; flex-direction: column; gap: 6px; padding: 0; margin: 0; } .com-corpo .botoes .btn { width: 100%; min-height: 40px; font-size: 15px; } .com-corpo .botoes .btn.prim { min-height: 48px; font-size: 18px; } .rodape-tela { gap: 6px; } .btn-dobro { min-height: 42px; font-size: 14px; padding: 4px 10px; } .faixa, .pausa-brasao, .tela-sub, .com-corpo .ornamento, .louro { display: none; } #painel h2, .pausa-titulo { font-size: 24px; } .tela-barra { min-height: 40px; } .pausa-painel { margin-top: 0; padding: 4px; gap: 3px; } .opcao { min-height: 38px; padding: 2px 10px; } .linha.missao { padding-top: 3px; padding-bottom: 3px; } .linha.missao .moldura-item { width: 42px; height: 42px; } .missao-premio { flex-direction: row; width: auto; gap: 8px; } .missao-premio .btn { min-height: 38px; } .lista-tela { gap: 5px; } .run-dados { gap: 6px; } .build-carta { padding-top: 2px; padding-bottom: 2px; } /* eventos: opções lado a lado */ #cartas.modo-evento { gap: 5px; padding-top: calc(var(--seguro-top) + 4px); padding-bottom: calc(var(--seguro-bot) + 4px); } .evento-ic, #cartas.modo-evento .ornamento { display: none; } #cartas.modo-evento .cartas-sub { display: block; font-size: 14px; } #cartas.modo-evento .cartas-topo { flex-direction: column; gap: 2px; } .evento-opcoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; width: min(100%, 820px); } .evento-op { min-height: 56px; padding: 5px 10px; gap: 8px; } .evento-op .t-ic { width: 34px; height: 34px; } .evento-op .t-ic svg { width: 24px; height: 24px; } .ev-info b { font-size: 15px; } .ev-info small { font-size: 12.5px; } .roda { width: min(46vh, 240px); } .roda-face span { top: calc(min(46vh, 240px) * -0.38 - 17px); } /* cartão de capítulo */ #entrada { gap: 3px; padding: 6px; } #entrada .ornamento { display: none; } .entrada-linha { margin-bottom: 2px; padding: 3px 12px; } #entrada small { font-size: 14px; } #entrada .tag-cap.grande { padding: 3px 18px; font-size: 14px; } #entrada b { font-size: clamp(30px, 11vh, 46px); } #entrada .cap-pips { margin-top: 4px; } #entrada .btn-dobro { margin-top: 6px; } } /* talentos: a lista rola por dentro e o botão de sair fica sempre à vista */ #cartas.modo-talentos { overflow: hidden; } #cartas.modo-talentos .talentos-grade { flex: 0 1 auto; min-height: 0; overflow-y: auto; } #cartas.modo-talentos .btn.guardar { flex: none; } @media (max-height: 640px) and (max-aspect-ratio: 1/1) { .talento { min-height: 62px; padding: 6px 8px; } #cartas.modo-talentos { gap: 6px; } .btn.guardar { min-height: 50px; } } /* dentro do corpo que rola, nada encolhe: quem rola é o corpo, senão a lista da build sai cortada */ .corpo-tela > * { flex-shrink: 0; } @media (max-height: 340px) { .com-corpo .tela-titulo { display: none; } } /* retrato bem baixo (320x480): o título das cartas não pode cortar em cima, nem o nome do capítulo encostar nas bordas */ @media (max-height: 520px) and (max-aspect-ratio: 1/1) { #cartas:not(.modo-evento):not(.modo-talentos) { justify-content: flex-start; gap: 6px; } .cartas-build { display: none; } .carta { min-height: 76px; grid-template-columns: 54px minmax(0, 1fr); padding: 4px 8px; } .rolo, .fita span { width: 54px; height: 54px; } .fita svg { width: 32px; height: 32px; } .info b { font-size: 15px; } .info small { font-size: 12.5px; line-height: 1.15; } .mesa { gap: 5px; } .cartas-sub, #cartas:not(.modo-evento):not(.modo-talentos) .ornamento { display: none; } .btn-troca { min-height: 40px; padding: 4px 14px; font-size: 14px; } .cartas-titulo { font-size: 24px; } .logo { font-size: 24px; } .marca { margin-top: 26px; } } #entrada b { font-size: clamp(30px, 12vw, 76px); }