@font-face { font-family:Silver; src:url(art/Silver.woff2) format("woff2"); font-display:swap }

/* game tokens: GardenRuntimeVisualProfile */
:root {
  --text:#ebe0cc; --dim:#b9ad99; --gold:#f7c44c; --potion:#b987ff; --rep:#ff5c4a; --night:#0d0b1c; --plate:#0d0b1c; --edge:#e8b85a;
  --outline:#13091c; --seal:#8c1d16; --teal:#0c686f; --orange:#dc7014; --stripe:#ffbe37;
  --s:3; --c:2;
  /* Silver draws on a 100-unit pixel grid at 1900 upm: only multiples of 19px are crisp and even, so every size here is one.
     Its ink sits above the middle of the line box (hhea 1200/-900, caps 900).
     Two font pixels down (2/19em) centres mixed-case text in a frame and stays on the grid. */
  --silver-down:calc(2em / 19);
}
* { box-sizing:border-box }
html, body { overflow-x:clip }
html { background:var(--night) }
body { margin:0; color:var(--text); font:38px/1 Silver,monospace; letter-spacing:0; font-kerning:none; -webkit-font-smoothing:none; font-smooth:never }
a { color:inherit; text-decoration:none }
img { display:block; image-rendering:pixelated }
p, h1, figure { margin:0 }
[data-release="out"] .if-soon, [data-release="soon"] .if-out { display:none }
.t { position:relative; top:var(--silver-down); display:block }
.red { color:var(--rep); font-weight:400 } .gold { color:var(--gold); font-weight:400 } .pur { color:var(--potion); font-weight:400 }
:focus-visible { outline:3px solid var(--gold); outline-offset:4px }

