/* ───────────────────────────────────────────────────────────────────────────── build-scene.css — Fabula-Zen Estilos do mini-jogo "Montar a Cena". Adicione no do index.html após o gamification.css. ───────────────────────────────────────────────────────────────────────────── */ /* ── Overlay ───────────────────────────────────────────────────────────────── */ #fz-build-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(10, 8, 2, 0.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 24px 16px 48px; opacity: 0; transition: opacity 0.3s ease; } #fz-build-overlay.visivel { opacity: 1; } /* ── Modal ─────────────────────────────────────────────────────────────────── */ .fz-build-modal { background: #FDFCF0; border-radius: 20px; padding: 32px 32px 40px; width: min(1000px, 95%); transform: translateY(12px); transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1); } #fz-build-overlay.visivel .fz-build-modal { transform: translateY(0); } /* ── Header ────────────────────────────────────────────────────────────────── */ .fz-build-header { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; } .fz-build-voltar { width: 36px; height: 36px; border-radius: 50%; border: none; background: #F0E8D0; color: #4A3820; font-size: 16px; cursor: pointer; flex-shrink: 0; transition: background 0.15s; display: flex; align-items: center; justify-content: center; } .fz-build-voltar:hover { background: #E8D5A3; } .fz-build-titulo-wrap { display: flex; flex-direction: column; gap: 2px; } .fz-build-label { font-size: 11px; font-weight: 700; color: #D4AF37; letter-spacing: 1px; text-transform: uppercase; } .fz-build-livro { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700; color: #1A1208; line-height: 1.2; } /* ── Instrução ─────────────────────────────────────────────────────────────── */ .fz-build-instrucao { font-size: 18px; color: #6B5A3E; margin: 16px 0 28px; text-align: center; } /* ── Grid de cards ─────────────────────────────────────────────────────────── */ .fz-build-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 32px; } @media (min-width: 500px) { .fz-build-grid { grid-template-columns: repeat(4, 1fr); } } /* ── Card ──────────────────────────────────────────────────────────────────── */ .fz-build-card { position: relative; background: white; border-radius: 12px; border: 2px solid #E8D5A3; overflow: hidden; cursor: grab; transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; user-select: none; -webkit-user-select: none; } .fz-build-card:hover { border-color: #D4AF37; transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,0.12); } .fz-build-card.arrastando { opacity: 0.45; cursor: grabbing; transform: scale(0.96); } .fz-build-card.sobre { border-color: #D4AF37; box-shadow: 0 0 0 3px rgba(212,175,55,0.3); transform: scale(1.03); } /* Resultado */ .fz-build-card.correta { border-color: #3B6D11; background: #EAF3DE; } .fz-build-card.errada { border-color: #A32D2D; background: #FCEBEB; } .fz-build-card.correto-final { border-color: #D4AF37; } /* ── Imagem do card ────────────────────────────────────────────────────────── */ .fz-build-card-img-wrap { width: 100%; aspect-ratio: 4/3; overflow: hidden; background: #F0E8D0; } .fz-build-card-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; transition: transform 0.2s; } .fz-build-card:hover .fz-build-card-img-wrap img { transform: scale(1.05); } /* ── Título do card ────────────────────────────────────────────────────────── */ .fz-build-card-titulo { font-size: 11px; color: #4A3820; text-align: center; padding: 6px 8px; margin: 0; line-height: 1.3; min-height: 32px; display: flex; align-items: center; justify-content: center; } /* ── Número do card ────────────────────────────────────────────────────────── */ .fz-build-card-num { position: absolute; top: 6px; left: 6px; width: 22px; height: 22px; background: rgba(0,0,0,0.55); color: white; border-radius: 50%; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; } /* ── Badge de resultado ────────────────────────────────────────────────────── */ .fz-build-card-badge { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .fz-build-card.correta .fz-build-card-badge { background: #3B6D11; color: white; } .fz-build-card.errada .fz-build-card-badge { background: #A32D2D; color: white; } /* ── Botão confirmar ───────────────────────────────────────────────────────── */ .fz-build-btn-confirmar { width: 100%; padding: 15px; background: #D4AF37; color: #1A1208; border: none; border-radius: 14px; font-size: 16px; font-weight: 700; cursor: pointer; font-family: 'Inter', sans-serif; transition: opacity 0.2s, transform 0.15s; } .fz-build-btn-confirmar:hover { opacity: 0.9; transform: translateY(-2px); } /* ── Tela de resultado ─────────────────────────────────────────────────────── */ .fz-build-resultado-topo { text-align: center; margin-bottom: 20px; } .fz-build-estrelas { font-size: 28px; letter-spacing: 4px; margin-bottom: 10px; } .fz-build-resultado-titulo { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; color: #1A1208; margin: 0 0 6px; } .fz-build-placar { font-size: 15px; color: #6B5A3E; margin: 0 0 6px; } .fz-build-xp { display: inline-block; background: #D4AF37; color: #1A1208; padding: 4px 16px; border-radius: 20px; font-size: 14px; font-weight: 700; margin: 4px 0 0; } .fz-build-grid-resultado { pointer-events: none; margin-bottom: 20px; } /* ── Ações finais ──────────────────────────────────────────────────────────── */ .fz-build-acoes { display: flex; gap: 12px; flex-wrap: wrap; } .fz-build-btn-novo, .fz-build-btn-voltar-games { flex: 1; padding: 13px; border-radius: 12px; border: none; font-size: 14px; font-weight: 700; cursor: pointer; font-family: 'Inter', sans-serif; transition: opacity 0.2s, transform 0.15s; min-width: 140px; } .fz-build-btn-novo { background: #2E7D50; color: white; } .fz-build-btn-voltar-games { background: #F0E8D0; color: #4A3820; } .fz-build-btn-novo:hover, .fz-build-btn-voltar-games:hover { opacity: 0.9; transform: translateY(-2px); }