/* Buddy Arcade, site styles. Game look: rounded, bold #2E2A36 outline, flat colour + one shadow + one highlight. */
@font-face {
  font-family: "Lilita One";
  src: url("/assets/fonts/LilitaOne-Regular.woff2") format("woff2");
  font-display: swap;
}

:root {
  --ink: #2E2A36;
  --cream: #FFF7E6;
  --cream-2: #F3E6CC;
  --p1: #3B8FFA;
  --p1-d: #2A6CC4;
  --p2: #FF7340;
  --p2-d: #D9531F;
  --p3: #26B36B;
  --p3-d: #1A8A50;
  --p4: #9E66F2;
  --p4-d: #7643C9;
  --gold: #FFD133;
  --gold-d: #E0A912;
  --pink: #FF6FB1;
  --sky: #8FD3FF;
  --sky-2: #5DB8F5;
  --grass: #78C850;
  --line: 4px;
  --r: 22px;
  --display: "Lilita One", "Arial Rounded MT Bold", ui-rounded, system-ui, sans-serif;
  --body: ui-rounded, "SF Pro Rounded", "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
  --gutter: clamp(16px, 4vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--ink);
  font: 500 17px/1.5 var(--body);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--gold); padding: 10px 16px;
  border: var(--line) solid var(--ink); border-radius: 14px; font-family: var(--display); text-decoration: none; }
.skip:focus { top: 12px; }
:focus-visible { outline: 4px solid var(--gold); outline-offset: 3px; box-shadow: 0 0 0 8px var(--ink); border-radius: 12px; }

.shaker { overflow-x: clip; }
.shaker.shake { animation: shake .45s cubic-bezier(.36,.07,.19,.97); }
@keyframes shake {
  10%, 90% { transform: translate3d(-2px, 1px, 0) rotate(-.3deg); }
  20%, 80% { transform: translate3d(4px, -2px, 0) rotate(.4deg); }
  30%, 50%, 70% { transform: translate3d(-7px, 2px, 0) rotate(-.6deg); }
  40%, 60% { transform: translate3d(7px, -1px, 0) rotate(.6deg); }
}

