/* LOOT DO DIA · visual "tela de jogo".
   Ideia: a loja como um jogo. Promoções = baús de raridade, categorias = inventário, produto = carta de item,
   no celular uma hotbar de slots. Cores do pôr do sol sobre roxo bem escuro. Cantos cortados, não arredondados.
   --c = cor de uma categoria/tela · --r = cor da raridade (tamanho do desconto). */

/* letras guardadas no próprio site (nada é carregado do Google: melhor para a LGPD) */
@font-face { font-family: 'Chakra Petch'; src: url('fontes/chakrapetch.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Chakra Petch'; src: url('fontes/chakrapetch-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Rubik'; src: url('fontes/rubik.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Silkscreen'; src: url('fontes/silkscreen.woff2') format('woff2'); font-weight: 400; font-display: swap; }


/* ───────── cores, fontes e base ───────── */
:root {
  --bg: #0d0617; --painel: #170b26; --painel2: #221236; --poco: #0a0412; --linha: #3a2152;
  --fg: #fff4f8; --sub: #c8b2d6; --rosa: #ff2e88; --laranja: #ff7a45; --ouro: #ffcf5a; --roxo: #9b2bd6; --ciano: #22e5d4; --verde: #2dffb3;
  --por-do-sol: linear-gradient(100deg, #ffcf5a 0%, #ff8a3d 30%, #ff2e88 65%, #9b2bd6 100%);
  --c: #ff2e88; --r: #a9b8cc; --k: 12px;
  --f-tit: 'Chakra Petch', 'Segoe UI', system-ui, sans-serif;
  --f-txt: 'Rubik', 'Segoe UI', Roboto, system-ui, sans-serif;
  --f-pix: 'Silkscreen', 'Courier New', monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--fg); font: 16px/1.5 var(--f-txt);
  background:
    radial-gradient(80% 50% at 85% -5%, rgba(255,46,136,.22), transparent 60%),
    radial-gradient(70% 40% at 0% 100%, rgba(155,43,214,.18), transparent 60%),
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 28px 28px,
    var(--bg);
  background-attachment: fixed; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
main, .rodape, .faixa-afiliado { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
main:focus { outline: none; }
:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; }
[hidden] { display: none !important; }
h1, h2, .secao { font-family: var(--f-tit); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.pix { display: inline-block; font-family: var(--f-pix); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ouro); }
.preco, .contador, .selo-off, .linha.total, .oferta strong, .item-linha strong { font-family: var(--f-tit); font-variant-numeric: tabular-nums; }
s { color: var(--sub); font-size: 12.5px; }
/* canto cortado (em cima à esquerda e embaixo à direita), a marca do visual */
.corte, .t-cab, .bau, .inv, .prod, .drop-carta, .compra, .resumo-compra, .item, .vazio, .tb-amazon, .avisos, .selos div, .busca, .ficha, .descricao, .oferta, .protecao {
  clip-path: polygon(var(--k) 0, 100% 0, 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, 0 100%, 0 var(--k)); }

/* ───────── botões e campos ───────── */
.btn-comprar, .busca button, .btn-pagar { display: inline-grid; place-items: center; min-height: 48px; padding: 0 20px; border: 0; cursor: pointer; text-decoration: none;
  background: var(--por-do-sol); color: #1a0716; font-family: var(--f-tit); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); transition: filter .15s; }
.btn-comprar:hover, .busca button:hover, .btn-pagar:hover { filter: brightness(1.12); }
.btn-add, .loja, .paginas a { display: inline-grid; place-items: center; min-height: 44px; padding: 0 16px; cursor: pointer; text-decoration: none; font-weight: 500;
  background: rgba(255,255,255,.05); border: 1px solid var(--linha); color: var(--fg); transition: border-color .15s, background .15s; }
.btn-add:hover, .loja:hover, .paginas a:hover { border-color: var(--ouro); background: rgba(255,207,90,.08); }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 14px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips a { flex: none; padding: 6px 12px; font-size: 13.5px; text-decoration: none; background: var(--painel); border: 1px solid var(--linha); }
.chips a:hover { border-color: var(--c); color: #fff; }
select, input[type=search], input[type=text] { background: var(--poco); border: 1px solid var(--linha); color: var(--fg); border-radius: 0; }
select { padding: 8px 10px; }
select:focus, input:focus { outline: none; border-color: var(--ouro); }
select option { background: #1b0f2a; color: var(--fg); }
.remover, .limpar { border: 0; background: none; color: var(--sub); cursor: pointer; text-decoration: underline; font-size: 13px; padding: 0; }

/* ───────── topo (barra de status do jogo) ───────── */
.topo { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; padding: 10px 16px;
  background: rgba(13,6,23,.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.topo::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--por-do-sol); opacity: .85; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; line-height: 1; }
.marca img { image-rendering: pixelated; filter: drop-shadow(0 0 10px rgba(255,181,71,.4)); }
.marca .nome { display: block; font-family: var(--f-tit); font-weight: 700; font-size: 21px; text-transform: uppercase; letter-spacing: .03em;
  background: var(--por-do-sol); -webkit-background-clip: text; background-clip: text; color: transparent; }
.marca small { display: block; margin-top: 3px; font-family: var(--f-pix); font-size: 9.5px; letter-spacing: .05em; color: var(--sub); text-transform: uppercase; }
.busca-topo { flex: 1; display: flex; max-width: 540px; margin: 0 auto; background: var(--poco); border: 1px solid var(--linha); }
.busca-topo:focus-within { border-color: var(--ouro); }
.busca-topo input { flex: 1; min-width: 0; padding: 10px 12px; border: 0; background: none; }
.busca-topo button { padding: 0 12px; border: 0; background: none; color: var(--sub); cursor: pointer; display: grid; place-items: center; }
.topo-acoes { display: flex; align-items: center; gap: 8px; flex: none; }
.btn-promo, .btn-ia-topo { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 14px 4px 5px; white-space: nowrap; text-decoration: none; cursor: pointer; font-family: var(--f-tit); font-weight: 700; text-transform: uppercase; font-size: 14px; letter-spacing: .03em; }
.btn-promo { background: var(--por-do-sol); color: #1a0716; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.btn-promo .pct { display: grid; place-items: center; width: 30px; height: 30px; background: rgba(26,7,22,.18); font-family: var(--f-pix); }
.btn-ia-topo { background: var(--painel); border: 1px solid var(--linha); }
.btn-ia-topo:hover { border-color: var(--ciano); }
.btn-carrinho { position: relative; display: grid; place-items: center; width: 40px; height: 40px; background: var(--painel); border: 1px solid var(--linha); }
.contador { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center; background: var(--rosa); color: #fff; font-size: 12px; font-weight: 700; box-shadow: 0 0 10px rgba(255,46,136,.7); }

/* aviso de afiliado logo abaixo do topo */
.faixa-afiliado { margin-top: 10px; }
.faixa-afiliado p { margin: 0; padding: 8px 12px; font-size: 12.5px; line-height: 1.45; color: var(--sub); background: rgba(255,46,136,.07); border-left: 3px solid var(--rosa); }
.faixa-afiliado strong { color: var(--fg); }

/* ───────── títulos de seção ───────── */
.sec-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 34px 0 12px; }
.secao { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 24px; line-height: 1.05; }
.secao::before { content: '▶'; font-size: 13px; color: var(--rosa); text-shadow: 0 0 10px var(--rosa); }
.ver { flex: none; font-family: var(--f-pix); font-size: 11px; text-transform: uppercase; color: var(--ouro); text-decoration: none; }
.ver:hover { color: #fff; }
.dica { margin: 4px 0 12px; color: var(--sub); font-size: 13.5px; }
.carregando { display: flex; align-items: center; gap: 12px; padding: 30px 0; color: var(--sub); }
.trilha { margin: 14px 0 8px; font-size: 13px; color: var(--sub); }
.trilha a { color: var(--sub); }

/* ───────── início: HUD + drop do dia ───────── */
.hud { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: center; padding: 34px 0 10px; }
.hud .pix::before { content: '► '; animation: piscar 1.1s steps(2) infinite; }
@keyframes piscar { 50% { opacity: 0; } }
.hud h1 { margin: 10px 0 14px; font-size: clamp(38px, 7.6vw, 70px); line-height: .95; }
.hud h1 em { font-style: normal; background: var(--por-do-sol); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 18px rgba(255,46,136,.35)); }
.hud p { margin: 0 0 18px; color: var(--sub); max-width: 560px; }
.busca { display: flex; max-width: 560px; background: var(--poco); border: 1px solid var(--linha); padding: 5px; gap: 5px; }
.busca:focus-within { border-color: var(--ouro); }
.busca input { flex: 1; min-width: 0; padding: 10px; border: 0; background: none; }
.busca button { min-height: 44px; }
/* o drop: uma carta brilhante sobre um sol listrado */
.drop { position: relative; display: grid; place-items: center; min-height: 380px; }
.drop::before { content: ''; position: absolute; width: min(330px, 86%); aspect-ratio: 1; border-radius: 50%; top: 4%;
  background: linear-gradient(180deg, #ffcf5a, #ff8a3d 45%, #ff2e88 75%, #9b2bd6);
  -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 14px, transparent 14px 20px); mask-image: linear-gradient(180deg, #000 45%, transparent 100%), repeating-linear-gradient(180deg, #000 0 14px, transparent 14px 20px);
  -webkit-mask-composite: source-in; mask-composite: intersect; opacity: .55; filter: blur(.3px); }
.drop-carta { --r: var(--ouro); position: relative; z-index: 1; width: min(300px, 100%); display: flex; flex-direction: column; gap: 8px; padding: 14px; text-decoration: none;
  background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--r) 28%, transparent), transparent 65%), var(--painel);
  box-shadow: inset 0 0 0 2px var(--r); transform: rotate(-2.5deg); transition: transform .25s; overflow: hidden; }
.drop-carta::after { content: ''; position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.22) 50%, transparent 60%); animation: brilho 3.6s ease-in-out infinite; pointer-events: none; }
@keyframes brilho { 0% { transform: translateX(-60%); } 60%, 100% { transform: translateX(60%); } }
a.drop-carta:hover { transform: rotate(0) translateY(-4px); }
.drop-rot { display: flex; justify-content: space-between; align-items: center; font-family: var(--f-pix); font-size: 11px; text-transform: uppercase; }
.drop-rot i { font-style: normal; color: var(--sub); }
.drop-rot b { font-weight: 400; padding: 2px 6px; background: var(--r); color: #1a0716; }
.drop-foto { aspect-ratio: 1; display: grid; place-items: center; padding: 14px; background: #fff; }
.drop-foto img { max-width: 100%; max-height: 100%; object-fit: contain; }
.drop-carta strong { font-weight: 500; font-size: 14.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.drop-preco { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.drop-preco b { font-family: var(--f-tit); font-size: 26px; }
.drop-preco em { font-style: normal; font-family: var(--f-pix); font-size: 12px; color: var(--r); }
.drop-cta { font-family: var(--f-tit); font-weight: 700; text-transform: uppercase; color: var(--r); font-size: 14px; }
.carregando-drop { align-items: center; justify-content: center; text-align: center; min-height: 300px; color: var(--sub); font-size: 14px; }
.carregando-drop img { image-rendering: pixelated; animation: pulo 1s steps(2) infinite; }
@keyframes pulo { 50% { transform: translateY(-6px); } }

/* ───────── baús de raridade ───────── */
.bloco-baus { margin-top: 10px; }
.baus { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 8px; }
.bau { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 8px 12px; text-decoration: none; text-align: center; isolation: isolate; overflow: hidden;
  background: radial-gradient(90% 70% at 50% 30%, color-mix(in srgb, var(--r) 18%, transparent), transparent 70%), var(--painel);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--r) 45%, var(--linha)); transition: transform .15s, box-shadow .15s; }
a.bau:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 2px var(--r); }
a.bau:hover .bau-svg { animation: sacudir .5s steps(4); }
@keyframes sacudir { 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
.bau-svg { width: 74px; height: auto; overflow: visible; image-rendering: pixelated; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.bau-tampa { transform-box: fill-box; transform-origin: 0% 100%; }
.bau-luz { opacity: 0; }
.bau b { margin-top: 6px; font-family: var(--f-pix); font-weight: 400; font-size: 13px; text-transform: uppercase; color: var(--r); text-shadow: 0 0 10px color-mix(in srgb, var(--r) 60%, transparent); }
.bau span { font-size: 12.5px; color: var(--fg); }
.bau small { font-size: 11.5px; color: var(--sub); }
.bau.vazio-b { opacity: .45; filter: grayscale(.7); }
/* o baú escolhido: a tampa abre, sai luz e raios girando atrás (só nele) */
.bau.aberto { box-shadow: inset 0 0 0 2px var(--r), 0 0 0 1px var(--r); }
.bau.aberto::before { content: ''; position: absolute; z-index: -1; left: 50%; top: 42px; width: 220px; height: 220px; margin: -110px 0 0 -110px;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--r) 35%, transparent) 0 10deg, transparent 10deg 30deg);
  -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 65%); mask-image: radial-gradient(circle, #000 20%, transparent 65%); animation: girar 12s linear infinite; }
.bau.aberto .bau-tampa { animation: abrir .55s cubic-bezier(.3,1.6,.5,1) both; transform: translate(-2px, -4px) rotate(-28deg); }
.bau.aberto .bau-luz { opacity: 1; animation: luz 1.6s ease-in-out infinite; }
@keyframes abrir { from { transform: none; } }
@keyframes luz { 50% { opacity: .55; } }
@keyframes girar { to { transform: rotate(1turn); } }

/* ───────── inventário (categorias) ───────── */
.inv { padding: 12px; background: var(--painel); box-shadow: inset 0 0 0 1px var(--linha); }
.inv-abas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
.inv-abas button { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 9px 10px; cursor: pointer; text-align: left;
  background: var(--poco); border: 1px solid var(--linha); color: var(--sub); font-family: var(--f-tit); font-weight: 600; font-size: 14px; text-transform: uppercase; }
.inv-abas button svg { width: 22px; height: 22px; flex: none; }
.inv-abas button span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv-abas small { font-family: var(--f-pix); font-size: 10px; color: var(--sub); }
.inv-abas button[aria-selected=true] { color: var(--fg); border-color: var(--ouro); background: linear-gradient(180deg, rgba(255,207,90,.14), transparent); }
.inv-abas button[aria-selected=true] svg { color: var(--ouro); }
.inv-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
/* cada categoria é um slot de inventário (quadrado com relevo) */
.slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; aspect-ratio: 1; padding: 8px 6px; text-decoration: none; text-align: center;
  background: linear-gradient(145deg, #241339, #140a22);
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.07), inset -2px -2px 0 rgba(0,0,0,.45), inset 0 0 0 1px color-mix(in srgb, var(--c) 22%, var(--linha));
  transition: transform .12s, box-shadow .12s; }
.slot:hover { transform: translateY(-2px); box-shadow: inset 2px 2px 0 rgba(255,255,255,.07), inset -2px -2px 0 rgba(0,0,0,.45), inset 0 0 0 2px var(--c), 0 0 18px color-mix(in srgb, var(--c) 35%, transparent); }
.slot-ic svg { width: 32px; height: 32px; color: var(--c); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--c) 55%, transparent)); }
.slot-nome { font-size: 12px; font-weight: 500; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ───────── carta de item (produto) ───────── */
.grade-prod { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.prod { --r: var(--linha); position: relative; display: flex; flex-direction: column; background: var(--painel); box-shadow: inset 0 0 0 1px var(--r); transition: transform .15s; }
.prod[class*=" r-"] { background: radial-gradient(100% 50% at 50% 0%, color-mix(in srgb, var(--r) 16%, transparent), transparent 70%), var(--painel); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--r) 75%, transparent); }
.prod:hover { transform: translateY(-3px); }
.prod.r-lendario::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,230,150,.16) 50%, transparent 65%); background-size: 250% 100%; animation: brilho-carta 3s linear infinite; pointer-events: none; }
@keyframes brilho-carta { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.prod-link { display: flex; flex-direction: column; flex: 1; text-decoration: none; }
.prod-foto { position: relative; margin: 8px; aspect-ratio: 1; display: grid; place-items: center; padding: 12px; background: #fff; }
.prod-foto img { max-width: 100%; max-height: 100%; object-fit: contain; }
.selo-off { position: absolute; top: 0; left: 0; display: flex; align-items: center; gap: 6px; padding: 3px 7px; background: var(--r); color: #1a0716; font-size: 14px; font-weight: 700; line-height: 1.2; }
.selo-off i { font-style: normal; font-family: var(--f-pix); font-weight: 400; font-size: 9.5px; text-transform: uppercase; }
.prod-info { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 2px 12px 14px; }
.prod h3 { margin: 0; font-size: 13.5px; font-weight: 400; line-height: 1.35; min-height: 2.7em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prod-preco { margin-top: auto; }
.prod-preco s { display: block; line-height: 1.2; }
.preco { font-size: 22px; font-weight: 700; line-height: 1.1; }
.preco small { display: block; font-family: var(--f-txt); font-size: 11px; font-weight: 400; color: var(--sub); }
.tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tag { padding: 1px 6px; font-size: 11px; font-weight: 500; background: rgba(255,255,255,.06); color: var(--sub); }
.tag.ok { color: var(--verde); background: rgba(45,255,179,.1); }
.add { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; cursor: pointer;
  background: #1a0b2e; border: 1px solid rgba(255,255,255,.2); color: #fff; transition: background .15s, transform .15s; }
.add svg { width: 22px; height: 22px; }
.add:hover { background: var(--rosa); border-color: var(--rosa); transform: scale(1.08); }

/* ───────── topo de cada tela ───────── */
.t-cab { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin: 8px 0 16px; padding: 16px 18px;
  background: linear-gradient(100deg, color-mix(in srgb, var(--c) 20%, transparent), transparent 60%), var(--painel); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 40%, var(--linha)); }
.t-ic { display: grid; place-items: center; width: 54px; height: 54px; flex: none; background: linear-gradient(145deg, #241339, #140a22);
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.07), inset -2px -2px 0 rgba(0,0,0,.45), inset 0 0 0 1px var(--c); }
.t-ic svg { width: 30px; height: 30px; color: var(--c); filter: drop-shadow(0 0 8px var(--c)); }
.t-txt { flex: 1 1 200px; min-width: 0; }
.t-cab h1 { margin: 0; font-size: clamp(28px, 6vw, 42px); line-height: 1; overflow-wrap: anywhere; }
.t-cab p { margin: 6px 0 0; color: var(--sub); font-size: 14px; }
.ordem { display: flex; align-items: center; gap: 8px; color: var(--sub); font-size: 14px; }

/* listas, avisos e vazios */
.vazio, .tb-amazon { background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px var(--linha); }
.vazio { margin: 8px 0 20px; padding: 22px; }
.vazio p { margin: 0 0 14px; color: var(--sub); }
.tb-amazon { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 18px; padding: 14px 16px; color: var(--sub); }
.lojas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 440px; }
.paginas { display: flex; justify-content: center; align-items: center; gap: 16px; margin: 22px 0; color: var(--sub); }
.nota-promo, .nota, .mais-ml { color: var(--sub); font-size: 13px; }
.nota-promo { margin: 18px 0 0; }

/* ───────── página do produto ───────── */
.detalhe { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, 1fr); gap: 20px; align-items: start; margin-bottom: 8px; }
.galeria { min-width: 0; padding: 16px; background: #fff; }
.foto-grande { position: relative; aspect-ratio: 1; display: grid; place-items: center; }
.foto-grande img { max-width: 100%; max-height: 100%; object-fit: contain; }
.foto-grande .selo-off { --r: var(--rosa); color: #fff; }
.miniaturas { display: flex; gap: 8px; overflow-x: auto; padding-top: 12px; }
.miniaturas button { flex: none; width: 62px; height: 62px; padding: 4px; border: 2px solid #e6e6e6; background: #fff; cursor: pointer; }
.miniaturas button.sel { border-color: var(--rosa); }
.miniaturas img { width: 100%; height: 100%; object-fit: contain; }
.compra { position: sticky; top: 84px; min-width: 0; padding: 20px; background: var(--painel); box-shadow: inset 0 0 0 1px var(--linha); }
.compra h1 { margin: 6px 0 14px; font-family: var(--f-txt); text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 20px; line-height: 1.3; }
.cond { margin: 0; font-family: var(--f-pix); font-size: 10.5px; text-transform: uppercase; color: var(--ouro); }
.preco.grande { font-size: 38px; }
.off { color: var(--verde); font-size: 15px; font-weight: 700; }
.parc, .garantia { margin: 4px 0 0; font-size: 13.5px; color: var(--sub); }
.frete { margin: 4px 0 0; font-size: 13.5px; font-weight: 500; color: var(--verde); }
.qtd { display: flex; align-items: center; gap: 10px; margin: 18px 0 14px; color: var(--sub); font-size: 14px; }
.btn-comprar { width: 100%; min-height: 54px; font-size: 17px; }
.btn-comprar.curto { width: auto; }
#add { width: 100%; margin-top: 8px; }
.btn-add.curto { min-height: 38px; padding: 0 12px; font-size: 14px; flex: none; }
.mais-ml { margin: 12px 0 0; }
.indisp { color: #ffb4cf; }
.protecao { margin-top: 16px; padding: 12px 14px; font-size: 13px; color: var(--sub); background: rgba(45,255,179,.06); box-shadow: inset 0 0 0 1px rgba(45,255,179,.25); }
.protecao strong { display: block; color: var(--fg); }
.ficha, .descricao { grid-column: 1; min-width: 0; padding: 16px; background: var(--painel); box-shadow: inset 0 0 0 1px var(--linha); }
.ficha h2, .descricao h2 { margin: 0 0 12px; font-size: 20px; }
.ficha table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ficha th, .ficha td { text-align: left; padding: 8px 10px; vertical-align: top; overflow-wrap: anywhere; }
.ficha tr:nth-child(odd) { background: rgba(255,255,255,.03); }
.ficha th { width: 42%; color: var(--sub); font-weight: 400; }
.descricao div { color: #e6d6ef; font-size: 15px; overflow-wrap: anywhere; }
.ofertas { display: flex; flex-direction: column; gap: 8px; }
.oferta { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; background: var(--painel2); }
.oferta strong { display: block; font-size: 20px; }
.oferta small { color: var(--sub); font-size: 13px; }
.destaques { margin: 0; padding-left: 20px; color: #e6d6ef; }

/* ───────── carrinho ───────── */
.carrinho { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.itens { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.item { display: flex; gap: 14px; padding: 12px; background: var(--painel); box-shadow: inset 0 0 0 1px var(--linha); }
.item.pago { box-shadow: inset 0 0 0 1px rgba(45,255,179,.5); }
.item img { width: 92px; height: 92px; object-fit: contain; background: #fff; padding: 6px; }
.item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.item-info > a { text-decoration: none; font-size: 15px; line-height: 1.35; }
.item-linha { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.item-linha strong { font-size: 19px; }
.qtd-mini { display: flex; align-items: center; background: var(--poco); border: 1px solid var(--linha); }
.qtd-mini button { width: 34px; height: 34px; border: 0; background: none; cursor: pointer; font-size: 18px; }
.qtd-mini span { min-width: 26px; text-align: center; font-family: var(--f-tit); }
.item-acoes { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.btn-pagar { min-height: 40px; padding: 0 14px; font-size: 13.5px; }
.item.pago .btn-pagar { background: rgba(45,255,179,.15); color: var(--verde); }
.resumo-compra { position: sticky; top: 84px; padding: 18px; background: var(--painel); box-shadow: inset 0 0 0 1px var(--linha); }
.resumo-compra h2 { margin: 0 0 12px; font-size: 22px; }
.linha { display: flex; justify-content: space-between; gap: 10px; margin: 6px 0; font-size: 14px; color: var(--sub); }
.linha.total { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linha); color: var(--fg); font-size: 21px; }
.passos { margin: 14px 0; padding-left: 20px; font-size: 14px; }
.passos li { margin-bottom: 6px; }

/* ───────── rodapé ───────── */
.rodape { margin-top: 56px; padding-top: 24px; padding-bottom: 110px; color: var(--sub); font-size: 13px; position: relative; }
.rodape::before { content: ''; position: absolute; left: 16px; right: 16px; top: 0; height: 2px; background: var(--por-do-sol); opacity: .6; }
.selos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-bottom: 14px; }
.selos div { padding: 14px; background: var(--painel); box-shadow: inset 0 0 0 1px var(--linha); }
.selos strong { display: block; font-family: var(--f-tit); text-transform: uppercase; font-size: 15px; color: var(--ouro); letter-spacing: .02em; }
.avisos { padding: 16px 18px 4px; background: var(--poco); box-shadow: inset 0 0 0 1px var(--linha); }
.avisos h2 { display: flex; flex-direction: column; gap: 4px; margin: 0 0 12px; font-size: 20px; color: var(--fg); }
.avisos h2 .pix { color: var(--rosa); }
.avisos p { margin: 0 0 12px; padding-left: 12px; border-left: 2px dashed var(--linha); line-height: 1.55; max-width: 860px; }
.rodape .avisos p.marca-aviso { border-left-color: var(--roxo); }
.avisos strong { color: var(--fg); }
.rodape a { color: var(--fg); }
.rodape-fim { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.rodape-fim .marca .nome { font-size: 17px; }
.copy { margin: 0; opacity: .7; }

/* aviso rápido: "pegou o loot!" como uma conquista do jogo */
.aviso { position: fixed; left: 50%; bottom: 100px; transform: translateX(-50%); z-index: 40; max-width: calc(100vw - 32px); padding: 10px 16px 10px 46px;
  background: var(--painel2); color: var(--fg); font-size: 14px; font-weight: 500; box-shadow: inset 0 0 0 2px var(--ouro), 0 8px 30px #000a;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.aviso::before { content: ''; position: absolute; left: 12px; top: 50%; width: 24px; height: 24px; margin-top: -12px; background: url(icones/logo.svg) center / contain no-repeat; image-rendering: pixelated; }

/* hotbar (celular) */
.hotbar { display: none; }

/* ───────── a bolinha (assistente) ───────── */
.orb { --t: 64px; position: relative; display: block; width: var(--t); height: var(--t); border-radius: 50%; isolation: isolate; overflow: hidden;
  background: radial-gradient(circle at 35% 30%, #fff8 0, #fff0 32%), radial-gradient(circle at 50% 50%, #1a0b2e 0, #0d0617 70%);
  box-shadow: 0 0 calc(var(--t) * .45) #ff2e8866, inset 0 0 calc(var(--t) * .2) #ffcf5a44; animation: respirar 4s ease-in-out infinite; }
.orb::before, .orb::after { content: ""; position: absolute; inset: -20%; border-radius: 50%; z-index: -1; filter: blur(calc(var(--t) * .09)); }
.orb::before { background: conic-gradient(from 0deg, #ffcf5a, #ff8a3d, #ff2e88, #9b2bd6, #22e5d4, #ffcf5a); opacity: .85; animation: girar 7s linear infinite; }
.orb::after { background: radial-gradient(circle at 30% 70%, #ff2e88 0, transparent 45%), radial-gradient(circle at 75% 30%, #22e5d4 0, transparent 40%); mix-blend-mode: screen; animation: girar 11s linear infinite reverse; }
.orb.mini { --t: 26px; }
.orb.grande { --t: 58px; flex: none; }
.orb.ouvindo { animation: ouvir .7s ease-in-out infinite; }
.orb.ouvindo::before { animation-duration: 2s; }
.orb.pensando::before { animation-duration: 1.1s; }
.orb.pensando::after { animation-duration: 1.6s; }
@keyframes respirar { 50% { transform: scale(1.04); } }
@keyframes ouvir { 50% { transform: scale(1.14); box-shadow: 0 0 calc(var(--t) * .8) #ff2e88a0; } }
.orb-flutuante { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 20; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; transition: transform .2s; }
.orb-flutuante:hover { transform: scale(1.07); }
body.ia-aberta .orb-flutuante { opacity: 0; pointer-events: none; }
.ia { position: fixed; z-index: 30; right: 18px; bottom: 18px; width: min(420px, calc(100vw - 36px)); height: min(640px, calc(100vh - 36px)); display: flex; flex-direction: column; overflow: hidden;
  background: radial-gradient(120% 50% at 100% 0%, rgba(255,46,136,.16), transparent 60%), #150a22f4; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 1px var(--linha), 0 20px 60px #000a; clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); animation: subir .25s ease-out; }
@keyframes subir { from { opacity: 0; transform: translateY(16px); } }
.ia-topo { display: flex; align-items: center; gap: 14px; padding: 16px; border-bottom: 1px solid var(--linha); }
.ia-topo h2 { margin: 0; font-size: 19px; }
.ia-topo p { margin: 3px 0 0; color: var(--sub); font-size: 13px; }
.ia-fechar { margin-left: auto; align-self: flex-start; width: 36px; height: 36px; border: 0; background: var(--painel2); font-size: 22px; line-height: 1; cursor: pointer; }
.ia-msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 88%; padding: 10px 14px; overflow-wrap: anywhere; }
.msg p { margin: 0 0 6px; } .msg p:last-child { margin: 0; }
.msg ul { margin: 4px 0; padding-left: 18px; }
.msg.eu { align-self: flex-end; background: var(--rosa); color: #fff; }
.msg.ela { align-self: flex-start; background: var(--painel2); box-shadow: inset 0 0 0 1px var(--linha); }
.msg.erro { background: #3a1028; color: #ffb4cf; }
.digitando span { display: inline-block; width: 7px; height: 7px; margin: 0 2px; background: var(--sub); animation: ponto 1s infinite; }
.digitando span:nth-child(2) { animation-delay: .15s; } .digitando span:nth-child(3) { animation-delay: .3s; }
@keyframes ponto { 50% { opacity: .2; transform: translateY(-3px); } }
.sugestoes { display: flex; flex-wrap: wrap; gap: 6px; }
.sugestoes button { padding: 7px 12px; border: 1px solid var(--linha); background: var(--painel); font-size: 13px; cursor: pointer; }
.sugestoes button:hover { border-color: var(--ouro); }
.mini-card { align-self: stretch; flex: none; display: flex; align-items: center; gap: 12px; padding: 12px; text-decoration: none; background: var(--painel); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 35%, var(--linha)); }
.mini-card:hover { box-shadow: inset 0 0 0 2px var(--c); }
.sug-arte { display: grid; place-items: center; flex: none; width: 44px; height: 44px; background: linear-gradient(145deg, #241339, #140a22); box-shadow: inset 0 0 0 1px var(--c); }
.sug-arte svg { width: 24px; height: 24px; color: var(--c); }
.mini-card strong { display: block; font-size: 15px; line-height: 1.25; }
.mini-card small { display: block; color: var(--sub); font-size: 13px; }
.ia-entrada { display: flex; gap: 8px; padding: 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linha); }
.ia-entrada input { flex: 1; min-width: 0; padding: 12px 14px; }
.ia-mic, .ia-enviar { flex: none; width: 46px; border: 1px solid var(--linha); background: var(--painel); cursor: pointer; display: grid; place-items: center; }
.ia-enviar { background: var(--por-do-sol); color: #1a0716; border: 0; }
.ia-mic.ativo { background: var(--rosa); border-color: var(--rosa); color: #fff; }

/* ───────── PC largo ───────── */
@media (min-width: 900px) {
  .inv { padding: 14px; }
  .inv-grade { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
}

/* ───────── tablet e celular ───────── */
@media (max-width: 900px) {
  .detalhe, .carrinho { grid-template-columns: minmax(0, 1fr); }
  .compra, .resumo-compra { position: static; }
  .hud { grid-template-columns: minmax(0, 1fr); gap: 10px; padding-top: 22px; }
  .drop { min-height: 0; padding: 10px 0 4px; }
  .drop::before { width: 250px; top: -2%; }
}
@media (max-width: 760px) {
  body { padding-bottom: calc(82px + env(safe-area-inset-bottom)); }
  .topo { gap: 10px; padding: 8px 12px; }
  .marca > span { display: none; }
  .busca-topo { margin: 0; }
  .topo-acoes, .orb-flutuante { display: none; }
  .rodape { padding-bottom: 28px; }
  .rodape-fim .marca > span { display: block; }
  .aviso { bottom: calc(92px + env(safe-area-inset-bottom)); }
  /* hotbar: 5 slots numerados, como a barra de itens de um jogo */
  .hotbar { position: fixed; z-index: 25; left: 50%; bottom: calc(8px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px;
    width: min(440px, calc(100% - 16px)); padding: 5px; background: rgba(10,4,18,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: inset 0 0 0 1px var(--linha), 0 10px 30px #000c; }
  .hotbar a, .hotbar button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 58px; padding: 0; border: 0; cursor: pointer; text-decoration: none;
    background: linear-gradient(145deg, #221236, #120820); box-shadow: inset 2px 2px 0 rgba(255,255,255,.06), inset -2px -2px 0 rgba(0,0,0,.5), inset 0 0 0 1px var(--linha);
    color: var(--sub); font-size: 10.5px; font-weight: 500; }
  .hotbar svg { width: 22px; height: 22px; }
  .hotbar .orb.mini { --t: 24px; }
  .hotbar kbd { position: absolute; top: 3px; left: 4px; font-family: var(--f-pix); font-size: 8px; color: var(--sub); opacity: .8; }
  .hotbar [aria-current=page] { color: var(--fg); box-shadow: inset 0 0 0 2px var(--ouro), 0 0 14px rgba(255,207,90,.35); }
  .hotbar [aria-current=page] svg { color: var(--ouro); }
  .hotbar [aria-current=page] kbd { color: var(--ouro); }
  .hotbar .contador { top: -6px; right: -4px; }
  body.ia-aberta .hotbar { visibility: hidden; }
}
@media (max-width: 560px) {
  :root { --k: 10px; }
  .hud h1 { font-size: clamp(34px, 10.5vw, 48px); }
  .hud p { font-size: 14.5px; }
  .busca button { padding: 0 14px; }
  .drop-carta { width: min(250px, 100%); }
  .baus { gap: 6px; }
  .bau { padding: 12px 4px 10px; }
  .bau-svg { width: 52px; }
  .bau b { font-size: 10.5px; }
  .bau span { font-size: 11px; line-height: 1.25; }
  .bau small { font-size: 10.5px; }
  .bau.aberto::before { top: 32px; width: 160px; height: 160px; margin: -80px 0 0 -80px; }
  .inv { padding: 8px; }
  .inv-abas { gap: 4px; }
  .inv-abas button { flex-direction: column; gap: 3px; padding: 7px 2px; font-size: 10.5px; text-align: center; }
  .inv-abas button span { white-space: normal; line-height: 1.1; }
  .inv-abas small { display: none; }
  .inv-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .slot-ic svg { width: 28px; height: 28px; }
  .slot-nome { font-size: 11px; }
  .secao { font-size: 21px; }
  .grade-prod { grid-template-columns: 1fr 1fr; gap: 8px; }
  .prod-foto { margin: 6px; padding: 8px; }
  .prod-info { padding: 0 10px 12px; }
  .preco { font-size: 19px; }
  .preco.grande { font-size: 32px; }
  .selo-off { font-size: 12.5px; padding: 2px 5px; gap: 4px; }
  .selo-off i { font-size: 8px; }
  .add { top: 10px; right: 10px; width: 32px; height: 32px; }
  .t-cab { padding: 14px; gap: 12px; }
  .t-ic { width: 46px; height: 46px; }
  .t-ic svg { width: 26px; height: 26px; }
  .item img { width: 70px; height: 70px; }
  .lojas { max-width: none; }
  .ia { inset: 0; width: 100%; height: 100%; clip-path: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}