/* ==========================================================================
   Skin "Console de Missão" (HUD + momentos de fliperama), escolhido pelo dono em 15/10/2026.
   Camada SÓ VISUAL carregada depois do tema base: não muda markup, lógica, dados nem o
   carrossel/efeitos da página inicial (.lob-home-card-swap e .lob-infinite-* ficam intocados).
   Para desligar: remover este <link> (e o script lobnho-skin-missao.js) do index.html.
   ========================================================================== */

@font-face {
  font-family: "VT323";
  src: url("../fonts/VT323-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Press Start 2P";
  src: url("../fonts/PressStart2P-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --ms-mag: #ff00f6;
  --ms-pink: #ff98fb;
  --ms-panel: rgba(10, 10, 15, 0.8);
  --ms-line-2: rgba(255, 152, 251, 0.3);
  --ms-line-3: rgba(255, 152, 251, 0.5);
  --ms-tint: rgba(255, 0, 246, 0.16);
  --ms-tint-b: rgba(255, 0, 246, 0.42);
  --ms-tint-h: rgba(255, 0, 246, 0.26);
  --ms-tint-hb: rgba(255, 0, 246, 0.62);
  --ms-f-data: "VT323", ui-monospace, "Courier New", monospace;
  --ms-f-arc: "Press Start 2P", ui-monospace, monospace;
  --ms-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ms-scan: repeating-linear-gradient(0deg, rgba(255, 152, 251, 0.035) 0 1px, transparent 1px 3px);
  --ms-ticks:
    linear-gradient(var(--ms-mag) 0 0) left top / 10px 2px no-repeat,
    linear-gradient(var(--ms-mag) 0 0) left top / 2px 10px no-repeat,
    linear-gradient(var(--ms-mag) 0 0) right top / 10px 2px no-repeat,
    linear-gradient(var(--ms-mag) 0 0) right top / 2px 10px no-repeat,
    linear-gradient(var(--ms-mag) 0 0) left bottom / 10px 2px no-repeat,
    linear-gradient(var(--ms-mag) 0 0) left bottom / 2px 10px no-repeat,
    linear-gradient(var(--ms-mag) 0 0) right bottom / 10px 2px no-repeat,
    linear-gradient(var(--ms-mag) 0 0) right bottom / 2px 10px no-repeat;
}

/* ---------- Painéis: borda tracejada, scanlines, cantoneiras de mira ---------- */
body :is(.lob-product-card, .lob-product-detail-card, .lob-checkout-section, .lob-order-card, .lob-login-card,
  .lob-profile-card, .lob-ticket-card, .lob-tool-card, .lob-legal-card, .lob-filter-section, .lob-stock-card,
  .lob-verification-card, .lob-payment-card, .lob-shipping-order) {
  border-style: dashed !important;
  border-radius: 3px !important;
  background-image: var(--ms-scan) !important;
  background-color: rgba(10, 10, 15, 0.82) !important;
}
body :is(.lob-product-card, .lob-product-detail-card, .lob-checkout-section, .lob-order-card, .lob-login-card,
  .lob-profile-card, .lob-ticket-card, .lob-tool-card) {
  position: relative;
}
body :is(.lob-product-card, .lob-product-detail-card, .lob-order-card, .lob-login-card, .lob-ticket-card, .lob-tool-card)::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 3;
  pointer-events: none;
  background: var(--ms-ticks);
  opacity: 0.55;
  transition: opacity 0.18s ease, inset 0.26s var(--ms-ease);
}
/* Hover states are real-pointer only: on touch, :hover sticks after a tap and
   leaves the pink brackets/glow parked on the card until reload. */
@media (hover: hover) and (pointer: fine) {
  body :is(.lob-product-card, .lob-order-card, .lob-ticket-card, .lob-tool-card):hover::after {
    opacity: 1;
    inset: -5px;
  }
}
body .lob-product-card {
  transition: transform 0.2s var(--ms-ease), box-shadow 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
  body .lob-product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(255, 0, 246, 0.14);
  }
}

/* Entrada em cascata ("liga" como CRT) — classe posta pelo lobnho-skin-missao.js. */
body .ms-in {
  animation: missao-boot 0.62s var(--ms-ease) backwards;
  animation-delay: calc(var(--ms-i, 0) * 70ms);
}

/* ---------- Títulos: flicker cromático periódico ---------- */
body :is(.lob-section-heading h1, .lob-section-heading h2, .lob-checkout-title, .lob-tools-hero-title) {
  animation: missao-chroma 6s steps(1, end) infinite;
}
body .lob-section-heading > span,
body .lob-section-heading p:first-child {
  font-family: var(--ms-f-data);
  font-size: 18px;
  letter-spacing: 0.1em;
}

/* ---------- Leituras de dados (preços, contadores) em VT323 ---------- */
body :is(.lob-chip small, .lob-cart-total, .lob-checkout-total, .lob-var-price, .lob-page-btn) {
  font-family: var(--ms-f-data) !important;
  letter-spacing: 0.04em;
}
body .lob-chip small,
body .lob-page-btn { font-size: 18px !important; }