/* ---------- shared bits ---------- */
.big {
  font-family: var(--display); font-weight: 400; text-align: center; margin: 0 auto .3em;
  font-size: clamp(44px, 9vw, 112px); line-height: .95; letter-spacing: .01em; text-transform: uppercase;
}
.pop {
  display: inline-block; color: var(--cream);
  -webkit-text-stroke: .14em var(--ink); paint-order: stroke fill;
  text-shadow: 0 .09em 0 var(--ink);
  transform: rotate(-3deg);
}
.pop.alt { color: var(--gold); transform: rotate(2deg); }
.big.light .pop { color: #fff; }
.lede { text-align: center; max-width: 40ch; margin: 0 auto 28px; font-size: clamp(18px, 2.2vw, 22px); font-weight: 700; }
.lede.light { color: #fff; }

.sticker {
  position: absolute; z-index: 3; font-family: var(--display); text-transform: uppercase; font-size: clamp(14px, 1.8vw, 20px);
  background: var(--pink); color: #fff; padding: .45em .9em; border: var(--line) solid var(--ink); border-radius: 999px;
  box-shadow: 0 5px 0 var(--ink); transform: rotate(-8deg); white-space: nowrap;
  transition: transform .25s cubic-bezier(.3,1.8,.5,1);
}
.sticker:hover { transform: rotate(6deg) scale(1.12); }
.sticker.star {
  width: 92px; height: 92px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 0; box-shadow: none;
  background: var(--gold); color: var(--ink); font-size: 30px;
  clip-path: polygon(50% 0, 61% 15%, 79% 9%, 80% 28%, 98% 35%, 87% 50%, 98% 65%, 80% 72%, 79% 91%, 61% 85%, 50% 100%, 39% 85%, 21% 91%, 20% 72%, 2% 65%, 13% 50%, 2% 35%, 20% 28%, 21% 9%, 39% 15%);
  animation: wobble 3s ease-in-out infinite; /* a wobble, not a spin: the word stays readable */
}
@keyframes wobble { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(8deg) scale(1.06); } }
@keyframes spin { to { transform: rotate(360deg); } }

.btn {
  --c: var(--cream); --cd: var(--cream-2);
  font-family: var(--display); text-transform: uppercase; letter-spacing: .02em; font-size: 20px; cursor: pointer;
  background: var(--c); border: var(--line) solid var(--ink); border-radius: 18px; padding: .55em 1.1em;
  box-shadow: inset 0 -6px 0 var(--cd), 0 6px 0 var(--ink);
  transform: translateY(0); transition: transform .08s, box-shadow .08s;
}
.btn:hover { transform: translateY(-2px); box-shadow: inset 0 -6px 0 var(--cd), 0 8px 0 var(--ink); }
.btn:active { transform: translateY(5px); box-shadow: inset 0 -2px 0 var(--cd), 0 1px 0 var(--ink); }
.btn.yellow { --c: var(--gold); --cd: var(--gold-d); }
.btn.white { --c: #fff; --cd: #E3DACB; font-size: 16px; }
.btn.round { width: 54px; height: 54px; padding: 0; border-radius: 50%; font-size: 34px; line-height: 1; --c: var(--p1); --cd: var(--p1-d); color: #fff; }

/* store buttons (lookalikes until the official badges are in, see README) */
.stores { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.store {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: #fff;
  background: var(--ink); border: 3px solid #fff; border-radius: 16px; padding: 9px 18px 9px 13px;
  box-shadow: 0 6px 0 rgba(46,42,54,.55); font-family: var(--display); font-size: 22px; line-height: 1;
  transition: transform .15s cubic-bezier(.3,1.8,.5,1);
}
.store small { display: block; font-family: var(--body); font-weight: 700; font-size: 11px; letter-spacing: .03em; opacity: .85; margin-bottom: 2px; }
.store svg { width: 28px; height: 28px; fill: #fff; }
.store:hover { transform: translateY(-3px) rotate(-2deg) scale(1.05); }
.store-google:hover { transform: translateY(-3px) rotate(2deg) scale(1.05); }

/* trailer: a hero button and a modal with the YouTube player */
.trailer-btn {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; cursor: pointer;
  font-family: var(--display); font-size: 20px; text-transform: uppercase; letter-spacing: .02em; color: var(--ink);
  background: #fff; border: var(--line) solid var(--ink); border-radius: 999px; padding: 6px 18px 6px 8px;
  box-shadow: 0 5px 0 var(--ink); transition: transform .15s cubic-bezier(.3,1.8,.5,1);
}
.trailer-btn svg { width: 30px; height: 30px; padding: 6px 5px 6px 7px; border-radius: 50%; background: var(--p2); fill: #fff; }
.trailer-btn:hover { transform: translateY(-3px) rotate(-2deg) scale(1.05); }
.trailer-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.trailer {
  width: min(1100px, calc(100vw - 32px)); max-width: none; padding: 0; overflow: visible;
  background: var(--ink); border: var(--line) solid #fff; border-radius: 22px; box-shadow: 0 12px 0 rgba(0,0,0,.35);
}
.trailer::backdrop { background: rgba(46, 42, 54, .82); }
.trailer-frame { aspect-ratio: 16 / 9; border-radius: 18px 18px 0 0; overflow: hidden; background: #000; }
.trailer-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.trailer-note { margin: 0; padding: 10px 16px 12px; color: #fff; font-size: 14px; text-align: center; }
.trailer-note a { color: var(--gold); font-weight: 700; }
.trailer-close { position: absolute; top: -22px; right: -14px; z-index: 1; width: 48px; height: 48px; font-size: 30px; }

/* ---------- top bar ---------- */
.topbar {
  position: fixed; inset: 10px 10px auto; z-index: 50; display: flex; align-items: center; gap: 12px;
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.brand {
  display: flex; align-items: center; gap: 6px; text-decoration: none; background: var(--cream);
  border: var(--line) solid var(--ink); border-radius: 999px; padding: 2px 16px 2px 4px; box-shadow: 0 5px 0 var(--ink);
  font-family: var(--display); font-size: 20px; text-transform: uppercase;
}
.brand img { width: 44px; height: 44px; margin: -6px 0 -4px; }
.nav { display: flex; gap: 8px; margin-left: auto; }
.nav a {
  font-family: var(--display); text-transform: uppercase; text-decoration: none; font-size: 16px;
  background: #fff; border: var(--line) solid var(--ink); border-radius: 999px; padding: 6px 14px; box-shadow: 0 4px 0 var(--ink);
  transition: transform .15s;
}
.nav a:nth-child(1):hover { background: var(--p1); color: #fff; transform: rotate(-4deg); }
.nav a:nth-child(2):hover { background: var(--p2); color: #fff; transform: rotate(3deg); }
.nav a:nth-child(3):hover { background: var(--p3); color: #fff; transform: rotate(-3deg); }
.coinpill {
  display: flex; align-items: center; gap: 6px; background: var(--ink); color: var(--gold); border: 3px solid var(--gold);
  border-radius: 999px; padding: 3px 14px 3px 4px; font-family: var(--display); font-size: 20px; min-width: 84px;
}
.coinpill img { width: 28px; height: 28px; }
.coinpill.bump { animation: bump .35s cubic-bezier(.3,1.8,.5,1); }
@keyframes bump { 40% { transform: scale(1.25) rotate(-6deg); } }

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: max(680px, 100svh); overflow: hidden; isolation: isolate;
  background: linear-gradient(#5DB8F5, #9EDCFF 55%, #CDEFFF);
  display: grid; grid-template-rows: auto 1fr; justify-items: center;
  padding: clamp(84px, 11vh, 120px) var(--gutter) 0;
}
.sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.cloud {
  position: absolute; width: 180px; height: 56px; background: #fff; border-radius: 999px; opacity: .95;
  box-shadow: 0 6px 0 rgba(93,184,245,.35);
  animation: drift 60s linear infinite;
}
.cloud::before, .cloud::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.cloud::before { width: 80px; height: 80px; left: 26px; top: -38px; }
.cloud::after { width: 64px; height: 64px; left: 88px; top: -26px; }
.c1 { top: 18%; left: -10%; animation-duration: 70s; }
.c2 { top: 42%; left: 30%; transform: scale(.7); animation-duration: 90s; animation-delay: -40s; }
.c3 { top: 72%; left: 60%; transform: scale(1.2); animation-duration: 80s; animation-delay: -20s; }
.c4 { top: 10%; left: 70%; transform: scale(.55); animation-duration: 100s; animation-delay: -70s; }
@keyframes drift { from { translate: -30vw 0; } to { translate: 130vw 0; } }
.rock {
  position: absolute; width: 46px; height: 34px; background: #B97A47; border: var(--line) solid var(--ink);
  border-radius: 40% 40% 50% 50% / 30% 30% 70% 70%; box-shadow: inset 0 9px 0 var(--grass);
  animation: bob 4s ease-in-out infinite;
}
.r1 { left: 7%; top: 64%; }
.r2 { right: 8%; top: 56%; width: 64px; height: 44px; animation-delay: -1.3s; }
.r3 { left: 18%; bottom: 7%; width: 30px; height: 24px; animation-delay: -2.4s; }
@keyframes bob { 50% { transform: translateY(-14px) rotate(4deg); } }

#island { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; touch-action: pan-y; cursor: grab; }
#island:active { cursor: grabbing; }
.hero-copy { position: relative; z-index: 2; text-align: center; pointer-events: none; }
.hero-copy a, .hero-copy button { pointer-events: auto; }

.title {
  margin: 0; font-family: var(--display); font-weight: 400; text-transform: uppercase; line-height: .9;
  font-size: clamp(64px, 13.5vw, 184px); display: flex; flex-wrap: wrap; justify-content: center; column-gap: .25em;
}
.title .word { display: inline-flex; }
.title .word > span {
  display: inline-block; color: var(--p1); pointer-events: auto;
  -webkit-text-stroke: .13em var(--ink); paint-order: stroke fill; text-shadow: 0 .08em 0 var(--ink);
  animation: letter 2.4s ease-in-out infinite; transform-origin: 50% 90%;
}
.title .word > span:nth-child(4n+2) { color: var(--p2); }
.title .word > span:nth-child(4n+3) { color: var(--p3); }
.title .word > span:nth-child(4n+4) { color: var(--p4); }
.title .word:nth-child(2) > span:nth-child(4n+1) { color: var(--gold); }
.title .word > span:nth-child(1) { animation-delay: 0s; } .title .word > span:nth-child(2) { animation-delay: -.2s; }
.title .word > span:nth-child(3) { animation-delay: -.4s; } .title .word > span:nth-child(4) { animation-delay: -.6s; }
.title .word > span:nth-child(5) { animation-delay: -.8s; } .title .word > span:nth-child(6) { animation-delay: -1s; }
.title .word:nth-child(2) > span { animation-duration: 2.1s; }
@keyframes letter {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-.06em) rotate(4deg); }
}
.title .word > span.boing { animation: boing .6s cubic-bezier(.3,1.8,.5,1); }
@keyframes boing { 0% { transform: scale(1, 1); } 30% { transform: scale(1.3, .7); } 60% { transform: translateY(-.25em) scale(.85, 1.2) rotate(-10deg); } 100% { transform: none; } }

.tagline {
  display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 0 .35em; margin: 16px auto 20px;
  font-family: var(--display); font-size: clamp(19px, 2.6vw, 30px); color: #fff; text-transform: none;
  background: var(--ink); padding: .3em .9em .35em; border-radius: 999px; transform: rotate(-1.5deg);
  box-shadow: 0 6px 0 rgba(46,42,54,.35);
}
.tagline span:nth-child(2) { color: var(--gold); }

.hint {
  position: absolute; z-index: 3; left: 50%; bottom: 96px; translate: -50% 0; top: auto;
  width: max-content; max-width: calc(100vw - 32px); /* left: 50% would otherwise cap it at half the hero */
  display: flex; align-items: center; gap: 8px; background: #fff; color: var(--ink); transform: rotate(-3deg);
  animation: nudge 2.2s ease-in-out infinite; pointer-events: none;
}
.hint img { width: 26px; height: 26px; }
@keyframes nudge { 50% { transform: rotate(3deg) scale(1.06); } }
.plaque {
  position: absolute; z-index: 3; right: 16px; bottom: 96px; margin: 0; font-family: var(--display); text-transform: uppercase;
  background: var(--cream); border: var(--line) solid var(--ink); border-radius: 16px; padding: 6px 14px; box-shadow: 0 5px 0 var(--ink);
  transform: rotate(2deg); font-size: 18px;
}
.plaque b { color: var(--p2); font-weight: 400; font-size: 1.3em; }
.plaque.bump { animation: bump .35s cubic-bezier(.3,1.8,.5,1); }

.hs1 { left: 5%; top: 30%; background: var(--p3); transform: rotate(-12deg); }
.hs2 { right: 6%; top: 26%; font-size: 30px; }
.float-coin { position: absolute; width: 44px; height: 44px; animation: bob 3.4s ease-in-out infinite; }
.fc1 { left: 14%; top: 20%; } .fc2 { right: 18%; top: 46%; animation-delay: -1s; width: 34px; height: 34px; }
.fc3 { left: 26%; top: 52%; animation-delay: -2s; } .fc4 { right: 4%; top: 78%; animation-delay: -.5s; }

/* ---------- tickers ---------- */
.tickers { position: relative; z-index: 4; height: 150px; margin: -70px 0 -80px; pointer-events: none; }
.ticker {
  position: absolute; left: -5%; right: -5%; overflow: hidden; border-block: var(--line) solid var(--ink);
  font-family: var(--display); text-transform: uppercase; font-size: clamp(22px, 3vw, 34px); white-space: nowrap;
}
.ticker.t1 { top: 30px; background: var(--gold); transform: rotate(-3deg); box-shadow: 0 6px 0 var(--ink); }
.ticker.t2 { top: 70px; background: var(--p2); color: #fff; transform: rotate(2deg); }
.track { display: inline-flex; gap: 0; padding: 8px 0; animation: marquee 40s linear infinite; will-change: transform; }
.t2 .track { animation-direction: reverse; animation-duration: 30s; }
.track span { padding: 0 .45em; }
.track i { font-style: normal; color: var(--ink); padding: 0 .1em; }
.t2 .track i { color: var(--gold); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- games ---------- */
.games {
  position: relative; overflow: hidden; background: var(--gold); padding: 150px var(--gutter) 120px; isolation: isolate;
}
.sunburst {
  position: absolute; z-index: -1; left: 50%; top: 260px; width: 260vmax; height: 260vmax; translate: -50% -50%;
  background: repeating-conic-gradient(#FFC524 0 7.5deg, transparent 7.5deg 15deg);
  animation: spin 120s linear infinite; opacity: .9;
}
.games .s-tl { left: 3%; top: 92px; }
.games .s-tr { right: 4%; top: 118px; background: var(--p1); transform: rotate(6deg); }
.filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 0 auto 36px; }
.chip {
  font-family: var(--display); text-transform: uppercase; font-size: 18px; cursor: pointer;
  background: #fff; border: var(--line) solid var(--ink); border-radius: 999px; padding: 6px 18px; box-shadow: 0 4px 0 var(--ink);
  transition: transform .15s cubic-bezier(.3,1.8,.5,1);
}
.chip:hover { transform: rotate(-4deg) scale(1.06); }
.chip.is-on { background: var(--ink); color: var(--gold); }

.wall {
  list-style: none; margin: 0 auto; padding: 0; max-width: 1280px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 30px 26px;
}
.card {
  --tilt: -1.5deg; position: relative; background: var(--cream); border: var(--line) solid var(--ink); border-radius: var(--r);
  box-shadow: 0 8px 0 var(--ink); transform: rotate(var(--tilt));
  transition: transform .35s cubic-bezier(.3,1.8,.5,1), box-shadow .2s;
  outline: none;
}
.card:nth-child(3n+2) { --tilt: 1.8deg; }
.card:nth-child(4n+3) { --tilt: -2.4deg; }
.card:nth-child(5n+4) { --tilt: 2.6deg; }
.card:nth-child(7n) { --tilt: -.6deg; }
.card:hover, .card:focus-within, .card.play { transform: rotate(0deg) scale(1.04) translateY(-6px); box-shadow: 0 14px 0 var(--ink); z-index: 2; }
.card.hide { display: none; }
.card.enter { animation: cardIn .5s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(40px) rotate(8deg) scale(.8); } }
.card figure { position: relative; margin: 8px 8px 0; border: 3px solid var(--ink); border-radius: 15px; overflow: hidden; aspect-ratio: 16 / 10; background: #cfd8e3; }
.card figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.card:hover figure img, .card.play figure img { transform: scale(1.08); }
.card .meta { padding: 10px 16px 16px; }
.card h3 { font-family: var(--display); font-weight: 400; font-size: 25px; margin: 0; line-height: 1.05; text-transform: uppercase; }
.card p { margin: 4px 0 10px; font-size: 15px; line-height: 1.35; font-weight: 600; }
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.tags li {
  font-family: var(--display); font-size: 13px; text-transform: uppercase; background: #fff; border: 2px solid var(--ink);
  border-radius: 999px; padding: 1px 10px;
}
.tags li.pl { background: var(--p1); color: #fff; }
.tags li.co { background: var(--p3); color: #fff; }
.card .num {
  position: absolute; z-index: 3; top: -14px; left: -12px; width: 44px; height: 44px; display: grid; place-items: center;
  font-family: var(--display); font-size: 18px; background: var(--p4); color: #fff; border: 3px solid var(--ink); border-radius: 50%;
  box-shadow: 0 3px 0 var(--ink); transform: rotate(-10deg);
}
.card:nth-child(4n+2) .num { background: var(--p2); }
.card:nth-child(4n+3) .num { background: var(--p3); }
.card:nth-child(4n+4) .num { background: var(--p1); }
.shout {
  position: absolute; z-index: 4; right: -10px; top: 18%; pointer-events: none;
  font-family: var(--display); font-size: 26px; text-transform: uppercase; color: var(--gold); white-space: nowrap;
  -webkit-text-stroke: 7px var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--ink);
  opacity: 0; transform: scale(.2) rotate(-25deg);
}
.card:hover .shout, .card.play .shout { animation: shout .9s cubic-bezier(.3,1.8,.5,1) .15s both; }
@keyframes shout {
  0% { opacity: 0; transform: scale(.2) rotate(-25deg); }
  40% { opacity: 1; transform: scale(1.15) rotate(8deg); }
  70%, 100% { opacity: 1; transform: scale(1) rotate(10deg); }
}
.plus { text-align: center; font-weight: 800; font-size: 18px; margin: 46px auto 0; }

/* hover: the card jiggles, the shot zooms, the shout pops and a Buddy rises from behind the top edge */
.card:hover, .card.play { animation: jiggle .45s ease-in-out; }
@keyframes jiggle { 25% { rotate: -1.5deg; } 50% { rotate: 1.5deg; } 75% { rotate: -.6deg; } }
.peek { position: absolute; z-index: 1; bottom: calc(100% - 4px); right: 22px; width: 88px; height: 72px; overflow: hidden; pointer-events: none; }
.peek img { width: 88px; height: 88px; max-width: none; transform: translateY(100%); transition: transform .35s cubic-bezier(.3,1.8,.5,1); }
.card:hover .peek img, .card.play .peek img { transform: translateY(14%); }
.card:nth-child(even) .peek { right: auto; left: 56px; }

/* mystery cards: games on the way */
.card.soon { background: #fff; border-style: dashed; }
.card.soon .num { background: var(--ink) !important; color: var(--gold); }
.mystery {
  position: relative; margin: 8px 8px 0; border: 3px solid var(--ink); border-radius: 15px; overflow: hidden; aspect-ratio: 16 / 10;
  display: grid; place-items: center; background: repeating-linear-gradient(-45deg, #3C3550 0 16px, #2E2A36 16px 32px);
}
.mystery img { position: absolute; width: 46%; left: 50%; bottom: -8%; translate: -50% 0; filter: brightness(0) opacity(.75); transition: filter .4s, transform .4s; }
.mystery span { position: relative; font-family: var(--display); font-size: 92px; line-height: 1; color: var(--gold); -webkit-text-stroke: 8px var(--ink); paint-order: stroke fill; text-shadow: 0 6px 0 var(--ink); }
.card.soon:hover .mystery span, .card.soon.play .mystery span { animation: bump .5s cubic-bezier(.3,1.8,.5,1); }
.card.soon:hover .mystery img, .card.soon.play .mystery img { transform: translateY(-6%); }
.tags li.soon-tag { background: var(--gold); }

/* ---------- round banner ---------- */
.round-banner { position: relative; z-index: 5; height: 0; display: flex; justify-content: center; }
.round-banner.final .ribbon { background: var(--p4); top: -40px; }
.ribbon {
  position: absolute; top: -52px; display: flex; align-items: center; gap: 18px;
  background: #E8453C; color: #fff; font-family: var(--display); font-size: clamp(30px, 5vw, 56px); text-transform: uppercase;
  border: var(--line) solid var(--ink); padding: 6px 42px; box-shadow: 0 8px 0 var(--ink);
  clip-path: polygon(0 0, 100% 0, 96% 50%, 100% 100%, 0 100%, 4% 50%);
  transform: rotate(-2deg) scale(0); transition: transform .5s cubic-bezier(.3,1.8,.5,1);
}
.round-banner.on .ribbon { transform: rotate(-2deg) scale(1); }
.ribbon .r-count { display: inline-block; color: var(--gold); min-width: 1.6ch; text-align: center; }
.ribbon .r-count.tick { animation: bump .4s cubic-bezier(.3,1.8,.5,1); }

/* ---------- modes ---------- */
.modes {
  position: relative; background: var(--p2); padding: 120px var(--gutter) 130px;
  clip-path: polygon(0 3vw, 100% 0, 100% calc(100% - 3vw), 0 100%); margin: -3vw 0;
  background-image: radial-gradient(rgba(255,255,255,.18) 3px, transparent 4px); background-size: 34px 34px;
}
.mode-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 28px; max-width: 1240px; margin: 0 auto; }
.mode {
  position: relative; background: var(--cream); border: var(--line) solid var(--ink); border-radius: 28px; padding: 18px 22px 26px;
  box-shadow: 0 10px 0 var(--ink); transform: rotate(-1.5deg); transition: transform .35s cubic-bezier(.3,1.8,.5,1);
}
.mode:nth-child(2) { transform: rotate(1.5deg); } .mode:nth-child(3) { transform: rotate(-.8deg); } .mode:nth-child(4) { transform: rotate(2deg); }
.mode:hover { transform: rotate(0) scale(1.03); }
.mode h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 34px; margin: 10px 0 4px; line-height: 1; }
.mode p { margin: 0; font-weight: 600; }
.mode .badge {
  position: absolute; top: -16px; right: 16px; font-family: var(--display); text-transform: uppercase; font-size: 15px;
  background: var(--ink); color: var(--gold); padding: 4px 12px; border-radius: 999px; transform: rotate(4deg);
}
.m-same h3 { color: var(--p3-d); } .m-nearby h3 { color: var(--p1-d); } .m-cpu h3 { color: var(--p4-d); } .m-coop h3 { color: var(--p2-d); }
.mode-art { position: relative; height: 190px; border-radius: 20px; border: 3px solid var(--ink); overflow: hidden; }
.m-same .mode-art { background: #9BE07A; }
.m-nearby .mode-art { background: #9ED0FF; }
.m-cpu .mode-art { background: #CDB6FF; }
.m-coop .mode-art { background: #FFC9A8; }
.phone { position: absolute; background: var(--ink); border-radius: 20px; padding: 8px; }
.phone .screen { width: 100%; height: 100%; border-radius: 12px; background: #8FD3FF; overflow: hidden; position: relative; }
.phone.land { width: 230px; height: 118px; left: 50%; top: 50%; translate: -50% -50%; }
.screen.split { background: linear-gradient(90deg, #7FB6FF 50%, #FFA987 50%); }
.screen.split img { position: absolute; width: 84px; height: 84px; top: 50%; margin-top: -40px; }
/* face to face: blue lunges and knocks the fox back, then the fox gets its own back (mirrored, never rotated) */
.screen.split .p-l { left: 6px; animation: shoveL 2.6s ease-in-out infinite; }
.screen.split .p-r { right: 6px; scale: -1 1; animation: shoveR 2.6s ease-in-out infinite; }
@keyframes shoveL {
  0%, 8% { translate: 0; } 18% { translate: -8px; } 26% { translate: 36px; } 32% { translate: 26px; } 44%, 62% { translate: 0; }
  75% { translate: -22px; } 90%, 100% { translate: 0; }
}
@keyframes shoveR {
  0%, 25% { translate: 0; } 31% { translate: 22px; } 46%, 58% { translate: 0; } 64% { translate: 8px; }
  72% { translate: -36px; } 78% { translate: -26px; } 92%, 100% { translate: 0; }
}
.thumb { position: absolute; width: 48px; height: 66px; background: #F7C8A0; border: 3px solid var(--ink); border-radius: 50% 50% 40% 40%; bottom: 8px; }
.thumb.tl { left: calc(50% - 150px); transform: rotate(40deg); animation: tap 0.8s ease-in-out infinite; }
.thumb.tr { right: calc(50% - 150px); transform: rotate(-40deg); animation: tap 0.8s ease-in-out infinite .4s; }
@keyframes tap { 50% { translate: 0 -8px; } }
.phone.mini { width: 74px; height: 126px; top: 30px; }
.phone.mini.p1 { left: calc(50% - 130px); transform: rotate(-8deg); }
.phone.mini.p2 { right: calc(50% - 130px); transform: rotate(8deg); }
.phone.mini.p1 .screen { background: var(--p1) url(/assets/buddies/fox-happy.webp) center / 90% no-repeat; }
.phone.mini.p2 .screen { background: var(--p2) url(/assets/buddies/panda-happy.webp) center / 90% no-repeat; }
.waves { position: absolute; left: 50%; top: 92px; translate: -50% -50%; width: 120px; height: 120px; }
.waves i { position: absolute; inset: 0; border: 5px solid #fff; border-radius: 50%; animation: wave 1.8s ease-out infinite; opacity: 0; }
.waves i:nth-child(2) { animation-delay: .6s; } .waves i:nth-child(3) { animation-delay: 1.2s; }
@keyframes wave { from { transform: scale(.15); opacity: 1; } to { transform: scale(1); opacity: 0; } }
.nowifi {
  position: absolute; bottom: 8px; left: 50%; translate: -50% 0; font-family: var(--display); font-size: 15px; background: var(--ink);
  color: #fff; padding: 2px 10px; border-radius: 999px; white-space: nowrap;
}
.cpu-bot { position: absolute; width: 170px; left: 50%; bottom: -14px; translate: -50% 0; animation: hop 1.2s ease-in-out infinite; }
@keyframes hop { 50% { transform: translateY(-12px); } }
.levels { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 6px; }
.levels span { font-family: var(--display); font-size: 13px; text-transform: uppercase; background: #fff; border: 2px solid var(--ink); border-radius: 999px; padding: 0 10px; }
.levels span:nth-child(2) { background: var(--gold); } .levels span:nth-child(3) { background: var(--p2); color: #fff; }
.huddle { position: absolute; inset: 0; display: flex; justify-content: center; align-items: flex-end; }
.huddle img { width: 124px; margin: 0 -22px -10px; animation: hop 1s ease-in-out infinite; }
.huddle img:nth-child(2) { animation-delay: -.33s; z-index: 1; width: 136px; } .huddle img:nth-child(3) { animation-delay: -.66s; }

/* ---------- dress-up ---------- */
.dressup {
  position: relative; background: var(--p4); padding: 140px var(--gutter) 120px; overflow: hidden;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.07) 0 26px, transparent 26px 52px);
}
.dressup .s-tl { left: 5%; top: 120px; background: var(--gold); color: var(--ink); }
.toy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; max-width: 1080px; margin: 0 auto; align-items: center; }
.stage-wrap { text-align: center; }
.stage {
  position: relative; width: min(100%, 420px); aspect-ratio: 1; margin: 0 auto; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #fff 0 30%, #FFE7A3 31% 52%, var(--gold) 53%);
  border: var(--line) solid var(--ink); box-shadow: 0 10px 0 var(--ink);
}
.layers { position: absolute; inset: -8% -6% 2%; }
.layers img { pointer-events: none; user-select: none; }
.layers.boing { animation: pop-in .5s cubic-bezier(.3,1.8,.5,1); transform-origin: 50% 90%; }
@keyframes pop-in { 0% { transform: translateY(0); } 35% { transform: translateY(-7%); } 100% { transform: none; } }
.layers img { position: absolute; max-width: none; }
.layers img.base { left: 0; top: 0; width: 100%; height: 100%; }
.toy-name {
  display: inline-block; margin: 18px 0 0; font-family: var(--display); font-size: 26px; text-transform: uppercase;
  background: var(--cream); border: var(--line) solid var(--ink); border-radius: 16px; padding: 4px 18px; box-shadow: 0 5px 0 var(--ink);
  transform: rotate(-2deg); max-width: 100%;
}
.toy-ui { background: var(--cream); border: var(--line) solid var(--ink); border-radius: 28px; padding: 22px; box-shadow: 0 10px 0 var(--ink); }
.theme-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.theme-label { font-family: var(--display); font-size: 30px; text-transform: uppercase; text-align: center; flex: 1; }
.slots { list-style: none; padding: 0; margin: 18px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.slots li {
  display: flex; flex-direction: column; gap: 2px; padding: 6px 10px 8px; border: 3px solid var(--ink); border-radius: 14px; background: #fff; min-height: 64px;
}
.slots .slot { font-family: var(--display); font-size: 12px; text-transform: uppercase; opacity: .6; }
.slots .gname { font-weight: 800; font-size: 15px; line-height: 1.15; }
.slots .rar { align-self: flex-start; font-family: var(--display); font-size: 11px; text-transform: uppercase; padding: 0 8px; border-radius: 999px; color: #fff; }
.slots li.empty .gname { opacity: .45; }
.r-common { background: #8E8E9A; } .r-rare { background: var(--p1); } .r-epic { background: var(--p4); }
.r-legendary { background: var(--gold-d); } .r-mythic { background: var(--pink); }
.slots li.r-legendary-glow { background: #FFF3C4; } .slots li.r-mythic-glow { background: #FFE1EF; }
.toy-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.big-btn { font-size: 28px; padding: .4em 1em; }
.combo { margin: 16px 0 0; font-weight: 700; font-size: 15px; }
.legendary-pop {
  position: absolute; left: 50%; top: 10%; translate: -50% 0; z-index: 5; font-family: var(--display); font-size: 28px; text-transform: uppercase;
  color: var(--gold); -webkit-text-stroke: 8px var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--ink); white-space: nowrap;
  animation: shout 1.6s cubic-bezier(.3,1.8,.5,1) both; pointer-events: none;
}
.legendary-pop.mythic { color: var(--pink); }

/* ---------- more ---------- */
.more { background: var(--sky); padding: 130px var(--gutter) 110px; overflow: hidden;
  background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,.5) 0 60px, transparent 61px), radial-gradient(circle at 80% 70%, rgba(255,255,255,.4) 0 90px, transparent 91px); }
.polaroids { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 40px 30px; max-width: 1240px; margin: 30px auto 0; }
.pol { position: relative; margin: 0; background: #fff; border: var(--line) solid var(--ink); border-radius: 10px; padding: 12px 12px 18px; box-shadow: 0 10px 0 var(--ink);
  transition: transform .35s cubic-bezier(.3,1.8,.5,1); }
.p-a { transform: rotate(-4deg); } .p-b { transform: rotate(2.5deg) translateY(20px); } .p-c { transform: rotate(-1.5deg); }
.pol:hover { transform: rotate(0) scale(1.05); z-index: 2; }
.pol img { border: 3px solid var(--ink); border-radius: 6px; width: 100%; height: auto; }
.pol figcaption { margin-top: 12px; font-weight: 600; }
.pol figcaption b { display: block; font-family: var(--display); font-weight: 400; font-size: 26px; text-transform: uppercase; }
.tape { position: absolute; top: -16px; left: 50%; width: 110px; height: 30px; translate: -50% 0; background: rgba(255, 209, 51, .85); border: 2px solid rgba(46,42,54,.35); transform: rotate(-4deg); }

/* ---------- promises ---------- */
.more { position: relative; }
.more .s-tr { right: 5%; top: 80px; background: var(--p1); }
.promises { position: relative; background: var(--p3); padding: 90px var(--gutter); text-align: center; overflow: hidden;
  background-image: radial-gradient(rgba(255,255,255,.16) 3px, transparent 4px); background-size: 30px 30px; }
.stamps { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 26px; max-width: 1100px; }
.stamp {
  font-family: var(--display); text-transform: uppercase; font-size: clamp(26px, 4vw, 44px); color: #fff; background: var(--ink);
  padding: .2em .8em; border: 5px solid #fff; outline: 4px solid var(--ink); border-radius: 18px; transform: rotate(-4deg) scale(1);
}
.stamp.s2 { transform: rotate(3deg); background: #E8453C; } .stamp.s3 { transform: rotate(-2deg); background: var(--p1); } .stamp.s4 { transform: rotate(4deg); background: var(--p4); }
.promises.reveal .stamp { animation: slam .5s cubic-bezier(.3,1.6,.5,1) both; }
.promises.reveal .s2 { animation-delay: .15s; } .promises.reveal .s3 { animation-delay: .3s; } .promises.reveal .s4 { animation-delay: .45s; }
@keyframes slam { from { opacity: 0; transform: scale(3) rotate(-20deg); } }
.prom-buddy { position: absolute; width: clamp(110px, 14vw, 200px); bottom: -10px; animation: hop 1.4s ease-in-out infinite; }
.pb1 { left: 2%; } .pb2 { right: 2%; animation-delay: -.7s; }
.free { color: #fff; font-size: 20px; font-weight: 700; margin: 36px auto 0; max-width: 46ch; }
.free b { font-family: var(--display); font-weight: 400; font-size: 1.3em; color: var(--gold); }

/* ---------- final CTA ---------- */
.cta { position: relative; background: var(--gold); padding: 110px var(--gutter) 220px; text-align: center; overflow: hidden;
  background-image: repeating-conic-gradient(from 0deg at 50% 120%, #FFC524 0 6deg, transparent 6deg 12deg); }
.cta .pop { color: var(--p1); } .cta .pop.alt { color: var(--p2); }
.big-stores .store { font-size: 28px; padding: 12px 24px 12px 18px; }
.big-stores .store svg { width: 36px; height: 36px; }
.peekers { position: absolute; left: 0; right: 0; bottom: 0; /* offsets below are % of the Buddy, so every screen size peeks the same */ display: flex; justify-content: center; gap: 0; pointer-events: none; }
.peekers img { width: clamp(90px, 13vw, 170px); margin: 0 -14px; transform: translateY(62%); transition: transform .4s cubic-bezier(.3,1.8,.5,1); pointer-events: auto; }
.peekers img:hover, .cta:hover .peekers img { transform: translateY(6%); }
@media (hover: none) { .peekers img { transform: translateY(28%); } }  /* touch screens never hover: keep them in view */
.peekers img:nth-child(odd) { transition-delay: .05s; } .peekers img:nth-child(3n) { transition-delay: .1s; }

/* ---------- footer ---------- */
.footer { background: var(--ink); color: #fff; padding: 46px var(--gutter) 60px; text-align: center; }
.foot-brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 30px; text-transform: uppercase; }
.foot-brand img { width: 64px; }
.footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin: 18px 0; }
.footer nav a { font-family: var(--display); text-transform: uppercase; font-size: 18px; text-decoration: none; color: var(--gold); }
.footer nav a:hover { text-decoration: underline; text-decoration-thickness: 3px; }
.fine { font-size: 14px; opacity: .7; margin: 0; }

/* ---------- toast + confetti ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 80; translate: -50% calc(100% + 40px); /* fully below the screen, even when empty */ font-family: var(--display); font-size: 20px; text-transform: uppercase;
  background: var(--cream); border: var(--line) solid var(--ink); border-radius: 18px; padding: 10px 20px; box-shadow: 0 6px 0 var(--ink);
  transition: translate .4s cubic-bezier(.3,1.6,.5,1); max-width: calc(100vw - 32px); text-align: center;
}
.toast.on { translate: -50% 0; }
.confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 70; pointer-events: none; }

/* ---------- responsive ---------- */
@media (max-width: 1060px) {  /* tablets: keep the section links on one line each */
  .nav { gap: 6px; }
  .nav a { font-size: 13px; padding: 5px 10px; white-space: nowrap; }
  .brand span { display: none; }
  /* icon only: a round "back to top" button with the Buddy centred in it */
  .brand { width: 56px; height: 56px; padding: 0; justify-content: center; }
  .brand img { margin: 0; }
}
@media (min-width: 761px) and (max-height: 820px) {  /* short, wide screens (tablets in landscape, small laptops): size the
                                                       title by height too, so the island keeps room to play */
  .hero { padding-top: 76px; grid-template-rows: auto minmax(360px, 1fr); }
  .title { font-size: clamp(64px, min(13.5vw, 17svh), 184px); }
  .tagline { font-size: clamp(18px, 3.4svh, 30px); margin: 12px auto 14px; }
  .trailer-btn { margin-top: 10px; font-size: 17px; }
  .trailer-btn svg { width: 26px; height: 26px; }
}
@media (max-width: 760px) {
  .nav { display: none; }
  .coinpill { margin-left: auto; }
  .brand { font-size: 17px; }
  .toy { grid-template-columns: 1fr; }
  .games .s-tl { top: 108px; left: 2%; }
  .games .s-tr { top: 66px; right: 3%; }
  .shout { font-size: 22px; right: 0; }
  .slots { grid-template-columns: 1fr 1fr; }
  .hs1 { left: 2%; top: auto; font-size: 13px; }
  .sticker.hs2 { display: none; }
  .hero { padding-top: 76px; }
  .title { font-size: clamp(54px, 17vw, 80px); }
  .tagline { font-size: 17px; margin: 12px auto 14px; }
  .stores { gap: 10px; }
  .hero .store { font-size: 17px; padding: 7px 12px 7px 9px; border-radius: 13px; }
  .hero .store small { font-size: 9px; }
  .hero .store svg { width: 22px; height: 22px; }
  .trailer-btn { font-size: 15px; margin-top: 12px; padding: 4px 14px 4px 5px; }
  .trailer-btn svg { width: 24px; height: 24px; padding: 5px 4px 5px 6px; }
  .trailer-close { top: -18px; right: -6px; width: 42px; height: 42px; font-size: 26px; }
  .hint { bottom: 92px; font-size: 13px; }
  .plaque { right: 10px; left: auto; translate: none; bottom: 150px; font-size: 13px; padding: 3px 10px; }
  .fc4 { display: none; }
  .hs1 { bottom: 150px; }
  .wall { grid-template-columns: 1fr 1fr; gap: 22px 12px; }
  .card .meta { padding: 6px 9px 10px; }
  .card h3 { font-size: 17px; }
  .card p { display: none; }
  .card figure { margin: 5px 5px 0; border-radius: 11px; }
  .peek { width: 64px; height: 54px; right: 12px; } .peek img { width: 64px; height: 64px; }
  .card:nth-child(even) .peek { left: 34px; }
  .mystery { margin: 5px 5px 0; border-radius: 11px; } .mystery span { font-size: 60px; -webkit-text-stroke-width: 6px; }
  .tags li { font-size: 11px; padding: 0 7px; }
  .card .num { width: 34px; height: 34px; font-size: 14px; top: -12px; left: -8px; }
  .shout { font-size: 17px; -webkit-text-stroke-width: 5px; top: 10%; }
  .big-stores .store { font-size: 22px; }
  .fc2, .fc3 { display: none; }
  .prom-buddy { width: 96px; }
  .promises { padding-bottom: 130px; }
  .more .s-tr { top: 60px; }
  .dressup { padding-top: 170px; }
  .dressup .s-tl { top: 100px; }
  .mode-art { height: 170px; }
}

/* ---------- reduced motion: keep the colour, drop the motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; scroll-behavior: auto !important; }
  .cloud { animation: none; }
  .track { animation: none; }
  .sunburst { animation: none; }
  .card:hover .shout, .card.play .shout { opacity: 1; transform: rotate(10deg); }
}

/* ---------- simple pages (privacy / terms / support / 404) ---------- */
.page { min-height: 100svh; background: var(--sky); padding: 100px var(--gutter) 80px;
  background-image: radial-gradient(rgba(255,255,255,.35) 3px, transparent 4px); background-size: 32px 32px; }
.paper { max-width: 820px; margin: 0 auto; background: var(--cream); border: var(--line) solid var(--ink); border-radius: 28px; padding: clamp(22px, 5vw, 48px); box-shadow: 0 10px 0 var(--ink); }
.paper h1 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(40px, 7vw, 68px); line-height: 1; margin: 0 0 12px; }
.paper h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 28px; margin: 28px 0 6px; }
.paper p, .paper li { font-size: 17px; }
.paper a:not(.btn) { color: var(--p1-d); font-weight: 700; }
.paper .btn { color: var(--ink); text-decoration: none; }
.draft {
  display: inline-block; font-family: var(--display); text-transform: uppercase; font-size: 18px; background: #E8453C; color: #fff;
  border: 3px solid var(--ink); border-radius: 12px; padding: 4px 12px; transform: rotate(-2deg); margin-bottom: 14px;
}
.note { background: #FFF0B8; border: 3px dashed var(--ink); border-radius: 16px; padding: 12px 16px; font-weight: 600; }
.page-buddy { width: 180px; margin: -110px auto 0; }
.back-home { margin-top: 30px; display: inline-block; text-decoration: none; }

/* ---------- legal + support pages ---------- */
.paper h3 { font-family: var(--display); font-weight: 400; font-size: 21px; margin: 20px 0 4px; }
.paper section { scroll-margin-top: 90px; }
.paper ul { padding-left: 1.2em; }
.paper li { margin: 4px 0; }
.meta-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 18px; }
.chip-static { font-family: var(--display); font-size: 14px; text-transform: uppercase; background: #fff; border: 3px solid var(--ink); border-radius: 999px; padding: 2px 12px; }
.lead { font-size: 19px; font-weight: 700; margin: 0 0 18px; }
.tiles { list-style: none; padding: 0 !important; margin: 22px 0 8px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 12px; }
.tiles li { margin: 0; background: #fff; border: 3px solid var(--ink); border-radius: 18px; padding: 12px 14px 14px; box-shadow: 0 5px 0 var(--ink); font-size: 15px; line-height: 1.4; }
.tiles li:nth-child(4n+1) { background: #DDEBFF; } .tiles li:nth-child(4n+2) { background: #FFE3D6; }
.tiles li:nth-child(4n+3) { background: #D7F3E3; } .tiles li:nth-child(4n+4) { background: #EBDDFF; }
.tiles b { display: block; font-family: var(--display); font-weight: 400; font-size: 20px; text-transform: uppercase; margin-bottom: 2px; }
.toc { background: #fff; border: 3px solid var(--ink); border-radius: 18px; padding: 12px 18px; margin: 22px 0; }
.toc p { font-family: var(--display); text-transform: uppercase; margin: 0 0 4px; }
.toc ol { margin: 0; padding-left: 1.3em; columns: 2 220px; }
.toc a { font-weight: 700; }
.todo { background: #FFE58A; border: 2px dashed var(--ink); border-radius: 8px; padding: 0 6px; font-weight: 700; font-size: .95em; }
.todo::before { content: "OWNER: "; font-family: var(--display); font-weight: 400; color: #C2361F; }
.owner-box { margin-top: 34px; background: #2E2A36; color: #fff; border-radius: 18px; padding: 16px 20px; }
.owner-box h2 { color: var(--gold); margin-top: 0; }
.owner-box a { color: var(--gold) !important; }
.owner-box li { font-size: 15px; }
.faq details { background: #fff; border: 3px solid var(--ink); border-radius: 16px; margin: 10px 0; box-shadow: 0 4px 0 var(--ink); }
.faq summary { cursor: pointer; list-style: none; padding: 12px 44px 12px 16px; font-weight: 800; font-size: 17px; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 14px; top: 50%; translate: 0 -50%; width: 26px; height: 26px; box-sizing: border-box;
  border: 2px solid var(--ink); border-radius: 50%; background-color: var(--gold); background-repeat: no-repeat; background-position: center;
  background-image: linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink)); background-size: 12px 3px, 3px 12px; }
.faq details[open] summary::after { background-size: 12px 3px, 0 0; }
.faq details > div { padding: 0 16px 12px; }
.faq details > div p { margin: 0 0 8px; }
.contact-card { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; background: #DDEBFF; border: 3px solid var(--ink); border-radius: 20px; padding: 16px; margin: 18px 0; box-shadow: 0 6px 0 var(--ink); }
.contact-card img { width: 96px; }
.contact-card h2 { margin: 0 0 4px; }
.contact-card p { margin: 0 0 6px; }
.contact-card .contact-addr { font-size: 14px; opacity: .8; margin: 0; }
@media (max-width: 520px) { .contact-card { grid-template-columns: 1fr; text-align: center; } .contact-card img { margin: 0 auto; } }

/* ---------- events: the Buddy Year ---------- */
.nav a:nth-child(4):hover { background: var(--p4); color: #fff; transform: rotate(4deg); }
.events {
  --ev: #F3731A; --ev-d: #B9530E; --ev-token: url(/assets/events/token-halloween.webp);
  --wheel: clamp(300px, calc(100svh - 360px), 470px);
  position: relative; overflow: hidden; isolation: isolate; padding: 104px var(--gutter) 22px;
  background: var(--ev); transition: background-color .9s ease;
}
.ev-pattern {
  position: absolute; inset: -50% -120%; z-index: -1; pointer-events: none; opacity: .13;  /* big enough that the tilt never bares a corner */
  background-image: var(--ev-token), var(--ev-token); background-size: 92px 92px, 92px 92px; background-position: 0 0, 46px 46px;
  transform: rotate(-12deg); animation: evDrift 40s linear infinite; transition: opacity .45s ease;
}
.events.reskin .ev-pattern { opacity: 0; }
.events .big { font-size: clamp(42px, 6.4vw, 92px); margin-bottom: .12em; }
.events .lede { max-width: 62ch; margin-bottom: 18px; font-size: clamp(16px, 1.6vw, 20px); }
.events::before {  /* a soft sunburst behind the wheel */
  content: ""; position: absolute; z-index: -1; left: 30%; top: 58%; width: 220vmax; height: 220vmax; translate: -50% -50%;
  background: repeating-conic-gradient(rgba(255,255,255,.10) 0 6deg, transparent 6deg 12deg); animation: spin 160s linear infinite;
}
@keyframes evDrift { to { background-position: 184px 92px, 230px 138px; } }
.events .ev-s1 { left: 3%; top: 92px; background: var(--gold); color: var(--ink); transform: rotate(-9deg); }
.events .ev-s2 { right: 3%; top: 92px; width: 78px; height: 78px; font-size: 22px; }
.ev-live {
  position: absolute; right: 36px; top: -22px; margin: 0; z-index: 3; font-family: var(--display); text-transform: uppercase; font-size: clamp(18px, 2.4vw, 26px);
  background: var(--ink); color: #fff; padding: .3em 1em .35em; border-radius: 999px; transform: rotate(-1.5deg);
  box-shadow: 0 6px 0 rgba(46,42,54,.35);
}
.ev-live b { color: var(--gold); font-weight: 400; }
.ev-live .dot { display: inline-block; width: .6em; height: .6em; border-radius: 50%; background: #FF4B4B; margin-right: .45em; vertical-align: .05em;
  box-shadow: 0 0 0 0 rgba(255,75,75,.8); animation: live 1.4s ease-out infinite; }
@keyframes live { to { box-shadow: 0 0 0 .7em rgba(255,75,75,0); } }

.ev-stage { display: grid; grid-template-columns: var(--wheel) minmax(0, 1fr); gap: clamp(20px, 4vw, 54px); align-items: center; max-width: 1240px; margin: 0 auto; }

/* the wheel of the year */
.wheel-wrap { position: relative; width: min(100%, var(--wheel)); aspect-ratio: 1; margin: 0 auto; }
.wheel {
  position: absolute; inset: 7%; border-radius: 50%; border: 6px solid var(--ink); box-shadow: 0 12px 0 var(--ink), inset 0 0 0 6px rgba(255,255,255,.7);
  touch-action: none; cursor: grab; user-select: none; will-change: transform;
}
.wheel.dragging { cursor: grabbing; }
.wheel .slot {
  position: absolute; left: 50%; top: 50%; width: 12%; aspect-ratio: 1; translate: -50% -50%; padding: 0; border: 0; background: none; cursor: pointer;
  transition: transform .25s cubic-bezier(.3,1.8,.5,1);
}
.wheel .slot img { width: 100%; height: 100%; filter: drop-shadow(0 3px 0 rgba(46,42,54,.55)); pointer-events: none; }
.wheel .slot:hover, .wheel .slot.is-on { z-index: 2; }
.wheel .slot.is-on img { animation: tokenPop .35s ease-out; filter: drop-shadow(0 0 10px #fff) drop-shadow(0 3px 0 rgba(46,42,54,.55)); }
.wheel .slot.now::after {
  content: "NOW"; position: absolute; left: 50%; top: -34%; translate: -50% 0; font-family: var(--display); font-size: 12px; color: #fff;
  background: #E8453C; border: 2px solid var(--ink); border-radius: 999px; padding: 0 6px; white-space: nowrap;
}
@keyframes tokenPop { 40% { transform: scale(1.22); } }
.wheel-months { position: absolute; inset: 0; pointer-events: none; }
.wheel-months span {
  position: absolute; left: 50%; top: 50%; font-family: var(--display); font-size: clamp(11px, 1.4vw, 15px); color: #fff; text-transform: uppercase;
  -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill;
}
.wheel-pointer {
  position: absolute; left: 50%; top: -1%; translate: -50% 0; z-index: 4; width: 46px; height: 58px; background: var(--gold);
  clip-path: polygon(50% 100%, 0 0, 100% 0); filter: drop-shadow(0 4px 0 var(--ink)); transform-origin: 50% 0;
}
.wheel-pointer::before { content: ""; position: absolute; inset: 6px 8px 14px; background: #fff; clip-path: polygon(50% 100%, 0 0, 100% 0); opacity: .5; }
.wheel-pointer.tick { animation: flick .18s ease-out; }
@keyframes flick { 50% { transform: rotate(-16deg); } }
.wheel-hub {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 3; width: 28%; aspect-ratio: 1; border-radius: 50%;
  font-family: var(--display); font-size: clamp(18px, 2.6vw, 28px); color: #fff; cursor: pointer;
  background: radial-gradient(circle at 35% 30%, #FF8A7F, #E8453C 60%); border: 6px solid var(--ink); box-shadow: 0 7px 0 var(--ink);
  -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; transition: transform .15s cubic-bezier(.3,1.8,.5,1);
}
.wheel-hub:hover { transform: scale(1.08) rotate(-6deg); }
.wheel-hub:active { transform: scale(.94); }

/* the event poster */
.poster {
  position: relative; background: var(--cream); border: var(--line) solid var(--ink); border-radius: 30px; padding: 18px 22px 16px;
  box-shadow: 0 12px 0 var(--ink); transform: rotate(1.2deg);
}
/* calm swaps: the content fades down and back up, the card itself stays put */
.poster > * { transition: opacity .22s ease, transform .22s ease; }
.poster.fading > * { opacity: 0; transform: translateY(8px); }
.poster.landed { animation: landed .5s ease-out; }
@keyframes landed { 30% { transform: rotate(1.2deg) scale(1.015); } }
.poster-top { display: grid; grid-template-columns: minmax(0, min(44%, calc(var(--wheel) * .5))) minmax(0, 1fr); gap: 14px; align-items: center; }
.poster-buddy {
  position: relative; aspect-ratio: 1; border-radius: 24px; border: 3px solid var(--ink); overflow: hidden;
  background: radial-gradient(circle at 50% 60%, #fff 0 34%, color-mix(in srgb, var(--ev) 35%, #fff) 35% 60%, var(--ev) 61%);
}
.poster-buddy img { position: absolute; inset: 4%; width: 92%; height: 92%; object-fit: contain; animation: hop 1.3s ease-in-out infinite; }
.ev-when { margin: 0; display: inline-block; font-family: var(--display); text-transform: uppercase; font-size: 16px; background: var(--ink); color: var(--gold);
  border-radius: 999px; padding: 2px 12px; transform: rotate(-2deg); }
.ev-title {
  white-space: nowrap; overflow: hidden; padding: .12em .08em .1em;
  margin: 8px 0 4px; font-family: var(--display); font-weight: 400; text-transform: uppercase; line-height: .95; font-size: clamp(34px, 4.6vw, 60px);
  color: var(--ev); -webkit-text-stroke: .12em var(--ink); paint-order: stroke fill; text-shadow: 0 .07em 0 var(--ink);
}
.ev-title span { display: inline-block; animation: letter 2.4s ease-in-out infinite; }
.ev-tag { margin: 0 0 12px; font-weight: 700; font-size: 17px; line-height: 1.35; min-height: 2.7em; }
.poster { display: flex; flex-direction: column; }
.poster .ev-games { margin-top: auto; }
.ev-token { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-family: var(--display); text-transform: uppercase; font-size: 19px;
  background: #fff; border: 3px solid var(--ink); border-radius: 999px; padding: 3px 16px 3px 5px; box-shadow: 0 4px 0 var(--ink); }
.ev-token img { width: 44px; height: 44px; animation: bob 2.4s ease-in-out infinite; }
.ev-token b { color: var(--ev-d); font-weight: 400; }

.ev-track { list-style: none; margin: 14px 0 12px; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; counter-reset: step; }
.ev-track li {
  position: relative; counter-increment: step; aspect-ratio: .8; display: grid; place-items: center; background: #fff; border: 3px solid var(--ink);
  border-radius: 14px; box-shadow: 0 4px 0 var(--ink); padding: 14px 4px 4px; transition: transform .25s cubic-bezier(.3,1.8,.5,1);
}
.ev-track li::before {
  content: counter(step); position: absolute; top: -11px; left: -7px; width: 24px; height: 24px; display: grid; place-items: center;
  font-family: var(--display); font-size: 13px; color: #fff; background: var(--p4); border: 2px solid var(--ink); border-radius: 50%;
}
.ev-track li.home { background: #DFF5E6; } .ev-track li.home::before { background: var(--p3); }
.ev-track li.legendary { background: #FFF1C2; } .ev-track li.legendary::before { background: var(--gold-d); }
.ev-track li img { position: absolute; left: 6px; top: 16px; width: calc(100% - 12px); height: calc(100% - 22px); object-fit: contain; }
.ev-track li:hover { transform: translateY(-6px) rotate(-4deg) scale(1.12); z-index: 2; }
.ev-track li .tip {
  position: absolute; bottom: calc(100% + 10px); left: 50%; translate: -50% 0; white-space: nowrap; pointer-events: none; opacity: 0;
  font-family: var(--display); font-size: 14px; text-transform: uppercase; background: var(--ink); color: #fff; padding: 2px 10px; border-radius: 999px;
  transition: opacity .15s;
}
.ev-track li:hover .tip, .ev-track li:focus .tip { opacity: 1; }
.ev-track li.in { animation: cardIn .45s cubic-bezier(.3,1.6,.5,1) both; }
.ev-games { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.ev-x2 { font-family: var(--display); text-transform: uppercase; font-size: 17px; background: var(--ev); color: #fff; border: 3px solid var(--ink);
  border-radius: 999px; padding: 1px 12px; transform: rotate(-3deg); }
.ev-games ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ev-games li { display: flex; align-items: center; gap: 8px; font-family: var(--display); text-transform: uppercase; font-size: 15px; line-height: 1.05;
  background: #fff; border: 3px solid var(--ink); border-radius: 12px; padding: 3px 10px 3px 3px; }
.ev-games li img { width: 64px; height: 39px; object-fit: cover; border-radius: 7px; border: 2px solid var(--ink); background: var(--cream-2); }

/* parade of every event's Buddy */
.parade { position: relative; margin: 26px calc(-1 * var(--gutter)) 0; overflow: hidden; padding: 16px 0 6px;
  border-block: var(--line) solid var(--ink); background: rgba(46,42,54,.22); }
.parade-track { display: flex; width: max-content; gap: 18px; animation: marquee 70s linear infinite; }
.parade:hover .parade-track { animation-play-state: paused; }
.parade button { position: relative; flex: none; width: 112px; padding: 0 0 30px; background: none; border: 0; cursor: pointer; }
.parade button img { width: 112px; height: 104px; object-fit: contain; transition: transform .3s cubic-bezier(.3,1.8,.5,1); }
.parade button:hover img { transform: translateY(-14px) rotate(-6deg) scale(1.1); }
.parade button span { position: absolute; left: 50%; bottom: 0; translate: -50% 0; white-space: nowrap; font-family: var(--display); font-size: 13px;
  text-transform: uppercase; color: #fff; background: var(--c, var(--ink)); border: 2px solid var(--ink); border-radius: 999px; padding: 1px 9px; }
.parade button:nth-child(odd) img { animation: hop 1.5s ease-in-out infinite; }
.parade button:nth-child(even) img { animation: hop 1.5s ease-in-out infinite -.75s; }

/* falling treats to catch */
.ev-rain { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.treat { position: absolute; top: -90px; width: 58px; height: 58px; padding: 0; border: 0; background: none; cursor: pointer;
  animation: treatFall var(--dur, 9s) linear forwards; }
.treat img { width: 100%; height: 100%; filter: drop-shadow(0 3px 0 rgba(46,42,54,.4)); animation: spinSlow var(--spin, 3s) linear infinite; pointer-events: none; }
.treat.caught { animation: none; }
.treat.caught img { animation: caught .45s cubic-bezier(.3,1.8,.5,1) forwards; }
@keyframes treatFall { to { transform: translateY(calc(var(--fall, 1400px) + 180px)) translateX(var(--sway, 30px)); } }
@keyframes spinSlow { to { rotate: 360deg; } }
@keyframes caught { 40% { transform: scale(1.8); opacity: 1; } 100% { transform: scale(.2) translateY(-120px); opacity: 0; } }
.plus-pop { position: absolute; z-index: 6; pointer-events: none; font-family: var(--display); font-size: 26px; color: #fff; white-space: nowrap;
  -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; animation: plusUp 1s ease-out forwards; }
@keyframes plusUp { to { transform: translateY(-70px) rotate(-8deg); opacity: 0; } }
.ev-catch { position: absolute; z-index: 2; left: 3%; top: 194px; margin: 0; font-family: var(--display); text-transform: uppercase; color: #fff;
  font-size: 17px; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; transform: rotate(-4deg); max-width: 15ch; }
.ev-stage, .events .big, .events .lede, .parade { position: relative; z-index: 1; }
.ev-title, .poster-buddy { transition: background .9s ease, color .9s ease; }

@media (max-width: 1100px) {
  .ev-live, .ev-catch { position: relative; left: auto; right: auto; top: auto; display: table; margin: 0 auto 16px; transform: rotate(-1.5deg); }
  .ev-stage > .ev-live { grid-column: 1 / -1; }
  .ev-catch { margin: 14px auto 0; max-width: none; }
  .events .ev-s2 { top: 70px; }
}
@media (max-width: 900px) {
  .ev-stage { grid-template-columns: 1fr; }
  .wheel-wrap { width: min(100%, 400px); }
  .poster { transform: none; }
}
@media (max-width: 560px) {
  .events { padding-top: 130px; }
  .ev-live { font-size: 15px; padding: .35em .8em; }
  .events .ev-s1 { top: 70px; font-size: 13px; }
  .events .ev-s2 { width: 70px; height: 70px; font-size: 20px; top: 40px; }
  .poster { padding: 16px 14px 14px; }
  .poster-top { grid-template-columns: 1fr; }
  .poster-buddy { width: 70%; margin: 0 auto; }
  .poster-copy { text-align: center; }
  .ev-track { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 8px; }
  .ev-tag { min-height: 0; }
  .ev-games { justify-content: center; gap: 10px; }
  .ev-games ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
  .ev-games li { flex-direction: column; gap: 4px; padding: 3px 3px 6px; font-size: 12px; text-align: center; }
  .ev-games li img { width: 100%; height: auto; aspect-ratio: 160 / 98; }
  .parade button, .parade button img { width: 96px; }
  .parade button img { height: 90px; }
  .treat { width: 46px; height: 46px; }
}
@media (prefers-reduced-motion: reduce) { .ev-rain { display: none; } .parade-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } }

/* ---------- Buddy Town: the house + the decorator + the street ---------- */
.nav a:nth-child(5):hover { background: var(--p3); color: #fff; transform: rotate(-3deg); }
.town {
  --tw: clamp(460px, calc(100svh - 300px), 640px);
  --common: #9A9AA5; --rare: var(--p1); --epic: var(--p4); --legendary: #E0A912; --mythic: var(--pink);
  position: relative; overflow: hidden; isolation: isolate; padding: 84px var(--gutter) 0;
  background: linear-gradient(#5DB8F5 0%, #8FD3FF 45%, #C4ECFF 100%);
}
.tw-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.tw-sky .cloud { position: absolute; width: 180px; height: 56px; background: #fff; border-radius: 999px; opacity: .85;
  box-shadow: 40px -22px 0 6px #fff, 96px -8px 0 -2px #fff; animation: tw-cloud 70s linear infinite; }
.tw-sky .c1 { top: 300px; left: -220px; } .tw-sky .c2 { top: 520px; left: -220px; scale: .7; animation-duration: 95s; animation-delay: -40s; }
.tw-sky .c3 { top: 40px; left: -220px; scale: .5; animation-duration: 120s; animation-delay: -80s; }
@keyframes tw-cloud { to { translate: calc(100vw + 440px) 0; } }
.town .big { font-size: clamp(40px, 5.4vw, 80px); margin-bottom: .08em; }
.town .lede { max-width: 70ch; margin-bottom: 10px; font-size: clamp(15px, 1.4vw, 18px); color: var(--ink); }
.town .tw-s1 { left: 3%; top: 88px; background: var(--p3); transform: rotate(-8deg); }
.town .tw-s2 { right: 4%; top: 84px; background: var(--p4); transform: rotate(6deg); }
.tw-stats { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; margin: 0 auto 16px; padding: 0; position: relative; z-index: 2; }
.tw-stats li { background: #fff; border: 3px solid var(--ink); border-radius: 999px; padding: 3px 14px; font-weight: 800; font-size: 15px; box-shadow: 0 4px 0 var(--ink); }
.tw-stats li:nth-child(odd) { transform: rotate(-1.5deg); } .tw-stats li:nth-child(even) { transform: rotate(1.5deg); }
.tw-stats b { font-family: var(--display); font-weight: 400; color: var(--p1-d); font-size: 18px; }

.tw-stage { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(16px, 2.6vw, 36px); max-width: 1320px; margin: 0 auto; height: var(--tw); }

/* the dollhouse */
.house-wrap { position: relative; display: grid; place-items: end center; min-height: 0; }
.house { display: flex; flex-direction: column; align-items: center; filter: drop-shadow(0 10px 0 rgba(46,42,54,.25)); }
.house.boing { animation: tw-boing .5s cubic-bezier(.3,1.8,.5,1); }
.storey { position: relative; display: flex; align-items: flex-end; gap: var(--cell); padding: calc(var(--cell) * .35) calc(var(--cell) * .5) 0;
  background: #F6DFBC; border: 4px solid var(--ink); border-bottom-width: 0; }
.storey + .storey { border-top-width: 6px; }
.st-roof { background: none; border: 0; padding-bottom: 0; }
.st-roof .hroom .room { box-shadow: 0 0 0 4px var(--ink); }
.st-roof::before { /* the pitched roof behind the terrace */
  content: ""; position: absolute; z-index: -1; left: -30%; right: -30%; bottom: 0; height: calc(var(--cell) * 3.4);
  background: #E8665A; border: 4px solid var(--ink); clip-path: polygon(8% 100%, 50% 0, 92% 100%); }
.st-ground { border-bottom-width: 0; box-shadow: 0 calc(var(--cell) * .45) 0 #6FBF4E, 0 calc(var(--cell) * .45 + 4px) 0 var(--ink); z-index: 1; }
.st-basement { background: #8A6040; border-color: var(--ink); border-bottom-width: 4px; margin-top: calc(var(--cell) * .45 + 4px);
  background-image: radial-gradient(circle at 20% 30%, rgba(0,0,0,.12) 2px, transparent 3px), radial-gradient(circle at 70% 60%, rgba(0,0,0,.12) 2px, transparent 3px);
  background-size: 28px 28px; }
.stlabel { position: absolute; left: -10px; top: -12px; z-index: 450; font-family: var(--display); text-transform: uppercase; color: #fff; font-size: 12px;
  white-space: nowrap; background: var(--ink); border-radius: 999px; padding: 1px 10px; transform: rotate(-4deg); }
.st-roof .stlabel { left: calc(var(--cell) * -2.4); top: auto; bottom: calc(var(--cell) * 1.4); }
.hall { position: relative; align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; margin-right: calc(var(--cell) * -.5); }
.hall img { pointer-events: none; }
.hall img.up { order: -1; }
.hroom { position: relative; padding: 0; border: 0; background: none; cursor: pointer; transition: transform .2s cubic-bezier(.3,1.8,.5,1); }
.hroom:hover, .hroom:focus-visible { transform: translateY(-4px); }
.hroom .room { pointer-events: none; }
.hroom.on .room { outline: 4px solid var(--gold); outline-offset: 2px; box-shadow: 0 0 0 8px rgba(255,209,51,.45), 0 0 30px 10px rgba(255,209,51,.55); }
.hroom.out { margin-left: calc(var(--cell) * -.6); }
.hname { position: absolute; left: 50%; bottom: calc(100% + 2px); translate: -50% 0; z-index: 400; white-space: nowrap; pointer-events: none;
  font-family: var(--display); font-weight: 400; font-size: 13px; color: #fff; background: var(--ink); border-radius: 999px; padding: 1px 9px;
  opacity: 0; transition: opacity .15s; }
.hroom:hover .hname, .hroom.on .hname, .hroom:focus-visible .hname { opacity: 1; }
.lv { position: absolute; right: 2px; top: 2px; z-index: 400; font-style: normal; font-family: var(--display); font-size: 10px; color: var(--ink);
  background: var(--gold); border: 2px solid var(--ink); border-radius: 999px; padding: 0 5px; line-height: 1.4; }

/* a room, at any size (--cell px per cell): floor tiles, the wallpaper strip, then the furniture */
.room { position: relative; display: block; }
.r-floor, .r-wall { position: absolute; left: 0; right: 0; display: block; background-repeat: repeat; }
.r-floor { bottom: 0; top: calc(var(--cell) * 1.75); background-size: var(--cell) var(--cell); box-shadow: inset 0 calc(var(--cell) * -.12) 0 var(--ink); }
.room.outdoor .r-floor { top: calc(var(--cell) * .7); box-shadow: inset 0 calc(var(--cell) * -.12) 0 #4E9A34; }
.r-wall { top: 0; height: calc(var(--cell) * 1.75); background-size: var(--cell) calc(var(--cell) * 1.75); box-shadow: inset 0 -3px 0 rgba(46,42,54,.35); }
.r-bush, .pc { position: absolute; display: block; max-width: none; }
.r-bush { z-index: 5; }
.pc.flip { transform: scaleX(-1); }

/* the decorator */
.deco { display: flex; flex-direction: column; min-height: 0; background: var(--cream); border: var(--line) solid var(--ink); border-radius: 26px;
  box-shadow: 0 10px 0 var(--ink); padding: 12px 14px 8px; }
.deco-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.deco-head h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(24px, 2.6vw, 34px); line-height: 1; text-transform: uppercase; }
.deco-tag { margin: 2px 0 0; font-size: 14px; font-weight: 700; color: #7A6F66; }
.deco-value { flex: none; display: flex; align-items: center; gap: 6px; margin: 0; background: var(--ink); color: var(--gold); border-radius: 999px; padding: 4px 14px 4px 6px;
  font-family: var(--display); font-size: 22px; white-space: nowrap; }
.deco-room { flex: 1; min-height: 140px; display: grid; place-items: end center; padding: 4px 0 4px; }
.big-room { border-radius: 4px; box-shadow: 0 0 0 4px var(--ink), 0 8px 0 4px rgba(46,42,54,.25); }
.big-room .pc { cursor: grab; touch-action: none; user-select: none; -webkit-user-drag: none; transition: filter .15s; }
.big-room .pc:hover { filter: drop-shadow(0 0 5px rgba(255,255,255,.95)) drop-shadow(0 0 2px var(--gold)); }
.big-room .pc.legendary { filter: drop-shadow(0 0 5px rgba(255,209,51,.7)); }
.big-room .pc.mythic { filter: drop-shadow(0 0 7px rgba(255,111,177,.85)); }
.big-room .pc.dragging { z-index: 999 !important; cursor: grabbing; transition: none; opacity: .92; }
.big-room .pc.ok { filter: drop-shadow(0 0 7px #34D17A) drop-shadow(0 6px 0 rgba(46,42,54,.3)); }
.big-room .pc.bad { filter: drop-shadow(0 0 7px #F43F5E) grayscale(.4); }
.pc.drop { animation: tw-drop .55s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes tw-drop { 0% { translate: 0 -160%; opacity: 0; } 55% { translate: 0 0; opacity: 1; scale: 1.08 .86; } 75% { scale: .96 1.06; } 100% { scale: 1 1; } }
.pc.poof { animation: tw-poof .25s ease-in forwards; }
@keyframes tw-poof { to { scale: 1.3; opacity: 0; filter: blur(2px); } }
.pc.wiggle { animation: tw-wiggle .4s ease; }
@keyframes tw-wiggle { 30% { rotate: -4deg; } 60% { rotate: 3deg; } }
.rbuddy { position: absolute; z-index: 300; max-width: none; cursor: pointer; transition: left 1.8s linear, bottom 1.8s linear; filter: drop-shadow(0 3px 0 rgba(46,42,54,.25)); }
.rbuddy.flip { transform: scaleX(-1); }
.rbuddy.hop { animation: tw-hop .6s cubic-bezier(.3,1.6,.5,1); }
@keyframes tw-hop { 40% { translate: 0 -45%; } }
.ptag { position: absolute; z-index: 1000; translate: -50% 0; display: grid; justify-items: center; gap: 2px; min-width: 120px;
  background: #fff; border: 3px solid var(--ink); border-radius: 14px; padding: 6px 10px 8px; box-shadow: 0 5px 0 var(--ink); font-size: 13px; text-align: center; }
.ptag.on { animation: tw-tagIn .25s cubic-bezier(.3,1.8,.5,1); }
@keyframes tw-tagIn { from { scale: .6; opacity: 0; } }
.ptag b { font-family: var(--display); font-weight: 400; font-size: 16px; line-height: 1.1; }
.ptag > span:not(.tp) { font-family: var(--display); text-transform: uppercase; font-size: 11px; color: #fff; border-radius: 999px; padding: 0 8px; }
.ptag .common { background: var(--common); } .ptag .rare { background: var(--rare); } .ptag .epic { background: var(--epic); }
.ptag .legendary { background: var(--legendary); } .ptag .mythic { background: var(--mythic); }
.tp, .tprice { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; }
.tp i, .tprice i { width: 14px; height: 14px; background: url(/assets/ui/coin.webp) center / contain no-repeat; }
.tback { margin-top: 3px; font-family: var(--display); font-size: 13px; text-transform: uppercase; color: #fff; background: #E8453C; border: 2px solid var(--ink);
  border-radius: 999px; padding: 2px 10px; cursor: pointer; box-shadow: 0 3px 0 var(--ink); }
.deco-tools { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; margin: 6px 0 6px; }
.deco-tools .btn { font-size: 17px; padding: .35em .9em; }
.swatches { display: flex; gap: 5px; overflow-x: auto; max-width: 100%; padding: 4px 2px; scrollbar-width: none; }
.swatches:empty { display: none; }
#wallSw { flex: 1 1 0; min-width: 60px; } #floorSw { flex: 1 1 0; min-width: 60px; }
.sw-sep { flex: none; width: 4px; height: 34px; border-radius: 4px; background: var(--ink); opacity: .55; }
.sw-sep[hidden] { display: none; }
.sw { flex: none; width: 28px; height: 28px; padding: 0; border: 3px solid var(--ink); border-radius: 8px; background-size: 36px auto; cursor: pointer; transition: transform .15s; }
.sw.fl { border-radius: 50%; background-size: 30px 30px; }
.sw:hover { transform: translateY(-2px) scale(1.1); }
.sw.on { box-shadow: 0 0 0 3px var(--gold), 0 0 0 5px var(--ink); }
.tray { list-style: none; display: flex; gap: 8px; margin: 0; padding: 4px 2px 8px; overflow-x: auto; scroll-snap-type: x proximity; }
.tray li { flex: none; scroll-snap-align: start; }
.tile { display: grid; grid-template-rows: 46px auto auto; justify-items: center; width: 84px; padding: 4px 2px 4px; overflow: hidden; cursor: pointer; background: #fff;
  border: 3px solid var(--ink); border-top: 7px solid var(--c, var(--common)); border-radius: 14px; box-shadow: 0 4px 0 var(--ink); transition: transform .15s cubic-bezier(.3,1.8,.5,1); }
.tile.rare { --c: var(--rare); } .tile.epic { --c: var(--epic); } .tile.legendary { --c: var(--legendary); background: #FFF6D6; } .tile.mythic { --c: var(--mythic); background: #FFE7F3; }
.tile:hover { transform: translateY(-4px) rotate(-2deg); }
.tile:active { transform: translateY(2px); }
.tile.nope { animation: tw-nope .35s; }
@keyframes tw-nope { 25%, 75% { translate: -5px 0; } 50% { translate: 5px 0; } }
.tile img { width: 100%; height: 46px; object-fit: contain; }
/* the name always fits its card: up to two lines, smaller for long names, never past the edge */
.tname { font-size: 10.5px; font-weight: 800; line-height: 1.12; text-align: center; margin-top: 3px; width: 100%; padding: 0 3px;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; min-height: 2.24em; }
.tprice { font-size: 12px; }
.deco-hint { margin: 0; font-size: 12px; font-weight: 700; color: #7A6F66; text-align: center; }
@media (max-width: 700px) { .deco-tools { flex-wrap: wrap; } #wallSw, #floorSw { flex: 1 1 100%; } .sw-sep { width: 100%; height: 3px; } }

/* the street */
.street { position: relative; height: 170px; max-width: 1320px; margin: 64px auto 0; display: flex; align-items: flex-end; justify-content: space-around; padding: 0 4%; }
.street::before { content: ""; position: absolute; left: -50vw; right: -50vw; bottom: 0; height: 64px; background: #78C850; border-top: 4px solid var(--ink); z-index: -2; }
.road { position: absolute; left: -50vw; right: -50vw; bottom: 16px; height: 28px; background: #E6D3A8; border-block: 3px solid rgba(46,42,54,.25); z-index: -1;
  background-image: radial-gradient(ellipse 14px 8px at 50% 50%, #D2BB8C 98%, transparent); background-size: 46px 28px; }
.bld { position: relative; padding: 0; border: 0; background: none; cursor: pointer; margin-bottom: 40px; transition: transform .2s cubic-bezier(.3,1.8,.5,1); }
.bld img { width: clamp(110px, 13vw, 170px); height: auto; filter: drop-shadow(0 6px 0 rgba(46,42,54,.25)); }
.bld:hover { transform: translateY(-6px) scale(1.04); }
.bld.boing { animation: tw-boing .5s cubic-bezier(.3,1.8,.5,1); }
@keyframes tw-boing { 30% { scale: 1.1 .9; } 60% { scale: .95 1.06; } }
.bname { position: absolute; left: 50%; top: -6px; translate: -50% -100%; font-family: var(--display); font-size: 15px; color: #fff; text-transform: uppercase; white-space: nowrap;
  -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.stroll { position: absolute; bottom: 18px; width: 54px; z-index: 2; pointer-events: none; }
.stroll.s2, .stroll.s3 { scale: -1 1; }
@keyframes tw-stroll { from { left: -8%; } to { left: 104%; } }
.stroll.s0 { animation: tw-stroll 26s linear infinite, tw-bob .45s ease-in-out infinite alternate; }
.stroll.s1 { animation: tw-stroll 34s linear -12s infinite, tw-bob .5s ease-in-out infinite alternate; }
.stroll.s2 { animation: tw-stroll 22s linear -6s infinite reverse, tw-bob .4s ease-in-out infinite alternate; }
.stroll.s3 { animation: tw-stroll 40s linear -25s infinite reverse, tw-bob .55s ease-in-out infinite alternate; }
.stroll.s4 { animation: tw-stroll 30s linear -18s infinite, tw-bob .48s ease-in-out infinite alternate; }
@keyframes tw-bob { to { translate: 0 -5px; } }

@media (max-width: 1100px) { .town .tw-s1 { top: 60px; } .town .tw-s2 { top: 52px; } }
@media (max-width: 900px) {
  .town { --tw: auto; }
  .tw-stage { grid-template-columns: minmax(0, 1fr); height: auto; }
  .house-wrap { height: 100vw; max-height: 560px; min-height: 280px; }
  .deco { height: auto; }
  .deco-room { flex: none; height: min(76vw, 460px); }
  .street { height: 140px; justify-content: space-between; padding: 0; }
  .bld img { width: 22vw; }
  .stlabel { display: none; }
}
@media (max-width: 560px) {
  .town { padding-top: 146px; }
  .town .tw-s1 { top: 40px; font-size: 13px; } .town .tw-s2 { top: 82px; font-size: 13px; }
  .bname { font-size: 12px; }
  .deco { padding: 12px 10px 8px; }
  .tw-stats li { font-size: 13px; } .tw-stats b { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .tw-sky .cloud, .stroll { animation: none; } .stroll { display: none; } }
/* legal text that must be conspicuous (warranty disclaimer, liability limits, arbitration) */
.conspicuous { background: #fff; border: 3px solid var(--ink); border-radius: 14px; padding: 12px 16px; font-weight: 700; font-size: 15px; line-height: 1.5; }
.conspicuous p { margin: 0 0 8px; } .conspicuous p:last-child { margin-bottom: 0; }