/* Spinfall Legends' landing page (redone Oct 28): the game's own look (warm cream, brown ink, gold, the rarity colours) and fonts (Lilita One, Nunito) */
:root {
  --ink: #3a2114; --ink-2: #6e4c33; --cream: #fffaf0; --cream-2: #f6ead0; --cream-3: #efe0bf; --rim: #e3c58a;
  --gold: #ffd66b; --gold-2: #e8a41c; --leaf: #4fb43a; --night: #24140b; --sky: #4aa8f0;
  --common: #4f9be8; --rare: #9a5cd8; --legendary: #f0a92a;
  --display: "Lilita One", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif; --body: "Nunito", "Trebuchet MS", system-ui, sans-serif;
}
* { box-sizing: border-box; }
/* the page never slides past its edges: no rubber-band gap at the top or bottom, nothing to drag sideways (Jake, Oct 28) */
html { scroll-behavior: smooth; overscroll-behavior: none; overflow-x: clip; background: var(--night); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--cream-2); color: var(--ink); font-family: var(--body); font-weight: 800; line-height: 1.5; overflow-x: clip; overscroll-behavior: none;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }
h2, h3, .sub, .lead, .tag, .soon p, figcaption { text-wrap: balance; }   /* (no lone word on a last line) */
a { color: inherit; }
h2 { margin: 0 0 14px; font-family: var(--display); font-weight: 400; font-size: clamp(34px, 5.2vw, 58px); line-height: 1.02; text-align: center; letter-spacing: .5px; }
h2 em { font-style: normal; color: var(--gold-2); }
h2 .num { color: var(--gold-2); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; }
.sub { max-width: 720px; margin: 0 auto 44px; text-align: center; font-size: 19px; color: var(--ink-2); }
.sec { position: relative; padding: 96px 24px; }
.sec > :not(.amb) { position: relative; z-index: 1; }
.sec > * { max-width: 1180px; margin-left: auto; margin-right: auto; }

/* the top: Jake's banner of heroes with the logo in its sky, then the words under it on the cream */
.hero { position: relative; background: var(--cream-2); }
.hero-art { position: relative; overflow: hidden; height: clamp(360px, 52vw, 760px); background: #6ab9f2; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.hero-art::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70px; background: linear-gradient(transparent, var(--cream-2)); }
.hero-logo { position: absolute; left: 50%; top: 5%; z-index: 2; width: min(520px, 46vw); transform: translateX(-50%); filter: drop-shadow(0 10px 14px rgba(30, 60, 100, .35)); animation: pop .7s cubic-bezier(.3, 1.5, .5, 1) both, bob 5s ease-in-out .7s infinite; }
@keyframes pop { from { transform: translateX(-50%) scale(.85); opacity: 0; } }
@keyframes bob { 50% { transform: translateX(-50%) translateY(-8px) rotate(-1deg); } }
.hero-in { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; padding: 4px 24px 90px; text-align: center; }
.tag { margin: 0 0 6px; font-family: var(--display); font-size: clamp(32px, 4.4vw, 50px); line-height: 1.05; color: var(--ink); }
.lead { max-width: 580px; margin: 0 auto; font-size: 19px; color: var(--ink-2); }
.plat { display: inline-flex; align-items: center; gap: 10px; margin: 20px 0 0; padding: 10px 20px; border-radius: 18px; background: var(--cream);
  font-family: var(--display); font-size: 19px; box-shadow: inset 0 0 0 3px var(--rim), 0 6px 0 rgba(30, 16, 6, .2); }
.dot { width: 12px; height: 12px; border-radius: 50%; background: var(--leaf); box-shadow: 0 0 0 4px rgba(79, 180, 58, .25); animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 9px rgba(79, 180, 58, 0); } }

/* the counts strip */
.counts { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; max-width: 1000px; margin: -46px auto 0; padding: 0 24px; }
.hero + .counts { margin-top: -50px; }
.counts div { padding: 20px 8px 16px; border-radius: 24px; background: var(--cream); text-align: center; box-shadow: inset 0 0 0 4px var(--rim), 0 8px 0 rgba(30, 16, 6, .18); }
.counts b { display: block; font-family: var(--display); font-weight: 400; font-size: 52px; line-height: 1; color: var(--gold-2); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; }
.counts span { font-family: var(--display); font-size: 18px; color: var(--ink-2); letter-spacing: .5px; }

