/* pixelwonder.io lander only (index.html, body.home). Shared pieces live in styles.css.
   The idea: a workbench at night. Pixel stars and sparkles, a ticker of what's brewing, the games
   pinned up like a collage (each in its own colours and shape), house rules on a paper note,
   and a pixel town with lit windows at the bottom. CSS only: the site runs no JavaScript. */

body.home { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='34' shape-rendering='crispEdges'%3E%3Cpath fill='%230c0a1d' d='M0 0h2v2h-2zM0 2h2v2h-2zM2 2h2v2h-2zM0 4h2v2h-2zM4 4h2v2h-2zM0 6h2v2h-2zM6 6h2v2h-2zM0 8h2v2h-2zM8 8h2v2h-2zM0 10h2v2h-2zM10 10h2v2h-2zM0 12h2v2h-2zM12 12h2v2h-2zM0 14h2v2h-2zM14 14h2v2h-2zM0 16h2v2h-2zM16 16h2v2h-2zM0 18h2v2h-2zM18 18h2v2h-2zM0 20h2v2h-2zM12 20h2v2h-2zM14 20h2v2h-2zM16 20h2v2h-2zM18 20h2v2h-2zM20 20h2v2h-2zM0 22h2v2h-2zM6 22h2v2h-2zM12 22h2v2h-2zM0 24h2v2h-2zM4 24h2v2h-2zM8 24h2v2h-2zM14 24h2v2h-2zM0 26h2v2h-2zM2 26h2v2h-2zM8 26h2v2h-2zM14 26h2v2h-2zM0 28h2v2h-2zM10 28h2v2h-2zM16 28h2v2h-2zM10 30h2v2h-2zM16 30h2v2h-2zM12 32h2v2h-2zM14 32h2v2h-2z'/%3E%3Cpath fill='%23fff6e6' d='M2 4h2v2h-2zM2 6h2v2h-2zM4 6h2v2h-2zM2 8h2v2h-2zM4 8h2v2h-2zM6 8h2v2h-2zM2 10h2v2h-2zM4 10h2v2h-2zM6 10h2v2h-2zM8 10h2v2h-2zM2 12h2v2h-2zM4 12h2v2h-2zM6 12h2v2h-2zM8 12h2v2h-2zM10 12h2v2h-2zM2 14h2v2h-2zM4 14h2v2h-2zM6 14h2v2h-2zM8 14h2v2h-2zM10 14h2v2h-2zM12 14h2v2h-2zM2 16h2v2h-2zM4 16h2v2h-2zM6 16h2v2h-2zM8 16h2v2h-2zM10 16h2v2h-2zM12 16h2v2h-2zM14 16h2v2h-2zM2 18h2v2h-2zM4 18h2v2h-2zM6 18h2v2h-2zM8 18h2v2h-2zM10 18h2v2h-2zM12 18h2v2h-2zM14 18h2v2h-2zM16 18h2v2h-2zM2 20h2v2h-2zM4 20h2v2h-2zM6 20h2v2h-2zM8 20h2v2h-2zM10 20h2v2h-2zM2 22h2v2h-2zM4 22h2v2h-2zM8 22h2v2h-2zM10 22h2v2h-2zM2 24h2v2h-2zM10 24h2v2h-2zM12 24h2v2h-2zM10 26h2v2h-2zM12 26h2v2h-2zM12 28h2v2h-2zM14 28h2v2h-2zM12 30h2v2h-2zM14 30h2v2h-2z'/%3E%3C/svg%3E") 1 1, auto; }
body.home a, body.home summary, body.home label { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='34' shape-rendering='crispEdges'%3E%3Cpath fill='%230c0a1d' d='M0 0h2v2h-2zM0 2h2v2h-2zM2 2h2v2h-2zM0 4h2v2h-2zM4 4h2v2h-2zM0 6h2v2h-2zM6 6h2v2h-2zM0 8h2v2h-2zM8 8h2v2h-2zM0 10h2v2h-2zM10 10h2v2h-2zM0 12h2v2h-2zM12 12h2v2h-2zM0 14h2v2h-2zM14 14h2v2h-2zM0 16h2v2h-2zM16 16h2v2h-2zM0 18h2v2h-2zM18 18h2v2h-2zM0 20h2v2h-2zM12 20h2v2h-2zM14 20h2v2h-2zM16 20h2v2h-2zM18 20h2v2h-2zM20 20h2v2h-2zM0 22h2v2h-2zM6 22h2v2h-2zM12 22h2v2h-2zM0 24h2v2h-2zM4 24h2v2h-2zM8 24h2v2h-2zM14 24h2v2h-2zM0 26h2v2h-2zM2 26h2v2h-2zM8 26h2v2h-2zM14 26h2v2h-2zM0 28h2v2h-2zM10 28h2v2h-2zM16 28h2v2h-2zM10 30h2v2h-2zM16 30h2v2h-2zM12 32h2v2h-2zM14 32h2v2h-2z'/%3E%3Cpath fill='%23ffc94a' d='M2 4h2v2h-2zM2 6h2v2h-2zM4 6h2v2h-2zM2 8h2v2h-2zM4 8h2v2h-2zM6 8h2v2h-2zM2 10h2v2h-2zM4 10h2v2h-2zM6 10h2v2h-2zM8 10h2v2h-2zM2 12h2v2h-2zM4 12h2v2h-2zM6 12h2v2h-2zM8 12h2v2h-2zM10 12h2v2h-2zM2 14h2v2h-2zM4 14h2v2h-2zM6 14h2v2h-2zM8 14h2v2h-2zM10 14h2v2h-2zM12 14h2v2h-2zM2 16h2v2h-2zM4 16h2v2h-2zM6 16h2v2h-2zM8 16h2v2h-2zM10 16h2v2h-2zM12 16h2v2h-2zM14 16h2v2h-2zM2 18h2v2h-2zM4 18h2v2h-2zM6 18h2v2h-2zM8 18h2v2h-2zM10 18h2v2h-2zM12 18h2v2h-2zM14 18h2v2h-2zM16 18h2v2h-2zM2 20h2v2h-2zM4 20h2v2h-2zM6 20h2v2h-2zM8 20h2v2h-2zM10 20h2v2h-2zM2 22h2v2h-2zM4 22h2v2h-2zM8 22h2v2h-2zM10 22h2v2h-2zM2 24h2v2h-2zM10 24h2v2h-2zM12 24h2v2h-2zM10 26h2v2h-2zM12 26h2v2h-2zM12 28h2v2h-2zM14 28h2v2h-2zM12 30h2v2h-2zM14 30h2v2h-2z'/%3E%3C/svg%3E") 1 1, pointer; }
.home ::selection { background: var(--gold); color: var(--ink); }
.home :focus-visible { outline: 3px dashed var(--teal); outline-offset: 5px; border-radius: 0; }

.skip { position: absolute; left: 12px; top: -80px; z-index: 50; padding: 12px 16px; background: var(--gold); color: var(--ink); font-weight: 800; text-decoration: none; }
.skip:focus { top: 12px; color: var(--ink); }

.home .nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; }
.home .nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 3px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .2s steps(4); }
@media (max-width: 600px) { .home .nav a.opt { display: none; } }
.home .nav a:hover::after { transform: scaleX(1); }

