/* Boutique (/boutique), pixel-art style. The site header (.nav) and footer come from style.css untouched. */
:root {
  --bq-bg: #0a0517;
  --bq-panel: #1a0e32;
  --bq-panel-2: #28164a;
  --bq-edge: #3c2278;
  --bq-pink: #ff3fa6;
  --bq-pink-dark: #c2187a;
  --bq-violet: #b77dff;
  --bq-cyan: #38c6ff;
  --bq-green: #78ffaa;
  --bq-yellow: #ffd23f;
  --bq-text: #f5f0ff;
  --bq-muted: #b0a4d2;
  --bq-pixfont: "Silkscreen", "JetBrains Mono", monospace;
}
.bq-body { background: var(--bq-bg); }
.bq-pix { font-family: var(--bq-pixfont); letter-spacing: .02em; }
/* numbers stay in the site font: pixel digits are hard to read at small sizes */
.bq-num { font-family: var(--serif); font-weight: 800; letter-spacing: 0; }
.c-cyan { color: var(--bq-cyan); } .c-violet { color: var(--bq-violet); } .c-pink { color: var(--bq-pink); } .c-white { color: var(--bq-text); }

/* ---------- hero ---------- */
.bq-hero { position: relative; overflow: hidden; min-height: clamp(400px, 32vw, 520px); display: grid; align-content: center; padding: 56px 16px 120px;
  background: linear-gradient(180deg, #120828 0%, #2a1158 55%, #3a1a6e 78%, #1a0e32 100%); border-bottom: 2px solid var(--bq-edge); }
.bq-scene { position: absolute; inset: 0; }
.bq-scene svg { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.bq-front { pointer-events: none; } /* runner layer, above the title texts */
.bq-blink { animation: bq-blink 2.4s steps(2) infinite; }
@keyframes bq-blink { 50% { opacity: .15; } }
.bq-hero-in { position: relative; display: grid; justify-items: center; gap: 22px; text-align: center; }
.bq-title-box { position: relative; padding: 20px 56px 18px; background: rgba(12, 6, 26, .82); border: 4px solid #6c3fd0;
  box-shadow: 0 0 0 4px #1a0e32, 0 0 40px rgba(183, 125, 255, .35); }
.bq-title-box::before { content: ""; position: absolute; left: 18px; right: 18px; top: 10px; height: 4px; background: var(--bq-pink); }
.bq-title-box h1 { margin: 6px 0 0; font: 700 clamp(34px, 7.4vw, 84px)/1 var(--bq-pixfont); letter-spacing: .06em;
  background: linear-gradient(180deg, #fff6e0 0 48%, #c9a8ff 52% 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(4px 4px 0 #2a1158); }
.bq-plus { position: absolute; top: 50%; translate: 0 -50%; color: var(--bq-pink); font: 700 34px var(--bq-pixfont); }
.bq-plus-l { left: 16px; } .bq-plus-r { right: 16px; }
.bq-sub { margin: 0; padding: 8px 18px; background: rgba(12, 6, 26, .78); border: 2px solid #4a3a8a; font: 600 clamp(15px, 2.6vw, 28px)/1.2 var(--bq-pixfont); letter-spacing: .08em; }
.bq-hero-links { position: absolute; left: 0; right: 0; bottom: 22px; display: flex; justify-content: space-between; gap: 12px; max-width: 1000px; margin: 0 auto; padding: 0 16px; }
.bq-hlink { display: flex; align-items: center; gap: 10px; color: var(--bq-text); text-decoration: none; }
.bq-hlink b { display: block; color: var(--bq-pink); font: 600 16px var(--bq-pixfont); }
.bq-hlink small { display: block; color: var(--bq-text); font-size: 12px; }
.bq-hlink-r { text-align: right; }
.bq-hicon { width: 40px; height: 40px; flex: none; display: grid; place-items: center; background: var(--bq-pink); box-shadow: 0 4px 0 var(--bq-pink-dark); transition: transform .15s; }
.bq-hicon svg { width: 20px; height: 20px; }
.bq-hlink:hover .bq-hicon { transform: translateY(-3px); }

/* ---------- page ---------- */
.bq { max-width: 1000px; margin: 0 auto; padding: 36px 16px 10px; display: grid; gap: 34px; color: var(--bq-text); }
.bq-muted { color: var(--bq-muted); margin: 0; font-size: 14px; }
.bq-center { text-align: center; }
.bq-notice { padding: 14px 18px; background: var(--bq-panel); border: 2px solid var(--bq-edge); }
.bq-notice h2 { margin: 0 0 4px; font-size: 20px; }
.bq-notice p { margin: 0; color: var(--bq-muted); }
.bq-ok { border-color: var(--bq-green); } .bq-warn { border-color: var(--bq-yellow); } .bq-warn p { color: var(--bq-yellow); }

/* buttons: flat pixel block with a hard bottom shadow */
.bq-btn { appearance: none; border: 0; cursor: pointer; padding: 10px 18px; background: var(--bq-pink); color: #fff; font: 600 16px var(--bq-pixfont); letter-spacing: .04em;
  box-shadow: 0 4px 0 var(--bq-pink-dark); transition: transform .12s, box-shadow .12s, filter .12s; }
.bq-btn:hover:not([disabled]) { filter: brightness(1.1); transform: translateY(-2px); box-shadow: 0 6px 0 var(--bq-pink-dark); }
.bq-btn:active:not([disabled]) { transform: translateY(3px); box-shadow: 0 1px 0 var(--bq-pink-dark); }
.bq-btn[disabled] { opacity: .45; cursor: not-allowed; }
.bq-btn-sm { padding: 6px 22px; font-size: 14px; }
.bq-btn-ghost { background: var(--bq-panel-2); box-shadow: 0 4px 0 #120828; }
.bq-btn:focus-visible, .bq-faq summary:focus-visible, .bq-hlink:focus-visible { outline: 2px solid var(--bq-cyan); outline-offset: 3px; }

/* ---------- featured ---------- */
.bq-feat { position: relative; display: grid; grid-template-columns: 1fr 240px 1.1fr; gap: 28px; align-items: center; padding: 28px;
  border: 3px solid var(--bq-pink); outline: 2px solid rgba(255, 63, 166, .35); outline-offset: -9px;
  background: radial-gradient(ellipse at 60% 40%, rgba(183, 77, 200, .38), transparent 60%), radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 80% 70%, #fff, transparent), #120828; }
.bq-corner { position: absolute; width: 22px; height: 22px; border: 0 solid var(--bq-pink); }
.bq-corner.tl { top: 12px; left: 12px; border-width: 4px 0 0 4px; } .bq-corner.tr { top: 12px; right: 12px; border-width: 4px 4px 0 0; }
.bq-corner.bl { bottom: 12px; left: 12px; border-width: 0 0 4px 4px; } .bq-corner.br { bottom: 12px; right: 12px; border-width: 0 4px 4px 0; }
.bq-feat-tag { display: grid; gap: 6px; justify-items: start; align-self: start; padding: 10px 0 0 10px; }
.bq-feat-tag span { padding: 2px 10px; background: var(--bq-pink); color: #fff; font-size: 26px; line-height: 1.1; }
.bq-feat-card { position: relative; display: grid; border: 3px solid var(--bq-pink); background: #160a2c; box-shadow: 0 0 30px rgba(255, 63, 166, .35); }
.bq-best { position: absolute; top: -16px; left: 50%; translate: -50% 0; white-space: nowrap; padding: 2px 10px; background: var(--bq-yellow); color: #2a1158; font-size: 16px; }
.bq-feat-art { display: block; padding: 26px 22px 8px; }
.bq-feat-art svg, .bq-art svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 10px rgba(255, 63, 166, .45)); }
.bq-feat-plate { display: grid; justify-items: center; gap: 6px; margin: 0 10px 10px; padding: 10px; border: 2px solid var(--bq-pink); text-align: center; }
.bq-feat-plate p { margin: 0; }
.bq-feat-name { color: #ffd6ec; font-size: 16px; }
.bq-feat-bonus { padding: 1px 8px; background: var(--bq-pink); color: #fff; font-size: 12px; }
.bq-feat-price { font: 800 28px var(--serif); }
.bq-feat-info h2 { margin: 0 0 10px; font: 800 30px var(--serif); }
.bq-feat-info p { margin: 0 0 14px; color: var(--bq-muted); line-height: 1.6; }
.bq-price { margin: 0 0 12px; color: var(--bq-pink); font: 800 24px var(--serif); }

/* ---------- section headings ---------- */
.bq-heading { display: flex; align-items: center; gap: 18px; margin: 0 0 6px; font: 800 clamp(22px, 4vw, 34px) var(--serif); letter-spacing: .06em; text-shadow: 0 0 18px rgba(183, 125, 255, .7); }
.bq-heading::before, .bq-heading::after { content: ""; flex: 1; height: 2px; background: linear-gradient(90deg, transparent, var(--bq-violet)); }
.bq-heading::after { background: linear-gradient(90deg, var(--bq-violet), transparent); }

/* ---------- pack grid ---------- */
.bq-packs { display: grid; gap: 14px; }
.bq-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 18px; margin-top: 14px; }
@media (max-width: 860px) { .bq-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .bq-grid { grid-template-columns: 1fr; } }
.bq-card { position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; padding: 22px 16px 18px; text-align: center;
  background: linear-gradient(180deg, var(--bq-panel-2), var(--bq-panel)); border: 2px solid var(--bq-edge); box-shadow: 0 6px 0 #0d0620; transition: transform .15s, border-color .15s; }
.bq-card:hover { transform: translateY(-4px); border-color: var(--bq-violet); }
.bq-card-bonus { border-color: rgba(255, 63, 166, .6); }
.bq-ribbon { position: absolute; top: -12px; right: 10px; padding: 2px 8px; background: var(--bq-pink); color: #fff; font: 800 11px var(--serif); }
.bq-art { display: block; width: 120px; height: 104px; }
.bq-card-name { margin: 6px 0 0; font-size: 19px; }
.bq-card-text { margin: 0; color: var(--bq-muted); font-size: 13px; min-height: 2.6em; }
.bq-card .bq-price { margin: 4px 0 6px; font-size: 22px; color: var(--bq-text); }

/* ---------- trust, faq, payment ---------- */
.bq-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.bq-trust-card { --c: var(--bq-pink); display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--bq-panel); border: 1px solid var(--bq-edge); border-top: 3px solid var(--c); }
.bq-trust-card.c-green { --c: var(--bq-green); } .bq-trust-card.c-cyan { --c: var(--bq-cyan); } .bq-trust-card.c-pink { --c: var(--bq-pink); }
.bq-trust-icon { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border: 2px solid var(--bq-edge); color: var(--c); font: 700 18px var(--bq-pixfont); box-shadow: inset 0 0 12px color-mix(in srgb, var(--c) 30%, transparent); }
.bq-trust-card b { display: block; color: var(--c); font-size: 15px; font-weight: 600; }
.bq-trust-card small { color: var(--bq-muted); font-size: 12px; }
.bq-faq { display: grid; gap: 8px; max-width: 720px; width: 100%; margin: 0 auto; }
.bq-faq details { background: var(--bq-panel); border: 1px solid var(--bq-edge); }
.bq-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px; font-weight: 600; }
.bq-faq summary::-webkit-details-marker { display: none; }
.bq-faq summary::after { content: "+"; color: var(--bq-pink); font: 700 20px/1 var(--bq-pixfont); }
.bq-faq details[open] summary::after { content: "−"; }
.bq-faq details p { margin: 0; padding: 0 16px 14px; color: var(--bq-muted); line-height: 1.6; }
.bq-pay { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.bq-pay span { padding: 6px 10px; background: #f5f0ff; color: #1a0e32; font: 700 12px var(--sans); }
.bq-dialog { border: 3px solid var(--bq-pink); border-radius: 0; background: #160a2c; }
.bq-dialog h2 { font-size: 22px; }
.bq + footer { margin-top: 30px; }

@media (max-width: 760px) {
  .bq-hero { min-height: 340px; padding-bottom: 140px; }
  .bq-title-box { padding: 16px 30px 14px; }
  .bq-title-box h1 { font-size: clamp(18px, 6vw, 40px); letter-spacing: .02em; white-space: nowrap; }
  .bq-sub { font-size: 13px; }
  .bq-plus { font-size: 22px; } .bq-plus-l { left: 8px; } .bq-plus-r { right: 8px; }
  .bq-hero-links { flex-direction: column; align-items: stretch; }
  .bq-hlink-r { flex-direction: row-reverse; justify-content: flex-end; text-align: left; }
  .bq-feat { grid-template-columns: 1fr; padding: 34px 18px 22px; justify-items: center; text-align: center; }
  .bq-feat-tag { justify-items: center; padding: 0; grid-auto-flow: column; }
  .bq-feat-tag span { font-size: 20px; }
  .bq-feat-card { width: min(260px, 100%); }
  .bq-trust { grid-template-columns: 1fr; }
}
/* ---------- animations ---------- */
/* hero actors: px in an SVG transform are scene units (the scene is 320 wide) */
.bq-actor { will-change: transform; }
.bq-ship-1 { animation: bq-fly-r 13s linear infinite; }
.bq-ship-2 { animation: bq-fly-l 19s linear -7s infinite; }
.bq-saucer { animation: bq-fly-r 26s linear -16s infinite, bq-wobble 2.6s ease-in-out infinite; }
@keyframes bq-fly-r { from { transform: translateX(-40px); } to { transform: translateX(360px); } }
@keyframes bq-fly-l { from { transform: translateX(360px); } to { transform: translateX(-40px); } }
@keyframes bq-wobble { 50% { translate: 0 -3px; } }
.bq-flame { animation: bq-flame .18s steps(2) infinite; }
@keyframes bq-flame { 50% { fill: #ff3fa6; opacity: .5; } }
.bq-light { animation: bq-blink .8s steps(2) infinite; } .bq-light-2 { animation-delay: .4s; }
.bq-runner { animation: bq-fly-r 11s linear -4s infinite; }
/* 8 run frames of .075s (NINJA_FRAMES / NINJA_FRAME_S in boutique.js, which sets each frame's negative delay):
   a frame is visible during the first eighth of its cycle */
.bq-f { opacity: 0; animation: bq-frame .6s steps(1) infinite; }
@keyframes bq-frame { 0% { opacity: 1; } 12.5%, 100% { opacity: 0; } }

/* title: letters hop in a wave, a light sweeps across the frame, the frame glows */
.bq-title-box h1 { background: none; color: inherit; }
.bq-title-box h1 span { display: inline-block; background: linear-gradient(180deg, #fff6e0 0 48%, #c9a8ff 52% 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: bq-wave 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * .1s); }
@keyframes bq-wave { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-8px); } }
.bq-title-box { animation: bq-glow 3.2s ease-in-out infinite; }
@keyframes bq-glow { 50% { box-shadow: 0 0 0 4px #1a0e32, 0 0 70px rgba(255, 63, 166, .55); border-color: #b77dff; } }
.bq-title-box::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .22) 50%, transparent 65%); background-size: 300% 100%; animation: bq-sweep 4.8s ease-in-out infinite; }
@keyframes bq-sweep { from { background-position: 120% 0; } 60%, to { background-position: -20% 0; } }
.bq-plus { animation: bq-blink 1.2s steps(2) infinite; } .bq-plus-r { animation-delay: .6s; }

/* offers: gems float, a light runs over the cards, badges pulse, sparkles around the featured pack */
.bq-art svg, .bq-feat-art svg { animation: bq-bob 3s ease-in-out infinite; }
.bq-card:nth-child(2) .bq-art svg { animation-delay: -.5s; } .bq-card:nth-child(3) .bq-art svg { animation-delay: -1s; }
.bq-card:nth-child(4) .bq-art svg { animation-delay: -1.5s; } .bq-card:nth-child(5) .bq-art svg { animation-delay: -2s; } .bq-card:nth-child(6) .bq-art svg { animation-delay: -2.5s; }
@keyframes bq-bob { 50% { transform: translateY(-6px); } }
.bq-card::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .07) 50%, transparent 60%); background-size: 260% 100%; animation: bq-sweep 6s ease-in-out infinite; }
.bq-card:nth-child(2)::after { animation-delay: .4s; } .bq-card:nth-child(3)::after { animation-delay: .8s; }
.bq-card:nth-child(4)::after { animation-delay: 1.2s; } .bq-card:nth-child(5)::after { animation-delay: 1.6s; } .bq-card:nth-child(6)::after { animation-delay: 2s; }
.bq-card:hover .bq-art svg { animation-duration: 1s; }
.bq-ribbon, .bq-feat-bonus { animation: bq-pulse 1.8s ease-in-out infinite; }
@keyframes bq-pulse { 50% { transform: scale(1.08); filter: brightness(1.2); } }
.bq-best { animation: bq-best 2.4s ease-in-out infinite; }
@keyframes bq-best { 50% { box-shadow: 0 0 18px rgba(255, 210, 63, .8); } }
.bq-feat-card { animation: bq-feat 3.2s ease-in-out infinite; }
@keyframes bq-feat { 50% { box-shadow: 0 0 50px rgba(255, 63, 166, .6); } }
.bq-corner { animation: bq-blink 1.6s steps(2) infinite; }
.bq-spark { position: absolute; width: 10px; height: 10px; pointer-events: none; animation: bq-spark 3.5s ease-in-out infinite; opacity: 0;
  background: linear-gradient(#fff, #fff) center / 2px 100% no-repeat, linear-gradient(#fff, #fff) center / 100% 2px no-repeat; filter: drop-shadow(0 0 4px #ff8cc8); }
@keyframes bq-spark { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); } 20% { opacity: 1; transform: scale(1) rotate(45deg); } 40% { opacity: 0; transform: scale(.4) rotate(90deg); } }

@media (prefers-reduced-motion: reduce) {
  .bq-blink, .bq-actor, .bq-flame, .bq-light, .bq-f, .bq-title-box, .bq-title-box::after, .bq-title-box h1 span, .bq-plus,
  .bq-art svg, .bq-feat-art svg, .bq-card::after, .bq-ribbon, .bq-feat-bonus, .bq-best, .bq-feat-card, .bq-corner, .bq-spark { animation: none; }
  .bq-spark { opacity: 0; }
  .bq-f1 { opacity: 1; }
  .bq-card, .bq-btn, .bq-hicon { transition: none; }
}