/* Juicebox, the home page (the whole site: one page; a game opens in place over it at #game/<id>) */
/* Concept "Studio": unique through what only Juicebox has (the juice letters, the games' own art and colours, juice as one
   quiet detail), professional through restraint: calm grey, one type family, lots of room, no props, no stat strips, no
   scroll effects. The Stake games sit on a stage you switch between; the room takes a hint of each game's colour. */
:root{ --punch:#f0324b; --ink:#121214; --grey:#efefec; --line:rgba(18,18,20,.1); --muted:#6b6b70; --pine:#ffd23f; --acc:#ffd23f;
  --head:"Inter Tight","Helvetica Neue",Arial,sans-serif; --body:"Inter",system-ui,sans-serif; --max:1240px; --gut:clamp(18px,4vw,48px); }
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:#fff; color:var(--ink); font:16px/1.6 var(--body); -webkit-font-smoothing:antialiased; }
a{ color:inherit; } button{ font:inherit; color:inherit; cursor:pointer; }
img, canvas{ -webkit-user-drag:none; } canvas{ pointer-events:none; }
/* nothing can be selected, dragged, long-pressed for a menu or copied (site.js and the 404 also block copy, cut,
   right-click and drag), except the email address, so a casino can copy it. Only deters casual copying. */
html{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; }
::selection{ background:transparent; }
.mail, .mail *{ -webkit-user-select:text; user-select:text; -webkit-touch-callout:default; } .mail::selection{ background:var(--pine); color:var(--ink); }
.wm{ position:relative; display:block; aspect-ratio:852/283; }
.wm .fallback{ display:block; width:100%; height:100%; }
.wm > *, .wm .fc > *{ position:absolute; inset:0; width:100%; height:100%; }
.skip{ position:absolute; left:12px; top:-60px; z-index:100; padding:10px 16px; border-radius:10px; background:var(--ink); color:#fff; font:600 14px/1 var(--head); text-decoration:none; } .skip:focus{ top:12px; }
.wrap{ max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); }
.eyebrow{ margin:0; font:600 12px/1 var(--head); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
h2{ margin:0; font:800 clamp(40px, 4vw + 14px, 80px)/.95 var(--head); letter-spacing:-.045em; }


/* hero: the letters on calm grey, nothing else competing */
/* the first screen is only as tall as it needs: the letters, the line, the buttons, then the tiles standing in the juice */
.hero{ --tw:clamp(130px, min(15vw, 26svh), 230px); --ch:clamp(300px, 58svh, 560px); position:relative; background:var(--grey); display:grid; align-content:start; padding:clamp(48px,7svh,88px) 0 calc(var(--ch) * .55); overflow:hidden; isolation:isolate; }
/* the cast: each game's hero character wading in the juice (the front wave over their legs); they blink, cheer when
   the pointer is on them, and lead to their game on the stage */
.cast{ position:absolute; z-index:1; left:0; right:0; bottom:0; height:0; }
.cast a{ position:absolute; bottom:calc(var(--ch) * var(--k, 1) * -.2 * var(--h, 1) * var(--h, 1)); left:var(--x); height:calc(var(--ch) * var(--k, 1) * var(--h, 1)); aspect-ratio:var(--ar); translate:-50% 0; } /* no entrance: she's simply there (user) */
.cast img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:bottom; visibility:hidden; filter:drop-shadow(0 20px 30px rgba(0,0,0,.18)); }
.cast .idle{ visibility:visible; }
.cast a.blink .idle{ visibility:hidden; } .cast a.blink .bl{ visibility:visible; }
.cast a:hover .idle, .cast a:hover .bl{ visibility:hidden !important; } .cast a:hover .ch{ visibility:visible; }
.cast a .bob{ position:absolute; inset:0; animation:bob 4.5s ease-in-out infinite; animation-delay:var(--d); }
/* phones: the character stands under the buttons, not beside them */
/* no room beside the words: the characters stand under the buttons (set by the page's script) */
.hero.below{ padding-bottom:calc(var(--ch) * .8 + 24px); }
@media (max-width:700px){ .hero{ --ch:min(56svh, 380px); } }
@keyframes bob{ 50%{ translate:0 6px; } }
.hero .wrap{ display:grid; justify-items:center; text-align:center; }
.hero .wm{ width:min(820px, 100%); }
.hero .pitch{ margin:clamp(18px,2.6vh,32px) 0 0; max-width:30ch; font:600 clamp(20px, 1vw + 15px, 28px)/1.25 var(--head); letter-spacing:-.015em; text-wrap:balance; }
.hero .ctas{ display:flex; align-items:center; gap:26px; margin-top:clamp(18px,2.6vh,30px); }
.btn.pine{ background:var(--pine); color:var(--ink); } .btn.pine:hover{ background:#ffdc5c; }
.btn{ display:inline-flex; align-items:center; gap:10px; padding:15px 24px; border-radius:999px; background:var(--ink); color:#fff; font:600 15px/1 var(--head); text-decoration:none; border:0;
  transition:background .2s, translate .2s; }
.btn:hover{ background:#2a2a2e; translate:0 -1px; }
.btn .ar{ transition:translate .2s; } .btn:hover .ar{ translate:3px 0; }
.btn.light{ background:#fff; color:var(--ink); box-shadow:inset 0 0 0 1px var(--line); } .btn.light:hover{ background:#f6f6f4; }
.link{ font:600 15px/1 var(--head); text-decoration:none; border-bottom:1.5px solid currentColor; padding-bottom:3px; }
.scrollcue{ display:none; position:absolute; left:50%; bottom:26px; translate:-50% 0; font:600 11px/1 var(--head); letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }

/* the juice: the bottom of the first screen is filled with the same juice as the letters, in their colour of the moment;
   the game tiles sit in it (the back wave behind them, the front one over their feet), and the pointer stirs it */
.juice{ position:absolute; left:0; bottom:0; width:100%; height:calc(var(--tw) * .8); pointer-events:none; }
.juice.back{ z-index:0; } .juice.front{ z-index:2; }
.hero > .wrap{ position:relative; z-index:3; }
/* the ticker: the game names running in a dark band */
.ticker{ overflow:hidden; background:var(--ink); color:#fff; }
.tick-in{ display:flex; width:max-content; animation:tick 50s linear infinite; }
.tick-in span{ display:flex; align-items:center; gap:22px; padding:10px 0 9px 22px; font:800 clamp(14px, .5vw + 11px, 18px)/1 var(--head); letter-spacing:-.01em; text-transform:uppercase; white-space:nowrap; }
.tick-in span::after{ content:"✦"; color:var(--juice-now, var(--pine)); font-size:.7em; transition:color .6s; } /* slim (user's pick over current, quiet, juice, outline) */
@keyframes tick{ to{ translate:-50% 0; } }
/* the stage: the Stake games */
.stage{ position:relative; padding-block:clamp(72px,9vw,128px); background:#0f0f13; color:#fff; overflow:hidden; isolation:isolate; --line:rgba(255,255,255,.12); --muted:#9a9aa3; }
.stage-head{ display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:clamp(36px,5vw,64px); }
.stage-head p{ margin:14px 0 0; max-width:42ch; color:var(--muted); }
.stage-grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(28px,5vw,80px); align-items:start; }

/* the list: one row per game; the chosen row fills with a tint of the game's colour */
.list{ margin:0; padding:0; list-style:none; border-top:1px solid var(--line); }
.row{ position:relative; display:grid; grid-template-columns:2.2em 1fr auto; align-items:center; gap:14px; width:100%; padding:20px 18px 20px 4px; border:0; border-bottom:1px solid var(--line);
  background:none; text-align:left; isolation:isolate; overflow:hidden; }
.row{ color:#fff; }
.row::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, var(--c) 0 4px, color-mix(in srgb, var(--c) 26%, transparent) 4px);
  clip-path:inset(0 100% 0 0); transition:clip-path .55s cubic-bezier(.6,0,.2,1); }
.row[aria-selected="true"]::before{ clip-path:inset(0 0 0 0); }
.row{ padding-left:14px; }
.row .n{ font:600 13px/1 var(--head); color:var(--muted); font-variant-numeric:tabular-nums; }
.row .t{ font:700 clamp(22px, 1.4vw + 12px, 34px)/1.05 var(--head); letter-spacing:-.03em; transition:translate .3s; }
.row:hover .t{ translate:4px 0; }
.row .s{ display:flex; align-items:center; gap:8px; font:600 12px/1 var(--head); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.row .s i{ width:7px; height:7px; border-radius:50%; background:#e0a800; } .row .s i.live{ background:#2ab24a; }
.row:focus-visible{ outline:2px solid var(--ink); outline-offset:-2px; }

/* the showcase: the art, the facts and the way to play */
.show{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.95fr); gap:clamp(20px,3vw,40px); align-items:start; }
.info{ min-height:100%; } /* the art sets the height, so switching games never moves anything */
.art{ position:relative; aspect-ratio:3/4; border-radius:20px; overflow:visible; }
.art .frame{ position:absolute; inset:0; border-radius:20px; overflow:hidden; background:#1c1c22; box-shadow:0 0 0 1px rgba(255,255,255,.1), 0 50px 100px -30px color-mix(in srgb, var(--acc) 80%, #000), 0 0 80px -10px color-mix(in srgb, var(--acc) 45%, transparent); transition:box-shadow .8s; }
.art .frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; scale:1.04; transition:opacity .6s, scale .9s cubic-bezier(.2,.8,.2,1); }
.art .frame img.on{ opacity:1; scale:1; }
.art .soon{ position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:14px; text-align:center; padding:24px; opacity:0; transition:opacity .5s;
  background:radial-gradient(80% 60% at 50% 40%, color-mix(in srgb, var(--acc) 35%, #1c1c22), #16161b); }
.art .soon.on{ opacity:1; }
.art .soon b{ font:800 clamp(34px, 3vw + 14px, 58px)/.9 var(--head); letter-spacing:-.05em; color:#fff; text-shadow:0 0 40px color-mix(in srgb, var(--acc) 70%, transparent); }
.art .soon{ background-size:200% 200% !important; }
.art .soon span{ font:600 12px/1 var(--head); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
/* (old ring) */ .art .soon i{ width:46px; height:46px; border-radius:50%; background:conic-gradient(var(--acc) 0 62%, rgba(0,0,0,.08) 0); -webkit-mask:radial-gradient(closest-side, transparent 62%, #000 64%); mask:radial-gradient(closest-side, transparent 62%, #000 64%); }
.info .status{ display:inline-flex; align-items:center; gap:8px; font:600 12px/1 var(--head); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.info .status i{ width:8px; height:8px; border-radius:50%; background:#e0a800; } .info .status i.live{ background:#2ab24a; }
.info h3{ margin:14px 0 0; font:800 clamp(40px, 3.6vw + 16px, 76px)/.92 var(--head); letter-spacing:-.045em; }
.info p{ margin:14px 0 0; color:#d4d4da; max-width:40ch; }
.facts{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); margin:26px 0 0; border-top:1px solid var(--line); }
.facts div{ padding:14px 0; border-bottom:1px solid var(--line); }
.facts dt{ font:600 11px/1 var(--head); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.facts dd{ margin:8px 0 0; font:800 24px/1 var(--head); letter-spacing:-.02em; } .facts dd.tbc{ color:#6f6f78; font-weight:700; }
.info .acts{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 22px; margin-top:28px; }
.swap{ animation:swap .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes swap{ from{ opacity:0; translate:0 10px; } }

/* the Artube catalogue */
.cat{ padding-block:clamp(64px,8vw,112px); background:var(--grey); }
.cat-head{ display:flex; justify-content:space-between; align-items:end; gap:20px; flex-wrap:wrap; margin-bottom:clamp(28px,3.4vw,44px); }
.cat-head p{ margin:12px 0 0; color:var(--muted); max-width:46ch; }
.tiles{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(200px, 44vw),1fr)); gap:clamp(14px,1.6vw,22px); }
.tile{ text-decoration:none; }
.tile .im{ position:relative; aspect-ratio:301/180; border-radius:14px; overflow:hidden; background:#ddd; box-shadow:0 14px 30px -16px rgba(0,0,0,.35); transition:translate .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
.tile:hover .im{ translate:0 -6px; box-shadow:0 26px 40px -18px color-mix(in srgb, var(--c, #000) 75%, #000); }
.tile img{ width:100%; height:100%; object-fit:cover; display:block; transition:scale .6s cubic-bezier(.2,.8,.2,1); }
.tile:hover img{ scale:1.04; }
.tile .meta{ display:flex; justify-content:space-between; gap:10px; margin-top:12px; font:600 15px/1.2 var(--head); letter-spacing:-.01em; }
.tile .meta span{ font-size:12.5px; font-weight:600; color:var(--muted); white-space:nowrap; }

/* the studio and contact */
.studio{ padding-block:clamp(80px,10vw,150px); background:var(--pine); border-top:2px solid var(--ink); --muted:#6b5a10; --line:rgba(18,18,20,.18); }
.studio .wrap{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(32px,6vw,96px); align-items:end; }
.studio .big{ margin:18px 0 0; font:800 clamp(34px, 3vw + 14px, 68px)/1.02 var(--head); letter-spacing:-.035em; text-wrap:balance; }
.studio .big em{ font-style:normal; color:var(--muted); }
.crafts{ margin:0; padding:0; list-style:none; border-top:1px solid var(--line); }
.crafts li{ display:grid; grid-template-columns:90px 1fr; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); }
.crafts b{ font:700 18px/1.3 var(--head); letter-spacing:-.02em; } .crafts span{ color:var(--muted); }
.contact{ position:relative; background:var(--ink); color:#fff; padding-block:clamp(80px,10vw,140px); overflow:hidden; isolation:isolate; }
.collage{ position:absolute; z-index:-1; inset:-20px; display:grid; grid-template-columns:repeat(6, 1fr); gap:10px; opacity:.16; rotate:-6deg; scale:1.15; pointer-events:none;
  -webkit-mask:linear-gradient(90deg, transparent 20%, #000 75%); mask:linear-gradient(90deg, transparent 20%, #000 75%); }
.collage img{ width:100%; aspect-ratio:301/180; object-fit:cover; border-radius:10px; }
.contact .eyebrow{ color:#8d8d93; }
.contact .mail{ display:inline-block; margin-top:18px; font:800 clamp(32px, 4.6vw + 8px, 84px)/1 var(--head); letter-spacing:-.045em; text-decoration:none;
  background:linear-gradient(var(--pine),var(--pine)) 0 100% / 0 4px no-repeat; padding-bottom:8px; transition:background-size .4s cubic-bezier(.6,0,.2,1); }
.contact .mail:hover{ background-size:100% 4px; }
.contact p{ margin:22px 0 0; color:#b9b9bf; max-width:52ch; font-size:17px; }
.wanted{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; padding:0; list-style:none; }
.wanted li{ padding:9px 15px; border-radius:999px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); font:500 14px/1 var(--head); color:#e6e6ea; }
footer{ background:var(--ink); color:#8d8d93; border-top:1px solid rgba(255,255,255,.1); font:500 13px/1.4 var(--head); }


@media (max-width:980px){
  .stage-grid{ grid-template-columns:1fr; }
  .list{ display:flex; gap:8px; overflow-x:auto; border:0; padding-bottom:4px; scrollbar-width:none; order:2; } .list::-webkit-scrollbar{ display:none; }
  .list li{ flex:none; }
  .row{ grid-template-columns:auto; gap:6px; padding:12px 16px; border:1px solid var(--line); border-radius:999px; overflow:hidden; }
  .row .n{ display:none; } .row .t{ font-size:16px; } .row .s{ display:none; }
  .row::before{ background:color-mix(in srgb, var(--c) 22%, #fff); }
  .show{ grid-template-columns:minmax(0,1fr); }
  .art{ width:min(340px, 74vw); justify-self:center; }
  .studio .wrap{ grid-template-columns:1fr; }
}
/* reduced motion (html.still, set by site.js; ?still previews it): everything moves except whole-screen motion, i.e. the
   page's smooth scrolling and the drifting wall behind the letters */
html.still{ scroll-behavior:auto; }

/* ---------- a game's page ---------- */
/* the top: the small juice letters (home) on the left; the menu button sits top right as on the home page */
.gtop{ position:absolute; inset:0 0 auto; z-index:5; }
.gtop .wrap{ display:flex; align-items:center; gap:18px; height:88px; }
.gtop .home{ display:block; width:150px; }
.gtop .back{ font:600 14px/1 var(--head); color:#d4d4da; text-decoration:none; } .gtop .back:hover{ color:#fff; }
.ghero{ position:relative; padding:clamp(120px,14svh,160px) 0 clamp(64px,8vw,110px); background:#0f0f13; color:#fff; overflow:hidden; isolation:isolate; --line:rgba(255,255,255,.12); --muted:#9a9aa3; }
.ghero .bg{ position:absolute; inset:-80px; z-index:-2; }
.ghero .bg img{ width:100%; height:100%; object-fit:cover; filter:blur(50px) saturate(1.4); opacity:.55; }
.ghero::before{ content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(60% 80% at 30% 50%, color-mix(in srgb, var(--acc) 30%, transparent), transparent 70%),
  linear-gradient(90deg, rgba(15,15,19,.35) 0%, rgba(15,15,19,.7) 55%, rgba(15,15,19,.9) 100%); }
.ghero .grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(28px,6vw,96px); align-items:center; }
.ghero .tile3{ position:relative; border-radius:22px; overflow:hidden; background:#1c1c22;
  box-shadow:0 0 0 1px rgba(255,255,255,.1), 0 50px 100px -30px color-mix(in srgb, var(--acc) 80%, #000), 0 0 90px -10px color-mix(in srgb, var(--acc) 45%, transparent); }
.ghero .tile3 img{ display:block; width:100%; height:100%; object-fit:cover; }
.ghero .tile3.tall{ aspect-ratio:3/4; max-width:440px; } .ghero .tile3.wide{ aspect-ratio:301/180; }
.ghero .tile3 .soon{ position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:14px; text-align:center;
  background:radial-gradient(80% 60% at 50% 40%, color-mix(in srgb, var(--acc) 35%, #1c1c22), #16161b); }
.ghero .tile3 .soon b{ font:800 clamp(40px, 3.4vw + 16px, 72px)/.9 var(--head); letter-spacing:-.05em; padding:0 18px; text-shadow:0 0 40px color-mix(in srgb, var(--acc) 70%, transparent); } .ghero .tile3 .soon span{ font:600 12px/1 var(--head); letter-spacing:.16em; text-transform:uppercase; color:#9a9aa3; }
.ghero h1{ margin:14px 0 0; font:800 clamp(48px, 5vw + 16px, 110px)/.9 var(--head); letter-spacing:-.05em; }
.ghero .lede{ margin:18px 0 0; font-size:clamp(17px, .4vw + 15px, 20px); color:#d4d4da; max-width:44ch; }
.spec{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); margin:30px 0 0; border-top:1px solid var(--line); }
.spec div{ padding:14px 14px 14px 0; border-bottom:1px solid var(--line); }
.spec .w{ grid-column:span 3; }
.spec dt{ font:600 11px/1 var(--head); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.spec dd{ margin:8px 0 0; font:700 18px/1.3 var(--head); letter-spacing:-.01em; } .spec dd.big{ font-size:26px; font-weight:800; letter-spacing:-.02em; } .spec dd.tbc{ color:#6f6f78; }
.ghero .acts{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 22px; margin-top:30px; }
.ghero .link{ color:#fff; }
/* more games */
.more{ padding-block:clamp(64px,8vw,112px); background:var(--grey); }
.more .row-t{ display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:clamp(24px,3vw,40px); }
.minis{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); gap:clamp(14px,1.6vw,22px); }
.mini a{ text-decoration:none; }
.mini .im{ position:relative; aspect-ratio:3/4; border-radius:14px; overflow:hidden; background:#1c1c22; box-shadow:0 14px 30px -16px rgba(0,0,0,.35); transition:translate .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
.mini a:hover .im{ translate:0 -6px; box-shadow:0 26px 40px -18px color-mix(in srgb, var(--c, #000) 75%, #000); }
.mini img{ width:100%; height:100%; object-fit:cover; display:block; }
.mini .im .soon{ position:absolute; inset:0; display:grid; place-content:center; text-align:center; padding:12px; color:#fff; font:700 18px/1.1 var(--head);
  background:radial-gradient(80% 60% at 50% 40%, color-mix(in srgb, var(--c) 35%, #1c1c22), #16161b); }
.mini .meta{ display:flex; justify-content:space-between; gap:10px; margin-top:12px; font:600 15px/1.2 var(--head); }
.mini .meta span{ font-size:12.5px; color:var(--muted); white-space:nowrap; }
@media (max-width:860px){ .ghero .grid{ grid-template-columns:1fr; } .ghero .tile3.tall{ max-width:300px; } .spec{ grid-template-columns:repeat(2, minmax(0,1fr)); } .spec .w{ grid-column:span 2; } .gtop .back{ display:none; } }
@media (max-width:600px){ .hero{ padding-top:84px; } } /* room for the menu button above the letters */

/* coming-soon games: one quiet line instead of a row of TBCs */
.tease{ margin:26px 0 0 !important; padding:14px 0; border-block:1px solid var(--line); font:600 14px/1.4 var(--head) !important; color:var(--muted) !important; }
/* the footer: the small juice letters, the links, the responsible-play line */
footer .ftop{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:24px 48px; padding-block:44px 30px; }
footer .flogo{ display:flex; align-items:center; gap:12px; } footer .flogo img{ display:block; height:auto; } footer .flogo .m{ width:56px; } footer .flogo .w{ width:126px; }
/* the white mascot and the scribbly wordmark (the old footer's pair); they hold still on hover */
footer nav{ display:flex; gap:28px; }
footer nav a{ color:#e6e6ea; text-decoration:none; font:600 15px/1 var(--head); } footer nav a:hover{ color:var(--juice-now, var(--pine)); }
footer .age{ display:flex; align-items:center; gap:12px; margin:0; max-width:36ch; font:500 13px/1.4 var(--body); color:#8d8d93; }
footer .age b{ flex:none; display:grid; place-items:center; width:38px; height:38px; border-radius:50%; box-shadow:inset 0 0 0 1.5px #8d8d93; color:#e6e6ea; font:700 12px/1 var(--head); }
footer .fbot{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-block:16px 26px !important; border-top:1px solid rgba(255,255,255,.08); font-size:12.5px; }
/* phones and small tablets: everything centred and tighter, (user: "needs work"; the 18+ line stays unboxed) */
@media (max-width:760px){
  footer .ftop{ grid-template-columns:1fr; justify-items:center; text-align:center; gap:22px; padding-block:40px 26px; }
  footer .flogo .m{ width:50px; } footer .flogo .w{ width:112px; }
  footer nav{ flex-wrap:wrap; justify-content:center; align-items:center; gap:12px 26px; }
  footer .age{ text-align:left; max-width:320px; }
  footer .age b{ width:34px; height:34px; font-size:11px; }
  footer .fbot{ flex-direction:column; align-items:center; text-align:center; gap:6px; padding-block:18px 28px !important; }
}

/* a game, opened in place over the page: it rises in, the page stays put underneath */
.gview{ position:fixed; inset:0; z-index:60; overflow-y:auto; overscroll-behavior:contain; background:#0f0f13; opacity:0; translate:0 40px; transition:opacity .28s ease, translate .4s cubic-bezier(.2,.8,.2,1); }
.gview.on{ opacity:1; translate:0 0; }
.gview[hidden]{ display:none; }
html.gv-open{ overflow:hidden; }
.gview .ghero{ padding-top:clamp(84px,10svh,120px); }
.gx{ position:fixed; z-index:61; top:18px; right:18px; width:48px; height:48px; border:0; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; font:400 30px/1 var(--head);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); cursor:pointer; transition:background .2s, rotate .3s; }
.gx:hover{ background:rgba(255,255,255,.22); rotate:90deg; }
.gs{ display:inline-flex; align-items:center; gap:8px; font:600 12px/1 var(--head); letter-spacing:.12em; text-transform:uppercase; color:#9a9aa3; }
.gs i{ width:8px; height:8px; border-radius:50%; background:#e0a800; } .gs i.live{ background:#2ab24a; }
.soonnote{ font:600 14px/1 var(--head); color:#9a9aa3; }
.gview .mini .im img{ object-position:center; }
.still .gview{ translate:none; } /* the game fades in without rising */

/* the explorer cheers while the letters celebrate a win (site.js adds .cheer to the cast) */
.cast.cheer a .idle, .cast.cheer a .bl{ visibility:hidden !important; } .cast.cheer a .ch{ visibility:visible; }

/* the logo block */
.hero-logo{ position:relative; width:min(820px, 100%); }
.hero-logo .wm{ width:100%; }
.hero-logo h1{ position:relative; z-index:1; }
/* its wins: the symbols rain behind the letters (in the first screen) */
.slot-rain{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.slot-rain > div{ position:absolute; top:0; will-change:transform; }
.slot-rain svg{ display:block; overflow:visible; }

/* the game screen, take 2: a light card over the dimmed page (not a full-screen dark takeover) */
.gview{ background:rgba(20,18,14,.55); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); padding:clamp(16px,4vh,48px) clamp(12px,3vw,40px); }
.gcard{ position:relative; max-width:1080px; margin:0 auto; border-radius:28px; overflow:hidden; background:var(--paper2, #fbfaf6); box-shadow:0 40px 100px -30px rgba(0,0,0,.6); }
.gview .ghero{ padding:clamp(28px,4vw,56px) 0; background:linear-gradient(135deg, color-mix(in srgb, var(--acc) 22%, #fbfaf6), #fbfaf6 65%); color:var(--ink); --line:rgba(18,18,20,.1); --muted:#6b6b70; }
.gview .ghero::before, .gview .ghero .bg{ display:none; }
.gview .ghero .lede{ color:#3f3f44; } .gview .spec dd.tbc{ color:#a5a5ab; } .gview .gs{ color:#6b6b70; }
.gview .ghero h1{ font-size:clamp(40px, 3.6vw + 14px, 76px); }
.gview .ghero .tile3{ box-shadow:0 30px 60px -24px color-mix(in srgb, var(--acc) 70%, #000); }
.gview .ghero .tile3.tall{ max-width:360px; }
.gview .ghero .link{ color:var(--ink); }
.gview .more{ background:#f1efe8; padding-block:clamp(36px,4vw,56px); }
.gview .more h2{ font-size:clamp(28px, 2vw + 14px, 40px); }
.gview .minis{ grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); }
.gx{ background:#fff; color:var(--ink); box-shadow:0 8px 24px rgba(0,0,0,.25); }
.gx:hover{ background:var(--juice-now, var(--pine)); }
@media (max-width:700px){ .gview{ padding:10px 8px; } .gcard{ border-radius:20px; } }



/* the background: a tilted wall of the game tiles drifting past (each column its own speed, neighbours opposite ways),
   a spotlight keeping the letters and words clean. Takes: Drift, Slow & soft, Mono + juice, Follows mouse */
.hero{ background:#e4e2db; }
.hwall{ position:absolute; z-index:-2; inset:-40% -20%; display:flex; justify-content:center; gap:16px; rotate:-9deg; pointer-events:none; opacity:.55; transition:translate .6s cubic-bezier(.2,.8,.2,1); }
.wcol{ flex:none; width:150px; translate:0 var(--o); }
.wrun{ display:flex; flex-direction:column; gap:16px; animation:wdrift var(--sp, 70s) linear infinite; }
.wcol.up .wrun{ animation-direction:reverse; }
@keyframes wdrift{ to{ translate:0 -50%; } }
.wrun img{ display:block; width:100%; aspect-ratio:3/4; border-radius:14px; object-fit:cover; object-position:center; box-shadow:0 10px 24px -14px rgba(0,0,0,.4); }
.hspot{ position:absolute; z-index:-1; inset:0; pointer-events:none;
  background:radial-gradient(46% 52% at 50% 40%, #f3f2ee 0%, rgba(243,242,238,.96) 42%, rgba(243,242,238,.55) 70%, rgba(243,242,238,0) 100%),
    radial-gradient(120% 100% at 50% 40%, transparent 55%, rgba(30,26,20,.28) 100%); }
.hero-logo::after{ content:""; position:absolute; z-index:0; left:14%; right:14%; bottom:-9%; height:22%; background:radial-gradient(closest-side, rgba(0,0,0,.13), transparent); pointer-events:none; }
/* slow & soft: half speed, smaller, quieter */
:root[data-bg="driftsoft"] .wrun{ animation-duration:calc(var(--sp) * 2.2); } :root[data-bg="driftsoft"] .wcol{ width:118px; }
:root[data-bg="driftsoft"] .hwall{ opacity:.38; gap:12px; filter:saturate(.7); } :root[data-bg="driftsoft"] .wrun{ gap:12px; }
/* mono + juice: the tiles in grey, washed in the letters' juice colour of the moment */
:root:is([data-bg="driftmono"], [data-bg="driftmm"]) .hwall{ filter:grayscale(.5) contrast(1.05); opacity:.5; } /* half colour (user: "some saturation" once the tint went) */
/* the wall stays plain grey: the juice-colour tint over it was taken out (2026-11-05, user + a viewer: "remove the yellow") */
/* follows mouse: the wall leans away from the pointer, nearer columns move more */
:root:is([data-bg="driftmouse"], [data-bg="driftmm"]) .hwall{ translate:calc(var(--mx, 0) * -60px) calc(var(--my, 0) * -40px); }
:root:is([data-bg="driftmouse"], [data-bg="driftmm"]) .wcol{ translate:calc(var(--mx, 0) * -40px * var(--depth)) calc(var(--o) + var(--my, 0) * -30px * var(--depth)); transition:translate .8s cubic-bezier(.2,.8,.2,1); }
@media (max-width:700px){ .wcol{ width:110px; } .hspot{ background:radial-gradient(70% 45% at 50% 38%, #f3f2ee 0%, rgba(243,242,238,.92) 55%, rgba(243,242,238,.4) 85%, transparent 100%); } }
.still .wrun{ animation:none !important; }

/* ---------- the slot designs ---------- */
.slot-ui .reels{ display:flex; gap:4px; }
.slot-ui .reel{ position:relative; display:block; overflow:hidden; aspect-ratio:1; border-radius:10px; background:#fff; }
.slot-ui .strip{ display:flex; flex-direction:column; }
.slot-ui .sc{ display:block; width:100%; aspect-ratio:1; flex:none; padding:16%; }
.slot-ui .reel.blur .strip{ filter:blur(1.5px); }
.slot-ui .msg{ margin:0; font:600 13px/1.2 var(--head); color:var(--muted); min-height:1.2em; }
.slot-ui.won .reels{ animation:winpulse .45s ease-in-out 3; } @keyframes winpulse{ 50%{ scale:1.06; } }
/* the easter egg: one tiny faint cherry in the top-left corner, easy to miss. Pointed at, the other two fruit slide
   out of it; clicked, they change (flip / pop / tick) and three of a kind sets off the fruit's surprise */
.sl-egg{ position:relative; display:inline-flex; padding:6px; border:0; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.egg-corner{ position:absolute; z-index:4; left:clamp(8px, 2vw, 24px); top:clamp(8px, 2vw, 20px); }
.sl-egg .reels{ display:flex; gap:0; opacity:.28; filter:grayscale(.6); transition:opacity .35s, filter .35s, gap .35s cubic-bezier(.2,1.2,.4,1); }
.sl-egg .chip{ display:block; width:18px; height:18px; padding:0; border-radius:0; background:none; box-shadow:none; transition:width .35s cubic-bezier(.2,1.2,.4,1), opacity .25s; overflow:visible; }
.sl-egg .chip:not(:first-child){ width:0; opacity:0; }
.sl-egg:is(:hover, :focus-visible, .spinning, .won, .open) .reels{ opacity:1; filter:none; gap:6px; }
.sl-egg:is(:hover, :focus-visible, .spinning, .won, .open) .chip{ width:22px; height:22px; opacity:1; }
.sl-egg:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; border-radius:8px; }
.sl-egg .toast{ position:absolute; left:6px; top:calc(100% + 4px); padding:6px 10px; border-radius:8px; background:var(--ink); color:#fff; font:600 12px/1 var(--head);
  white-space:nowrap; opacity:0; translate:0 -4px; pointer-events:none; transition:opacity .25s, translate .25s; }
.sl-egg .toast.on{ opacity:1; translate:0 0; }
/* 2. beside the logo: a small card standing to the left of the letters, level with them */
.sl-beside{ position:absolute; z-index:2; right:calc(100% + clamp(16px, 3vw, 48px)); top:50%; translate:0 -50%; display:grid; justify-items:center; gap:8px; padding:10px; border-radius:20px; background:#fff;
  box-shadow:0 20px 40px -18px rgba(0,0,0,.3), 0 0 0 1px rgba(18,18,20,.06); }
.sl-beside .reels{ padding:4px; border-radius:14px; background:var(--grey); } .sl-beside .reel{ width:clamp(40px, 4vw, 54px); }
.sl-beside .go{ width:100%; padding:10px; border:0; border-radius:12px; background:var(--pine); font:800 14px/1 var(--head); cursor:pointer; }
.sl-beside .msg{ position:absolute; top:calc(100% + 8px); white-space:nowrap; }
@media (max-width:1180px){ .sl-beside{ display:none; } }
/* 3. in the juice: three fruit bubbles bobbing on the juice, bottom left, and a spin button */
.sl-juice{ position:absolute; z-index:3; left:clamp(16px, 6vw, 90px); bottom:calc(var(--tw) * .2); display:flex; align-items:center; gap:12px; }
.sl-juice .reels{ gap:10px; } .sl-juice .reel{ width:clamp(46px, 5vw, 64px); border-radius:50%; background:rgba(255,255,255,.88); box-shadow:0 8px 18px -8px rgba(0,0,0,.3), inset 0 -4px 0 rgba(0,0,0,.05); }
.sl-juice .reel:nth-child(1){ animation:bobj 3s ease-in-out infinite; } .sl-juice .reel:nth-child(2){ animation:bobj 3s ease-in-out .5s infinite; } .sl-juice .reel:nth-child(3){ animation:bobj 3s ease-in-out 1s infinite; }
@keyframes bobj{ 50%{ translate:0 -6px; } }
.sl-juice .go{ padding:12px 18px; border:0; border-radius:999px; background:var(--ink); color:#fff; font:700 14px/1 var(--head); cursor:pointer; }
.sl-juice .msg{ position:absolute; left:0; bottom:calc(100% + 10px); white-space:nowrap; color:var(--ink); }
/* 4. its own section: a proper little slot, three rows, the middle one pays */
.playslot{ padding-block:clamp(64px,8vw,110px); background:var(--grey); }
.playslot[hidden]{ display:none; }
.sl-section{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,80px); align-items:center; }
.sl-section h2{ margin-top:14px; } .sl-section p{ color:#444; max-width:38ch; } .sl-section .msg{ font-size:18px; color:var(--ink); }
.sl-section .machine{ width:min(100%, 460px); justify-self:center; display:grid; gap:12px; padding:16px; border-radius:28px; background:var(--ink); box-shadow:0 40px 80px -30px rgba(0,0,0,.5); }
.sl-section .reels{ position:relative; gap:8px; } .sl-section .reel{ flex:1; aspect-ratio:1/3; border-radius:14px; background:#f6f5f1; }
.sl-section .sc{ padding:18%; }
.sl-section .reels::after{ content:""; position:absolute; left:-6px; right:-6px; top:50%; height:2px; translate:0 -1px; background:var(--pine); box-shadow:0 0 12px var(--pine); pointer-events:none; }
.sl-section .go{ padding:18px; border:0; border-radius:16px; background:var(--pine); font:800 18px/1 var(--head); letter-spacing:.02em; cursor:pointer; box-shadow:inset 0 -4px 0 rgba(0,0,0,.15); }
.sl-section .go:active{ translate:0 2px; }
@media (max-width:860px){ .sl-section{ grid-template-columns:1fr; } }
.slot-ui.spinning .go, .slot-ui.spinning.go{ opacity:.75; }

/* ---------- looks for everything under the first screen (picker bottom left; :root[data-look]) ---------- */
/* One dark room: from the ticker down it's one dark space, no colour bands; numbered sections split by hairlines,
   the juice colour the only accent, the Artube art in grey until pointed at */
:root[data-look="night"] body{ background:#0f0f13; counter-reset:sec; }
:root[data-look="night"] :is(.stage, .cat, .studio, .contact) .eyebrow{ counter-increment:sec; color:#9a9aa3; }
:root[data-look="night"] :is(.stage, .cat, .studio, .contact) .eyebrow::before{ content:"0" counter(sec); margin-right:14px; color:var(--juice-now, var(--pine)); transition:color .6s; }
:root[data-look="night"] :is(.cat, .studio, .contact){ background:transparent; color:#fff; --line:rgba(255,255,255,.12); --muted:#9a9aa3; }
:root[data-look="night"] :is(.cat, .studio, .contact) > .wrap{ border-top:1px solid rgba(255,255,255,.12); padding-top:clamp(40px,5vw,72px); }
:root[data-look="night"] :is(.cat, .studio, .contact){ padding-top:0; }
:root[data-look="night"] .stage{ padding-bottom:clamp(72px,8vw,112px); }
:root[data-look="night"] .tile .im{ background:#1c1c22; box-shadow:0 0 0 1px rgba(255,255,255,.08); }
:root[data-look="night"] .tile .meta{ color:#e6e6ea; }
:root[data-look="night"] .studio{ border:0; }
:root[data-look="night"] .studio .big{ color:#fff; } :root[data-look="night"] .studio .big em{ color:var(--juice-now, var(--pine)); transition:color .6s; }
:root[data-look="night"] .crafts b{ color:#fff; } :root[data-look="night"] .crafts span{ color:#9a9aa3; }
:root[data-look="night"] .collage{ opacity:.1; }
:root[data-look="night"] footer{ background:transparent; }

/* ---------- Our games: see stage.css ---------- */
.stage-head{ align-items:end; }
.snav button{ width:48px; height:48px; border:0; border-radius:50%; background:rgba(255,255,255,.08); color:#fff; font:500 20px/1 var(--head); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); transition:background .2s, color .2s; }
.snav button:hover{ background:var(--juice-now, var(--pine)); color:var(--ink); }

/* ---------- the ticker: it stops while pointed at ---------- */
.ticker:hover .tick-in{ animation-play-state:paused; }

/* ---------- Earlier work: a strip that runs forever both ways, edge to edge ---------- */
.cat-head{ align-items:end; }
.snav{ display:flex; gap:10px; }
.tiles{ display:flex; overflow-x:auto; scrollbar-width:none; padding-bottom:12px; cursor:grab; user-select:none; }
.tiles::-webkit-scrollbar{ display:none; }
.tiles.drag{ cursor:grabbing; } .tiles.drag a{ pointer-events:none; }
.tiles .set{ display:flex; flex:none; gap:clamp(14px,1.6vw,22px); padding-right:clamp(14px,1.6vw,22px); }
.tiles .tile{ flex:none; width:clamp(240px, 24vw, 340px); }
@media (max-width:700px){ .tiles .tile{ width:68vw; } .snav button{ width:42px; height:42px; } }

/* ---------- a game, opened: the card is dark too ---------- */
.gcard{ background:#141418; box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 40px 100px -30px rgba(0,0,0,.8); }
.gview{ background:rgba(8,8,10,.7); }
.gview .ghero{ background:#141418; color:#fff; --line:rgba(255,255,255,.12); --muted:#9a9aa3; }
.gview .ghero::before, .gview .ghero .bg{ display:block; }
.gview .ghero::before{ background:radial-gradient(60% 80% at 25% 40%, color-mix(in srgb, var(--acc) 34%, transparent), transparent 70%), linear-gradient(90deg, rgba(20,20,24,.55), rgba(20,20,24,.92) 60%); }
.gview .ghero .bg img{ opacity:.45; }
.gview .ghero .lede{ color:#d4d4da; } .gview .spec dd.tbc{ color:#6f6f78; } .gview .gs{ color:#9a9aa3; }
.gview .ghero .link{ color:#fff; }
.gx{ background:rgba(255,255,255,.12); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); }
.gx:hover{ background:var(--juice-now, var(--pine)); color:var(--ink); }

/* ---------- a Stake game without art yet, opened: a dashed outline, its name and "first look soon" ---------- */
.gview .ghero .tile3:has(.soon){ background:transparent; box-shadow:none; }
.gview .ghero .tile3 .soon{ background:none; border:1.5px dashed rgba(255,255,255,.22); border-radius:inherit; }
.gview .ghero .tile3 .soon b{ text-shadow:none; }

.snav button:disabled{ opacity:.3; cursor:default; } .snav button:disabled:hover{ background:rgba(255,255,255,.08); color:#fff; }

/* ?og: the first screen as the link-preview picture (tools/og): no buttons, no slot, no scroll cue */
html.og :is(.ctas, .sl-egg, .scrollcue, .skip, .ticker){ display:none !important; }
html.og .hero{ min-height:100svh; align-content:center; }
/* the picture is small in a chat: the words centred, the characters big at the sides, standing in the juice (the
   first on the right, the next on the left, then further out) */
html.og .hero.below{ padding-bottom:calc(var(--ch) * .55); }
html.og .hero-logo{ width:580px; } html.og .pitch{ font-size:34px; max-width:22ch; margin-top:14px; }
html.og .cast a{ height:calc(100svh * var(--h, 1)); bottom:calc(-28svh * var(--h, 1)); }
html.og .cast a.right{ left:87% !important; } html.og .cast a.left{ left:13% !important; } html.og .cast a.left + a.left{ left:6% !important; }
html.og :is(.cast a, .cast .bob){ animation:none !important; } html.og .cast a.blink .idle{ visibility:visible !important; } html.og .cast a.blink .bl{ visibility:hidden !important; } /* the characters stand in place (no wading in), so a still picture catches them */