/* ── tags: little pixel labels instead of letter-spaced kickers ── */
.tag { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 7px 12px 6px; font: 800 13px/1 var(--text); letter-spacing: .02em; color: var(--ink); background: var(--teal);
  box-shadow: 0 -3px 0 var(--teal), 0 3px 0 var(--teal), 3px 0 0 var(--teal), -3px 0 0 var(--teal), 4px 6px 0 #00000066; }
.tag::before { content: ""; width: 6px; height: 6px; background: var(--ink); }
.tag.ink { color: var(--star); background: #2a1d63; box-shadow: 0 -3px 0 #2a1d63, 0 3px 0 #2a1d63, 3px 0 0 #2a1d63, -3px 0 0 #2a1d63, 4px 6px 0 #2a1d6333; }
.tag.ink::before { background: var(--gold); }

/* ── pixel buttons: notched corners from four flat shadows, a chunky step below ── */
.pxbtn { --c: var(--gold); --d: #b77a10; position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 50px; padding: 0 20px; margin: 4px;
  font: italic 900 16px/1 var(--display); font-stretch: 125%; letter-spacing: .01em; color: var(--ink); background: var(--c); text-decoration: none;
  box-shadow: 0 -4px 0 var(--c), 0 4px 0 var(--c), 4px 0 0 var(--c), -4px 0 0 var(--c), 0 10px 0 var(--d), 4px 6px 0 var(--d), -4px 6px 0 var(--d);
  transition: transform .12s steps(2), box-shadow .12s steps(2); }
.pxbtn svg { width: 14px; height: 14px; transition: transform .2s steps(3); }
.pxbtn:hover { color: var(--ink); transform: translateY(-2px); }
.pxbtn:hover svg { transform: translateX(4px); }
.pxbtn:active { transform: translateY(5px); box-shadow: 0 -4px 0 var(--c), 0 4px 0 var(--c), 4px 0 0 var(--c), -4px 0 0 var(--c), 0 5px 0 var(--d), 4px 1px 0 var(--d), -4px 1px 0 var(--d); }
.pxbtn.ghost { --c: var(--star); background: transparent; color: var(--star); box-shadow: 0 -3px 0 var(--c), 0 3px 0 var(--c), 3px 0 0 var(--c), -3px 0 0 var(--c); }
.pxbtn.ghost:hover { color: var(--ink); background: var(--star); box-shadow: 0 -4px 0 var(--c), 0 4px 0 var(--c), 4px 0 0 var(--c), -4px 0 0 var(--c); }

/* ── hero ── */
.hello { position: relative; padding: clamp(36px, 7vw, 84px) 0 clamp(64px, 8vw, 104px); overflow-x: clip; }
.hello-grid > * { min-width: 0; }
.hello-grid { position: relative; display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.hello-copy { position: relative; z-index: 2; animation: rise .8s cubic-bezier(.2,.7,.2,1) both; }
.hello-title { margin: 0; font: italic 900 clamp(52px, 6.8vw, 92px)/.86 var(--display); font-stretch: 125%; letter-spacing: -.035em; }
.hello-title > span { display: block; white-space: nowrap; }
.hello-title .tiny { display: inline-block; font-size: .36em; letter-spacing: 0; vertical-align: .95em; margin-right: .08em; color: var(--dim); position: relative; }
.hello-title .tiny::after { content: "(very)"; position: absolute; left: .1em; top: -1.15em; font: 800 .5em/1 var(--text); letter-spacing: .02em; color: var(--pink); transform: rotate(-8deg); white-space: nowrap; }
.hello-title .l2 { margin-top: .06em; }
.hello-title .huge { display: inline-block; font-size: 1.42em; line-height: .8; color: var(--gold); margin-right: .04em;
  text-shadow: .03em .03em 0 #ff5fa2, .06em .06em 0 #2a1d63; }
.hello-lede { max-width: 30em; margin: 26px 0 0; font-size: clamp(17px, 1.9vw, 20px); color: var(--dim); }
.hello-lede a { font-weight: 700; }
.hello-btns { display: flex; flex-wrap: wrap; gap: 18px 22px; margin-top: 32px; }

/* the arched window onto Tincture, with two of its people stepping out */
.portal { position: relative; display: block; aspect-ratio: 4 / 4.3; color: inherit; animation: rise .9s .15s cubic-bezier(.2,.7,.2,1) both; }
.portal-pane { position: absolute; inset: 0 9% 5% 9%; border-radius: 999px 999px 0 0; overflow: hidden;
  box-shadow: 0 0 0 8px #2a1d63, 0 0 0 12px var(--gold), 14px 16px 0 12px #00000055; }
.portal::before { content: ""; position: absolute; inset: -6% -4% 0; background: radial-gradient(closest-side, #ff9a3c3d, transparent); pointer-events: none; }
.portal-pane img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.portal-pane::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #0000 45%, #1a0c0699 100%); }
.portal-mark { position: absolute; left: 50%; top: 11%; width: 62%; transform: translateX(-50%); filter: drop-shadow(0 8px 14px #000a); z-index: 2; transition: transform .4s cubic-bezier(.3,1.6,.5,1); }
.portal-who { position: absolute; bottom: 0; height: 64%; width: auto; filter: drop-shadow(0 14px 18px #000b); z-index: 3; transition: transform .4s cubic-bezier(.3,1.6,.5,1); }
.portal-who.l { left: -5%; animation: peek .9s .5s cubic-bezier(.2,.7,.2,1) both; }
.portal-who.r { right: -7%; animation: peek-r .9s .65s cubic-bezier(.2,.7,.2,1) both; }
.portal:hover .portal-pane img { transform: scale(1.12); }
.portal:hover .portal-mark { transform: translateX(-50%) rotate(-3deg) scale(1.04); }
.portal:hover .portal-who.l { transform: translate(-10px, -8px) rotate(-3deg); }
.portal:hover .portal-who.r { transform: translate(10px, -8px) rotate(3deg); }

/* a starburst sticker, cut with a 16-point polygon */
.burst { position: absolute; z-index: 4; right: -2%; top: 2%; width: clamp(104px, 11vw, 132px); aspect-ratio: 1; display: grid; place-content: center; text-align: center;
  font: 800 12px/1.15 var(--text); color: var(--ink); background: var(--pink); transform: rotate(12deg);
  clip-path: polygon(50% 0, 59% 13%, 74% 5%, 77% 21%, 93% 21%, 88% 37%, 100% 46%, 89% 58%, 97% 72%, 81% 77%, 79% 93%, 64% 88%, 50% 100%, 38% 88%, 22% 94%, 20% 78%, 4% 73%, 11% 58%, 0 46%, 12% 36%, 7% 21%, 23% 21%, 26% 5%, 41% 13%);
  transition: transform .4s cubic-bezier(.3,1.6,.5,1); }
.burst b { display: block; font: italic 900 34px/1 var(--display); font-stretch: 125%; letter-spacing: -.03em; }
.portal:hover .burst { transform: rotate(-6deg) scale(1.08); }

/* pixel sparkles that blink on and off like sprites */
.spark { position: absolute; z-index: 1; width: 21px; height: 21px; animation: blink 2.4s steps(1) infinite; pointer-events: none; }
.spark.s1 { left: 47%; top: 4%; width: 28px; height: 28px; }
.spark.s2 { left: -10px; top: 46%; width: 15px; height: 15px; animation-delay: -.8s; }
.spark.s3 { left: 52%; bottom: 8%; width: 15px; height: 15px; animation-delay: -1.5s; animation-duration: 3.1s; }
.spark.s4 { right: 2%; bottom: 2%; animation-delay: -2s; animation-duration: 2.8s; }
@keyframes blink { 0%, 100% { opacity: 1; transform: scale(1); } 40% { opacity: 1; transform: scale(.55); } 60% { opacity: 0; } 80% { opacity: 1; transform: scale(.55); } }

/* ── ticker: a tilted band of what's on the bench ── */
.ticker-wrap { position: relative; z-index: 3; overflow: hidden; padding: 30px 0; margin: -30px 0; }
.ticker { position: relative; overflow: hidden; margin: 0 -3vw; padding: 14px 0 12px; background: var(--gold); color: var(--ink); transform: rotate(-1.6deg);
  box-shadow: 0 6px 0 #b77a10, 0 -6px 0 #2a1d63; }
.belt { display: flex; width: max-content; animation: belt 48s linear infinite; }
.belt span { display: inline-flex; align-items: center; gap: 22px; padding-right: 22px; font: italic 900 clamp(15px, 1.7vw, 19px)/1 var(--display); font-stretch: 125%; letter-spacing: -.01em; white-space: nowrap; text-transform: uppercase; }
.belt span::after { content: ""; width: 12px; height: 12px; background:
  linear-gradient(var(--ink), var(--ink)) 4px 0 / 4px 12px no-repeat, linear-gradient(var(--ink), var(--ink)) 0 4px / 12px 4px no-repeat; }
@keyframes belt { to { transform: translateX(-50%); } }

/* ── the board of games ── */
.shelf { position: relative; padding: clamp(72px, 10vw, 124px) 0 clamp(56px, 8vw, 96px); }
.shelf-head { max-width: 640px; }
.shelf-title, .note h2 { margin: 0; font: italic 900 clamp(38px, 6vw, 72px)/.92 var(--display); font-stretch: 125%; letter-spacing: -.03em; }
.shelf-head > p:last-child { margin: 18px 0 0; color: var(--dim); font-size: clamp(17px, 1.9vw, 19px); max-width: 32em; }

.board { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 56px 32px; margin-top: clamp(40px, 6vw, 72px); align-items: start; }
.g { position: relative; display: block; color: var(--star); text-decoration: none; }
.g h3 { margin: 4px 0 8px; font: italic 900 clamp(26px, 2.6vw, 32px)/1 var(--display); font-stretch: 125%; letter-spacing: -.02em; }
.g p, .g .g-text { display: block; margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--dim); }
.g-genre { display: block; font: 800 12.5px/1 var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.g-frame { display: block; overflow: hidden; }
.g-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.g-label { display: block; }

/* stickers: status labels slapped on at slightly wrong angles */
.sticker { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px 6px; font: 800 12px/1 var(--text); letter-spacing: .05em; text-transform: uppercase; color: var(--ink); background: var(--c, var(--teal));
  box-shadow: 0 -3px 0 var(--c, var(--teal)), 0 3px 0 var(--c, var(--teal)), 3px 0 0 var(--c, var(--teal)), -3px 0 0 var(--c, var(--teal)), 3px 6px 0 #0000004d;
  transform: rotate(var(--r, -3deg)); transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.sticker::before { content: ""; width: 6px; height: 6px; background: currentColor; }
.sticker.gold { --c: var(--gold); }
.sticker.teal { --c: var(--teal); --r: 2deg; }
.sticker.sky { --c: #8fd3ff; --r: -2deg; }
.sticker.leaf { --c: #9be37a; --r: 3deg; }
.sticker.pink { --c: #ff8fc2; --r: -4deg; }
.sticker.hot { --c: #ff5fa2; --r: 1.5deg; }
.g:hover .sticker { transform: rotate(calc(var(--r, -3deg) * -1.6)) scale(1.06); }

/* Tincture: the big one, a pixel-framed painting with the apprentice climbing out of it */
.g-tincture { grid-column: 1 / 8; grid-row: 1; margin-top: 40px; }
.g-tincture .g-frame { aspect-ratio: 16 / 11; background: #2a160c;
  box-shadow: 0 -8px 0 #ff9a3c, 0 8px 0 #ff9a3c, 8px 0 0 #ff9a3c, -8px 0 0 #ff9a3c, 16px 20px 0 #ff9a3c33; }
.g-tincture .g-frame img { object-position: 30% 50%; }
.g-pop { position: absolute; right: 2%; top: -64px; height: 78%; width: auto; max-height: 420px; filter: drop-shadow(0 14px 16px #000c); transform-origin: 50% 100%; transition: transform .45s cubic-bezier(.3,1.6,.5,1); pointer-events: none; }
.g-tincture .sticker { position: absolute; left: -14px; top: -18px; z-index: 2; font-size: 14px; padding: 9px 13px 8px; --r: -6deg; }
.g-tincture .g-label { position: relative; z-index: 2; width: min(78%, 480px); margin: -84px 0 0 32px; padding: 20px 22px 18px; color: #2b1606; background: #fff1d9;
  box-shadow: 0 -5px 0 #fff1d9, 0 5px 0 #fff1d9, 5px 0 0 #fff1d9, -5px 0 0 #fff1d9, 10px 14px 0 #00000059; transform: rotate(-1deg); transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.g-tincture .g-genre { color: #8a4a12; }
.g-tincture h3 { font-size: clamp(32px, 3.6vw, 44px); color: #2b1606; }
.g-tincture .g-text { color: #4a2c14; font-size: 16px; }
.g-go { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; min-height: 28px; font: italic 900 15px/1 var(--display); font-stretch: 125%; color: #b4410f; }
.g-go svg { width: 12px; height: 12px; transition: transform .2s steps(3); }
.g-tincture:hover { color: inherit; }
.g-tincture:hover .g-frame img { transform: scale(1.05); }
.g-tincture:hover .g-pop { transform: translateY(-14px) rotate(4deg); }
.g-tincture:hover .g-label { transform: rotate(0deg) translateY(-4px); }
.g-tincture:hover .g-go svg { transform: translateX(6px); }

/* Emberline: a dusk poster, taped up a little crooked */
.g-ember { grid-column: 8 / 13; grid-row: 1; transform: rotate(2.2deg); padding: 12px 12px 20px; background: #12333b; margin: 0 6px 0 18px;
  box-shadow: 0 0 0 2px #2c6b6f, 12px 16px 0 #00000066; transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.g-ember .g-frame { aspect-ratio: 5 / 4; }
.g-ember .g-frame img { object-position: 50% 30%; }
.g-ember .g-label { padding: 18px 8px 0; }
.g-ember .sticker { position: absolute; right: -14px; top: -16px; }
.g-ember p, .g-ember .g-text { color: #c5e4e0; }
.g-ember .g-genre { color: #8fc9c2; }
.g-ember:hover { color: var(--star); transform: rotate(0deg); }
.g-ember .g-go { color: var(--gold); }
.g-ember:hover .g-frame img { transform: scale(1.05); }
.g-ember:hover .g-go svg { transform: translateX(6px); }
.tape { position: absolute; z-index: 3; width: 74px; height: 24px; background: #fff6e6b8; box-shadow: 0 1px 0 #0002; }
.tape.t1 { left: -18px; top: -8px; transform: rotate(-32deg); }
.tape.t2 { right: -18px; top: -8px; transform: rotate(28deg); }
.g-ember .tape.t2 { display: none; }
.g-ember .tape.t1 { left: 22%; top: -14px; transform: translateX(-50%) rotate(-5deg); }

.scribble { grid-column: 8 / 13; grid-row: 1; align-self: end; margin: 0 0 36px 8px; font: italic 900 21px/1.15 var(--display); font-stretch: 125%; letter-spacing: -.01em; color: var(--pink); transform: rotate(-4deg); }
.scribble svg { display: block; width: 45px; height: 35px; margin-bottom: 10px; animation: nudge 1.4s steps(2) infinite; }
@keyframes nudge { 50% { transform: translateX(-8px); } }

/* Future Fever: a sunny postcard, the one bright thing on the board */
.g-fever { grid-column: 8 / 13; grid-row: 2; margin: 30px 0 0 18px; padding: 12px 12px 18px; background: #fdf8ec; color: #1d2a3a; transform: rotate(-2.4deg);
  box-shadow: 12px 14px 0 #00000059; transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.g-fever .g-frame { aspect-ratio: 440 / 327; }
.g-fever .g-label { position: relative; padding: 16px 8px 0; }
.g-fever h3 { color: #12375a; }
.g-fever p { color: #3a4a5c; }
.g-fever .g-genre { color: #2e6c8f; }
.g-fever .sticker { position: absolute; right: 6px; top: -30px; }
.postmark { position: absolute; z-index: 2; left: 18px; top: 18px; width: 86px; height: 86px; display: grid; place-content: center; text-align: center; border-radius: 50%;
  font: 800 11px/1.15 var(--text); letter-spacing: .08em; text-transform: uppercase; color: #fdf8ec; border: 2px dashed #fdf8eccc; transform: rotate(-14deg); background: #12375a66; }
.g-fever:hover { transform: rotate(0deg) translateY(-4px); }

/* Bloomdrift: a domed window onto its sky, five islands bobbing out of step, Pip on patrol, petals and motes adrift */
.g-bloom { grid-column: 1 / 8; grid-row: 2; }
.bloom-sky { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 999px 999px 0 0 / 60% 60% 0 0;
  background: #f3b79a url(/assets/bloom-sky.webp) center / cover; background-image: image-set(url(/assets/bloom-sky.webp) 1x, url(/assets/bloom-sky@2x.webp) 2x);
  box-shadow: 0 0 0 6px #2a1d63, 0 0 0 10px #9be37a, 14px 18px 0 10px #00000059; }
.bloom-sky::after { content: ""; position: absolute; inset: auto 0 0; height: 28%; background: linear-gradient(#f6c9a400, #f8d2b0aa); pointer-events: none; }
.isle { position: absolute; display: block; height: auto; animation: bob var(--t, 6s) ease-in-out var(--d, 0s) infinite; filter: drop-shadow(0 18px 14px #3a1d4a55); }
.isle img { display: block; width: 100%; height: auto; }
.isle.amber { left: 4%; top: 46%; width: 8%; --t: 7.5s; --d: -2s; filter: saturate(.75) brightness(1.04) drop-shadow(0 8px 8px #3a1d4a33); opacity: .9; }
.isle.frost { left: 13%; top: 16%; width: 10%; --t: 6.8s; --d: -4s; filter: saturate(.8) drop-shadow(0 10px 10px #3a1d4a44); }
.isle.moon { right: 7%; top: 9%; width: 13%; --t: 8s; --d: -1s; }
.isle.lotus { right: 17%; top: 38%; width: 18%; --t: 6.4s; --d: -3s; }
.isle.meadow { left: 31%; top: 9%; width: 27%; --t: 5.2s; z-index: 1; }
.fall { position: absolute; left: 72.5%; top: 63%; width: 5%; height: 25%; border-radius: 40%; mix-blend-mode: screen; opacity: .75;
  background: repeating-linear-gradient(180deg, #ffffff00 0 5px, #e8fbffcc 5px 7px, #ffffff00 7px 13px); background-size: 100% 26px;
  -webkit-mask: linear-gradient(#000 40%, transparent); mask: linear-gradient(#000 40%, transparent); animation: fall .7s linear infinite; }
@keyframes fall { to { background-position: 0 26px; } }
.g-pip { position: absolute; z-index: 2; left: 57%; top: 18%; width: 11%; height: auto; animation: patrol 9s ease-in-out infinite; }
@keyframes patrol { 0%, 100% { transform: translate(0, 0) rotate(4deg); } 25% { transform: translate(-18%, -16%) rotate(-3deg); } 50% { transform: translate(-4%, 8%) rotate(5deg); } 75% { transform: translate(14%, -6%) rotate(-2deg); } }
.petal { position: absolute; z-index: 3; left: -6%; width: 3.2%; height: auto; opacity: 0; animation: drift var(--t, 12s) linear var(--d, 0s) infinite; }
.petal.p1 { top: 22%; --t: 13s; --d: -2s; }
.petal.p2 { top: 50%; --t: 11s; --d: -7s; width: 2.6%; }
.petal.p3 { top: 70%; --t: 15s; --d: -11s; }
.petal.p4 { top: 34%; --t: 12s; --d: -5s; width: 2.4%; }
.petal.p5 { top: 8%; --t: 14s; --d: -9s; width: 2.8%; }
@keyframes drift { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 8% { opacity: .95; } 50% { transform: translate(var(--half, 360px), 40px) rotate(220deg); } 92% { opacity: .9; } 100% { opacity: 0; transform: translate(var(--full, 720px), -20px) rotate(420deg); } }
.motes { position: absolute; inset: 0; z-index: 2; pointer-events: none; animation: rise-motes 10s linear infinite;
  background-image: radial-gradient(circle, #fff7c8 0 2px, #ffe68a55 3px, transparent 6px), radial-gradient(circle, #d6fff5 0 2px, #9df5e055 3px, transparent 6px), radial-gradient(circle, #fff7c8 0 1.5px, transparent 5px), radial-gradient(circle, #ffffff 0 1.5px, transparent 5px);
  background-size: 190px 170px, 240px 210px, 130px 150px, 310px 260px; background-position: 20px 30px, 120px 90px, 60px 10px, 200px 140px; }
@keyframes rise-motes { to { background-position: 20px -140px, 120px -120px, 60px -140px, 200px -120px; } }
.g-bloom .g-label { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 4px 28px; align-items: start; margin-top: 34px; }
.g-bloom .g-label .sticker { position: absolute; right: 16px; top: -58px; }
.g-bloom .g-genre, .g-bloom h3 { grid-column: 1; }
.g-bloom .g-label p { grid-column: 2; grid-row: 1 / 3; max-width: 30em; }
.g-bloom:hover .g-pip { animation-duration: 3s; }
@keyframes bob { 50% { transform: translateY(-12px); } }

/* Orb Blast: an app icon slapped on like a sticker, its orb sneaking out */
.g-blast { grid-column: 1 / 5; grid-row: 3; padding-top: 20px; }
.g-icon { display: block; width: 72%; margin: 0 auto; border-radius: 22%; overflow: hidden; transform: rotate(-5deg);
  box-shadow: 0 0 0 7px #fff6e6, 10px 14px 0 7px #00000066; transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.g-icon img { width: 100%; }
.g-guy { position: absolute; z-index: 2; left: 3%; top: 30px; width: 21%; max-width: 88px; transform: rotate(-12deg); transition: transform .4s cubic-bezier(.3,1.6,.5,1); }
.g-blast:hover .g-icon { transform: rotate(3deg) scale(1.03); }
.g-blast:hover .g-guy { transform: translate(-14px, -22px) rotate(-30deg); }
.g-blast .g-label { margin-top: 34px; }
.g-blast .sticker { margin-bottom: 14px; }

/* Orb Rush: a slanted racing stripe with speed lines */
.g-rush { grid-column: 5 / 13; grid-row: 3; display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; padding: 40px 0 0 24px; }
.g-rush .g-frame { aspect-ratio: 480 / 366; transform: skewX(-7deg); box-shadow: 0 0 0 4px #ff5fa2, 12px 14px 0 4px #ff5fa233; position: relative; }
.g-rush .g-frame img { transform: skewX(7deg) scale(1.1); }
.g-rush .g-frame::after { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .2s;
  background: repeating-linear-gradient(170deg, transparent 0 22px, #ffffff38 22px 24px, transparent 24px 60px); animation: whoosh .5s linear infinite; }
.g-rush:hover .g-frame::after { opacity: 1; }
.g-rush:hover .g-frame img { transform: skewX(7deg) scale(1.2) translate(-3%, 2%); }
@keyframes whoosh { to { background-position: -120px 20px; } }
.g-rush .g-label { margin-top: 0; max-width: 26em; }
.g-rush h3 { font-size: clamp(30px, 3.4vw, 42px); }
.g-rush .sticker { margin-bottom: 14px; }

/* ── house rules: a paper note pinned under the board ── */
.rules-sec { padding: clamp(24px, 4vw, 48px) 0 clamp(72px, 10vw, 120px); }
.studio { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 4vw, 56px); align-items: start; }
.studio .workshop { margin-top: 120px; }
.workshop { margin: 0; transform: rotate(1.2deg); }
.workshop-frame { display: block; overflow: hidden; border-radius: 999px 999px 0 0 / 52% 52% 0 0; background: #15113a;
  box-shadow: 0 0 0 6px #2a1d63, 0 0 0 12px var(--gold), 16px 20px 0 12px #00000059, 0 0 90px 20px #ffc94a1f; }
.workshop-frame img { width: 100%; height: auto; image-rendering: auto; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.workshop:hover .workshop-frame img { transform: scale(1.04); }
.workshop figcaption { margin: 26px 0 0; font: italic 900 15px/1.3 var(--display); font-stretch: 125%; color: var(--dim); text-align: center; }
.studio .note { margin: 0; }
.note { position: relative; max-width: 880px; margin: 0 auto; padding: clamp(32px, 5vw, 56px) clamp(22px, 5vw, 60px) clamp(28px, 4vw, 44px); color: #1d1640; background: #fff6e6;
  background-image: repeating-linear-gradient(180deg, transparent 0 33px, #2a1d6312 33px 34px);
  box-shadow: 0 -6px 0 #fff6e6, 0 6px 0 #fff6e6, 6px 0 0 #fff6e6, -6px 0 0 #fff6e6, 18px 22px 0 #00000066; transform: rotate(-.8deg); }
.note h2 { color: #1d1640; font-size: clamp(36px, 5.4vw, 62px); text-wrap: balance; }
.note-intro { margin: 16px 0 0; max-width: 34em; font-size: clamp(17px, 1.9vw, 19px); color: #3d3470; }
.rules { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 26px; }
.rules li { display: grid; grid-template-columns: 52px 1fr; gap: 18px; align-items: start; padding-top: 26px; border-top: 3px dashed #2a1d6326; }
.rules li:first-child { border-top: 0; padding-top: 0; }
.rules svg { width: 52px; height: 52px; padding: 9px; color: var(--ink); background: var(--gold); box-shadow: 0 -3px 0 var(--gold), 0 3px 0 var(--gold), 3px 0 0 var(--gold), -3px 0 0 var(--gold), 4px 6px 0 #2a1d6340; }
.rules li:nth-child(2) svg { background: var(--teal); box-shadow: 0 -3px 0 var(--teal), 0 3px 0 var(--teal), 3px 0 0 var(--teal), -3px 0 0 var(--teal), 4px 6px 0 #2a1d6340; transform: rotate(3deg); }
.rules li:nth-child(3) svg { background: var(--pink); box-shadow: 0 -3px 0 var(--pink), 0 3px 0 var(--pink), 3px 0 0 var(--pink), -3px 0 0 var(--pink), 4px 6px 0 #2a1d6340; transform: rotate(-3deg); }
.rules h3 { margin: 2px 0 6px; font: italic 900 clamp(20px, 2.2vw, 24px)/1.1 var(--display); font-stretch: 125%; letter-spacing: -.015em; color: #1d1640; }
.rules p { margin: 0; color: #3d3470; font-size: 16px; }
.note a { color: #8a1f55; font-weight: 700; }
.note a:hover { color: #c2185b; }
.note :focus-visible { outline-color: #2a1d63; }
.sig { display: flex; align-items: center; gap: 14px; justify-content: flex-end; margin: 34px 0 0; font: italic 900 20px/1.1 var(--display); font-stretch: 125%; color: #1d1640; transform: rotate(-2deg); }
.sig img { width: 48px; height: 48px; flex: none; }
.sig small { display: block; margin-top: 4px; font: 700 13px/1 var(--text); color: #5a5088; }
.note .tape.t1 { left: -22px; top: -10px; }
.note .tape.t2 { right: -22px; top: -10px; }

/* ── footer: a pixel town at night, windows still lit ── */
.home .foot { position: relative; border-top: 0; padding-top: 0; background: #17123a; overflow-x: clip; }
.town { position: absolute; top: 0; left: calc(50% - max(50%, 400px)); display: block; width: max(100%, 800px); height: auto; transform: translateY(-99%); }
.home .foot .wrap { padding-top: 34px; }
.town .blink { animation: lights 7s steps(1) infinite; }
.town .lamp { animation: lights 2s steps(1) infinite; }
@keyframes lights { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.egg { position: relative; flex-basis: 100%; }
.egg summary { display: inline-flex; align-items: center; min-height: 44px; list-style: none; font: italic 900 13px/1 var(--display); font-stretch: 125%; letter-spacing: .04em; color: var(--mute); }
.egg summary::-webkit-details-marker { display: none; }
.egg summary::before { content: ""; width: 6px; height: 6px; margin-right: 10px; background: var(--gold); animation: lights 1.6s steps(1) infinite; }
.egg summary:hover { color: var(--star); }
.egg p { margin: 0 0 4px; color: var(--dim); }
.egg p svg { display: inline-block; width: 10px; height: 10px; vertical-align: 1px; }

/* ── tablets and phones ── */
@media (max-width: 960px) {
  .hello-grid { grid-template-columns: 1fr; }
  .portal { width: 100%; max-width: 520px; margin: 0 auto; }
  .spark.s1 { left: auto; right: 6%; top: 0; }
  .spark.s3 { left: 8%; bottom: 38%; }
  .board { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 64px 28px; }
  .g-tincture { grid-column: 1 / -1; grid-row: auto; }
  .scribble { display: none; }
  .studio { grid-template-columns: minmax(0, 1fr); gap: 64px; }
  .studio .workshop { width: min(calc(100% - 28px), 480px); margin: 0 auto; }
  .g-ember { grid-column: 1 / 4; grid-row: auto; margin: 0; }
  .g-fever { grid-column: 4 / 7; grid-row: auto; margin: 40px 0 0; }
  .g-bloom { grid-column: 1 / -1; grid-row: auto; }
  .g-blast { grid-column: 1 / 4; grid-row: auto; }
  .g-rush { grid-column: 4 / 7; grid-row: auto; grid-template-columns: 1fr; gap: 28px; padding: 20px 0 0; }
}
@media (max-width: 640px) {
  .hello-title { font-size: min(13.2vw, 64px); }
  .hello-title .huge { font-size: 1.3em; }
  .hello-btns { gap: 18px 16px; }
  .burst { width: 96px; right: 0; top: -2%; font-size: 11px; }
  .burst b { font-size: 28px; }
  .ticker { transform: rotate(-2.4deg); }
  .board { grid-template-columns: minmax(0, 1fr); gap: 64px; }
  .g-tincture, .g-ember, .g-fever, .g-bloom, .g-blast, .g-rush { grid-column: 1; margin-left: 0; margin-right: 0; }
  .g-tincture { margin-top: 56px; }
  .g-tincture .g-frame { aspect-ratio: 4 / 3.2; }
  .g-pop { height: 74%; top: -52px; right: -2%; }
  .g-tincture .g-label { width: auto; margin: -40px 10px 0 14px; }
  .g-ember { margin: 0 8px; transform: rotate(1.4deg); }
  .g-fever { margin: 0 8px; transform: rotate(-1.4deg); }
  .bloom-sky { aspect-ratio: 4 / 3.4; border-radius: 999px 999px 0 0 / 50% 50% 0 0; margin: 0 10px; }
  .isle.amber { left: 2%; top: 58%; width: 11%; }
  .isle.frost { left: 6%; top: 24%; width: 15%; }
  .isle.moon { right: 4%; top: 14%; width: 17%; }
  .isle.lotus { right: 6%; top: 50%; width: 22%; }
  .isle.meadow { left: 25%; top: 10%; width: 40%; }
  .g-pip { left: 62%; top: 30%; width: 15%; }
  .petal { width: 5%; }
  .g-bloom .g-label { display: block; margin-top: 30px; }
  .g-bloom .g-label .sticker { position: static; margin-bottom: 14px; }
  .g-blast { padding-top: 10px; }
  .g-icon { width: 54%; margin: 0 6% 0 auto; }
  .g-guy { left: auto; right: 54%; top: 0; width: 20%; }
  .g-blast .g-label { margin-top: 30px; }
  .g-rush .g-frame { aspect-ratio: 4 / 3; margin: 0 12px; }
  .note { transform: rotate(-.5deg); margin: 0 4px; }
  .rules li { grid-template-columns: 38px 1fr; gap: 16px; }
  .rules svg { width: 38px; height: 38px; padding: 6px; margin-top: 4px; }
  .sig { justify-content: flex-start; }
  .spark.s2 { left: 2px; }
  .g-tincture .sticker { left: -4px; }
}

/* footer links are small text: give them a full-size tap target */
.home .foot nav a { display: inline-flex; align-items: center; min-height: 44px; }