/* Bubble Pinball · "backglass at night": indigo lacquer, soap-film iridescence, WPC brass, DMD amber.
   Deliberately single-theme (an arcade cabinet does not have a light mode). */
@font-face { font-family: "Chakra Petch"; src: url("/fonts/chakra-petch-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
/* Lilita One (OFL, fonts/LilitaOne-OFL.txt): the rounded face of the logo's ribbon, for the big headings only.
   Latin only: Polish, Turkish, Russian, Japanese and Korean pages keep Chakra Petch (see --headline below). */
@font-face { font-family: "Lilita One"; src: url("/fonts/lilita-one-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Chakra Petch"; src: url("/fonts/chakra-petch-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Noto Sans"; src: url("/fonts/noto-sans-latin.woff2") format("woff2"); font-weight: 400 800; font-display: swap;
  unicode-range: U+0000-024F, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215; }
@font-face { font-family: "Noto Sans"; src: url("/fonts/noto-sans-cyrillic.woff2") format("woff2"); font-weight: 400 800; font-display: swap;
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

:root {
  --lacquer: #0B0F2E; --lacquer-2: #111641; --indigo: #1B1F6B; --panel: #151A4A;
  --ink: #F1F2FF; --muted: #AEB3E0; --dim: #7A80B8; --line: rgba(173, 182, 255, .16);
  --magenta: #FF3FA4; --cyan: #3FE0F0; --gold: #FFC23D; --amber: #FF9E2C; --violet: #B58CFF; --lime: #7CFFB2;
  --display: "Chakra Petch", "Noto Sans", system-ui, sans-serif;
  --headline: "Lilita One", "Chakra Petch", "Noto Sans", system-ui, sans-serif; --headline-w: 400; --headline-ls: .005em;
  --body: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 18px; --wrap: 1180px;
  --s-1: .875rem; --s0: 1rem; --s1: 1.125rem; --s2: 1.375rem; --s3: 1.75rem; --s4: 2.25rem; --s5: clamp(2.4rem, 5vw, 3.4rem); --s6: clamp(2.8rem, 7.2vw, 5.6rem);
}
.lang-ja { --body: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", Meiryo, sans-serif; --display: "Chakra Petch", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif; }
.lang-pl, .lang-tr, .lang-ru, .lang-ja, .lang-ko { --headline: var(--display); --headline-w: 700; --headline-ls: -.01em; }
.lang-ko { --body: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif; --display: "Chakra Petch", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body {
  margin: 0; background: var(--lacquer); color: var(--ink); font: 400 var(--s0)/1.65 var(--body);
  background-image: radial-gradient(1200px 600px at 85% -10%, rgba(255, 63, 164, .16), transparent 60%),
    radial-gradient(900px 700px at -10% 30%, rgba(63, 224, 240, .09), transparent 60%);
  background-repeat: no-repeat; overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
picture { display: block; }
a { color: var(--cyan); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--display); line-height: 1.08; margin: 0; text-wrap: balance; letter-spacing: -.01em; }
/* The big headings speak the logo's rounded candy type; small headings and UI stay in Chakra Petch. */
h1, h2 { font-family: var(--headline); font-weight: var(--headline-w); letter-spacing: var(--headline-ls); }
h2 { font-size: var(--s5); font-weight: var(--headline-w); }
h3 { font-size: var(--s2); font-weight: 700; }
p { margin: 0; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: clamp(16px, 4vw, 32px); }
.narrow { max-width: 820px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--gold); color: #1a0f3d; padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }
.eyebrow { font: 600 var(--s-1)/1.2 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--amber); }
.lead { font-size: var(--s2); line-height: 1.5; color: #DADDFF; max-width: 60ch; }
.note { color: var(--dim); font-size: var(--s-1); }
.prose { color: var(--muted); max-width: 68ch; }

/* ---------- buttons ---------- */
.btn { --btn-edge: #9A5A00; display: inline-flex; align-items: center; gap: .55em; font: 700 var(--s1)/1 var(--display); letter-spacing: .02em;
  text-decoration: none; border-radius: 14px; padding: .95em 1.4em; border: 0; cursor: pointer; white-space: nowrap;
  transition: transform .12s ease, box-shadow .12s ease, filter .2s ease; }
.btn svg { width: 1.1em; height: 1.1em; flex: none; }
.btn-play { color: #2A1600; background: linear-gradient(180deg, #FFE27A 0%, var(--gold) 45%, var(--amber) 100%);
  box-shadow: 0 5px 0 var(--btn-edge), 0 12px 30px rgba(255, 158, 44, .35), inset 0 1px 0 rgba(255, 255, 255, .7); }
.btn-play:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 6px 0 var(--btn-edge), 0 16px 36px rgba(255, 158, 44, .45), inset 0 1px 0 rgba(255, 255, 255, .7); }
.btn-play:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--btn-edge), 0 6px 16px rgba(255, 158, 44, .3); }
.btn-ghost { color: var(--ink); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28); }
.btn-ghost:hover { background: rgba(255, 255, 255, .12); }
.btn-sm { font-size: var(--s-1); padding: .7em 1em; border-radius: 11px; box-shadow: 0 3px 0 var(--btn-edge), inset 0 1px 0 rgba(255,255,255,.7); }
.btn-xl { font-size: var(--s2); padding: 1em 1.5em; }
.link-arrow { display: inline-flex; gap: .4em; align-items: center; font: 700 var(--s1) var(--display); color: var(--cyan); text-decoration: none; }
.link-arrow svg { width: 1.1em; height: 1.1em; transition: transform .2s; }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 50; background: rgba(11, 15, 46, .78); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); border-bottom: 1px solid var(--line); }
.top-in { display: flex; align-items: center; gap: 18px; min-height: 68px; }
/* Header lockup (brand/logo-horizontal.svg, 1995 x 390): the pompa BUBBLE PINBALL on one line, sized by height. */
.brand { display: block; line-height: 0; }
.brand img { height: 50px; width: auto; }
@media (max-width: 560px) { .brand img { height: 36px; } }
.nav { display: flex; gap: 22px; margin-left: auto; }
.nav a { color: var(--muted); text-decoration: none; font: 600 var(--s-1) var(--display); letter-spacing: .04em; text-transform: uppercase; }
.nav a:hover, .nav a[aria-current] { color: var(--ink); }
.lang { position: relative; }
.lang summary { list-style: none; display: flex; align-items: center; gap: 6px; cursor: pointer; color: var(--muted); font: 600 var(--s-1) var(--display); padding: 8px 10px; border-radius: 10px; }
.lang summary::-webkit-details-marker { display: none; }
.lang summary svg { width: 18px; height: 18px; }
.lang[open] summary, .lang summary:hover { color: var(--ink); background: rgba(255, 255, 255, .07); }
.lang ul { position: absolute; right: 0; top: calc(100% + 8px); margin: 0; padding: 8px; list-style: none; background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45); display: grid; grid-template-columns: repeat(2, minmax(120px, 1fr)); gap: 2px; min-width: 280px; }
.lang a { display: block; padding: 8px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: var(--s-1); }
.lang a:hover { background: rgba(255, 255, 255, .08); }
.lang a[aria-current] { color: var(--gold); }
@media (max-width: 860px) { .nav { display: none; } .lang { margin-left: auto; } }
@media (max-width: 420px) { .btn-sm span { display: none; } .brand img { height: 30px; } }