/* the battle shots: real arenas, posed in the game */
.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.shot { position: relative; margin: 0; border-radius: 26px; overflow: hidden; background: var(--night); box-shadow: 0 0 0 5px var(--cream), 0 0 0 9px var(--rim), 0 16px 30px rgba(40, 22, 10, .3); }
.shot img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.shot figcaption { position: absolute; left: 14px; bottom: 14px; right: 14px; padding: 12px 16px; border-radius: 18px; background: rgba(36, 20, 11, .82); color: #f6e6c6; font-size: 15px; backdrop-filter: blur(4px); }
.shot figcaption b { display: block; font-family: var(--display); font-weight: 400; font-size: 22px; color: #fff; }

/* a ball: the game's own head, sized by its SPR numbers so every face sits the same size in its circle */
.ball { --r: 48px; position: relative; display: block; width: calc(var(--r) * 2); height: calc(var(--r) * 2); border-radius: 50%; }
.ball img { position: absolute; left: 50%; top: 50%; width: calc(var(--r) * var(--ws)); max-width: none; transform: translate(-50%, calc(-50% + var(--r) * var(--oy))); }

/* the hero wall: every face on its rarity's colour */
.heroes { background: linear-gradient(var(--cream-2), var(--cream-3)); }
.facewall { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 14px; }
.hero-t { margin: 0; width: 118px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.hero-t .ball { --r: 46px; transition: transform .15s; }
.hero-t .ball::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: -6%; height: 14%; border-radius: 50%; background: rgba(60, 35, 12, .18); z-index: -1; }
.hero-t:hover .ball { transform: translateY(-4px) scale(1.06); }
.hero-t[data-k="robin"] { margin-left: 26px; }   /* (his feather reaches past his ball: Jake, Oct 28) */
.hero-t figcaption { font-family: var(--display); font-size: 16px; text-align: center; line-height: 1.1; }
.r-common { --c: #9fcdf7; } .r-rare { --c: #cfaaf2; } .r-legendary { --c: #ffd98a; }
.legend { display: none; margin-top: 28px; text-align: center; font-family: var(--display); font-size: 17px; color: var(--ink-2); }
.legend i { display: inline-block; width: 16px; height: 16px; margin: 0 6px 0 18px; border-radius: 50%; vertical-align: -2px; background: var(--c); box-shadow: 0 0 0 2px var(--cream), 0 0 0 4px rgba(0,0,0,.15); }

/* the weapons rack: a row a rarity, each weapon tilted like the game's cards */
.rackrow { margin-bottom: 30px; }
.rackrow h3 { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 8px 18px; border-radius: 14px; background: var(--c); color: var(--ink); font-family: var(--display); font-weight: 400; font-size: 22px; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15); }
.rackrow h3 small { font-size: 18px; opacity: .75; }
.wgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 12px; }
.wpn { position: relative; margin: 0; aspect-ratio: 1; border-radius: 20px; background: var(--cream); box-shadow: inset 0 0 0 4px var(--c), 0 5px 0 rgba(40, 22, 10, .15); transition: transform .15s; }
.wpn:hover { transform: translateY(-3px) rotate(-2deg); }
.wpn[data-k="krakeneye"] img { width: 58%; height: 58%; }
.wpn img { position: absolute; left: 50%; top: 50%; width: 72%; height: 72%; object-fit: contain; transform: translate(-50%, -50%) rotate(30deg); filter: drop-shadow(0 4px 3px rgba(40, 22, 10, .3)); }

/* the ten lands, each its adventure map page */
.weapons { background: linear-gradient(var(--cream-3), var(--cream-2)); }
.world { background: linear-gradient(var(--cream-2), var(--cream-3)); }
.lands { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.land { margin: 0; position: relative; border-radius: 22px; overflow: hidden; background: #f3e3c3; box-shadow: 0 0 0 4px var(--cream), 0 0 0 7px var(--rim), 0 10px 18px rgba(40, 22, 10, .2); }
.land img { width: 100%; aspect-ratio: 540 / 760; object-fit: cover; object-position: 50% 30%; }
.land figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 12px 12px; background: linear-gradient(transparent, rgba(36, 20, 11, .9) 45%); color: #f3e2c0; font-size: 12px; line-height: 1.25; }
.land small { display: block; font-family: var(--display); font-size: 14px; color: var(--gold); letter-spacing: .5px; }
.land b { display: block; font-family: var(--display); font-weight: 400; font-size: 20px; color: #fff; line-height: 1.05; margin: 2px 0 4px; }

/* the bosses */
.bosses { background: linear-gradient(#3b1c10, #24140b); color: #f6e6c6; }
.bosses h2 { color: #fff; } .bosses .sub { color: #e7cfa8; }
.tiers { display: flex; flex-direction: column; gap: 44px; }
.tier h3 { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 20px; font-weight: 400; text-align: center; }
.tier h3 b { font-family: var(--display); font-weight: 400; font-size: 30px; color: #fff; }
.tier h3 .tcount { font-family: var(--display); font-size: 30px; color: var(--gold); }
.tier h3 small { flex-basis: 100%; font-size: 16px; color: #d9bd95; }
.tierrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 10px; }
.boss { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.boss figcaption { font-family: var(--display); font-size: 15px; text-align: center; line-height: 1.1; color: #fff1d6; }
.tier .ball { filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .45)); }
.tier.xl .boss { width: 140px; } .tier.xl .ball { --r: 56px; }
.tier.lg .boss { width: 124px; } .tier.lg .ball { --r: 48px; }
.tier.md .boss { width: 96px; } .tier.md .ball { --r: 34px; } .tier.md figcaption { font-size: 12px; color: #d9bd95; }
.tier.sm .tierrow { gap: 14px 10px; } .tier.sm .boss { width: 64px; } .tier.sm .ball { --r: 26px; }
.tier.xl h3, .tier.lg h3 { margin-bottom: 40px; }
.tier.xl .tierrow { max-width: 800px; margin: 0 auto; row-gap: 52px; } .tier.lg .tierrow { max-width: 720px; margin: 0 auto; row-gap: 46px; } .tier.md .tierrow { row-gap: 34px; }   /* (five a row, two rows: tens split evenly, and a head never covers the name above it) */ .tier.md h3 { margin-bottom: 30px; }
.tier + .tier { padding-top: 36px; border-top: 2px dashed rgba(255, 214, 107, .2); }
/* shared: a picture beside its words */
.split { display: grid; grid-template-columns: 1fr 1.1fr; gap: 50px; align-items: center; }
.split.rev { grid-template-columns: 1.1fr 1fr; }
h2.left, .sub.left { text-align: left; margin-left: 0; }
.split-art { display: grid; place-items: center; }
/* pets */
.pets { background: linear-gradient(var(--cream-2), var(--cream-3)); }
.petrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 18px; }
.pet { margin: 0; width: 132px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.petart { position: relative; width: 112px; height: 112px; }
.petface { position: absolute; left: 8px; top: 8px; width: 88px; height: 88px; object-fit: contain; filter: drop-shadow(0 5px 4px rgba(60, 35, 12, .3)); }
.petw { position: absolute; right: -6px; bottom: 0; width: 54px; height: 54px; object-fit: contain; transform: rotate(18deg); filter: drop-shadow(0 3px 2px rgba(60, 35, 12, .3)); }
.pet figcaption { font-family: var(--display); font-size: 16px; text-align: center; line-height: 1.1; }
/* the Wanted */
.wanted { background: linear-gradient(#5a2f12, #3b1c10); color: #f6e6c6; }
.wanted h2 { color: #fff; } .wanted .sub { color: #e7cfa8; }
.board { width: min(440px, 90%); filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .45)); transform: rotate(-3deg); }
.wantedrow { display: flex; flex-wrap: wrap; gap: 16px 12px; }
.wantedcard { margin: 0; width: 104px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.wantedcard .ball { --r: 40px; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .45)); }
.wantedcard figcaption { font-family: var(--display); font-size: 15px; text-align: center; line-height: 1.1; color: #ffd66b; }
/* the Brew Station */
.brew { background: linear-gradient(var(--cream-2), #eedcf3); }
.brewart { position: relative; height: 380px; }
.brewer { position: absolute; left: 50%; bottom: 0; width: 300px; transform: translateX(-62%); filter: drop-shadow(0 12px 14px rgba(60, 30, 80, .3)); }
.cauldron { position: absolute; left: 50%; bottom: 0; width: 210px; transform: translateX(18%); filter: drop-shadow(0 10px 12px rgba(60, 30, 80, .3)); }
.potrow { display: flex; flex-wrap: wrap; gap: 6px; }
.potrow img { width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 3px 2px rgba(60, 35, 12, .3)); }
.ingrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 40px; }
.ingrow img { width: 46px; height: 46px; object-fit: contain; padding: 4px; border-radius: 14px; background: var(--cream); box-shadow: inset 0 0 0 2px #e6cfe9; }
/* the Memory Rift and relics */
.rift { background: radial-gradient(ellipse at 28% 30%, rgba(130, 80, 200, .5), transparent 60%), radial-gradient(ellipse at 80% 80%, rgba(90, 50, 160, .35), transparent 55%), linear-gradient(#3a2163, #23123d); color: #eadcff; }
.rift h2, .rift .relich { color: #fff; } .rift h2 em { color: #c9a8ff; } .rift .sub { color: #d5c4f0; }
.riftart img { width: 100%; max-width: 520px; border-radius: 26px; box-shadow: 0 0 0 5px #c9a8ff, 0 0 40px rgba(170, 120, 255, .45); }
.relich { margin: 70px 0 10px; font-family: var(--display); font-weight: 400; font-size: clamp(30px, 4.4vw, 46px); text-align: center; }
.relicrow { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 12px; }
.relic { position: relative; margin: 0; aspect-ratio: 1; border-radius: 20px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 3px rgba(201, 168, 255, .45); }
.relic.glob { box-shadow: inset 0 0 0 3px rgba(255, 214, 107, .6); }
.relic img { position: absolute; left: 12%; top: 12%; width: 76%; height: 76%; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .4)); }

/* better together */
.tog { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.tog h2 { text-align: left; }
.tog-shot { border-radius: 26px; overflow: hidden; box-shadow: 0 0 0 5px var(--cream), 0 0 0 9px var(--rim), 0 16px 30px rgba(40, 22, 10, .3); }
.ticks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.ticks li { position: relative; padding: 12px 16px 12px 52px; border-radius: 18px; background: var(--cream); box-shadow: inset 0 0 0 3px #ecdab5; font-size: 17px; color: var(--ink-2); }
.ticks li::before { content: ""; position: absolute; left: 14px; top: 13px; width: 24px; height: 24px; border-radius: 50%; background: var(--leaf); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2); }
.ticks li::after { content: ""; position: absolute; left: 22px; top: 18px; width: 6px; height: 11px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg); }
.ticks b { color: var(--ink); font-family: var(--display); font-weight: 400; font-size: 19px; }
.more { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 50px; }

/* coming soon */
.soon { position: relative; overflow: hidden; padding: 90px 24px 100px; text-align: center; background: radial-gradient(ellipse 60% 40% at 50% 48%, rgba(255, 255, 255, .2), transparent 100%), linear-gradient(#6ab9f2, #3b8fdc); color: #fff; }
.soon > :not(.amb) { position: relative; z-index: 1; }
.soon-face { width: 150px; margin: 0 auto 14px; border-radius: 34px; box-shadow: 0 0 0 5px #fff, 0 14px 24px rgba(10, 40, 80, .4); }
.soon h2 { color: #fff; text-shadow: 0 4px 0 rgba(20, 50, 100, .4); }
.soon p { margin: 6px 0; font-size: 19px; }
.mail a { font-family: var(--display); color: var(--gold); }
.foot { padding: 34px 24px 40px; text-align: center; background: var(--night); color: #cdb48e; font-size: 14px; }
.foot img { height: 54px; width: auto; margin: 0 auto 10px; opacity: .9; }

/* the edges between sections: faceted shapes drawn by the page's script (a rocky ridge into the bosses, hills out of them, a torn poster,
   cauldron bubbles, magic sparkles, mist, clouds over the sky, a pine forest into the footer) */
.edge { position: relative; z-index: 2; height: clamp(54px, 8vw, 120px); margin: -1px 0; line-height: 0; }
.edge svg { display: block; width: 100%; height: 100%; }
/* floating things in a section, behind its content */
.amb { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; container-type: size; }
.amb i { position: absolute; display: block; }
.amb-ember i { bottom: -12px; width: calc(7px * var(--s)); height: calc(7px * var(--s)); border-radius: 50%; background: radial-gradient(#fff2b0, #ffa53a 60%, #ff6a1f);
  box-shadow: 0 0 10px 3px rgba(255, 140, 40, .5); opacity: 0; animation: rise var(--t) linear var(--d) infinite; }
.amb-bubble i { bottom: -30px; width: calc(22px * var(--s)); height: calc(22px * var(--s)); border-radius: 50%; background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, .9) 0 14%, rgba(214, 180, 240, .28) 40%, rgba(170, 120, 220, .18));
  box-shadow: inset 0 0 0 2px rgba(180, 130, 220, .45); opacity: 0; animation: rise var(--t) ease-in var(--d) infinite; }
@keyframes rise { 0% { opacity: 0; transform: translate(0, 0); } 12% { opacity: .9; } 70% { opacity: .7; } 100% { opacity: 0; transform: translate(var(--x), -105cqh); } }
.amb-spark i { width: calc(16px * var(--s)); height: calc(16px * var(--s)); background: #f1e4ff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  filter: drop-shadow(0 0 6px rgba(200, 160, 255, .9)); animation: twinkle var(--t) ease-in-out var(--d) infinite; }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 50% { opacity: .95; transform: scale(1) rotate(45deg); } }
.amb-cloud i { left: -30%; width: calc(220px * var(--s)); height: calc(80px * var(--s)); background: rgba(255, 255, 255, .32);
  clip-path: polygon(4% 100%, 0 70%, 10% 46%, 24% 40%, 32% 14%, 50% 0, 66% 12%, 74% 34%, 90% 36%, 100% 64%, 96% 100%); animation: drift var(--t) linear var(--d) infinite; }
@keyframes drift { to { transform: translateX(170cqw); } }
/* rising into place as they scroll into view (the page's script adds .rv, then .in) */
.rv { opacity: 0; translate: 0 24px; scale: .96; transition: opacity .7s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms), translate .7s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms), scale .7s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms); }
.rv.in { opacity: 1; translate: none; scale: none; }

/* THE POP-UP CARDS: tap anything with .tap; a card in the middle on a computer, a sheet from the bottom on a phone.
   Bigger and calmer (Jake, Oct 29): no red-tinted columns; a switch shows the red star or veteran numbers, each with what it gained in green */
.tap { cursor: pointer; outline: none; }
.tap:focus-visible { box-shadow: 0 0 0 3px var(--cream), 0 0 0 6px var(--gold-2); border-radius: 18px; }
.hint { display: flex; width: fit-content; max-width: 100%; align-items: center; gap: 12px; margin: -20px auto 34px; padding: 11px 20px 11px 14px; border-radius: 20px;
  background: var(--cream); box-shadow: inset 0 0 0 3px var(--rim), 0 5px 0 rgba(30, 16, 6, .14); font-family: var(--display); font-size: 19px; line-height: 1.2; color: var(--ink); text-align: left; }
.tapdot { position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--gold-2); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18); }
.tapdot::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 3px solid var(--gold-2); animation: tapring 1.8s ease-out infinite; }
@keyframes tapring { from { transform: scale(1); opacity: .9; } to { transform: scale(2); opacity: 0; } }
.hint.left { margin: 20px 0 0; }
.pop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px; }
.pop[hidden] { display: none; }
.pop-bg { position: absolute; inset: 0; background: rgba(26, 14, 6, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .25s; }
.pop-card { position: relative; width: min(600px, 100%); max-height: min(860px, 90vh); display: flex; flex-direction: column; border-radius: 32px; background: var(--cream);
  box-shadow: inset 0 0 0 4px var(--rim), 0 30px 60px rgba(30, 14, 4, .45); opacity: 0; transform: translateY(18px) scale(.95); transition: opacity .25s, transform .3s cubic-bezier(.2, .9, .3, 1.15); }
.pop.on .pop-bg { opacity: 1; } .pop.on .pop-card { opacity: 1; transform: none; }
html.popped, html.popped body { overflow: hidden; }
.pop-grab { display: none; }
.pop-x { position: absolute; right: 16px; top: 16px; z-index: 2; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--cream-3); color: var(--ink); font: 400 30px/1 var(--display); cursor: pointer; }
.pop-x:hover { background: var(--rim); }
.pop-body { overflow-y: auto; overscroll-behavior: contain; padding: 30px 30px 30px; }
.phead { display: flex; align-items: center; gap: 20px; margin: 0 44px 20px 0; }
.phead h3 { margin: 0 0 8px; font-family: var(--display); font-weight: 400; font-size: 34px; line-height: 1.02; }
/* the picture: always inside its box (a weapon turned 30 degrees fills at most 62%, so its corners stay in) */
.part { position: relative; flex: none; width: 124px; height: 124px; display: grid; place-items: center; overflow: hidden; border-radius: 30px; background: var(--c, #f3e5c8); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .08); }
.part img { max-width: none; }
.ball-art .ball { --r: 36px; }
.wpn-art img, .relic-art img, .pot-art img { position: absolute; inset: 0; margin: auto; }   /* (sized by the box itself: in its grid a % height had followed the picture, so a tall weapon drew at full size) */
.wpn-art img { width: 62%; height: 62%; object-fit: contain; transform: rotate(30deg); filter: drop-shadow(0 4px 3px rgba(40, 22, 10, .3)); }
.pet-art .petface { position: absolute; left: 12px; top: 12px; width: 82px; height: 82px; object-fit: contain; }
.pet-art .petw { position: absolute; right: 8px; bottom: 8px; width: 46px; height: 46px; object-fit: contain; transform: rotate(18deg); }
.relic-art { background: #3a2163; } .relic-art.glob { background: #4a2f12; }
.relic-art img, .pot-art img { width: 70%; height: 70%; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .35)); }
.pot-art { background: #eedcf3; }
.pchip { display: inline-block; padding: 4px 13px; border-radius: 11px; background: var(--c, var(--cream-3)); font-family: var(--display); font-size: 16px; color: var(--ink); }
.pab { margin: 0 0 12px; padding: 14px 16px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 2px #efdcb4; }
.pab i { display: inline-block; margin-right: 8px; padding: 3px 9px; border-radius: 8px; background: var(--gold); font: normal 400 13px var(--display); letter-spacing: .6px; vertical-align: 2px; }
.pab.pas i { background: #cfe8ff; }
.pab b { font-family: var(--display); font-weight: 400; font-size: 21px; }
.pab p { margin: 6px 0 0; font-size: 17px; line-height: 1.5; color: var(--ink-2); }
.pab p b { font-family: var(--body); font-size: inherit; font-weight: 900; color: var(--ink); }
.pab mark { padding: 0 5px; border-radius: 6px; background: #e3f5d8; color: #2f7d22; font-weight: 900; }
.pnote { margin: 0 0 14px; font-size: 17px; line-height: 1.5; color: var(--ink-2); }
.psec { margin: 22px 0 10px; font-family: var(--display); font-weight: 400; font-size: 20px; }
.ptab { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border-radius: 18px; background: #fff; border: 2px solid #efdcb4; font-size: 17px; }
.ptab th { padding: 11px 10px 8px; font: 400 15px var(--display); letter-spacing: .3px; color: var(--ink-2); text-align: center; background: #faf1de; }
.ptab td { padding: 10px; text-align: center; border-top: 1px solid #f3e6cb; color: var(--ink); vertical-align: middle; }
.ptab td:first-child, .ptab th:first-child { width: 1%; padding-left: 16px; padding-right: 14px; text-align: left; font-family: var(--display); font-weight: 400; color: var(--ink-2); white-space: nowrap; }
.ptab td:last-child:nth-child(2), .ptab th:last-child:nth-child(2) { text-align: left; }
.ptab td b { font-weight: 900; color: var(--ink); }
.ptab small.up { display: block; margin-top: 1px; font-size: 13px; font-weight: 900; color: #3a9a2c; }
.ptab tr.hot td { background: #fffaea; }
.stars { display: inline-flex; gap: 1px; vertical-align: -3px; } .stars img { flex: none; max-width: none; width: 18px; height: auto; }
th .stars img { width: 17px; }
/* the switch */
.tgl { margin: 0; }
.ptog { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 0; border: 0; background: none; font-family: var(--display); font-size: 18px; color: var(--ink); cursor: pointer; }
.ptog .stars img { width: 20px; }
.tsw { position: relative; flex: none; width: 54px; height: 32px; border-radius: 16px; background: #d9c7a3; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .15); transition: background .2s; }
.tsw i { position: absolute; left: 3px; top: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .25); transition: transform .22s cubic-bezier(.3, 1.4, .5, 1); }
.ptog[aria-checked="true"] .tsw { background: #d23c2c; } .ptog[aria-checked="true"] .tsw i { transform: translateX(22px); }
.ptog:focus-visible .tsw { box-shadow: 0 0 0 3px var(--cream), 0 0 0 6px var(--gold-2); }
.tnote { margin: 0 0 10px; font-size: 15.5px; line-height: 1.45; color: var(--ink-2); }
.tnote b { color: var(--ink); }
.pfound { margin: 16px 0 0; font-size: 16px; color: var(--ink-2); }
.pfound b { display: inline-block; margin-right: 8px; padding: 3px 10px; border-radius: 8px; background: var(--cream-3); font: 400 14px var(--display); color: var(--ink); }

/* tablets and phones */
@media (max-width: 960px) {
  .shots { grid-template-columns: 1fr 1fr; }
  .counts { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; max-width: 720px; margin-top: -24px; padding: 0; width: calc(100% - 48px);
    border-radius: 26px; background: var(--cream); box-shadow: inset 0 0 0 4px var(--rim), 0 8px 0 rgba(30, 16, 6, .16); }
  .hero + .counts { margin-top: -40px; }
  .counts div { padding: 18px 2px 14px; border-radius: 0; background: none; box-shadow: none; position: relative; }
  .counts div + div::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 2px; border-radius: 2px; background: #efdcb4; }
  .counts b { font-size: 40px; }
  .lands { grid-template-columns: repeat(3, 1fr); }
  .tog { grid-template-columns: 1fr; gap: 30px; } .tog h2 { text-align: center; }
  .split, .split.rev { grid-template-columns: 1fr; gap: 26px; } .split.rev .split-art { order: -1; }
  h2.left, .sub.left { text-align: center; margin-left: auto; } .wantedrow, .potrow { justify-content: center; }
  .relicrow { grid-template-columns: repeat(5, minmax(0, 1fr)); } .brewart { height: 300px; overflow: hidden; } .brewer { width: 220px; } .cauldron { width: 150px; }
}
/* phones: the banner shows all five heroes under a strip of its own sky for the logo; rows of pictures sit in tidy grids; the big
   screenshots and the lands become a row you swipe (each card peeks at the next) */
@media (max-width: 640px) {
  .sec { padding: 52px 16px; }
  h2 { font-size: clamp(30px, 8.6vw, 36px); margin-bottom: 10px; }
  .sub { font-size: 16px; margin-bottom: 30px; line-height: 1.55; }
  .hero-art { height: auto; padding-top: 29vw; background: #3fa5fd; }
  .hero-bg { position: relative; height: auto; aspect-ratio: 1726 / 911; -webkit-mask-image: linear-gradient(transparent, #000 16%); mask-image: linear-gradient(transparent, #000 16%); }
  .hero-art::after { height: 34px; }
  .hero-logo { width: 72vw; top: 5vw; }
  .hero-in { padding: 10px 20px 66px; }
  .tag { font-size: 32px; }
  .lead { font-size: 16px; line-height: 1.55; }
  .plat { margin-top: 18px; padding: 9px 16px; font-size: 15px; white-space: nowrap; gap: 9px; }
  .dot { width: 10px; height: 10px; }
  .counts { width: calc(100% - 32px); border-radius: 22px; }
  .counts div { padding: 14px 0 11px; }
  .counts b { font-size: 29px; -webkit-text-stroke: 1.5px var(--ink); }
  .counts span { font-size: 12.5px; letter-spacing: .2px; }
  .shots, .lands, .more { display: flex; gap: 14px; margin: 0 -16px; padding: 6px 16px 22px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .shots::-webkit-scrollbar, .lands::-webkit-scrollbar, .more::-webkit-scrollbar { display: none; }
  .shots > *, .more > * { flex: 0 0 78%; scroll-snap-align: start; }
  .lands > * { flex: 0 0 58%; scroll-snap-align: start; }
  .more { margin-top: 36px; }
  .shot { box-shadow: 0 0 0 4px var(--cream), 0 0 0 7px var(--rim), 0 10px 18px rgba(40, 22, 10, .22); border-radius: 22px; }
  .shot figcaption { left: 10px; right: 10px; bottom: 10px; padding: 10px 12px; border-radius: 14px; font-size: 13px; }
  .shot figcaption b { font-size: 18px; }
  .land figcaption { font-size: 12px; padding: 50px 12px 12px; }
  .land b { font-size: 19px; }
  .facewall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 4px; }
  .hero-t { width: auto; } .hero-t[data-k="robin"] { margin-left: 0; }
  .hero-t .ball { --r: 33px; } .hero-t figcaption { font-size: 12px; padding: 0 2px; }
  .rackrow { margin-bottom: 24px; } .rackrow h3 { font-size: 18px; padding: 6px 14px; } .rackrow h3 small { font-size: 15px; }
  .wgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
  .wpn { border-radius: 15px; box-shadow: inset 0 0 0 3px var(--c), 0 4px 0 rgba(40, 22, 10, .13); }
  .tiers { gap: 30px; }
  .tier + .tier { padding-top: 28px; }
  .tier h3, .tier.xl h3, .tier.lg h3, .tier.md h3 { margin-bottom: 18px; }
  .tier h3 b, .tier h3 .tcount { font-size: 24px; } .tier h3 small { font-size: 14px; }
  .tierrow, .tier.xl .tierrow, .tier.lg .tierrow, .tier.md .tierrow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 4px; max-width: none; }
  .tier.sm .tierrow { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px 2px; justify-items: center; }
  .tier .boss, .tier.xl .boss, .tier.lg .boss, .tier.md .boss { width: auto; gap: 7px; }
  .tier.xl .ball, .tier.lg .ball { --r: 34px; } .tier.md .ball { --r: 30px; } .tier.sm .ball { --r: 20px; }
  .boss figcaption, .tier.md figcaption { font-size: 11.5px; padding: 0 2px; }
  .relicrow { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } .relic { border-radius: 16px; }
  .relich { margin-top: 40px; font-size: 28px; }
  .petrow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 4px; }
  .pet { width: auto; } .petart { width: 76px; height: 76px; } .petface { left: 4px; top: 4px; width: 60px; height: 60px; } .petw { right: -4px; width: 36px; height: 36px; }
  .pet figcaption { font-size: 12px; }
  .board { width: min(320px, 86%); }
  .wantedrow { justify-content: center; gap: 16px 0; margin-top: 18px; }
  .wantedcard { width: 31%; } .wantedcard .ball { --r: 34px; } .wantedcard figcaption { font-size: 12.5px; }
  .brewart { height: 196px; } .brewer { width: 190px; } .cauldron { width: 130px; }
  .potrow { gap: 4px; } .potrow img { width: 48px; height: 48px; }
  .ingrow { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; margin-top: 30px; }
  .ingrow img { width: 100%; height: auto; aspect-ratio: 1; padding: 3px; border-radius: 10px; }
  .riftart img { border-radius: 20px; box-shadow: 0 0 0 4px #c9a8ff, 0 0 30px rgba(170, 120, 255, .4); }
  .tog-shot { border-radius: 22px; box-shadow: 0 0 0 4px var(--cream), 0 0 0 7px var(--rim), 0 10px 18px rgba(40, 22, 10, .22); }
  .ticks { gap: 10px; } .ticks li { font-size: 15px; padding: 11px 14px 11px 48px; } .ticks b { font-size: 17px; }
  .pop { padding: 0; place-items: end stretch; }
  .pop-card { width: 100%; max-height: 90vh; border-radius: 28px 28px 0 0; transform: translateY(100%); transition: opacity .2s, transform .32s cubic-bezier(.2, .8, .2, 1); padding-bottom: env(safe-area-inset-bottom); }
  .pop-grab { display: block; width: 44px; height: 5px; margin: 10px auto 0; border-radius: 3px; background: #e3cfa6; }
  .pop-body { padding: 16px 18px 26px; }
  .phead { gap: 16px; margin-bottom: 16px; } .phead h3 { font-size: 27px; } .part { width: 100px; height: 100px; border-radius: 24px; } .ball-art .ball { --r: 29px; }
  .pet-art .petface { left: 10px; top: 10px; width: 66px; height: 66px; } .pet-art .petw { width: 38px; height: 38px; }
  .pab p, .pnote { font-size: 16px; } .pab b { font-size: 19px; }
  .ptab { font-size: 15.5px; } .ptab th { font-size: 13.5px; padding: 9px 4px 7px; } .ptab td { padding: 9px 4px; } .ptab td:first-child, .ptab th:first-child { padding-left: 12px; padding-right: 8px; }
  .ptab.reds .stars img { width: 13px; } .ptab small.up { font-size: 12px; }
  .hint { margin: -12px auto 24px; font-size: 16.5px; padding: 10px 16px 10px 12px; gap: 10px; } .tapdot { width: 22px; height: 22px; }
  .soon { padding: 70px 20px 76px; } .soon-face { width: 116px; border-radius: 28px; } .soon p { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .hero-logo, .dot, .amb i { animation: none; } .amb { display: none; } html { scroll-behavior: auto; } }