/* /js/jogos/genshin/genshin-banners.css -- telas "Banners" e "Códigos de resgate" do Genshin (mockup aprovado docs/mockups/genshin/banners-e-codigos.html, 07/11/2026).
   Reaproveita as classes gm-* de genshin-materiais.css (cabeça, seções, fichas, contadores, gavetas) e o visual do Genshin (blocos .gs-bl com céu e feixe de luz da
   regra 20, vindo de /artes/feixe-onda.css). Letra mínima 15px (regra 18); cartões da mesma fileira com a mesma altura (regra 25); movimento desligado em prefers-reduced-motion. */
.gs-app :is(.gb-card,.gb-r,.gc-cod){position:relative;overflow:hidden}
#gbRaiz,#gcRaiz{display:grid;gap:26px}
#gbRaiz h2,#gbRaiz h3,#gbRaiz p,#gcRaiz h2,#gcRaiz h3,#gcRaiz p{margin:0}
a.gm-ficha{display:inline-flex;align-items:center;text-decoration:none}
.gm-q{overflow:hidden}

/* banners no ar */
.gb-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;align-items:stretch}
.gb-card{border-radius:14px;padding:14px;display:grid;grid-template-rows:auto auto 1fr auto;gap:10px}
.gb-top{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;align-items:baseline}
.gb-top h3{font-size:17px;color:var(--gs-ouro,#e8c76a);line-height:1.2}
.gb-top span{color:var(--t-low,#c6cfdc);font-size:15px}
.gb-pers{display:grid;gap:8px}
.gb-p{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:10px;align-items:center;min-height:56px}
.gb-ic,.gb-p .gb-q{width:48px;height:48px;border-radius:8px}
.gb-ic{display:block;object-fit:contain;background:var(--s-700,#1a2130)}
.gb-p b{display:block;font-size:15px;line-height:1.2}
.gb-p small{color:var(--t-low,#c6cfdc);font-size:15px}
.gb-est{font-weight:800;color:#e8c76a;font-variant-numeric:tabular-nums}
.gb-est.q4{color:#c9a7ff}
.gb-prazo{border-top:1px solid rgba(255,255,255,.12);padding-top:8px;color:var(--t-mid,#e0e6ef);font-size:15px}

/* calculadora de giros */
.gb-in{width:7ch;min-width:0;height:36px;text-align:center;font-weight:800;font-size:18px;font-variant-numeric:tabular-nums;color:inherit;background:rgba(255,255,255,.05);border:1px solid var(--gs-borda);border-radius:9px;-moz-appearance:textfield;appearance:textfield}
.gb-in::-webkit-outer-spin-button,.gb-in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.gb-res{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.gb-r{border-radius:12px;padding:12px 14px;display:grid;gap:4px;align-content:start}
.gb-r small{color:var(--t-low,#c6cfdc);font-size:15px}
.gb-r b{font-size:26px;font-variant-numeric:tabular-nums;line-height:1.1}
.gb-r b.gb-bom{color:#38d6a0}
.gb-r b.gb-ruim{color:#ff8a7a}
.gb-r em{font-style:normal;color:var(--t-low,#c6cfdc);font-size:15px}
.gb-barra{height:12px;border-radius:99px;background:#1c2940;overflow:hidden}
.gb-barra i{display:block;height:100%;background:linear-gradient(90deg,#7ad1e8,#e8c76a)}
#gbChance{display:grid;gap:8px}

/* códigos de resgate */
.gc-lista{display:grid;gap:10px}
.gc-cod{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,2fr) auto;gap:14px;align-items:center;border-radius:12px;padding:10px 14px;min-height:68px}
.gc-cod code{font-size:18px;font-weight:800;letter-spacing:.04em;color:#e8c76a;word-break:break-all}
.gc-pr{display:flex;flex-wrap:wrap;gap:6px 14px;color:var(--t-mid,#e0e6ef)}
.gc-p{display:inline-flex;align-items:center;gap:8px;font-size:15px}
.gc-ic,.gc-p .gc-q{width:32px;height:32px;border-radius:6px;flex:none}
.gc-ic{display:block;object-fit:contain;background:var(--s-700,#1a2130)}
.gc-ac{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.gc-cod.ja{opacity:.55}
.gc-soma{display:flex;gap:18px;flex-wrap:wrap}
.gc-soma div{display:grid;gap:2px}
.gc-soma b{font-size:24px;font-variant-numeric:tabular-nums}
.gc-soma small{color:var(--t-low,#c6cfdc);font-size:15px}
.gc-mais{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:10px;color:var(--t-low,#c6cfdc);font-size:15px}
.gc-velhos{display:flex;flex-wrap:wrap;gap:6px 12px}
.gc-velhos code{font-size:15px;color:var(--t-low,#c6cfdc)}
@media(max-width:720px){.gc-cod{grid-template-columns:1fr}.gc-ac{justify-content:flex-start}}
@media(prefers-reduced-motion:reduce){#gbRaiz *,#gcRaiz *{animation:none!important;transition:none!important}}