/* ---------- hero ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; min-height: min(86vh, 820px); display: flex; align-items: center; padding-block: 64px 72px; }
/* The art is 1344 px (2016 upscaled): on very wide screens it stops growing at 1680 px and sits on the
   right, its left edge melting into the night, so Burbu is never blown up and cut at the top. The last
   120 px always fade into the lacquer: the hero never ends in a hard line. */
.hero-art { position: absolute; top: 0; right: 0; bottom: 0; left: auto; width: min(100%, 1680px); z-index: -2; }
.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 26%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 clamp(0px, calc(100vw - 1680px), 420px)), linear-gradient(0deg, transparent 0, #000 120px);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 clamp(0px, calc(100vw - 1680px), 420px)), linear-gradient(0deg, transparent 0, #000 120px);
  mask-composite: intersect; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(11, 15, 46, .94) 0%, rgba(11, 15, 46, .72) 38%, rgba(11, 15, 46, .05) 70%),
    linear-gradient(0deg, var(--lacquer) 0%, var(--lacquer) 20px, rgba(11, 15, 46, 0) 160px); }
.hero-toy { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 32px; align-items: end; }
.hero-copy { display: grid; gap: 20px; justify-items: start; max-width: 640px; }
.hero h1 { font-size: var(--s6); font-weight: var(--headline-w); letter-spacing: var(--headline-ls); text-transform: none; }
.hero h1 > span { display: block; }
/* The keyword is the headline: the brand in big iridescent type, the promise under it. */
.hero h1 .h1-brand { font-size: var(--s7, calc(var(--s6) * 1.18)); line-height: .95; letter-spacing: var(--headline-ls);
  background: linear-gradient(100deg, #7FE3FF 0%, #FF6FC8 45%, #FFD455 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 24px rgba(255, 63, 164, .3)); margin-bottom: .12em; }
.hero h1 .h1-sub { font-size: calc(var(--s6) * .62); line-height: 1.08; }
.hero h1 .h1-sub .shine { display: inline; }
/* The country's keyword (H1) sits under the brand as a brass line; the claim below is a paragraph set like the old headline. */
.hero h1 .h1-kw { font: 700 clamp(1.05rem, 2.2vw, 1.5rem)/1.2 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--amber); text-shadow: 0 0 18px rgba(255, 158, 44, .35); }
.hero-claim { font: var(--headline-w) calc(var(--s6) * .62)/1.08 var(--headline); letter-spacing: var(--headline-ls); margin: 0; text-wrap: balance; }
.hero-claim .shine { display: inline; }
.hero-eyebrow { margin-bottom: 14px; }
/* Brand + main keyword of the locale live inside the H1, styled as the small amber line above the claim. */
.shine { background: linear-gradient(100deg, var(--cyan) 0%, #9EF3FF 18%, var(--magenta) 44%, var(--gold) 72%, var(--cyan) 100%); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: film 9s ease-in-out infinite alternate; filter: drop-shadow(0 4px 24px rgba(255, 63, 164, .35)); }
@keyframes film { to { background-position: 100% 0; } }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.dmd { justify-self: end; align-self: end; width: min(100%, 330px); padding: 16px 18px 14px; border-radius: 14px; background-color: #120900;
  background-image: radial-gradient(rgba(255, 158, 44, .09) 1px, transparent 1.3px); background-size: 4px 4px;
  box-shadow: inset 0 0 0 2px #3A2200, inset 0 0 30px rgba(0, 0, 0, .8), 0 20px 50px rgba(0, 0, 0, .5); color: var(--amber); font-family: var(--display); }
.dmd-score { display: block; text-align: right; font-size: 2.2rem; font-weight: 700; letter-spacing: .08em; font-variant-numeric: tabular-nums; text-shadow: 0 0 12px rgba(255, 158, 44, .7); line-height: 1; }
.dmd ul { list-style: none; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px dashed rgba(255, 158, 44, .3); display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.dmd li { display: grid; justify-items: center; }
.dmd b { font-size: 1.5rem; line-height: 1; text-shadow: 0 0 10px rgba(255, 158, 44, .6); font-variant-numeric: tabular-nums; }
.dmd li span { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: #C98A3E; text-align: center; line-height: 1.2; margin-top: 4px; }
.dmd-hint { margin-top: 10px; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; text-align: center; color: #C98A3E; animation: blink 2.4s steps(2, jump-none) infinite; }
@keyframes blink { 50% { opacity: .35; } }
@media (max-width: 760px) {
  /* Phone: the tall art keeps its proportions at the top; the copy starts under Burbu's face. */
  /* The headline (the keyword) must be in the first phone screen: Burbu stays above it, cropped. */
  .hero { min-height: 0; align-items: flex-end; padding-block: min(66vw, 320px) 40px; }
  .hero-art { inset: 0 0 auto 0; }
  .hero-art img { height: auto; aspect-ratio: 768 / 1344; object-position: 50% 0%; margin-top: -18vw; }
  .hero::after { background: linear-gradient(0deg, var(--lacquer) 0%, var(--lacquer) calc(100% - min(92vw, 440px)), rgba(11, 15, 46, .6) calc(100% - min(66vw, 320px)), rgba(11, 15, 46, 0) calc(100% - min(36vw, 180px))); }
  .hero-in { grid-template-columns: 1fr; }
  .dmd { justify-self: stretch; width: 100%; }
  .hero-actions .btn-xl { width: 100%; justify-content: center; }
}

/* ---------- bands ---------- */
.band { padding-block: clamp(56px, 9vw, 110px); position: relative; }
.band-head { display: grid; gap: 14px; margin-bottom: clamp(28px, 4vw, 48px); max-width: 780px; }
.band-lead { color: var(--muted); font-size: var(--s1); max-width: 64ch; }

.pitch { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pitch li { position: relative; padding: 28px; border-radius: var(--radius); background: linear-gradient(180deg, rgba(27, 31, 107, .7), rgba(17, 22, 65, .6)); border: 1px solid var(--line); display: grid; gap: 12px; align-content: start; }
.pitch-icon { width: 52px; height: 52px; color: var(--cyan); }
.pitch li:nth-child(2) .pitch-icon { color: var(--magenta); }
.pitch li:nth-child(3) .pitch-icon { color: var(--gold); }
.pitch p { color: var(--muted); }
@media (max-width: 900px) { .pitch { grid-template-columns: 1fr; } }

.band-how { background: linear-gradient(180deg, transparent, rgba(27, 31, 107, .35) 30%, transparent); }
.how-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.how-copy { display: grid; gap: 20px; justify-items: start; }
.steps { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 18px; }
.steps li { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; }
.steps p { color: var(--muted); }
.step-n { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font: 700 1.5rem var(--display); color: #fff;
  background: radial-gradient(circle at 35% 30%, #fff 0 8%, var(--cyan) 22%, #0A7C9C 80%); box-shadow: 0 0 0 3px rgba(63, 224, 240, .25), 0 10px 24px rgba(63, 224, 240, .25); text-shadow: 0 1px 2px #06304a; }
.steps li:nth-child(2) .step-n { background: radial-gradient(circle at 35% 30%, #fff 0 8%, var(--magenta) 22%, #8E1B55 80%); box-shadow: 0 0 0 3px rgba(255, 63, 164, .25), 0 10px 24px rgba(255, 63, 164, .25); }
.steps li:nth-child(3) .step-n { background: radial-gradient(circle at 35% 30%, #fff 0 8%, var(--gold) 22%, #A86A00 80%); box-shadow: 0 0 0 3px rgba(255, 194, 61, .25), 0 10px 24px rgba(255, 194, 61, .25); color: #2A1600; text-shadow: none; }
.how-visual { position: relative; padding-bottom: 40px; }
.how-smash img { border-radius: 24px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.phone-float { position: absolute; right: 4%; bottom: -10px; width: 34%; }
@media (max-width: 900px) { .how-grid { grid-template-columns: 1fr; } }

.phone { margin: 0; border-radius: 26px; padding: 7px; background: linear-gradient(160deg, #3A3F8F, #0D1036 60%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 24px 60px rgba(0, 0, 0, .55); }
.phone img { border-radius: 20px; aspect-ratio: 9 / 16; object-fit: cover; width: 100%; }
.phone figcaption { font: 600 var(--s-1) var(--display); text-align: center; color: var(--muted); padding: 10px 4px 4px; }

.worlds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.world-card a { position: relative; display: block; border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--ink);
  box-shadow: 0 0 0 1px var(--line), 0 20px 40px rgba(0, 0, 0, .35); transition: transform .25s ease, box-shadow .25s ease; }
.world-card img { aspect-ratio: 4 / 5.6; object-fit: cover; width: 100%; transition: transform .6s ease; }
.world-card a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8, 10, 34, .96) 8%, rgba(8, 10, 34, .35) 52%, transparent 70%); }
.world-meta { position: absolute; inset: auto 0 0 0; z-index: 1; padding: 16px; display: grid; gap: 4px; }
.world-n { font: 600 .72rem var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.world-card strong { font: 700 var(--s2)/1.05 var(--display); }
.world-tag { color: var(--muted); font-size: var(--s-1); line-height: 1.35; }
.world-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font: 700 var(--s-1) var(--display); color: var(--accent); }
.world-go svg { width: 16px; height: 16px; }
.world-card a:hover { transform: translateY(-6px); box-shadow: 0 0 0 2px var(--accent), 0 26px 60px rgba(0, 0, 0, .45); }
.world-card a:hover img { transform: scale(1.05); }
@media (max-width: 1000px) { .worlds { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(230px, 70vw); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; }
  .world-card { scroll-snap-align: start; } }

.band-missions { background: radial-gradient(900px 500px at 50% 0%, rgba(181, 140, 255, .12), transparent 70%); }
.missions { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.missions li { padding: 18px; border-radius: 14px; background: rgba(21, 26, 74, .7); border: 1px solid var(--line); display: grid; gap: 10px; align-content: start; }
.missions p { font: 600 .8rem/1.4 var(--display); letter-spacing: .06em; color: var(--muted); }
.chip { display: inline-block; width: fit-content; font: 700 .72rem/1 var(--display); letter-spacing: .1em; text-transform: uppercase; padding: 6px 9px; border-radius: 7px;
  color: var(--amber); background: #1A0E00; box-shadow: inset 0 0 0 1px #4A2A00; white-space: nowrap; }
@media (max-width: 1000px) { .missions { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .missions { grid-template-columns: 1fr; } }

.bosses { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.boss { border-radius: var(--radius); overflow: hidden; background: var(--panel); border: 1px solid var(--line); display: grid; align-content: start; }
.boss img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.boss-body { padding: 14px 16px 18px; display: grid; gap: 6px; }
.boss-body h3 { font-size: var(--s1); }
.boss-body p { color: var(--muted); font-size: var(--s-1); line-height: 1.45; }
.boss-rank { font: 600 .7rem var(--display) !important; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan) !important; }
.boss-boss .boss-rank { color: var(--magenta) !important; }
.boss-final { box-shadow: 0 0 0 2px var(--gold), 0 0 40px rgba(255, 194, 61, .25); }
.boss-final .boss-rank { color: var(--gold) !important; }
@media (max-width: 1000px) { .bosses { grid-template-columns: repeat(2, 1fr); } }
.guide .bosses { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); margin-top: 20px; }

/* ---------- packs: the shop window (doc 31) ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.store { --night: #070b1c; --gold2: #f2c46b; --gold2-deep: #8a5a14; background: var(--night); overflow: hidden; }
body[data-page="packs"] { background-color: #070b1c; }
.band-packs { background: radial-gradient(900px 480px at 20% 10%, rgba(242, 196, 107, .1), transparent 70%); }
.band-packs.store { background-color: #070b1c; overflow: visible; }

/* badges */
.badge { position: absolute; z-index: 3; top: 10px; left: 10px; font: 700 .68rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase;
  padding: 7px 10px 6px; border-radius: 999px; color: #2A1600; background: linear-gradient(180deg, #FFE9A8, var(--gold2) 55%, #d69a3c);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 6px 16px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .8); white-space: nowrap; }
.badge-nuevo { color: #fff; background: linear-gradient(180deg, #ff7cc4, var(--magenta) 55%, #b01566); animation: badge-pulse 2.6s ease-in-out infinite; }
.badge-top, .badge-valor { color: #2A1600; }
.badge-oferta, .badge-unico, .badge-limitado { color: #fff; background: linear-gradient(180deg, #ff9b6b, #ff4d2e 55%, #b52a12); }
.badge-gratis { color: #042614; background: linear-gradient(180deg, #c8ffe0, var(--lime) 55%, #2fbf74); }
.badge-pronto { color: var(--ink); background: rgba(12, 16, 40, .82); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), 0 6px 16px rgba(0, 0, 0, .45); backdrop-filter: blur(6px); }
@keyframes badge-pulse { 50% { box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 0 22px rgba(255, 63, 164, .75), inset 0 1px 0 rgba(255, 255, 255, .8); } }

/* chips and price */
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { font: 600 .72rem/1 var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 6px 8px; border-radius: 7px;
  background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, #f2c46b) 40%, transparent); white-space: nowrap; }
.chips b { color: var(--ink); font-weight: 700; }
.price-tag { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-family: var(--display); }
.price-tag strong { font: 700 1.6rem/1 var(--display); color: var(--gold2); text-shadow: 0 0 18px rgba(242, 196, 107, .35); }
.price-tag s { color: var(--dim); font-size: 1rem; text-decoration-color: var(--magenta); text-decoration-thickness: 2px; }
.price-tag .save { font: 700 .7rem/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: #fff; padding: 6px 8px; border-radius: 7px; background: linear-gradient(180deg, #ff6d4a, #d9341a); }
.price-tag.is-free { font: 700 1.3rem/1 var(--display); color: var(--lime); letter-spacing: .06em; text-transform: uppercase; }
.price-tag.is-soon { font: 700 .8rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); padding: 8px 12px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, #f2c46b) 70%, transparent); background: color-mix(in srgb, var(--accent, #f2c46b) 12%, transparent); width: fit-content; }

/* art placeholders (a render that has not landed yet) */
.art-fallback { position: relative; display: grid; place-items: center; width: 100%; padding: 12px; text-align: center; overflow: hidden;
  font: 700 clamp(1rem, 2.4vw, 1.5rem)/1.05 var(--display); letter-spacing: .04em; text-transform: uppercase; color: #fff;
  background: radial-gradient(120% 80% at 30% 15%, color-mix(in srgb, var(--accent, #f2c46b) 75%, #fff 5%), color-mix(in srgb, var(--accent, #f2c46b) 30%, #070b1c) 55%, #070b1c);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .6); }
.art-fallback::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 78% 70%, rgba(255, 255, 255, .28) 0 7%, transparent 7.5%), radial-gradient(circle at 20% 80%, rgba(255, 255, 255, .18) 0 4%, transparent 4.4%); }
.art-fallback-poster { aspect-ratio: 2 / 3; }
.art-fallback-banner { aspect-ratio: 1080 / 617; font-size: clamp(1.4rem, 4vw, 2.6rem); }

/* poster cards */
.posters { --cols: 4; --gap: clamp(12px, 2vw, 22px); list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); }
.posters > li { flex: 0 1 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); min-width: 0; }
@media (max-width: 1000px) { .posters { --cols: 3; } }
.poster-card a { position: relative; display: grid; grid-template-rows: auto 1fr; height: 100%; border-radius: 16px; overflow: hidden; text-decoration: none; color: var(--ink);
  background: linear-gradient(180deg, #111735, #0a0f26); box-shadow: 0 0 0 1px rgba(242, 196, 107, .22), 0 18px 40px rgba(0, 0, 0, .5);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease; }
.poster-card a:hover, .poster-card a:focus-visible { transform: translateY(-6px); box-shadow: 0 0 0 2px var(--accent), 0 0 40px color-mix(in srgb, var(--accent) 45%, transparent), 0 26px 60px rgba(0, 0, 0, .6); }
.poster-art { position: relative; display: block; overflow: hidden; }
.poster-art img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; transition: transform .6s ease; }
.poster-card a:hover .poster-art img { transform: scale(1.05); }
.poster-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #0a0f26 0%, rgba(10, 15, 38, 0) 30%); pointer-events: none; }
.shine-sweep { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .38) 48%, rgba(255, 255, 255, .08) 54%, transparent 62%);
  transform: translateX(-110%); transition: transform .9s ease; }
.poster-card a:hover .shine-sweep, .poster-card a:focus-visible .shine-sweep { transform: translateX(110%); }
.poster-body { display: grid; gap: 8px; align-content: start; padding: 4px 14px 16px; }
.poster-name { font: 700 var(--s1)/1.1 var(--display); letter-spacing: .02em; text-transform: uppercase; }
.poster-lema { color: var(--muted); font-size: .82rem; line-height: 1.35; }
.poster-body .chips li { font-size: .62rem; padding: 5px 6px; }
.poster-price { margin-top: 4px; }
.poster-price strong { font-size: 1.35rem; }
@media (max-width: 560px) {
  .posters { --cols: 2; }
  .poster-body { padding: 2px 10px 12px; gap: 6px; }
  .poster-name { font-size: .95rem; }
  .poster-lema { font-size: .74rem; }
  .poster-card .badge { font-size: .58rem; padding: 6px 8px 5px; top: 8px; left: 8px; }
  .price-tag.is-soon { font-size: .66rem; padding: 6px 9px; }
}
.pack-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 28px; }
.store-note { margin-top: 18px; max-width: 72ch; }

/* hero with the reel */
.store-hero { position: relative; isolation: isolate; padding-block: clamp(28px, 5vw, 64px) clamp(40px, 6vw, 80px); border-bottom: 1px solid rgba(242, 196, 107, .18); }
.store-hero-bg { position: absolute; inset: 0; z-index: -2; }
.store-hero-bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(22px) saturate(1.3) brightness(.55); transform: scale(1.15); }
.store-hero::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(7, 11, 28, .96) 0%, rgba(7, 11, 28, .75) 45%, rgba(7, 11, 28, .45)), linear-gradient(0deg, #070b1c 0%, transparent 35%); }
.store-hero-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.store-hero-copy { display: grid; gap: 16px; justify-items: start; min-width: 0; }
.store-hero .btn, .pack-actions .btn, .cta-in .btn { max-width: 100%; white-space: normal; }
.store-hero h1 { font-size: clamp(2.6rem, 5.4vw, 4.4rem); letter-spacing: -.02em; background: linear-gradient(180deg, #fff 30%, #FFE3A6 70%, var(--gold2)); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 24px rgba(242, 196, 107, .25)); }
.store-hero .eyebrow { color: var(--gold2); }
.store-hero .lead { font-size: var(--s1); }
.reel { position: relative; min-width: 0; border-radius: 22px; padding: 6px; background: linear-gradient(135deg, #FFE9A8, #b07a2a 30%, #f2c46b 55%, #6d4510 80%, #f2c46b);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 60px color-mix(in srgb, var(--accent) 30%, transparent); }
.reel-track { list-style: none; margin: 0; padding: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; border-radius: 17px; scrollbar-width: none; background: #070b1c; }
.reel-track::-webkit-scrollbar { display: none; }
.reel-track:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.reel-slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; overflow: hidden; }
.reel-art img { width: 100%; aspect-ratio: 1080 / 617; object-fit: cover; }
.reel-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7, 11, 28, .95) 0%, rgba(7, 11, 28, .55) 32%, transparent 58%); pointer-events: none; }
.reel-cap { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 0 clamp(14px, 3vw, 26px) clamp(14px, 2.4vw, 22px); display: grid; gap: 4px; }
.reel-cap .badge { position: static; justify-self: start; margin-bottom: 4px; }
.reel-name { font: 700 clamp(1.4rem, 3.4vw, 2.3rem)/1 var(--display); text-transform: uppercase; letter-spacing: .02em; text-shadow: 0 2px 18px rgba(0, 0, 0, .8); }
.reel-lema { color: #E6E8FF; font-size: var(--s-1); text-shadow: 0 1px 10px rgba(0, 0, 0, .9); }
.reel-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.reel-row .btn-sm { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35); background: rgba(7, 11, 28, .6); }
.reel-row .btn-sm span { display: inline; }
.poster-name, .reel-name { overflow-wrap: break-word; hyphens: auto; }
.reel-nav { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 4px 4px; }
.reel-btn { width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer; font: 700 1.4rem/1 var(--display); color: #2A1600;
  background: radial-gradient(circle at 35% 30%, #fff 0 10%, var(--gold2) 35%, var(--gold2-deep) 95%); box-shadow: 0 3px 10px rgba(0, 0, 0, .5); }
.reel-dots { display: flex; gap: 8px; }
.reel-dot { width: 10px; height: 10px; padding: 0; border-radius: 999px; border: 0; cursor: pointer; background: rgba(7, 11, 28, .6); transition: width .3s ease, background .3s; }
.reel-dot[aria-current="true"] { width: 28px; background: #070b1c; }
@media (max-width: 900px) {
  .store-hero-in { grid-template-columns: 1fr; }
  .store-hero::after { background: linear-gradient(0deg, #070b1c 0%, rgba(7, 11, 28, .8) 60%, rgba(7, 11, 28, .6)); }
  .store-hero .hero-actions .btn-xl { width: 100%; justify-content: center; }
}
@media (max-width: 480px) { .reel-lema { display: none; } .reel-row .btn-sm span { display: none; } .reel-row .btn-sm { padding: .6em; } .reel-cap .badge { margin-bottom: 0; } }

.band-machines { background: radial-gradient(900px 480px at 15% 0%, rgba(242, 196, 107, .09), transparent 70%); }
.store .band-head h2, .band-packs.store .band-head h2 { background: linear-gradient(180deg, #fff 40%, var(--gold2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.store .eyebrow, .band-packs.store .eyebrow { color: var(--gold2); }

/* bundles */
.band-bundles { background: radial-gradient(800px 460px at 85% 20%, rgba(255, 63, 164, .14), transparent 70%), radial-gradient(700px 400px at 10% 90%, rgba(242, 196, 107, .08), transparent 70%); }
.bundles { display: grid; gap: clamp(18px, 3vw, 28px); }
.bundle-card { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(16px, 3vw, 40px); align-items: center;
  padding: clamp(20px, 3.5vw, 40px); border-radius: 22px; background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 22%, #0c1130), #0a0f26 60%);
  box-shadow: 0 0 0 1px rgba(242, 196, 107, .3), 0 24px 60px rgba(0, 0, 0, .5); }
.bundle-bg { position: absolute; inset: 0; z-index: -1; }
.bundle-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.bundle-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7, 11, 28, .2), rgba(7, 11, 28, .88) 55%); }
.bundle-fan { list-style: none; margin: 0; padding: 12px 24px; display: flex; justify-content: center; align-items: flex-end; min-height: 230px; }
.bundle-fan li { --w: min(160px, calc(100% / (var(--n) * .64 + .36))); flex: 0 0 auto; width: var(--w); margin-inline: calc(var(--w) * -.18); border-radius: 12px; overflow: hidden;
  transform: rotate(calc(var(--i) * 34deg / var(--n))) translateY(calc(max(var(--i), var(--i) * -1) * 22px / var(--n))); transform-origin: 50% 110%;
  box-shadow: 0 0 0 1.5px rgba(242, 196, 107, .55), 0 14px 30px rgba(0, 0, 0, .6); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.bundle-fan li img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.bundle-fan .art-fallback { font-size: .7rem; padding: 6px; overflow-wrap: anywhere; }
.bundle-card:hover .bundle-fan li { transform: rotate(calc(var(--i) * 44deg / var(--n))) translateY(calc(max(var(--i), var(--i) * -1) * 30px / var(--n) - 8px)); }
.bundle-body { position: relative; display: grid; gap: 10px; justify-items: start; }
.bundle-body .badge { position: static; }
.bundle-body h3 { font-size: clamp(1.6rem, 6vw, 2.25rem); text-transform: uppercase; overflow-wrap: break-word; hyphens: auto; max-width: 100%; }
.bundle-inc { font-size: var(--s-1); color: var(--muted); }
.bundle-inc span { font: 700 .72rem var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--gold2); }
.bundle-deal { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 6px; }
.bundle-price strong { font-size: clamp(2rem, 4.4vw, 2.8rem); }
.bundle-price s { font-size: 1.15rem; }
.bundle-card.is-soon .bundle-fan li { filter: saturate(.85); }
@media (max-width: 860px) {
  .bundle-card { grid-template-columns: 1fr; }
  .bundle-card::before { background: linear-gradient(180deg, rgba(7, 11, 28, .25), rgba(7, 11, 28, .9) 45%); }
  .bundle-fan { min-height: 0; }
  .bundle-fan li { --w: min(124px, calc(100% / (var(--n) * .64 + .36))); }
}

/* one section per machine */
.pack-feature { position: relative; padding-block: clamp(48px, 8vw, 96px); border-top: 1px solid rgba(242, 196, 107, .12);
  background: radial-gradient(900px 520px at 20% 30%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%); }
.pack-feature.is-flip { background: radial-gradient(900px 520px at 80% 30%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%); }
.pf-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.is-flip .pf-media { order: 2; }
.pf-media { display: grid; gap: 16px; min-width: 0; }
.pf-banner { position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 60%, #f2c46b), 0 0 60px color-mix(in srgb, var(--accent) 28%, transparent), 0 30px 70px rgba(0, 0, 0, .55); }
.pf-banner img { width: 100%; aspect-ratio: 1080 / 617; object-fit: cover; }
.pf-banner .badge { top: 14px; left: 14px; font-size: .74rem; }
.pf-shots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1.6vw, 16px); max-width: 520px; }
.pf-shots .phone { padding: 5px; border-radius: 18px; }
.pf-shots .phone img { border-radius: 13px; }
.pf-body { display: grid; gap: 14px; justify-items: start; min-width: 0; }
.pf-body h2 { font-size: clamp(1.9rem, 7.4vw, 3.4rem); overflow-wrap: break-word; hyphens: auto; max-width: 100%; text-transform: uppercase; color: #fff; text-shadow: 0 0 30px color-mix(in srgb, var(--accent) 55%, transparent); }
.pf-lema { font: 600 var(--s1)/1.3 var(--display); color: color-mix(in srgb, var(--accent) 55%, #fff); }
.pf-desc { color: var(--muted); max-width: 62ch; }
.pf-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pf-points li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; }
.pf-points svg { width: 24px; height: 24px; padding: 3px; border-radius: 50%; color: #070b1c; background: var(--gold2); }
.buy-box { display: grid; gap: 10px; justify-items: start; width: 100%; margin-top: 8px; padding: 18px 20px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(242, 196, 107, .09), rgba(242, 196, 107, .02)); box-shadow: inset 0 0 0 1px rgba(242, 196, 107, .3); }
.buy-price strong { font-size: 2.4rem; }
.buy-vat { color: var(--dim); font-size: .78rem; margin-top: -6px; }
.buy-note { color: var(--muted); font-size: var(--s-1); max-width: 52ch; }
.buy-box .btn { max-width: 100%; white-space: normal; text-align: left; }
.is-soon .buy-box { background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--line); }
.is-soon .pf-banner img { filter: saturate(.9); }
@media (max-width: 900px) {
  .pf-in { grid-template-columns: 1fr; }
  .is-flip .pf-media { order: 0; }
  .pf-shots { max-width: none; }
}
@media (max-width: 480px) { .buy-box .btn-xl { width: 100%; justify-content: center; } }
@media (prefers-reduced-motion: reduce) {
  .reel-track { scroll-behavior: auto; }
  .poster-card a:hover, .poster-card a:hover .poster-art img { transform: none; }
  .bundle-card:hover .bundle-fan li { transform: rotate(calc(var(--i) * 34deg / var(--n))) translateY(calc(max(var(--i), var(--i) * -1) * 22px / var(--n))); }
  .shine-sweep { display: none; }
}

.compare .col-pack { color: var(--gold); }
.compare tbody th { white-space: nowrap; }
.compare tbody td { color: var(--muted); }

.shots { list-style: none; margin: 0; padding: 0 0 14px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 240px); gap: 18px; overflow-x: auto; scroll-snap-type: x proximity; }
.shots li { scroll-snap-align: start; }

.features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.features li { display: grid; gap: 8px; align-content: start; padding-top: 18px; border-top: 2px solid var(--line); }
.features li:nth-child(1) { border-color: var(--cyan); } .features li:nth-child(2) { border-color: var(--magenta); }
.features li:nth-child(3) { border-color: var(--gold); } .features li:nth-child(4) { border-color: var(--violet); }
.features p { color: var(--muted); }
@media (max-width: 900px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .features { grid-template-columns: 1fr; } }

.faq { display: grid; gap: 10px; max-width: 880px; }
.faq details { border-radius: 14px; background: rgba(21, 26, 74, .6); border: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 56px 18px 20px; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font-size: var(--s1); }
.faq summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 12%, var(--cyan) 30%, #0A7C9C 90%); transition: transform .2s; }
.faq details[open] summary::after { background: radial-gradient(circle at 35% 30%, #fff 0 12%, var(--magenta) 30%, #8E1B55 90%); transform: scale(1.2); }
.faq details p { padding: 0 20px 20px; color: var(--muted); max-width: 70ch; }

.cta-band { padding-block: 64px; background: linear-gradient(100deg, #2A0F5C, #5A1266 45%, #0E4C7A); position: relative; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 12% 30%, rgba(255, 255, 255, .18) 0 3%, transparent 3.3%),
  radial-gradient(circle at 88% 70%, rgba(255, 255, 255, .12) 0 6%, transparent 6.4%), radial-gradient(circle at 70% 20%, rgba(255, 255, 255, .1) 0 2%, transparent 2.3%); }
.cta-in { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.cta-in h2 { font-size: var(--s4); }
.cta-in p { color: #E7D9FF; font-size: var(--s1); margin-top: 6px; }

/* ---------- inner pages ---------- */
.page-hero { padding-block: clamp(40px, 7vw, 80px) clamp(28px, 5vw, 56px); border-bottom: 1px solid var(--line);
  background: radial-gradient(900px 400px at 80% 0%, color-mix(in srgb, var(--accent, #FF3FA4) 22%, transparent), transparent 70%); }
.page-hero h1 { font-size: var(--s5); margin: 10px 0 14px; }
.page-hero .narrow { display: grid; gap: 14px; justify-items: start; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--s-1); color: var(--dim); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.world-hero-in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
.world-hero-in > div { display: grid; gap: 16px; justify-items: start; }
.world-hero .eyebrow { color: var(--accent); }
.world-art img { border-radius: 24px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 60%, transparent), 0 30px 80px rgba(0, 0, 0, .5); }
@media (max-width: 860px) { .world-hero-in { grid-template-columns: 1fr; } .world-art { max-width: 420px; } }

.table-scroll { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(21, 26, 74, .5); }
.tables { width: 100%; border-collapse: collapse; font-size: var(--s-1); }
.tables th, .tables td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tables thead th { font: 600 .72rem var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.tables tbody th { font-weight: 600; color: var(--ink); }
.tables tbody tr:last-child > * { border-bottom: 0; }
.tables .num { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.tables tbody tr:hover { background: rgba(255, 255, 255, .03); }
.row-mini th { color: var(--cyan) !important; } .row-boss th { color: var(--magenta) !important; } .row-final th { color: var(--gold) !important; }
.row-boss .chip, .row-final .chip { color: #FFD6EC; background: #3A0A26; box-shadow: inset 0 0 0 1px #7A1A52; }
.phase-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.phase-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.phase-list strong { font-family: var(--display); margin-right: 6px; }
.world-nav { padding-block: 40px; }
.world-nav-in { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.world-step { display: grid; gap: 4px; padding: 20px 22px; border-radius: var(--radius); border: 1px solid var(--line); text-decoration: none; color: var(--ink); background: rgba(21, 26, 74, .6); }
.world-step small { color: var(--accent); font: 600 var(--s-1) var(--display); letter-spacing: .06em; text-transform: uppercase; }
.world-step strong { font: 700 var(--s2) var(--display); }
.world-step.next { text-align: right; }
.world-step:hover { box-shadow: 0 0 0 2px var(--accent); }

.guide { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); padding-block: 48px 80px; }
.toc { position: sticky; top: 92px; align-self: start; }
.toc h2 { font-size: var(--s-1); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin-bottom: 12px; }
.toc ol { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; font-size: var(--s-1); }
.toc a { color: var(--muted); text-decoration: none; }
.toc a:hover { color: var(--ink); }
.guide-body { display: grid; gap: 56px; max-width: 760px; }
.guide-body section { display: grid; gap: 16px; scroll-margin-top: 90px; }
.guide-body h2 { font-size: var(--s4); }
.guide-body p { color: #CFD2F5; font-size: var(--s1); line-height: 1.7; }
.guide-phone { width: min(260px, 70%); }
kbd { font: 600 .85em var(--display); color: var(--gold); }
.tips { margin: 0; padding: 0; list-style: none; counter-reset: tip; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.tips li { counter-increment: tip; padding: 16px 16px 16px 58px; position: relative; border-radius: 14px; background: rgba(21, 26, 74, .6); border: 1px solid var(--line); color: #CFD2F5; }
.tips li::before { content: counter(tip, decimal-leading-zero); position: absolute; left: 16px; top: 15px; font: 700 1.05rem var(--display); color: var(--amber); }
@media (max-width: 900px) { .guide { grid-template-columns: 1fr; } .toc { position: static; } .tips { grid-template-columns: 1fr; } }

/* table guide (ficha) */
.table-hero-in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
.table-copy { display: grid; gap: 16px; justify-items: start; }
.table-hero .eyebrow { color: var(--accent); }
.table-facts { margin: 4px 0 6px; display: grid; grid-template-columns: repeat(4, auto); gap: 10px 26px; }
.table-facts div { display: grid; gap: 4px; }
.table-facts dt { font: 600 .7rem var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.table-facts dd { margin: 0; font: 700 1.35rem var(--display); color: var(--gold); font-variant-numeric: tabular-nums; }
.table-shot { width: min(320px, 100%); justify-self: center; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent), 0 30px 80px rgba(0, 0, 0, .55); }
.table-shot img { aspect-ratio: 572 / 1018; }
.table-guide { grid-template-columns: minmax(0, 1fr); max-width: 860px; }
.stars-box { padding: 22px 24px; border-radius: var(--radius); background: linear-gradient(120deg, rgba(255, 194, 61, .14), rgba(21, 26, 74, .6)); box-shadow: inset 0 0 0 1px rgba(255, 194, 61, .35); }
.stars-box h2 span { color: var(--gold); letter-spacing: .05em; }
.mistakes { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.mistakes li { position: relative; padding: 14px 16px 14px 48px; border-radius: 12px; background: rgba(58, 10, 38, .45); box-shadow: inset 0 0 0 1px rgba(255, 63, 164, .3); color: #E9D5E3; }
.mistakes li::before { content: "✕"; position: absolute; left: 18px; top: 13px; font: 700 1rem var(--display); color: var(--magenta); }
.all-tables { margin-top: 18px; }
.tables tbody th a { color: var(--ink); text-decoration-color: rgba(63, 224, 240, .5); }
.tables tbody th a:hover { color: var(--cyan); }
@media (max-width: 860px) { .table-hero-in { grid-template-columns: 1fr; } .table-facts { grid-template-columns: repeat(2, auto); } }

.hero-landing { min-height: min(78vh, 720px); }
.hero-landing h1 { font-size: var(--s5); }
.zigzag { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(48px, 8vw, 96px); }
.zigzag li { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(24px, 6vw, 80px); align-items: center; }
.zigzag li:nth-child(even) { grid-template-columns: minmax(0, 1fr) 280px; }
.zigzag li:nth-child(even) .phone { order: 2; }
.zigzag li > div { display: grid; gap: 16px; justify-items: start; }
.zigzag h2 { font-size: var(--s4); }
.zigzag p { color: var(--muted); font-size: var(--s1); max-width: 56ch; }
@media (max-width: 760px) { .zigzag li, .zigzag li:nth-child(even) { grid-template-columns: 1fr; } .zigzag .phone { width: min(260px, 72%); order: 0 !important; } }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); background: #080B24; padding-block: 56px 28px; }
.foot-in { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.4fr; gap: 32px; }
.foot-brand { display: grid; gap: 14px; justify-items: start; align-content: start; }
.foot-brand img { width: 200px; height: auto; }
.foot-brand p { color: var(--muted); max-width: 32ch; }
.foot-h { font: 600 .72rem var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin: 0 0 12px; }
.foot .foot-sub { padding-left: 12px; font-size: .8rem; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: var(--s-1); }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--ink); }
.foot a.btn-play, .foot a.btn-play:hover { color: #2A1600; }
.foot-langs { grid-template-columns: repeat(2, 1fr); }
.foot-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--dim); font-size: .8rem; }
@media (max-width: 900px) { .foot-in { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot-in { grid-template-columns: 1fr; } }

.lang-hint { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 16px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 40px rgba(0, 0, 0, .5); font-size: var(--s-1); max-width: calc(100vw - 32px); }
.lang-hint a { font-weight: 700; }
.lang-hint button { background: none; border: 0; color: var(--dim); font-size: 1.3rem; cursor: pointer; line-height: 1; padding: 4px 8px; }
.notfound { min-height: 60vh; display: grid; align-items: center; }

/* ---------- consent banner and privacy page (doc 18: GA4 only after consent) ---------- */
.consent { position: fixed; z-index: 60; left: clamp(12px, 3vw, 24px); right: clamp(12px, 3vw, 24px); bottom: clamp(12px, 3vw, 24px);
  max-width: 560px; margin-inline: auto; display: grid; gap: 10px; padding: 18px 20px;
  background: linear-gradient(180deg, var(--panel), var(--lacquer-2)); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06); color: var(--ink); font-size: var(--s-1); }
.consent[hidden] { display: none; }
.consent-title { font: 700 var(--s1)/1.1 var(--display); color: var(--gold); }
.consent a { color: var(--cyan); }
.consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.btn-consent { justify-content: center; font-size: var(--s0); padding: .8em 1em; border-radius: 12px; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.foot-privacy { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.foot-privacy a { color: var(--muted); }
.foot-privacy .link-btn { color: var(--muted); }
.legal-date { color: var(--dim); font-size: var(--s-1); }
.legal { padding-block: clamp(32px, 5vw, 56px); gap: 36px; }
.legal code { font-size: .92em; color: var(--gold); }
/* One bottom card at a time: the language suggestion waits until the consent choice is made. */
.consent:not([hidden]) ~ .lang-hint { display: none; }
.pack-feature, .bundle-card, #machines, #bundles { scroll-margin-top: 72px; }

/* The keyword in secondary H1s, quieter than the page name. */
h1 .h1-tail { opacity: .7; font-size: .6em; white-space: nowrap; }
h1 .h1-lead { display: block; font-size: .5em; letter-spacing: .02em; color: var(--amber); }

/* ---------- Pack sales page (/packs/<slug>/) ---------- */
.pack-hero-in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.pack-hero-copy { display: grid; gap: 14px; justify-items: start; min-width: 0; }
.pack-hero h1 { font-size: clamp(2.6rem, 6.4vw, 5rem); line-height: .98; letter-spacing: -.02em;
  background: linear-gradient(100deg, #fff 0%, color-mix(in srgb, var(--accent) 55%, #fff) 60%, var(--accent) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 30px color-mix(in srgb, var(--accent) 45%, transparent)); }
.pack-lema { font-size: var(--s2); }
.pack-hero .lead { color: var(--ink); max-width: 60ch; }
.pack-deal { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.pack-deal .price-tag { font-size: clamp(1.8rem, 3.4vw, 2.4rem); margin: 0; }
.pack-hero-media { display: grid; gap: 16px; justify-items: center; min-width: 0; }
.pack-poster { width: min(100%, 320px); border-radius: 22px; overflow: hidden; transform: rotate(-2deg);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 30px 80px rgba(0, 0, 0, .6), 0 0 60px color-mix(in srgb, var(--accent) 40%, transparent); }
.pack-poster img { width: 100%; height: auto; display: block; }
.pack-hero-media .pf-shots { width: min(100%, 420px); }
.pack-stats { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.pack-stats li { padding: 18px 20px; border-radius: var(--radius); background: linear-gradient(180deg, rgba(27, 31, 107, .7), rgba(17, 22, 65, .6)); border: 1px solid var(--line); display: grid; gap: 4px; }
.pack-stats b { font: 700 clamp(2rem, 4vw, 2.8rem)/1 var(--display); color: var(--accent); }
.pack-stats span { color: var(--muted); font-size: var(--s-1); }
.pack-points { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 24px; }
.trailer-frame { border-radius: 22px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 30px 80px rgba(0, 0, 0, .55); max-width: 980px; }
.trailer-frame video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }
@media (max-width: 700px) and (orientation: portrait) { .trailer-frame { max-width: 420px; margin-inline: auto; } .trailer-frame video { aspect-ratio: 9 / 16; } }
.pack-gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 2vw, 22px); }
.pack-gallery .phone img { aspect-ratio: 9 / 16; }
.pack-rooms { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.pack-room { display: grid; align-content: start; border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 18%, #151A4A), rgba(17, 22, 65, .6)); border: 1px solid var(--line); }
.pack-room-art img { width: 100%; height: auto; display: block; }
.pack-room-body { display: grid; gap: 6px; padding: 14px 14px 16px; }
.pack-room h3 { font-size: var(--s2); }
.room-boss { color: var(--muted); font-size: var(--s-1); line-height: 1.35; }
.room-boss b { color: var(--ink); }
@media (max-width: 1000px) { .pack-rooms { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .pack-gallery, .pack-rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pack-bosses { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 18px; }
.pack-boss { text-align: center; display: grid; gap: 4px; justify-items: center; }
.pack-boss-art { width: 100%; max-width: 180px; }
.pack-boss-art img { width: 100%; height: auto; border-radius: 50%; display: block; box-shadow: 0 0 0 3px var(--line), 0 16px 40px rgba(0, 0, 0, .5); }
.pack-boss.rank-boss .pack-boss-art img { box-shadow: 0 0 0 3px var(--accent), 0 0 34px color-mix(in srgb, var(--accent) 55%, transparent); }
.pack-boss-rank { font: 700 .72rem var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-top: 8px; }
.pack-boss h3 { font-size: var(--s1); }
.pack-boss-meta { color: var(--dim); font-size: var(--s-1); }
.pack-buy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.pack-buy-main { display: grid; gap: 14px; justify-items: start; padding: clamp(22px, 3vw, 34px); border-radius: 24px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 26%, #151A4A), #0D1036); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.pack-buy-bundles h3 { margin-bottom: 14px; }
.pack-list summary { cursor: pointer; list-style: none; display: grid; gap: 4px; }
.pack-list summary::-webkit-details-marker { display: none; }
.pack-list summary span { color: var(--cyan); font-weight: 600; }
.pack-list summary span::after { content: " ▾"; }
.pack-list[open] summary span::after { content: " ▴"; }
.pack-list h3 { margin: 26px 0 8px; color: var(--accent); }
.pack-list-items { margin: 0; padding-left: 2.6em; display: grid; gap: 4px; }
.pack-list-items span { color: var(--muted); }
.pf-details { margin-block: 4px; }
@media (max-width: 900px) {
  .pack-hero-in, .pack-buy { grid-template-columns: 1fr; }
  .pack-poster { width: min(60vw, 260px); }
}
.pack-deal .badge { position: static; transform: none; }

/* ---------- SEO overhaul: hubs, featured guides, links between pages ---------- */
.band-more { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 28px 0 0; }
.boss-link { color: inherit; text-decoration: none; }
.boss-link:hover { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }

.guide-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.guide-cards a { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px; border-radius: var(--radius); text-decoration: none; color: var(--ink);
  background: rgba(21, 26, 74, .6); border: 1px solid var(--line); transition: box-shadow .2s, transform .2s; }
.guide-cards a:hover { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--accent); }
.guide-cards .phone { padding: 4px; border-radius: 16px; }
.guide-cards .phone img { border-radius: 12px; aspect-ratio: 572 / 1018; }
.guide-card-body { display: grid; gap: 8px; justify-items: start; }
.guide-card-body strong { font: 700 var(--s1)/1.15 var(--display); }
@media (max-width: 1000px) { .guide-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .guide-cards { grid-template-columns: 1fr; } .guide-cards a { grid-template-columns: 88px minmax(0, 1fr); } }

.world-guide { padding-block: clamp(40px, 6vw, 72px) 0; }
.world-guide h2, .world-summary h2 { font-size: var(--s3); }
.guide-body a { color: var(--cyan); text-underline-offset: 3px; }
.world-summary { padding-block: clamp(32px, 5vw, 56px); border-top: 1px solid var(--line); }
.world-summary .eyebrow { color: var(--accent); }
.world-summary h2 a { color: var(--ink); text-decoration: none; }
.world-summary h2 a:hover { color: var(--accent); }
.guide-body .hub-bosses { font-size: var(--s0); }
.hub-bosses span { font: 600 var(--s-1) var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }

.tables-hub { padding-block: 40px 80px; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 6vw, 64px); }
.type-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.type-nav .chip { text-decoration: none; }
.type-nav .chip b { margin-left: 4px; color: var(--gold); }
.type-block { scroll-margin-top: 90px; }
.type-block .band-head { margin-bottom: 18px; }
.type-block h2 { font-size: var(--s3); }
.tables td a { color: var(--muted); }
.guide-tag { margin-left: 6px; font: 700 .62rem/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); padding: 3px 6px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(255, 194, 61, .45); vertical-align: middle; }

.boss-hub { padding-block: 40px 80px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.boss-entry { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(20px, 4vw, 40px); padding: clamp(18px, 3vw, 28px); border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--line); scroll-margin-top: 90px; }
.boss-entry.boss-final { box-shadow: 0 0 0 2px var(--gold), 0 0 40px rgba(255, 194, 61, .2); }
.boss-entry-art img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 50%, transparent); }
.boss-entry-body { display: grid; gap: 12px; align-content: start; }
.boss-entry-body h2 { font-size: var(--s3); }
.boss-entry-body h3 { font-size: var(--s0); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin-top: 6px; }
.boss-entry-body p { color: #CFD2F5; }
.boss-entry .boss-rank a { color: inherit; }
.boss-entry .band-more { margin-top: 6px; }
.phase-steps { margin: 0; padding-left: 1.4em; display: grid; gap: 6px; color: var(--ink); font-family: var(--display); }
@media (max-width: 760px) { .boss-entry { grid-template-columns: 1fr; } .boss-entry-art { max-width: 240px; } }

.examples { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; }
.examples li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: #CFD2F5; }
@media (max-width: 700px) { .examples { grid-template-columns: 1fr; } }

.notfound-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.notfound-links a { color: var(--cyan); font: 700 var(--s0) var(--display); }

.guide-index { list-style: none; margin: 0; padding: 40px 0 80px; display: grid; gap: 14px; }
.guide-index a { display: grid; gap: 6px; padding: 18px 20px; border-radius: var(--radius); background: rgba(21, 26, 74, .6); border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.guide-index a:hover { box-shadow: 0 0 0 2px var(--cyan); }
.guide-index strong { font: 700 var(--s1) var(--display); }
.guide-index span { color: var(--muted); font-size: var(--s-1); }
.guide-figure { margin: 0; }
.guide-figure img { border-radius: 14px; }
.guide-list { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; color: #CFD2F5; font-size: var(--s1); }
.glossary { margin: 0; display: grid; gap: 6px 0; }
.glossary dt { font: 700 var(--s1) var(--display); color: var(--gold); margin-top: 12px; scroll-margin-top: 90px; }
.glossary dd { margin: 0; color: #CFD2F5; line-height: 1.6; }
.related-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.guide-note { max-width: 68ch; }
.world-guide .guide-body, .world-summary .guide-body { gap: 16px; }