/* Torre do Saber — os 11 minijogos novos */

/* ---------- Menu da Torre: cartões Clássicos e Virais (arte em assets/img/torre/menu-<id>.webp) ---------- */
.am-art.am-foto { padding: 0; }
.am-foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.am-card:hover .am-foto img { transform: scale(1.05); }
.am-foto .am-novo { position: absolute; top: 10px; right: 10px; z-index: 2; font-size: 14px; padding: 3px 10px; }

/* ---------- Cartões da lista: foto do jogo + recordista ---------- */
.torre-jogos .tj-card { flex-direction: column; gap: 0; padding: 0; overflow: hidden; align-items: stretch; transition: transform .15s; }
.torre-jogos .tj-card:hover { transform: translateY(-3px); }
.tj-capa { position: relative; height: 150px; background: #0d0626; border-bottom: 3px solid var(--ink); overflow: hidden; }
.tj-capa img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transform: scale(1.04); transition: transform .4s; }
.tj-card:hover .tj-capa img { transform: scale(1.1); }
.tj-capa::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 6, 38, 0) 45%, rgba(13, 6, 38, .85)), linear-gradient(90deg, rgba(13, 6, 38, .35), transparent 40%); pointer-events: none; }
.tj-capa .tj-tags { position: absolute; top: 10px; left: 10px; z-index: 1; }
.tj-capa .tj-ic { position: absolute; left: 12px; bottom: -2px; z-index: 1; width: 56px; height: 56px; border-radius: 16px; background: radial-gradient(circle, var(--c), #140a33 120%); border: 3px solid var(--ink); box-shadow: 0 0 18px var(--c); }
.tj-capa .tj-ic .ico { font-size: 32px; }
.torre-jogos .tj-info { padding: 12px 14px 14px; gap: 8px; }
.tj-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tj-tags .tj-tag { box-shadow: 0 2px 0 var(--ink); }
.torre-jogos .tj-rec { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; border: 2px solid var(--ink); background: linear-gradient(90deg, rgba(255, 200, 61, .22), rgba(255, 200, 61, .04)); color: #fff; font-size: 14px; }
.torre-jogos .tj-rec .avatar.mini { width: 44px; height: 44px; }
.tj-rec .tj-coroa { position: absolute; top: -12px; left: 50%; transform: translateX(-50%) rotate(-8deg); z-index: 2; font-style: normal; filter: drop-shadow(0 2px 0 var(--ink)); }
.tj-rec .tj-coroa .ico { font-size: 20px; }
.tj-rec > div { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.tj-rec > div small { font-size: 11px; font-weight: 800; color: #ffe7a3; text-transform: uppercase; letter-spacing: .4px; }
.tj-rec > div b { font: 17px 'Lilita One'; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tj-tempo { display: flex; align-items: center; gap: 4px; font: 18px 'Lilita One'; color: var(--gold); padding: 4px 8px; border-radius: 10px; background: #140a33; border: 2px solid var(--ink); }
.tj-tempo .ico { font-size: 16px; }
.tj-rec.vazio { background: rgba(255, 255, 255, .05); }
.tj-rec.vazio > div b { color: var(--muted); }
.tj-sem { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 12px; border: 3px dashed #4a3399; }
.tj-sem .ico { font-size: 24px; opacity: .5; }
.tj-meu { display: flex; align-items: center; gap: 4px; font-weight: 800; color: var(--muted); }
.tj-meu .ico { font-size: 15px; }
.tj-meu b { color: #fff; }
.tj-tag { font: 11px 'Lilita One'; letter-spacing: .3px; padding: 2px 8px; border-radius: 8px; border: 2px solid var(--ink); background: #2a1a60; color: #d9cffb; }
.tj-tag.novo { background: linear-gradient(90deg, #ff4d6d, #ffc83d); color: var(--ink); animation: pulse 1.8s infinite; }
.torre-sec { margin: 22px 0 0; font: 20px 'Lilita One'; display: flex; align-items: center; gap: 8px; }
.torre-sec .ico { font-size: 26px; }

/* ---------- 1. Duelo de Cartas ---------- */
.cc-placar { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 16px 'Lilita One'; margin-bottom: 8px; }
.cc-placar .eu b { color: #3ee0ff; font-size: 24px; } .cc-placar .ia b { color: #ff5c7a; font-size: 24px; }
.cc-msg { flex: 1; text-align: center; color: var(--gold); min-height: 22px; }
.cc-msg b { font-size: 22px; }
.cc-mesa { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; max-width: min(100%, 270px, 34vh); margin: 10px auto; padding: 8px; border-radius: 18px; background: radial-gradient(circle, #2a1862, #0d0626 80%); border: 3px solid var(--ink); }
.cc-casa { aspect-ratio: 3 / 4; border-radius: 12px; border: 2px dashed #4a3399; background: transparent; cursor: pointer; padding: 0; }
.cc-casa.pode { border-color: var(--gold); background: rgba(255, 200, 61, .08); animation: pulse 1.6s infinite; }
.cc-carta { position: relative; aspect-ratio: 3 / 4; border-radius: 12px; border: 3px solid var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; transition: background .35s, transform .35s; overflow: hidden; }
.cc-carta.eu { background: linear-gradient(160deg, #2b6cff, #173a99); }
.cc-carta.ia { background: linear-gradient(160deg, #ff4d6d, #8f1d3a); }
.cc-carta .n { position: absolute; font: clamp(13px, 3.6vw, 17px) 'Lilita One'; font-style: normal; text-shadow: 0 2px 0 var(--ink); }
.cc-carta .n.c { top: 2px; left: 50%; transform: translateX(-50%); } .cc-carta .n.b { bottom: 2px; left: 50%; transform: translateX(-50%); }
.cc-carta .n.e { left: 5px; top: 50%; transform: translateY(-50%); } .cc-carta .n.d { right: 5px; top: 50%; transform: translateY(-50%); }
.cc-ic .ico { font-size: clamp(26px, 8vw, 40px); }
.cc-carta small { font: clamp(9px, 2.4vw, 11px) 'Lilita One'; text-align: center; line-height: 1; padding: 0 12px; margin-top: 2px; }
.cc-carta.nova { animation: ccPousa .35s ease-out; }
.cc-carta.virou { animation: ccVira .5s ease-in-out; }
@keyframes ccPousa { from { transform: scale(1.25) translateY(-14px); opacity: .4; } }
@keyframes ccVira { 0% { transform: rotateY(0); } 50% { transform: rotateY(90deg) scale(1.1); } 100% { transform: rotateY(0); } }
.cc-mao { display: flex; gap: 6px; justify-content: center; }
.cc-mao.rival { opacity: .85; }
.cc-mao.rival .cc-carta { width: 52px; }
.cc-mao.rival .cc-carta .n { font-size: 11px; }
.cc-mao.rival .cc-carta small, .cc-mao.rival .cc-ic { display: none; }
.cc-b { flex: 1; max-width: min(72px, 9vh); padding: 0; border: 0; background: none; cursor: pointer; transition: transform .15s; }
.cc-b.sel { transform: translateY(-10px); }
.cc-b.sel .cc-carta { box-shadow: 0 0 0 3px var(--gold), 0 6px 16px rgba(255, 200, 61, .5); }

/* ---------- 2. Campo de Asteroides ---------- */
.ca-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 800; margin-bottom: 8px; }
.ca-topo .ico { font-size: 20px; }
.ca-grade { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; max-width: 420px; margin: 0 auto; }
.ca-c { aspect-ratio: 1; border-radius: 10px; border: 3px solid var(--ink); background: linear-gradient(145deg, #4a3a7a, #2a1a50); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .3); cursor: pointer; padding: 0; display: grid; place-items: center; font: clamp(16px, 5vw, 24px) 'Lilita One'; color: #fff; }
.ca-c.marca { background: #5a2440; }
.ca-c.marca .ico { font-size: 22px; opacity: .8; }
.ca-c.ab { cursor: default; animation: ccPousa .25s ease-out; }
.ca-c.ab.v1 { background: #3a3060; color: #d9cffb; }
.ca-c.ab.v2 { background: #4de08a; color: var(--ink); }
.ca-c.ab.v3 { background: #ffc83d; color: var(--ink); }
.ca-c.ab.v0 { background: #ff4d6d; }
.ca-c.ab.v0 .ico { font-size: 26px; }
.ca-c.resto { opacity: .45; animation: none; }
.ca-d { aspect-ratio: 1; border-radius: 10px; border: 2px solid var(--ink); background: #1a0e40; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.ca-d b { font: clamp(14px, 4vw, 19px) 'Lilita One'; color: var(--gold); }
.ca-d small { font-weight: 900; font-size: 12px; color: #ff9db0; display: flex; align-items: center; }
.ca-d small .ico { font-size: 13px; }
.ca-fim { text-align: center; font: 20px 'Lilita One'; margin: 12px 0 0; }
.ca-fim.bum { color: #ff4d6d; } .ca-fim.ok { color: #4de08a; }

/* ---------- 3. Hacker do Satélite ---------- */
.th { background: #031a0c; border: 3px solid var(--ink); border-radius: 16px; padding: 12px; font: 600 clamp(12px, 3.4vw, 15px)/1.35 ui-monospace, 'Courier New', monospace; color: #5ef2a0; text-shadow: 0 0 6px rgba(94, 242, 160, .55); box-shadow: inset 0 0 40px rgba(94, 242, 160, .12); position: relative; overflow: hidden; }
.th::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 2px, transparent 2px 4px); }
.th-topo { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; border-bottom: 1px dashed #2a7a4c; padding-bottom: 6px; margin-bottom: 6px; }
.th-tent { margin-bottom: 8px; letter-spacing: 1px; }
.th-corpo { display: grid; grid-template-columns: 1fr minmax(110px, 34%); gap: 10px; }
.th-l { white-space: nowrap; overflow: hidden; }
.th-end { color: #2fae6a; }
.th-lixo { opacity: .55; }
.th-w { font: inherit; color: #031a0c; background: #5ef2a0; border: 0; padding: 1px 3px; margin: 1px 0; cursor: pointer; border-radius: 3px; text-shadow: none; }
.th-w:hover, .th-w:focus-visible { background: #c9ffe0; outline: none; }
.th-w.usada { background: transparent; color: #2a7a4c; text-decoration: line-through; cursor: default; }
.th-log { border-left: 1px dashed #2a7a4c; padding-left: 8px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; font-size: .9em; word-break: break-all; }
.th-av { color: #fff; }
.th-cursor { animation: thPisca 1s steps(1) infinite; }
@keyframes thPisca { 50% { opacity: 0; } }
@media (max-width: 480px) { .th-corpo { grid-template-columns: 1fr; } .th-log { border-left: 0; border-top: 1px dashed #2a7a4c; padding: 6px 0 0; } }

/* ---------- 4. Ligue o Circuito ---------- */
.ci-cont, .ra-cont, .co-cont { font-weight: 800; display: flex; align-items: center; gap: 6px; justify-content: center; margin: 0 0 10px; }
.ci-cont .ico, .ra-cont .ico, .co-cont .ico { font-size: 22px; }
.ci-grade { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 3px; max-width: 420px; margin: 0 auto; padding: 6px; border-radius: 16px; background: #0d0626; border: 3px solid var(--ink); }
.ci-p { aspect-ratio: 1; padding: 0; border: 0; border-radius: 8px; background: #1a0e40; cursor: pointer; overflow: hidden; }
.ci-gira { display: block; width: 100%; height: 100%; transition: transform .18s ease-out; }
.ci-p svg { display: block; width: 100%; height: 100%; }
.ci-fio { stroke: #4a3a7a; stroke-width: 16; stroke-linecap: round; fill: none; transition: stroke .2s; }
.ci-no { fill: #4a3a7a; transition: fill .2s; }
.ci-led { fill: #3a2a50; stroke: #6d5bb0; stroke-width: 4; transition: fill .2s; }
.ci-bat { fill: #ff8a3d; stroke: var(--ink); stroke-width: 4; }
.ci-txt { font: 30px 'Lilita One'; fill: var(--ink); text-anchor: middle; }
.ci-p.on .ci-fio { stroke: #ffd84d; filter: drop-shadow(0 0 4px #ffd84d); }
.ci-p.on .ci-no { fill: #ffd84d; }
.ci-p.on .ci-led { fill: #4de08a; stroke: #c9ffe0; filter: drop-shadow(0 0 8px #4de08a); }
.ci-grade.vitoria, .ra-grade.vitoria, .su-grade.vitoria { animation: tjBrilha 1s ease-in-out; }
@keyframes tjBrilha { 50% { box-shadow: 0 0 0 4px var(--gold), 0 0 40px rgba(255, 216, 77, .8); } }

/* ---------- 5. Fusão Estelar ---------- */
.fu-escada { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-bottom: 10px; }
.fu-escada span { font: 11px 'Lilita One'; padding: 3px 7px; border-radius: 8px; background: #1a0e40; color: var(--muted); border: 2px solid var(--ink); }
.fu-escada span.ok { background: var(--fc, #4de08a); color: var(--ink); }
.fu-tab { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; max-width: 400px; margin: 0 auto; padding: 8px; border-radius: 16px; background: #0d0626; border: 3px solid var(--ink); touch-action: none; user-select: none; -webkit-user-select: none; outline: none; }
.fu-c { aspect-ratio: 1; border-radius: 12px; background: #1a0e40; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1; padding: 2px; }
.fu-c b { font: clamp(18px, 6vw, 30px) 'Lilita One'; }
.fu-c small { font: clamp(8px, 2.3vw, 11px) 'Lilita One'; opacity: .85; margin-top: 3px; }
.fu-c.nasce { animation: fuNasce .2s ease-out; }
.fu-c.junta { animation: fuJunta .22s ease-out; }
@keyframes fuNasce { from { transform: scale(.3); } }
@keyframes fuJunta { 50% { transform: scale(1.14); } }
.fu-c.v1, .fu-escada .v1 { --fc: #6d5bb0; } .fu-c.v2, .fu-escada .v2 { --fc: #8a7a9a; } .fu-c.v3, .fu-escada .v3 { --fc: #a08060; }
.fu-c.v4, .fu-escada .v4 { --fc: #d8d8e8; } .fu-c.v5, .fu-escada .v5 { --fc: #3ea0ff; } .fu-c.v6, .fu-escada .v6 { --fc: #ff9a5a; }
.fu-c.v7, .fu-escada .v7 { --fc: #b0603a; } .fu-c.v8, .fu-escada .v8 { --fc: #ffd84d; } .fu-c.v9, .fu-escada .v9 { --fc: #ff5a3d; }
.fu-c.v10, .fu-escada .v10 { --fc: #ff7ad9; } .fu-c.v11 { --fc: #b35cff; } .fu-c.v12 { --fc: #3ee0ff; } .fu-c.v13 { --fc: #fff; }
/* cor sólida primeiro: o Safari 15 não tem color-mix e ignora a linha de baixo */
.fu-c[class*=" v"] { background: var(--fc); color: var(--ink); }
.fu-c[class*=" v"] { background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--fc) 100%, #fff 30%), var(--fc) 55%, color-mix(in srgb, var(--fc) 60%, #000) 100%); color: var(--ink); box-shadow: 0 0 14px color-mix(in srgb, var(--fc) 50%, transparent); }
.fu-c.v1 { color: #fff; }
.fu-setas { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }
.fu-setas .btn { min-width: 52px; }
.fu-msg { text-align: center; font: 20px 'Lilita One'; color: var(--gold); min-height: 26px; margin: 8px 0 0; }

/* ---------- 6. Genius ---------- */
.ge { max-width: 360px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.ge-roda { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; aspect-ratio: 1; padding: 10px; border-radius: 50%; background: #0d0626; border: 4px solid var(--ink); }
.ge-p { border: 3px solid var(--ink); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: rgba(0, 0, 0, .55); filter: brightness(.55) saturate(.8); transition: filter .08s, transform .08s; padding: 0; }
.ge-p .ico { font-size: 34px; }
.ge-p small { font: 12px 'Lilita One'; }
.ge-p:disabled { cursor: default; }
.ge-p.g0 { background: #4de08a; border-radius: 100% 12px 12px 12px; } .ge-p.g1 { background: #ff4d6d; border-radius: 12px 100% 12px 12px; }
.ge-p.g2 { background: #ffd84d; border-radius: 12px 12px 12px 100%; } .ge-p.g3 { background: #3ea0ff; border-radius: 12px 12px 100% 12px; }
.ge-p.luz { filter: brightness(1.25) saturate(1.2); transform: scale(1.03); box-shadow: 0 0 30px currentColor; color: #fff; }
.ge-centro { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 34%; aspect-ratio: 1; border-radius: 50%; background: #1a0e40; border: 4px solid var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.ge-centro b { font: 24px 'Lilita One'; color: var(--gold); }
.ge-centro small { font-weight: 800; color: var(--muted); font-size: 12px; text-align: center; }

/* ---------- 7. Rainhas ---------- */
.ra-cont .ruim { color: #ff4d6d; }
.ra-grade { display: grid; grid-template-columns: repeat(var(--n), 1fr); max-width: 420px; margin: 0 auto; border: 3px solid var(--ink); border-radius: 12px; overflow: hidden; }
.ra-c { border-radius: 0; aspect-ratio: 1; background: var(--rc); border: 1px solid rgba(20, 10, 51, .25); padding: 0; cursor: pointer; display: grid; place-items: center; font: clamp(14px, 4vw, 20px) 'Lilita One'; color: rgba(20, 10, 51, .45); }
.ra-c.bt { border-top: 3px solid var(--ink); } .ra-c.br { border-right: 3px solid var(--ink); } .ra-c.bb { border-bottom: 3px solid var(--ink); } .ra-c.bl { border-left: 3px solid var(--ink); }
.ra-c.q { color: var(--ink); }
.ra-c.q .ico { font-size: clamp(20px, 6vw, 32px); animation: fuNasce .18s ease-out; }
.ra-c.ruim { background: repeating-linear-gradient(45deg, var(--rc) 0 6px, #ff8095 6px 12px); }

/* ---------- 8. Sudoku ---------- */
.su-grade { display: grid; grid-template-columns: repeat(var(--n), 1fr); max-width: 440px; margin: 0 auto; border: 3px solid var(--ink); border-radius: 10px; overflow: hidden; background: #fff; }
.su-c { border-radius: 0; aspect-ratio: 1; border: 1px solid #c9c0e8; background: #fff; color: #3a2ab0; font: clamp(16px, 5vw, 24px) 'Lilita One'; padding: 0; cursor: pointer; }
.su-c.dado { color: var(--ink); background: #ece8fb; }
.su-c.bd { border-right: 3px solid var(--ink); } .su-c.bb { border-bottom: 3px solid var(--ink); }
.su-c.viz { background: #fff6c9; } .su-c.dado.viz { background: #e8e0b8; }
.su-c.igual { background: #c9f2d8; }
.su-c.sel { background: #ffd84d; }
.su-c.ruim { color: #e0203a; background: #ffd6dd; }
.su-teclas { display: grid; grid-template-columns: repeat(calc(var(--n) + 1), 1fr); gap: 5px; max-width: 440px; margin: 12px auto 0; }
.su-teclas .btn { padding: 10px 0; font-size: 18px; min-width: 0; }

/* ---------- 9. Memória ---------- */
.me-grade { display: grid; grid-template-columns: repeat(var(--c), 1fr); gap: 8px; max-width: 460px; margin: 0 auto; }
.me-c { aspect-ratio: 3 / 4; padding: 0; border: 0; background: none; cursor: pointer; perspective: 600px; }
.me-in { position: relative; display: block; width: 100%; height: 100%; transition: transform .35s; transform-style: preserve-3d; }
.me-c.vira .me-in { transform: rotateY(180deg); }
.me-verso, .me-frente { position: absolute; inset: 0; border-radius: 12px; border: 3px solid var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; -webkit-backface-visibility: hidden; backface-visibility: hidden; padding: 4px; text-align: center; }
.me-verso { background: repeating-linear-gradient(45deg, #2a1a60 0 8px, #3a2580 8px 16px); }
.me-verso .ico { font-size: 28px; opacity: .6; }
.me-frente { background: #fff; color: var(--ink); transform: rotateY(180deg); }
.me-frente .ico { font-size: clamp(26px, 8vw, 38px); }
.me-frente small { font: clamp(10px, 2.8vw, 13px)/1.1 'Lilita One'; }
.me-c.pista .me-frente { background: #fff6c9; }
.me-c.par .me-frente { background: #c9f2d8; box-shadow: 0 0 0 3px #4de08a; }

/* ---------- 10. Cometa e 11. Blocos (jogos de ação) ---------- */
.co-area, .bl-area { position: relative; touch-action: none; user-select: none; -webkit-user-select: none; }
.co-area { max-width: min(100%, 440px, 40vh); margin: 0 auto; }
.co-tela { display: block; width: 100%; aspect-ratio: 1; border-radius: 14px; border: 3px solid var(--ink); }
.co-ini, .bl-ini { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.co-pad { display: grid; grid-template-columns: repeat(3, 60px); grid-template-rows: repeat(3, 42px); gap: 4px; justify-content: center; margin-top: 10px; touch-action: manipulation; }
.co-pad .btn { padding: 0; min-width: 0; font-size: 20px; }
.co-pad [data-d="C"] { grid-column: 2; grid-row: 1; } .co-pad [data-d="E"] { grid-column: 1; grid-row: 2; }
.co-pad [data-d="D"] { grid-column: 3; grid-row: 2; } .co-pad [data-d="B"] { grid-column: 2; grid-row: 3; }
.bl { display: flex; gap: 10px; justify-content: center; align-items: flex-start; }
.bl-area { flex: 0 1 auto; width: min(260px, 24vh); }
.bl-tela { display: block; width: 100%; aspect-ratio: 1 / 2; border-radius: 12px; border: 3px solid var(--ink); }
.bl-lado { display: flex; flex-direction: column; align-items: center; gap: 4px; font-weight: 800; color: var(--muted); }
.bl-lado b { font: 22px 'Lilita One'; color: var(--gold); }
.bl-prox { width: 64px; height: 64px; background: #0d0626; border: 3px solid var(--ink); border-radius: 10px; }
.bl-pad { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; max-width: 400px; margin: 10px auto 0; touch-action: manipulation; }
.bl-pad .btn { padding: 12px 0; min-width: 0; font-size: 22px; user-select: none; -webkit-user-select: none; }