/* Minechain — Versão Real: tema escuro fixo (roxo profundo + dourado), igual às versões anteriores. */ :root { color-scheme: dark; --bg: #14101d; --surface: #1f1830; --surface2: #241b3a; --text: #f3eefc; --dim: #b3a8cc; --border: #372c52; --accent: #f5b83d; --accent-dim: #8a6a1f; --green: #3ecf7a; --blue: #57c8ff; --red: #fb7185; --radius: 14px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.5; -webkit-text-size-adjust: 100%; } .font-game { font-family: "Trebuchet MS", "Segoe UI", Verdana, system-ui, sans-serif; } .tnum { font-variant-numeric: tabular-nums; } img { display: block; } button { font: inherit; color: inherit; } a { color: var(--accent); } /* ---------- faixa mainnet ---------- */ .mainnet-banner { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 12px; text-align: center; font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .04em; background: var(--accent); color: #241a02; } .banner-dot { width: 8px; height: 8px; border-radius: 9999px; background: #241a02; flex: none; } /* Selo de UMA linha (ordem do dono, 2026-11-01): só a marca "MINECHAIN - MAINNET" — a segunda linha saiu. */ .banner-brand { font-size: 14px; letter-spacing: .08em; } /* ---------- layout ---------- */ /* A folga inferior cobre a barra fixa (altura dela + safe-area) com margem: nenhum conteúdo fica atrás da barra nem do selo flutuante que a Netlify injeta no canto inferior em alguns endereços. */ .wrap { margin: 0 auto; width: 100%; max-width: 36rem; padding: 0 16px calc(6rem + env(safe-area-inset-bottom)); } .loading-screen { display: flex; min-height: 60vh; align-items: center; justify-content: center; padding: 0 16px; font-size: 18px; font-weight: 700; } .section { margin-top: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 16px; } .section.gold { border-color: var(--accent-dim); } .section.blue { border-color: var(--blue); background: #12283a; } .section-title { font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif; font-size: 20px; font-weight: 700; margin: 0; } .h3 { font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif; font-size: 16px; font-weight: 700; margin: 0; } .dim { color: var(--dim); } .small { font-size: 14px; } .xsmall { font-size: 12px; } .mt1 { margin-top: 4px; } .mt2 { margin-top: 8px; } .mt3 { margin-top: 12px; } .mt4 { margin-top: 16px; } .stack { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; } .stack-sm { display: flex; flex-direction: column; gap: 8px; } .err-text { color: var(--red); font-weight: 700; font-size: 14px; } .warn-box { margin-top: 8px; border-radius: 8px; padding: 10px; background: #3a2c10; color: #ffd97a; font-size: 14px; } /* ---------- hero ---------- */ .hero { position: relative; margin-top: 16px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); } .hero img { width: 100%; object-fit: cover; } .hero-tall img { height: 176px; } .hero-short img { height: 144px; } .hero-caption { position: absolute; inset-inline: 0; bottom: 0; padding: 40px 16px 12px; background: linear-gradient(to top, rgba(0,0,0,.85), transparent); } .hero-caption .big { font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.2; margin: 0; } .hero-caption .med { font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif; font-size: 18px; font-weight: 700; margin: 0; } .hero-caption p { color: #d9d2ec; font-size: 14px; margin: 2px 0 0; } /* ---------- página de início da DEMO (mini filme, 2026-11-03) ---------- Só a tela de conexão da demonstração usa estas classes (o jogo real não muda). Layout final do dono: o FILME preenche a tela inteira (absolute inset 0, object-fit: cover) na altura disponível (100dvh menos os ~37px da faixa do selo da casca); sobre ele, na base, o botão Conectar e o link do X do projeto, com um gradiente sutil atrás pra garantir o contraste; num canto, o selo DEMO discreto. Sem rolagem (overflow hidden) e sem nada cortado no celular em pé. */ .demo-start { position: relative; height: calc(100dvh - 37px); overflow: hidden; background: #14092b; } .demo-film-full { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; } .demo-film-hint { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; margin: 0; display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(245, 184, 61, .5); background: rgba(12, 4, 28, .62); color: #f5d98a; font-size: 13.5px; font-weight: 700; letter-spacing: .01em; text-shadow: 0 1px 4px rgba(0, 0, 0, .5); white-space: nowrap; } .demo-film-hint[hidden] { display: none; } .demo-seal-corner { position: absolute; top: 10px; right: 12px; z-index: 2; margin: 0; padding: 3px 9px; border-radius: 999px; background: rgba(12, 4, 28, .55); color: #e9e2f9; font-size: 10.5px; font-weight: 700; letter-spacing: 2px; } .demo-start-overlay { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; padding: 72px 20px calc(16px + env(safe-area-inset-bottom)); background: linear-gradient(to top, rgba(12, 4, 28, .62), rgba(12, 4, 28, 0)); } .demo-start-overlay .btn { min-width: min(320px, 82vw); box-shadow: 0 6px 24px rgba(0, 0, 0, .45); } .demo-start-err { margin: 0 0 10px; text-align: center; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); } .demo-x-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; color: #f0eafc; font-size: 13.5px; font-weight: 600; text-decoration: none; text-shadow: 0 1px 6px rgba(0, 0, 0, .65); } .demo-x-link svg { width: 15px; height: 15px; fill: currentColor; } .demo-x-link:hover, .demo-x-link:active { color: var(--accent); } /* ---------- botões ---------- */ .btn { display: block; width: 100%; border: none; cursor: pointer; text-align: center; border-radius: 8px; padding: 12px; font-weight: 700; text-decoration: none; font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif; } .btn-gold { background: var(--accent); color: #241a02; } .btn-blue { background: var(--blue); color: #0b2233; } .btn-ghost { background: var(--surface2); border: 1px solid var(--border); color: var(--text); } .btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text); } .btn-outline-gold { background: transparent; border: 1px solid var(--accent-dim); color: var(--accent); } .btn-outline-red { background: transparent; border: 1px solid var(--red); color: var(--red); } .btn:disabled, .btn.disabled { opacity: .5; cursor: not-allowed; } a.btn { line-height: 1.5; } .btn-lg { padding: 14px 12px; font-size: 16px; } /* ---------- placar ---------- */ .score-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .score-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--dim); margin: 0; } .score-value { font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif; font-size: 30px; font-weight: 700; color: var(--accent); margin: 0; line-height: 1.15; } .coin-img { width: 56px; height: 56px; border-radius: 9999px; object-fit: cover; border: 2px solid var(--accent); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; text-align: center; font-size: 14px; } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 12px; text-align: center; } .cell { border-radius: 8px; padding: 8px; background: var(--surface2); } .cell .v { font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif; font-weight: 700; } .cell .v-big { font-size: 20px; } .cell .k { color: var(--dim); font-size: 12px; margin: 0; } .cell p { margin: 0; } /* ---------- cartão da máquina ---------- */ .card { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 12px; } .card-top { display: flex; gap: 14px; } .card-img-wrap { position: relative; flex-shrink: 0; } .card-img { width: 112px; height: 112px; border-radius: 8px; object-fit: cover; border: 1px solid var(--border); } /* Canvas da máquina no cartão (Sala/Inventário/Início): caixa MAIOR — 140×140 (pedido do dono: máquina e ventoinhas maiores; a coluna de texto começa mais à direita, cedendo o espaço). Desenhada ao vivo pela farm-scene, que lê o clientWidth e se adapta sozinha. Em telas bem estreitas a caixa encolhe um pouco pra coluna de texto não apertar. */ .mc-machine-canvas { width: 140px; height: 140px; display: block; border-radius: 8px; border: 1px solid var(--border); background: #150b2e; } @media (max-width: 340px) { .mc-machine-canvas { width: 124px; height: 124px; } } .live-dot { position: absolute; right: 12px; top: 12px; width: 12px; height: 12px; border-radius: 9999px; background: var(--green); z-index: 2; } @keyframes mc-pulse-dot { 0%, 100% { box-shadow: 0 0 0 0 rgba(62,207,122,.55); } 50% { box-shadow: 0 0 0 5px rgba(62,207,122,0); } } .mc-live-dot { animation: mc-pulse-dot 2s ease-in-out infinite; } .card-info { min-width: 0; flex: 1; padding-right: 16px; } .card-info h3 { font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif; font-size: 16px; font-weight: 700; line-height: 1.25; margin: 0; } .seals { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .seal { display: inline-block; border-radius: 9999px; padding: 2px 8px; font-size: 11px; font-weight: 700; } .bar { margin-top: 4px; height: 8px; overflow: hidden; border-radius: 9999px; background: var(--surface2); } .bar > div { height: 100%; border-radius: 9999px; } .card-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } /* A fumacinha dos cartões mora no canvas da máquina (farm-scene): sobe só de máquina ativa na Sala, some com a animação desligada. */ @media (prefers-reduced-motion: reduce) { .mc-live-dot { animation: none; } } /* ---------- listas / diversos ---------- */ .slot-empty { border: 1px dashed var(--border); border-radius: var(--radius); padding: 20px; text-align: center; font-size: 14px; color: var(--dim); } .tx-list, .hist-list { list-style: none; margin: 4px 0 0; padding: 0; } .tx-list li, .hist-list li { padding: 8px 0; border-top: 1px solid var(--border); } .tx-list li:first-child, .hist-list li:first-child { border-top: none; } .tx-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .row-between { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .market-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-radius: 8px; padding: 12px; background: var(--surface2); } .side-img { width: 80px; height: 80px; border-radius: 8px; object-fit: cover; flex-shrink: 0; } .side-flex { display: flex; align-items: center; gap: 12px; } .fan-chip { display: inline-block; border-radius: 9999px; padding: 4px 12px; font-size: 14px; font-weight: 700; background: var(--surface2); border: 1px solid var(--border); margin: 0 8px 8px 0; } .rank-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 12px; } .rank-row.you { background: #2b2144; border-color: var(--accent-dim); } input[type="text"], input.cfg-name { width: 100%; border-radius: 8px; border: 1px solid var(--border); padding: 12px; font-weight: 700; background: var(--surface2); color: var(--text); outline: none; margin-top: 8px; } .checkbox-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; font-size: 14px; font-weight: 700; } .checkbox-row input { width: 20px; height: 20px; accent-color: #f5b83d; } ul.disc { margin: 4px 0 0; padding-left: 20px; color: var(--dim); } ul.disc li { margin-top: 4px; } strong.on-dark { color: var(--text); } /* ---------- tutoriais "?" e selo Tesouro estável ---------- */ /* Linha "ação + ?": a ação ocupa o espaço (flex:1) e o "?" fica ao lado, redondo e pequeno, sem empurrar o layout. */ .btn-with-help { display: flex; gap: 8px; align-items: stretch; } .btn-with-help > .btn { flex: 1; width: auto; min-width: 0; } .help-btn { flex: 0 0 auto; align-self: center; width: 28px; height: 28px; border-radius: 9999px; border: 1px solid var(--accent-dim); background: var(--surface2); color: var(--accent); font-weight: 800; font-size: 15px; line-height: 1; cursor: pointer; padding: 0; } .help-btn:active { background: var(--surface); } .help-box { text-align: left; } .help-body { margin-top: 8px; line-height: 1.6; } .help-body p { margin: 0 0 8px; } .help-body p:last-child { margin-bottom: 0; } /* Selo discreto no topo, canto direito (logo abaixo dos saldos): bolinha verde de 6px + texto pequeno + "?". Sem faixa nem pílula chamativa. */ .treasury-seal { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 8px; font-size: 12px; color: var(--dim); } .ts-dot { width: 6px; height: 6px; border-radius: 9999px; background: var(--green); flex: 0 0 auto; } .treasury-seal .help-btn { width: 22px; height: 22px; font-size: 12px; } /* ---------- toast ---------- */ .toast { position: fixed; inset-inline: 16px; top: 56px; z-index: 50; margin: 0 auto; max-width: 36rem; border-radius: 8px; border: 1px solid; padding: 12px; font-size: 14px; font-weight: 700; box-shadow: 0 10px 30px rgba(0,0,0,.45); } .toast.ok { background: #12351f; border-color: var(--green); } .toast.err { background: #3d1420; border-color: var(--red); } /* ---------- navegação inferior ---------- Barra FIXA com os 5 menus principais (Início · Sala · Missões · Stake · Carteira), botões MAIORES que os da fileira antiga (ordem do dono, 2026-11-01): os 5 dividem a largura por igual, sem rolagem. O resto dos menus mora no menu lateral (☰ no canto superior direito) — ver .drawer abaixo. */ .bottom-nav { position: fixed; inset-inline: 0; bottom: 0; z-index: 40; border-top: 1px solid var(--border); background: rgba(26,20,40,.97); padding-bottom: env(safe-area-inset-bottom); } .nav-scroll { margin: 0 auto; max-width: 36rem; display: flex; } .nav-btn { flex: 1 1 0; min-width: 0; border: none; background: none; cursor: pointer; padding: 10px 4px 12px; font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif; font-size: 13px; font-weight: 700; color: var(--dim); text-align: center; } .nav-emoji { display: block; font-size: 23px; line-height: 1.25; margin-bottom: 2px; } .nav-wallet { display: block; line-height: 1.25; margin-bottom: 2px; } .nav-wallet svg { margin: 0 auto; } .nav-btn.current { color: var(--accent); } /* ---------- topo do jogo: botão do menu (☰) ---------- */ .topbar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 12px; } .topbar .lang-switch { flex: none; } .topbar .lang-btn { padding: 6px 10px; } .menu-btn { width: 46px; height: 46px; border-radius: 10px; cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 21px; line-height: 1; } /* ---------- menu lateral (drawer) ---------- */ .drawer-overlay { position: fixed; inset: 0; z-index: 55; background: rgba(10, 6, 20, .6); } .drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 56; width: min(78vw, 300px); overflow-y: auto; background: var(--surface); border-left: 1px solid var(--border); padding: 16px; display: flex; flex-direction: column; gap: 8px; animation: mc-drawer-in .18s ease-out; } @keyframes mc-drawer-in { from { transform: translateX(28px); opacity: .4; } to { transform: none; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .drawer { animation: none; } } .drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif; font-size: 18px; font-weight: 700; } .drawer-close { width: 40px; height: 40px; border-radius: 10px; cursor: pointer; border: 1px solid var(--border); background: var(--surface2); color: var(--text); font-size: 16px; line-height: 1; } .drawer-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 12px; border-radius: 10px; cursor: pointer; text-align: left; border: 1px solid var(--border); background: var(--surface2); color: var(--text); font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif; font-size: 15px; font-weight: 700; } .drawer-item.current { color: var(--accent); border-color: var(--accent-dim); } .drawer-emoji { font-size: 20px; line-height: 1; } /* ---------- sub-abas internas (Mercado: Loja | P2P) ---------- */ .subtabs { display: flex; gap: 8px; margin-top: 12px; } .subtab-btn { flex: 1; padding: 11px 10px; border-radius: 8px; cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif; font-size: 15px; font-weight: 700; } .subtab-btn.current { background: var(--accent); border-color: var(--accent); color: #241a02; } /* ---------- overlays (Phantom não abriu / abertura do presente) ---------- */ .stuck-overlay, .chest-overlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(10,6,20,.85); } .stuck-box, .chest-box { width: 100%; max-width: 22rem; text-align: center; border: 1px solid var(--accent-dim); border-radius: var(--radius); background: var(--surface); padding: 20px 16px; max-height: calc(100dvh - 32px); overflow-y: auto; } .chest-img { width: 120px; height: 120px; margin: 0 auto; object-fit: contain; } @keyframes mc-chest-shake { 0%, 100% { transform: rotate(0deg) scale(1); } 20% { transform: rotate(-4deg) scale(1.04); } 40% { transform: rotate(4deg) scale(1.04); } 60% { transform: rotate(-3deg) scale(1.08); } 80% { transform: rotate(2deg) scale(1.08); } } .chest-img.opening { animation: mc-chest-shake .5s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .chest-img.opening { animation: none; } } /* ---------- revelação de lootbox (máquina grande + halo) ---------- */ .reveal-canvas { display: block; margin: 2px auto 0; width: min(72vw, 300px); height: min(72vw, 300px); } .reveal-box { animation: mc-reveal-in .45s ease-out; } @keyframes mc-reveal-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .reveal-box { animation: none; } } /* ==== Selo "Powered by Netlify" — escondido ==== O selo NÃO faz parte do nosso HTML: a hospedagem injeta na borda um