/* ---------- Chips de categoria ---------- */
body .lob-chip {
  border-style: dashed !important;
  border-radius: 3px !important;
  transition: transform 0.16s var(--ms-ease), border-color 0.16s ease, background-color 0.16s ease;
}
body .lob-chip:hover { transform: translateY(-2px); }
body .lob-chip.is-active {
  border-style: solid !important;
  box-shadow: inset 0 0 0 1px rgba(255, 0, 246, 0.35), 0 0 18px rgba(255, 0, 246, 0.2);
}
body .lob-category-icon {
  border-style: dashed !important;
  border-radius: 2px !important;
}

/* ---------- Botões HUD (ações comuns) ---------- */
body :is(.lob-action-btn:not(.lob-buy-btn), .lob-ghost-btn, .lob-cart-continue, .lob-coupon-apply-btn, .lob-filter-reset, .lob-btn) {
  border-radius: 2px !important;
  letter-spacing: 0.08em;
  transition: transform 0.14s var(--ms-ease), background-color 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}
body :is(.lob-action-btn, .lob-ghost-btn, .lob-cart-continue, .lob-btn):hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(255, 0, 246, 0.16);
}
body :is(.lob-action-btn, .lob-ghost-btn, .lob-cart-continue, .lob-btn):active:not(:disabled) {
  transform: translateY(0) scale(0.97);
}
body .lob-action-btn:disabled {
  border-style: dashed !important;
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 6px, transparent 6px 12px) !important;
}

/* ---------- Botões de fliperama: Comprar, Finalizar compra, CTA do topo ---------- */
body :is(.lob-buy-btn, .lob-cart-checkout-btn, .lob-checkout-submit) {
  position: relative;
  overflow: hidden;
  border-radius: 0 !important;
  font-family: var(--ms-f-arc) !important;
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
  box-shadow: 0 6px 0 0 rgba(0, 0, 0, 0.45), inset -3px -3px 0 0 rgba(0, 0, 0, 0.26), inset 3px 3px 0 0 rgba(255, 255, 255, 0.3) !important;
  transition: transform 0.1s steps(2, end), box-shadow 0.1s steps(2, end) !important;
}
body :is(.lob-buy-btn, .lob-cart-checkout-btn, .lob-checkout-submit)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 30%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: translate3d(-140%, 0, 0) skewX(-18deg);
  pointer-events: none;
}
body :is(.lob-buy-btn, .lob-cart-checkout-btn, .lob-checkout-submit):hover:not(:disabled)::after {
  animation: missao-shine 0.7s ease-out;
}
body :is(.lob-buy-btn, .lob-cart-checkout-btn, .lob-checkout-submit):active:not(:disabled) {
  transform: translateY(5px);
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.45), inset -3px -3px 0 0 rgba(0, 0, 0, 0.26), inset 3px 3px 0 0 rgba(255, 255, 255, 0.3) !important;
}

/* ---------- Tags ---------- */
body :is(.lob-tag-row span, .lob-tag-row a, .lob-guide-tags span) {
  border-style: dashed !important;
  border-radius: 2px !important;
  transition: color 0.15s ease, border-color 0.15s ease;
}
body .lob-tag-row span:hover { border-color: var(--ms-mag) !important; color: #fff; }

/* ---------- Campos ---------- */
body .lob-route :is(input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="number"], select, textarea) {
  border-radius: 2px !important;
}
body .lob-route :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--ms-pink);
  outline-offset: 2px;
}

/* ---------- Pop-ups com entrada E saída temáticas ---------- */
/* Seletor de variação: desdobra como CRT e opções entram em sequência; ao fechar dobra numa linha. */
body .lob-product-variation-menu:not([hidden]) {
  border-style: dashed !important;
  border-radius: 2px !important;
  background-image: var(--ms-scan) !important;
  transform-origin: 50% 0;
  animation: missao-unfold 0.32s var(--ms-ease) both;
}
body .lob-product-variation-menu.ms-closing { animation: missao-fold-out 0.24s ease-in both; }
body .lob-product-variation-menu:not([hidden]) > .lob-product-variation-option {
  animation: missao-opt-in 0.22s var(--ms-ease) backwards;
}
body .lob-product-variation-menu > .lob-product-variation-option:nth-child(2) { animation-delay: 40ms; }
body .lob-product-variation-menu > .lob-product-variation-option:nth-child(3) { animation-delay: 80ms; }
body .lob-product-variation-menu > .lob-product-variation-option:nth-child(4) { animation-delay: 120ms; }
body .lob-product-variation-menu > .lob-product-variation-option:nth-child(n+5) { animation-delay: 160ms; }
body .lob-product-variation-option { border-radius: 2px !important; }
body .lob-product-variation-option.is-selected::before,
body .lob-product-variation-option:hover::before {
  content: "> ";
  color: var(--ms-mag);
  font-family: var(--ms-f-data);
}
body .lob-product-variation-toggle { border-style: dashed !important; border-radius: 2px !important; }