/* plate: the game's dark box */
.plate { position:relative; z-index:6; width:fit-content; max-width:calc(100% - 28px); margin:0 auto; background:var(--plate); border:4px solid var(--edge); box-shadow:8px 8px 0 #000; padding:.26em .6em; font-size:57px; line-height:1; text-align:center }

/* steam button: game's gold panel, ornaments on both sides */
.steam { display:inline-block; position:relative; border:24px solid transparent; border-image:url(art/panel_gold.png) 24 fill stretch; image-rendering:pixelated; padding:6px 14px; font-size:57px; line-height:1; color:var(--gold); white-space:nowrap; text-shadow:3px 3px 0 var(--outline) }
.steam::before, .steam::after { content:""; position:absolute; top:50%; width:102px; height:102px; margin-top:-51px; background:url(art/selector.png); image-rendering:pixelated; visibility:hidden }
.steam::before { right:calc(100% + 34px) }
.steam::after { left:calc(100% + 34px); transform:scaleX(-1) }
.steam:hover, .steam:focus-visible { color:#fff6dc; outline:0 }
.steam:hover::before, .steam:hover::after, .steam:focus-visible::before, .steam:focus-visible::after { visibility:visible }
.steam:active .t { top:calc(var(--silver-down) + 3px) }

/* joins: every section dissolves into the one above through a hard-pixel Bayer band.
   The masks are inline: a CSS mask file is blocked when the page opens from file://, which left a hard cut. */
:root { --band:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAADYCAYAAABIi6UEAAABqElEQVR42u3cwa7iQAxEUTfi/385LFlFpEOUtO1zlxHKouTiqtCbGRGxxZcR15P6/a+AgAAAAIDLGSe2TKvPmxoCArC4xcIvh/vv9yXNYgBsMVuMxQDg5i3Gbr6kWQxA3i3muS9pFgNgi9liLAYAtpgtxmIAwGIsxmIAWIzFIKATP9r7od4FqRiLsZiKAQCLsRiL2WK2mIqxGIupGP7/73Ha2s0FqRiLsZiKNdxis8+Xfb8LUjEWYzEVs8VsMRVjMRZjMRV7cIu1fe6CVIzFWEzFWIzFVIzF1IrFVIzFWEzFWIzFVAwsxmIq9pTFjlSx1eddkIqxGIupWIEtNmuH2efLvt8FqRiLsZiK2WK2mIqxGIuxmIol2mJlPu+CVIzFWEzFCmwxFwQBsRiLqVg9i81un3Tvd0EqxmIspmK2mAsSEIuxGIupGIu5IAGxGIupGFjMBQnoLt7+9JfFVIzFXJCASm6xtv8Mk8VUjMVckIBsMVtMxcBiLkhAibZYyc+7IAGxmAsSkIAEJCABQUACssVsMRWzxVyQgCAgAQlIQAISkIAEBAH94gN07LYqHn2bMgAAAABJRU5ErkJggg==); --band-small:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAAB4CAYAAABRl7TqAAAA9klEQVR42u3ZMQqAQAxE0US8/5W1tBORBU3yfimLxZDZTzQj4oiLjPWUfv8WEBAAAACwnHyxy4w6b9UQEICfW4ytbs67pFkMQNFdzHOXNIsBYDEWYzEAYDEWY7EGH+19qDdBKsZiLKZiPX49s5sJUjEWYzEV67GLjX1uglSMxVhMxViMxVSMxdSKxVSMxVhMxViMxVQMLMZiKvaVxZ5UcdR5E6RiLMZiKtZgFxtrNxOkYizGYirWYBczQRAQi7GYirGYCRIQi7EYi6kYi5kgARVh97uZxVSMxUyQgFruYuxmglSMxUyQgAQkIAEJCAISkIAEJKCCnOxd+Zw/g4JDAAAAAElFTkSuQmCC) }
.join { position:relative; margin-top:-216px; -webkit-mask:var(--band) 0 0/72px 216px repeat-x, linear-gradient(#000 0 0) 0 216px/100% calc(100% - 216px) no-repeat; mask:var(--band) 0 0/72px 216px repeat-x, linear-gradient(#000 0 0) 0 216px/100% calc(100% - 216px) no-repeat }
main > section { z-index:1 }

/* 1. menu: the game's own layers */
.menu { position:relative; height:100vh; height:100svh; min-height:600px; overflow:hidden; background:#7fb6b4; z-index:0 }
.layer { position:absolute; left:var(--x,0); bottom:0; width:calc(640px * var(--s)); height:calc(360px * var(--s)); background-size:calc(640px * var(--s)) calc(360px * var(--s)); image-rendering:pixelated; will-change:transform }
.sky { background-image:url(art/sky.png) }
.clouds { left:0; width:100%; background-repeat:repeat-x }
.c1 { background-image:url(art/clouds1.png) } .c2 { background-image:url(art/clouds2.png) } .c3 { background-image:url(art/clouds3.png) }
.front { background-image:url(art/front.png); background-size:calc(3840px * var(--s)) calc(360px * var(--s)) }
.door { background-image:url(art/door.png); background-size:calc(2560px * var(--s)) calc(360px * var(--s)); background-repeat:no-repeat; visibility:hidden }
.menu .logo { position:absolute; left:var(--lx,50%); top:3%; width:calc(274px * var(--logo,2)); height:calc(186px * var(--logo,2)); margin-left:calc(-137px * var(--logo,2)); filter:drop-shadow(calc(2px * var(--logo,2)) calc(2px * var(--logo,2)) 0 var(--outline)) }
.menu .buy { position:absolute; left:0; right:0; bottom:calc(5% + 216px); text-align:center; z-index:3 }

/* 2. playable table */
.play { background:url(art/bg_table.jpg); padding:250px 18px 290px }
.board { position:relative; max-width:1240px; margin:34px auto 0; height:calc(138px * var(--c) * 2 + 90px) }
.card { position:absolute; left:0; top:0; width:calc(106px * var(--c)); height:calc(138px * var(--c)); cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; perspective:calc(300px * var(--c)) }
.card.wide { width:calc(138px * var(--c)) }
.card .face { position:relative; display:block; width:100%; height:100%; transform-style:preserve-3d; filter:drop-shadow(calc(1px * var(--c)) calc(2px * var(--c)) 0 rgba(0,0,0,.55)) }
.card img { width:100%; height:100%; pointer-events:none }
.card .name { position:absolute; left:0; right:0; top:calc(1px * var(--c)); text-align:center; white-space:nowrap; overflow:hidden; font-size:calc(19px * var(--c)); line-height:1; letter-spacing:0; color:#fff; text-shadow:calc(1px * var(--c)) calc(1px * var(--c)) 0 var(--outline); pointer-events:none }
.card:hover .name, .card:focus-visible .name, .card.lift .name { overflow:visible; left:50%; right:auto; transform:translateX(-50%); z-index:2 }
.card.lift .face { filter:drop-shadow(calc(3px * var(--c)) calc(6px * var(--c)) 0 rgba(0,0,0,.55)) }
.card.target::after { content:""; position:absolute; inset:-5px; border:4px dashed var(--gold); pointer-events:none }
.card.picked::after { content:""; position:absolute; inset:-5px; border:4px solid var(--gold); pointer-events:none }
.card.busy { cursor:progress }
/* touch: a wall of cards must not trap the scroll, so the shelf swipes and tapped cards jump */
.board.swipe { overflow:auto hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none }
.board.swipe::-webkit-scrollbar { display:none }
.board.swipe .card { touch-action:pan-x pan-y; cursor:pointer }
.pix { position:absolute; width:calc(5px * var(--c)); height:calc(5px * var(--c)); pointer-events:none; z-index:90 }

/* full-bleed footage: blends at both ends through the joins */
.full { position:relative; background:var(--night); overflow:hidden; padding:270px 0 240px; min-height:min(56vw,1000px) }
.full video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; image-rendering:pixelated }
.full > .plate { z-index:6 }
#busy { display:flex; align-items:flex-end; justify-content:center }

/* 4. royals */
.royals { background:var(--night); padding:250px 0 240px }
.trio { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:-40px }
.trio figure { position:relative; aspect-ratio:760/520; overflow:hidden; background:var(--night) }
.trio figure + figure::before { content:""; position:absolute; z-index:3; top:-5%; bottom:-5%; left:-14px; width:28px; background:repeating-linear-gradient(0deg,var(--stripe) 0 6px,var(--orange) 6px 12px,var(--teal) 12px 18px); transform:skewX(-6deg) }
.trio video { width:100%; height:100%; object-fit:cover; image-rendering:pixelated }
.trio img { position:absolute; left:50%; bottom:-34%; transform:translateX(-50%); width:auto; height:calc(176px * var(--c)) }

/* 5/6. boards over footage */
.visitors { padding-bottom:280px }
.shelf { min-height:min(46vw,680px) }
.rack { background:url(art/bg_table.jpg) 420px 0; padding:256px 18px 280px }
#shelf { --c:1; max-width:1320px; margin-top:34px }
.board.low { max-width:1320px; margin-top:calc(min(30vw,420px)); z-index:5 }

/* 7. letter */
.letter { background:url(art/bg_ink.jpg); padding:260px 18px 300px; text-align:center; overflow:hidden }
.scroll { position:relative; width:372px; height:627px; margin:0 auto 34px; background:url(art/parchment.png) 0 0/100% 100%; image-rendering:pixelated; color:var(--seal); line-height:.95 }
.stamp { position:absolute; left:34px; top:70px; width:244px; padding:6px 0; border:5px solid #a81f18; font-size:76px; line-height:1; color:#a81f18; text-shadow:1px 0 0 #a81f18, 0 1px 0 #a81f18; transform:rotate(-7deg) }
.scroll .l1 { position:absolute; left:40px; right:40px; top:236px; font-size:57px; line-height:1 }

/* 8. end */
.last { background:url(art/bg_table.jpg) 900px 0; padding:270px 18px 190px; text-align:center }
.last .logo2 { width:548px; height:372px; margin:0 auto 26px; max-width:100%; object-fit:contain }
.links { display:flex; justify-content:center; gap:44px; margin-top:32px; font-size:57px; white-space:nowrap }
.links a { padding:4px 6px; text-shadow:3px 3px 0 #08060f }
.links a:hover, .links a:focus-visible { color:var(--gold); outline:0; text-decoration:underline; text-decoration-thickness:3px; text-underline-offset:6px }
footer { position:relative; z-index:2; margin-top:-120px; padding:132px 32px 20px; background:var(--night); color:var(--dim); font-size:38px; line-height:1; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:baseline; gap:6px 20px; -webkit-mask:var(--band-small) 0 0/72px 120px repeat-x, linear-gradient(#000 0 0) 0 120px/100% calc(100% - 120px) no-repeat; mask:var(--band-small) 0 0/72px 120px repeat-x, linear-gradient(#000 0 0) 0 120px/100% calc(100% - 120px) no-repeat }
footer .credit { justify-self:end; font-size:19px; color:#7d7566 }
footer a:hover, footer a:focus-visible { color:var(--gold) }

/* phone */
.stick { display:none }
@media (max-width:1099px) { :root { --c:1 } .board { height:calc(138px * 2 + 90px) } }
@media (max-width:760px) {
  .join { margin-top:-120px; -webkit-mask:var(--band-small) 0 0/72px 120px repeat-x, linear-gradient(#000 0 0) 0 120px/100% calc(100% - 120px) no-repeat; mask:var(--band-small) 0 0/72px 120px repeat-x, linear-gradient(#000 0 0) 0 120px/100% calc(100% - 120px) no-repeat }
  .plate { font-size:38px }
  .menu .buy { display:none }
  .play { padding:150px 12px 160px }
  .steam { font-size:38px; border-width:16px; padding:3px 8px }
  .steam::before, .steam::after { display:none }
  .full { padding:150px 0 120px; min-height:0 }
  #busy { min-height:620px }
  .royals { padding:150px 0 130px }
  .trio { grid-template-columns:minmax(0,1fr); margin-top:0 }
  .trio figure + figure::before { display:none }
  .trio img { display:none }
  .board.low { margin-top:240px }
  .visitors { padding-bottom:160px }
  .shelf { min-height:420px }
  .rack { padding:150px 0 170px }
  .rack .plate { margin:0 auto }
  #shelf { max-width:none; margin-top:24px }
  .letter { padding:160px 9px 180px }
  .last { padding:160px 12px 170px }
  .links { font-size:38px; gap:26px }
  .last .steam { display:none }
  .last .logo2 { width:274px; height:186px }
  footer { grid-template-columns:minmax(0,1fr); justify-items:center; text-align:center; padding-bottom:104px }
  footer .credit { justify-self:center }
  .stick { display:block; position:fixed; left:0; right:0; bottom:0; z-index:50; background:var(--night); border-top:4px solid var(--edge); text-align:center; padding:6px 0 10px }
}
@media (prefers-reduced-motion:reduce) { .join { scroll-behavior:auto } }

.home { position:absolute; top:20px; left:24px; z-index:60; color:#f4ead2; font-size:26px; line-height:1; text-decoration:none; text-shadow:2px 0 #000,-2px 0 #000,0 2px #000,0 -2px #000 }
.home:hover, .home:focus-visible { color:var(--gold) }