/* Gaveta do carrinho: acopla pela direita e sai deslizando de volta. */
body .lob-cart-panel:not([hidden]) {
  background-image: var(--ms-scan);
  border-left: 1px dashed var(--ms-line-3);
  animation: missao-dock-in 0.42s var(--ms-ease) both;
}
body .lob-cart-root.ms-closing .lob-cart-panel { animation: missao-dock-out 0.26s ease-in both; }
body .lob-cart-root:not([hidden]) { animation: missao-scrim-in 0.3s ease both; }
body .lob-cart-root.ms-closing { animation: missao-scrim-out 0.26s ease both; }
body .lob-cart-item {
  border-style: dashed !important;
  border-radius: 2px !important;
}

/* Menus da navegação (idioma, notificações, menu do celular): ligam como CRT. */
body :is(.gl-lang-menu, .lob-notification-panel):not([hidden]) {
  transform-origin: 50% 0;
  animation: missao-unfold 0.3s var(--ms-ease) both;
}

/* Aviso (toast): sobe em degraus no estilo "LEVEL UP". */
body .lob-app-notice:not([hidden]) {
  border-style: dashed !important;
  border-color: var(--ms-line-3) !important;
  border-radius: 2px !important;
  background-image: var(--ms-scan) !important;
  animation: missao-toast-in 0.42s steps(6, end) both;
}

/* Modais (ban, biblioteca de emoji, mídia): ligam como CRT. */
body :is(.lob-ban-modal-box, .lob-emoji-picker, .lob-media-library) {
  animation: missao-crt-in 0.42s var(--ms-ease) both;
  border-radius: 3px !important;
}

/* Paginação */
body .lob-page-btn {
  border-style: dashed !important;
  border-radius: 2px !important;
}
body .lob-page-btn.is-active { border-style: solid !important; }

/* Rodapé: linha tracejada de HUD */
body .lob-footer { border-top-style: dashed !important; }

/* ---------- Keyframes ---------- */
@keyframes missao-boot {
  0% { opacity: 0; transform: translate3d(0, 18px, 0) scaleY(0.92); }
  40% { opacity: 1; }
  52% { opacity: 0.35; }
  62% { opacity: 1; transform: translate3d(0, 0, 0) scaleY(1.01); }
  100% { opacity: 1; transform: none; }
}
@keyframes missao-unfold {
  0% { opacity: 0; transform: scale(0.4, 0.03); }
  30% { opacity: 1; transform: scale(1, 0.03); }
  100% { opacity: 1; transform: none; }
}
@keyframes missao-fold-out {
  0% { opacity: 1; transform: none; }
  55% { opacity: 1; transform: scale(1, 0.03); }
  100% { opacity: 0; transform: scale(0.2, 0.03); }
}
@keyframes missao-opt-in {
  from { opacity: 0; transform: translate3d(-8px, 0, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes missao-crt-in {
  0% { opacity: 0; transform: scale(0.06, 0.02); }
  28% { opacity: 1; transform: scale(1, 0.02); }
  62% { transform: scale(1, 1.03); }
  100% { opacity: 1; transform: none; }
}
@keyframes missao-dock-in {
  0% { opacity: 0.2; transform: translate3d(104%, 0, 0); }
  62% { opacity: 1; transform: translate3d(-8px, 0, 0); }
  80% { transform: translate3d(3px, 0, 0); }
  100% { opacity: 1; transform: none; }
}
@keyframes missao-dock-out {
  0% { opacity: 1; transform: none; }
  25% { transform: translate3d(-6px, 0, 0); }
  100% { opacity: 0.3; transform: translate3d(104%, 0, 0); }
}
@keyframes missao-scrim-in { 0% { opacity: 0; } 50% { opacity: 0.9; } 60% { opacity: 0.6; } 100% { opacity: 1; } }
@keyframes missao-scrim-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes missao-toast-in {
  0% { opacity: 0; translate: 0 28px; }
  50% { opacity: 1; translate: 0 -6px; }
  75% { translate: 0 2px; }
  100% { opacity: 1; translate: 0 0; }
}
@keyframes missao-shine {
  from { transform: translate3d(-140%, 0, 0) skewX(-18deg); }
  to { transform: translate3d(400%, 0, 0) skewX(-18deg); }
}
@keyframes missao-chroma {
  0%, 92%, 100% { text-shadow: none; }
  93% { text-shadow: -3px 0 rgba(255, 0, 246, 0.85), 3px 0 rgba(255, 152, 251, 0.85); }
  95% { text-shadow: 2px 1px rgba(255, 0, 246, 0.85), -2px -1px rgba(255, 152, 251, 0.85); }
  97% { text-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  body .ms-in { animation-duration: 0.14s; }
}