/* Juicebox: styles shared by every page */
  :root{
    /* Tropical Punch */
    --punch:#f0324b; --pine:#ffd23f; --orange:#ff8a1e; --lime:#7ed957;
    --ink:#141414; --paper:#ffffff; --soft:#f3f3f1; --muted:#5a5a5a; --rule:#e3e3e0;
    --display:"Bowlby One","Arial Black",Impact,sans-serif;
    --ui:"Figtree","Segoe UI",system-ui,-apple-system,sans-serif;
    --gutter:clamp(16px,4vw,48px); --navh:68px; --max:1280px;
    --edge:2.5px solid var(--ink); --r:16px;
  }
  *{ box-sizing:border-box; }
  [hidden]{ display:none !important; }
  html{ background:var(--paper); color:var(--ink); scroll-behavior:smooth; scroll-padding-top:16px; }
  body{ margin:0; background:var(--paper); font:17px/1.6 var(--ui); overflow-x:hidden; -webkit-font-smoothing:antialiased; }
  img{ max-width:100%; }
  /* discourage copying: no selecting text, dragging or saving images (the form and the email address stay usable) */
  body{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
  input, textarea, #mail{ -webkit-user-select:text; user-select:text; }
  img, canvas{ -webkit-user-drag:none; pointer-events:none; }
  a{ color:inherit; }
  button{ font:inherit; color:inherit; }
  :focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }
  .wrap{ max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); }
  .skip{ position:absolute; left:-9999px; }
  .skip:focus{ left:16px; top:12px; z-index:60; padding:10px 14px; background:var(--pine); border:var(--edge); border-radius:10px; }

  h1,h2,h3{ margin:0; font-family:var(--display); font-weight:400; line-height:.98; letter-spacing:.005em; }
  h2{ font-size:clamp(26px, 5.2vw + 8px, 56px); text-wrap:balance; }
  .kicker{ margin:0 0 14px; font-weight:800; font-size:13px; letter-spacing:.16em; text-transform:uppercase; }
  .lead{ margin:18px 0 0; font-size:clamp(17px,1.6vw,19px); max-width:56ch; }

  /* buttons */
  .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:13px 22px; border:var(--edge); border-radius:999px;
    background:var(--paper); color:var(--ink); font-weight:800; font-size:16px; text-decoration:none; cursor:pointer; white-space:nowrap;
    box-shadow:4px 4px 0 var(--ink); transition:translate .12s ease, box-shadow .12s ease; }
  .btn:hover{ translate:-2px -2px; box-shadow:6px 6px 0 var(--ink); }
  .btn:active{ translate:2px 2px; box-shadow:2px 2px 0 var(--ink); }
  .btn.pine{ background:var(--pine); } .btn.ink{ background:var(--ink); color:var(--paper); }
  .btn.ink:hover{ box-shadow:6px 6px 0 var(--punch); }
  .btn svg{ width:14px; height:14px; flex:none; }
  .btn.sm{ padding:9px 16px; font-size:14.5px; box-shadow:3px 3px 0 var(--ink); }

  /* ---------- nav ---------- */
  /* see-through, sitting on top of the hero (its rays run behind it); it scrolls away with the page, no bar */
  .nav{ position:absolute; left:0; right:0; top:0; z-index:1; height:var(--navh); background:transparent; } /* inside the hero, under its letters */
  .nav .wrap{ height:100%; display:flex; align-items:center; gap:36px; }
  .nav-right{ flex:1; display:flex; align-items:center; gap:36px; }
  .nav nav{ display:flex; gap:28px; font-weight:700; font-size:15.5px; }
  .nav nav a{ text-decoration:none; padding-block:6px; background:linear-gradient(var(--juice-now,var(--punch)),var(--juice-now,var(--punch))) 0 100% / 0 3px no-repeat; transition:background-size .2s; }
  .nav nav a:hover{ background-size:100% 3px; }
  /* the slot machine (slot.js): its drawing has an empty band on top, which goes up off the screen */
  .slot-logo{ flex:none; align-self:flex-start; display:block; margin-top:-12px; padding:0; border:0; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent; }
  /* the other pages: the small juice letters, linking home */
  .nav-logo{ flex:none; display:block; } .nav-logo .wm{ height:40px; }
  .slot-logo svg{ display:block; overflow:visible; }
  .slot-logo > img{ display:block; width:44px; margin-top:20px; } /* before slot.js runs: the mascot */
  /* (the lever pull, jolt and reel spin are animated by slot.js) */
  /* narrower screens: the machine scales down and the links tighten, so they still fit beside it; only the
     very smallest screens drop the links */
  @media (max-width:330px){ .nav nav{ display:none; } }

  /* ---------- hero ---------- */
  .hero{ --hero-bg:#efefec; --hero-fg:var(--ink); --rays:rgba(255,255,255,.75); --hero-shadow:rgba(0,0,0,.16);
    position:relative; overflow:hidden; isolation:isolate; background:var(--hero-bg); color:var(--hero-fg); border-bottom:var(--edge); }
  .hero > .wrap{ position:relative; z-index:2; pointer-events:none; } /* the hero's letters and buttons sit above the nav's slot machine; */
  .hero > .wrap > *{ pointer-events:auto; }                         /* clicks go through the layer's empty space to the nav */
  .rays{ position:absolute; z-index:-1; left:50%; top:42%; width:240vmax; aspect-ratio:1; translate:-50% -50%; pointer-events:none;
    background:repeating-conic-gradient(var(--rays) 0 6deg, transparent 6deg 12deg);
    -webkit-mask:radial-gradient(closest-side, #000 6%, transparent 38%); mask:radial-gradient(closest-side, #000 6%, transparent 38%);
    animation:spin 150s linear infinite; }
  .hero > .wrap{ display:grid; justify-items:center; text-align:center; padding-block:calc(clamp(44px,6vw,84px) + var(--navh)) clamp(48px,6vw,76px); }
  /* the hero logo: the bubble-letter wordmark rebuilt per letter (brand/logo-vec/): back-N = the letter's 3D side,
     fill-N/ink-N = its front face, all backs behind all faces as in the original art; each letter holds juice */
  .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%; }
  .hero .wm{ width:min(820px, calc(100vw - 2 * var(--gutter))); height:auto; animation:pop .9s cubic-bezier(.2,1.4,.4,1) both; }
  .hero .wm::before{ content:""; position:absolute; left:2%; right:2%; top:30%; bottom:-14%; background:radial-gradient(closest-side, var(--hero-shadow), transparent); } /* static: a filter would repaint every frame */
  .sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .hero .pitch{ margin:clamp(22px,3vw,34px) 0 0; font-size:clamp(18px,1.9vw,22px); font-weight:500; max-width:44ch; text-wrap:balance; }
  .hero .ctas{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:28px; }
  @keyframes spin{ to{ rotate:360deg; } }
  @keyframes pop{ from{ opacity:0; transform:scale(.92) translateY(10px); } to{ opacity:1; transform:none; } }

  /* the coloured bands start with a juice surface (a wave in the band's colour with the ink line on it), and the green
     and orange ones have a few bubbles in them */
  :is(.studio, .ops, footer){ position:relative; }
  .studio{ background:var(--lime); } .ops{ background:var(--orange); }
  :is(.studio, .ops, footer)::before{ content:""; position:absolute; left:0; right:0; bottom:calc(100% - 2px); height:24px; pointer-events:none;
    background:var(--wave) var(--wx, 0px) 0 / 240px 100% repeat-x; }
  :is(.studio, .ops){ isolation:isolate; }
  :is(.studio, .ops)::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background-image:radial-gradient(circle, rgba(255,255,255,.3) 0 2px, transparent 2.5px), radial-gradient(circle, rgba(255,255,255,.22) 0 3px, transparent 3.5px), radial-gradient(circle, transparent 0 3px, rgba(255,255,255,.3) 3.5px 4.5px, transparent 5px); background-size:53px 61px, 89px 73px, 137px 113px; background-position:7px 11px, 31px 40px, 60px 20px; }
  .studio{ --wave:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%2230%22%20viewBox%3D%220%200%20240%2030%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2016%20C40%202%2080%202%20120%2016%20S200%2030%20240%2016%20V30%20H0Z%22%20fill%3D%22%237ed957%22%2F%3E%3Cpath%20d%3D%22M0%2016%20C40%202%2080%202%20120%2016%20S200%2030%20240%2016%22%20fill%3D%22none%22%20stroke%3D%22%23141414%22%20stroke-width%3D%222.5%22%2F%3E%3C%2Fsvg%3E"); } .studio{ --wx:-90px; }
  .ops{ --wave:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%2230%22%20viewBox%3D%220%200%20240%2030%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2016%20C40%202%2080%202%20120%2016%20S200%2030%20240%2016%20V30%20H0Z%22%20fill%3D%22%23ff8a1e%22%2F%3E%3Cpath%20d%3D%22M0%2016%20C40%202%2080%202%20120%2016%20S200%2030%20240%2016%22%20fill%3D%22none%22%20stroke%3D%22%23141414%22%20stroke-width%3D%222.5%22%2F%3E%3C%2Fsvg%3E"); } .ops{ --wx:-160px; }
  footer{ --wave:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%2230%22%20viewBox%3D%220%200%20240%2030%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2016%20C40%202%2080%202%20120%2016%20S200%2030%20240%2016%20V30%20H0Z%22%20fill%3D%22%23141414%22%2F%3E%3Cpath%20d%3D%22M0%2016%20C40%202%2080%202%20120%2016%20S200%2030%20240%2016%22%20fill%3D%22none%22%20stroke%3D%22%23141414%22%20stroke-width%3D%222.5%22%2F%3E%3C%2Fsvg%3E"); }

  /* ticker */
  .ticker{ overflow:hidden; background:var(--pine); border-bottom:var(--edge); }
  .ticker-track{ display:flex; width:max-content; animation:tick 60s linear infinite; }
  .ticker ul{ display:flex; margin:0; padding:0; list-style:none; }
  .ticker li{ display:flex; align-items:center; gap:clamp(18px,2.2vw,28px); padding:clamp(10px,1.2vw,14px) 0 clamp(8px,1vw,12px) clamp(18px,2.2vw,28px); font:400 clamp(15px, 1vw + 11px, 22px)/1 var(--display); text-transform:uppercase; white-space:nowrap; }
  .ticker li::after{ content:""; width:clamp(13px,1.4vw,18px); height:clamp(13px,1.4vw,18px); flex:none; background:var(--punch);
    clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
  @keyframes tick{ to{ transform:translateX(-50%); } }

  /* ---------- sections ---------- */
  section.block{ padding-block:clamp(64px,8vw,112px); }
  section.block.tight{ padding-top:0; }
  .head{ display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:18px 40px; margin-bottom:clamp(28px,4vw,44px); }

  /* featured + detail */
  /* featured card: the art side is exactly 301×180 at any width, and the text side scales with the card (cqw) so it
     keeps the same proportion; if it's ever taller anyway, the art stretches (object-fit) rather than leaving a gap */
  .feature{ container-type:inline-size; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); border:var(--edge); border-radius:calc(var(--r) + 6px); overflow:hidden;
    background:var(--paper); box-shadow:8px 8px 0 var(--ink); }
  .feature .art{ position:relative; aspect-ratio:301/180; width:100%; height:100%; /* both set: fills the row, never wider than its column */ border-right:var(--edge); background:var(--soft); }
  .feature .art img{ position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover; }
  .feature .body{ display:flex; flex-direction:column; padding:2.4cqw 2.6cqw; }
  .feature .pill{ font-size:max(10px, 1.02cqw); padding:.35em .9em .3em; }
  .feature :is(h1, h2, h3){ margin-top:1cqw; font-size:3.3cqw; }
  .feature .desc{ margin:.9cqw 0 0; color:var(--muted); font-size:max(12px, 1.3cqw); line-height:1.45; }
  .feature .ctas{ display:flex; flex-wrap:wrap; gap:10px; margin-top:auto; padding-top:1.4cqw; }
  .feature .specs{ margin-top:1.3cqw; }
  .feature .specs div{ padding:.65cqw 0; }
  .feature .specs dt{ font-size:max(9px, .95cqw); }
  .feature .specs dd{ font-size:max(11px, 1.22cqw); }
  .feature :is(h1, h2, h3){ font-size:max(17px, 3.3cqw); }
  /* narrow cards: text stays beside the art, the details thin out (they're all on the game's own page) */
  @container (max-width:900px){ .feature .specs{ grid-template-columns:repeat(2,minmax(0,1fr)); } .feature .specs :is(.wide, .wide2){ display:none; } }
  @container (max-width:640px){ .feature .specs{ display:none; } .feature .body{ padding:14px 16px; } }
  @container (max-width:440px){ .feature .desc{ display:none; } }
  .specs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:14px; margin:16px 0 0; border-top:2px solid var(--ink); }
  .specs div{ padding:8px 0; border-bottom:1.5px solid var(--rule); }
  .specs dt{ font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
  .specs dd{ margin:2px 0 0; font-weight:700; font-size:14.5px; }
  .specs dd.tbc{ color:#9a9a9a; font-weight:600; }
  .specs .wide{ grid-column:1 / -1; } .specs .wide2{ grid-column:span 2; }

  .pill{ display:inline-flex; align-items:center; gap:7px; padding:5px 11px 4px; border:2px solid var(--ink); border-radius:999px; background:var(--paper);
    font-size:12.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; line-height:1.2; color:var(--ink); }
  .pill i{ width:8px; height:8px; border-radius:50%; background:var(--ink); }
  .pill.live{ background:var(--lime); } .pill.soon{ background:var(--pine); }
  .pills{ display:flex; flex-wrap:wrap; gap:8px; }

  /* games grid */
  .filters{ display:flex; flex-wrap:wrap; gap:8px; }
  .chip{ padding:8px 16px; border:2px solid var(--ink); border-radius:999px; background:var(--paper); font-weight:700; font-size:14.5px; cursor:pointer; }
  .chip:hover{ background:var(--soft); }
  .chip[aria-pressed="true"]{ background:var(--ink); color:var(--paper); }
  .chip sup{ margin-left:4px; font-size:11px; opacity:.7; }
  .grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:clamp(18px,2.4vw,30px); }
  .card{ display:flex; flex-direction:column; padding:0; color:inherit; text-decoration:none; outline:none; border:var(--edge); border-radius:var(--r); overflow:hidden; background:var(--paper); text-align:left; cursor:pointer;
    box-shadow:5px 5px 0 var(--ink); transition:translate .15s ease, box-shadow .15s ease; }
  .card .cover{ position:relative; display:block; aspect-ratio:301/180; /* the 301×180 lobby-tile shape the key art comes in */ border-bottom:var(--edge); background:var(--soft); }
  .card .cover img{ position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover; }
  .card .pill{ position:absolute; top:12px; left:12px; }
  .card .info{ display:flex; flex-direction:column; gap:4px; padding:14px 16px 16px; }
  .card .name{ font:400 clamp(15px, .9vw + 11px, 21px)/1.1 var(--display); }
  .card .meta{ font-size:14px; color:var(--muted); font-weight:500; }
  .none{ grid-column:1 / -1; padding:40px 0; color:var(--muted); }
  @media (max-width:600px){
    .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 12px; }
    .card .pill{ top:8px; left:8px; padding:3px 8px 2px; font-size:10.5px; }
    .card .info{ padding:10px 12px 12px; }
    .card .meta{ font-size:12.5px; }
  }

  /* back catalogue ("Legacy Games", early work): collapsed to one bar */
  .archive summary{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 22px; border:var(--edge); border-radius:var(--r);
    background:var(--soft); cursor:pointer; list-style:none; }
  .archive summary::-webkit-details-marker{ display:none; }
  .archive summary b{ font:400 clamp(17px, .8vw + 13px, 22px)/1.1 var(--display); }
  .archive summary small{ display:block; margin-top:3px; font:600 13.5px/1.2 var(--ui); color:var(--muted); }
  .archive .count{ display:flex; align-items:center; gap:10px; flex:none; font-weight:700; color:var(--muted); }
  .archive .count::after{ content:"+"; display:grid; place-items:center; width:30px; height:30px; border:2px solid var(--ink); border-radius:50%;
    background:var(--paper); color:var(--ink); font-weight:800; font-size:18px; line-height:1; }
  .archive[open] .count::after{ content:"−"; }
  .archive summary:hover{ background:var(--rule); }
  .archive .grid{ margin-top:clamp(20px,3vw,32px); }
  @media (max-width:600px){ .archive summary{ padding:12px 14px; } }

  /* game tiles: flat, the art is the tile (its title is in the art); touched, a tile lifts and its 3D shadow shows in its
     game's accent (the colour of the title in its key art, from games.js), or its status colour without one */
  .card, .feature{ --sh:var(--pine); } :is(.card, .feature).live{ --sh:var(--lime); } :is(.card, .feature)[style*="--art"]{ --sh:var(--art); }
  .card{ box-shadow:none; } .card:hover, .card:focus-visible{ translate:-4px -4px; box-shadow:8px 8px 0 var(--sh); }
  .card.has-art .cover{ border-bottom:0; } .card.has-art .info{ display:none; }

  /* studio */
  .studio .cols{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(32px,6vw,88px); align-items:start; }
  .facts{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin:0; padding:0; list-style:none; }
  .facts li{ padding:22px 22px 24px; border:var(--edge); border-radius:var(--r); background:var(--paper); box-shadow:5px 5px 0 var(--ink); }
  .facts b{ display:block; font:400 clamp(17px, .5vw + 14px, 20px)/1.1 var(--display); }
  .facts b::before{ content:attr(data-n); display:block; margin-bottom:12px; font-size:15px; color:var(--punch); }
  .facts span{ display:block; margin-top:10px; font-size:15.5px; color:#333; }
  @media (max-width:980px){ .studio .cols{ grid-template-columns:1fr; } }
  @media (max-width:560px){ .facts{ grid-template-columns:1fr; } }

  /* contact */
  .ops .panel{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,420px); gap:clamp(28px,5vw,72px); align-items:center;
    padding:clamp(28px,4vw,56px); border:var(--edge); border-radius:calc(var(--r) + 8px); background:var(--paper); box-shadow:10px 10px 0 var(--ink); }
  .offer{ display:grid; gap:10px; margin:24px 0 0; padding:0; list-style:none; }
  .offer li{ display:grid; grid-template-columns:28px 1fr; gap:12px; align-items:center; font-weight:600; }
  .offer li::before{ content:""; width:26px; height:26px; border:2px solid var(--ink); border-radius:50%;
    background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23141414' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat; }
  .contact{ display:grid; gap:14px; padding:24px; border:var(--edge); border-radius:var(--r); background:var(--soft); }
  .contact label small{ font-weight:600; letter-spacing:0; text-transform:none; color:var(--muted); }
  .contact label{ display:grid; gap:6px; font-weight:800; font-size:13px; letter-spacing:.08em; text-transform:uppercase; }
  .contact input, .contact textarea{ width:100%; padding:12px 14px; border:var(--edge); border-radius:12px; background:var(--paper); font:16px/1.4 var(--ui); resize:vertical; }
  .contact input:focus-visible, .contact textarea:focus-visible{ outline:3px solid var(--pine); outline-offset:0; }
  .contact .btn{ margin-top:4px; }
  .contact .note{ margin:0; font-size:13.5px; color:var(--muted); text-align:center; }
  @media (max-width:900px){ .ops .panel{ grid-template-columns:1fr; } }

  /* footer */
  footer{ background:var(--ink); color:#eee; }
  footer .top{ display:grid; grid-template-columns:auto 1fr auto; gap:32px 56px; align-items:center; padding-block:56px 40px; }
  footer .brand{ display:flex; align-items:center; gap:14px; }
  footer .brand img{ display:block; width:140px; height:auto; }
  footer .brand img.m{ width:66px; }
  footer nav{ display:flex; flex-wrap:wrap; gap:14px 32px; font-weight:700; font-size:15px; }
  footer nav a{ text-decoration:none; } footer nav a:hover{ color:var(--pine); }
  .socials{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
  .socials a{ display:grid; place-items:center; width:42px; height:42px; border:2px solid #fff; border-radius:50%; color:#fff; transition:background .15s, color .15s; }
  .socials a:hover{ background:var(--pine); border-color:var(--pine); color:var(--ink); }
  .socials svg{ width:18px; height:18px; fill:currentColor; }
  .socials.on-light{ margin-top:26px; }
  .socials.on-light span{ margin-right:4px; font-weight:700; font-size:15px; }
  .socials.on-light a{ border:var(--edge); color:var(--ink); background:var(--paper); box-shadow:3px 3px 0 var(--ink); }
  .socials.on-light a:hover{ background:var(--pine); }
  footer .rg{ display:flex; align-items:center; gap:12px; max-width:34ch; font-size:14px; color:#bbb; }
  .age{ display:grid; place-items:center; flex:none; width:40px; height:40px; border:2px solid #fff; border-radius:50%; font-weight:800; font-size:13px; color:#fff; }
  footer .bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; padding-block:18px 28px; border-top:1px solid #333; font-size:13.5px; color:#999; }
  footer .top{ grid-template-columns:auto 1fr auto auto; }
  @media (max-width:980px){ footer .top{ grid-template-columns:1fr; } }

  /* phones in portrait */
  @media (max-width:600px){
    .kicker{ margin-bottom:10px; font-size:12px; letter-spacing:.14em; }
    .lead{ margin-top:14px; font-size:16px; }
    .hero .pitch{ font-size:17px; font-weight:500; }
    .hero .ctas{ gap:10px; margin-top:22px; }
    .hero .ctas .btn{ padding:11px 18px; font-size:15px; box-shadow:3px 3px 0 var(--ink); }
    .filters{ flex-wrap:nowrap; overflow-x:auto; margin-inline:calc(-1 * var(--gutter)); padding:2px var(--gutter) 6px; scrollbar-width:none; }
    .filters::-webkit-scrollbar{ display:none; }
    .chip{ flex:none; padding:7px 13px; font-size:14px; }
    .facts{ gap:12px; }
    .facts li{ padding:16px 18px 18px; box-shadow:4px 4px 0 var(--ink); }
    .facts b::before{ margin-bottom:8px; font-size:13px; }
    .facts span{ margin-top:6px; font-size:15px; }
    .ops .panel{ padding:24px 18px; border-radius:var(--r); box-shadow:5px 5px 0 var(--ink); }
    .contact{ padding:0; border:0; background:none; }
    .offer{ margin-top:18px; gap:8px; } .offer li{ font-weight:500; }
    footer .top{ gap:24px; padding-block:40px 28px; }
  }
  /* the latest-release card on a phone: buttons and badges shrink so nothing runs off the edge */
  @container (max-width:520px){
    .feature .btn.sm{ padding:7px 11px; font-size:13px; gap:6px; box-shadow:2px 2px 0 var(--ink); }
    .feature .pill{ padding:3px 8px 2px; font-size:10px; }
    .feature .pills{ gap:5px; }
    .feature .ctas{ gap:7px; padding-top:10px; }
  }
  @supports not (container-type:inline-size){
    .feature .body{ padding:24px 26px; }
    .feature h2, .feature h3{ margin-top:10px; font-size:30px; }
    .feature .desc{ margin-top:8px; font-size:15px; }
    .feature .pill{ font-size:12px; }
    .feature .specs{ margin-top:14px; } .feature .specs div{ padding:7px 0; }
    .feature .specs dt{ font-size:12px; } .feature .specs dd{ font-size:14px; }
    .feature .ctas{ padding-top:16px; }
  }
  /* reduced motion: html.still is set by site.js from the visitor's setting or ?still (a debug link to preview it). Only
     the big whole-screen motion stops: the rays stay put and the page doesn't smooth-scroll; everything else moves */
  html.still{ scroll-behavior:auto; } html.still .rays{ animation:none; }
  @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } .rays{ animation:none; } } /* (before the script runs) */

/* ---------- pages ---------- */
/* the inner pages open with a soft-grey band (the hero's colour and rays) holding the nav and the page title */
.page-head{ position:relative; overflow:hidden; isolation:isolate; background:#efefec; border-bottom:var(--edge); --rays:rgba(255,255,255,.75); }
.page-head .rays{ top:120%; }
.page-head > .wrap{ padding-block:calc(var(--navh) + clamp(36px,5vw,64px)) clamp(36px,5vw,56px); }
.page-head h1{ font-size:clamp(40px, 7vw + 8px, 92px); }
.page-head .lead{ margin-top:14px; }
.crumb{ margin:0 0 12px; font-weight:700; font-size:14.5px; } .crumb a{ text-decoration:none; } .crumb a:hover{ text-decoration:underline; }

/* home: latest games, a row with a link to all of them */
.row-head{ display:flex; align-items:end; justify-content:space-between; gap:16px 32px; flex-wrap:wrap; margin-bottom:clamp(24px,3vw,36px); }
.more-link{ font-weight:800; font-size:15.5px; text-decoration:none; white-space:nowrap; border-bottom:3px solid var(--pine); padding-bottom:2px; }
.more-link:hover{ border-color:var(--punch); }
.latest{ grid-template-columns:repeat(4, minmax(0,1fr)); }
@media (max-width:1000px){ .latest{ grid-template-columns:repeat(2, minmax(0,1fr)); } }

/* home: what we do, one big tile per kind of game */
.kinds{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(18px,2.4vw,30px); }
.kind{ display:grid; align-content:end; gap:10px; min-height:clamp(220px,24vw,300px); padding:clamp(22px,3vw,34px); border:var(--edge); border-radius:calc(var(--r) + 6px);
  color:var(--ink); text-decoration:none; box-shadow:6px 6px 0 var(--ink); transition:translate .15s ease, box-shadow .15s ease; position:relative; overflow:hidden; isolation:isolate; }
.kind:hover{ translate:-3px -3px; box-shadow:9px 9px 0 var(--ink); }
.kind.slots{ background:var(--pine); } .kind.instant{ background:var(--orange); }
.kind::before{ content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(circle, rgba(255,255,255,.35) 0 2px, transparent 2.5px) 0 0 / 22px 22px; }
.kind h3{ font-size:clamp(30px, 3vw + 10px, 48px); } .kind p{ margin:0; max-width:40ch; font-weight:500; }
.kind .go{ font-weight:800; } .kind .n{ position:absolute; top:clamp(18px,2.4vw,28px); right:clamp(20px,2.6vw,30px); font:400 clamp(36px,4vw,60px)/1 var(--display); opacity:.9; }
@media (max-width:700px){ .kinds{ grid-template-columns:1fr; } }

/* home: short teasers in the coloured bands, each pointing to its page */
.teaser{ display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:24px 48px; }
.teaser .btn{ flex:none; }

/* a game's own page */
.game-page .feature{ box-shadow:8px 8px 0 var(--sh); }
.game-page .feature .desc{ font-size:max(14px, 1.3cqw); }
@media (max-width:1000px){
  .game-page .feature{ grid-template-columns:1fr; }
  .game-page .feature .art{ border-right:0; border-bottom:var(--edge); }
  .game-page .feature .body{ padding:clamp(18px,4vw,30px); }
  .game-page .feature .pill{ font-size:12px; }
  .game-page .feature h1{ margin-top:12px; font-size:clamp(28px,5vw,40px); }
  .game-page .feature .desc{ display:block; margin-top:10px; font-size:15.5px; }
  .game-page .feature .specs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:16px; } .game-page .feature .specs div{ padding:8px 0; }
  .game-page .feature .specs :is(.wide, .wide2){ display:block; }
  .game-page .feature .specs dt{ font-size:12px; } .game-page .feature .specs dd{ font-size:14.5px; }
  .game-page .feature .ctas{ padding-top:18px; }
}
#featured .feature{ cursor:pointer; } #featured .feature:hover{ translate:-3px -3px; box-shadow:11px 11px 0 var(--sh); } #featured .feature{ box-shadow:8px 8px 0 var(--sh); transition:translate .15s ease, box-shadow .15s ease; }
/* a tile without key art keeps the art's shape: the name sits on the placeholder, so rows line up */
.card{ position:relative; }
.card:not(.has-art) .cover{ border-bottom:0; }
.card:not(.has-art) .info{ position:absolute; left:0; right:0; bottom:0; background:none; }
/* the first section under a page's header starts closer to it; a game page's header is just the way back */
.page-head + main > section.block:first-child{ padding-top:clamp(32px,4vw,52px); }
.page-head.slim > .wrap{ padding-block:calc(var(--navh) + 8px) 20px; }
.page-head.slim .crumb{ margin:0; }
/* home is just the opening screen: the hero and the ticker fill the window */
/* (home has no footer: the hero grows to fill whatever the ticker leaves, so the ticker sits on the bottom edge) */
.home main{ display:flex; flex-direction:column; min-height:100svh; }
.home .hero{ flex:1; display:grid; align-content:center; }
.home .ticker{ border-bottom:0; }
.home .hero > .wrap{ width:100%; }

/* ---------- the inner pages: a plain base (nav, intro); the look comes from a theme in /themes/ ---------- */
/* the menu tab and its panel (the theme restyles them) */
.menu-tab{ position:fixed; top:14px; right:14px; z-index:60; padding:10px 14px; border:0; background:var(--ink); color:#fff; font:800 13px/1 var(--ui);
  letter-spacing:.14em; text-transform:uppercase; cursor:pointer; }
.pmenu{ position:fixed; inset:0; z-index:59; display:grid; align-content:center; padding:var(--gutter); background:#fff; }
.pmenu .pm-list{ display:grid; gap:inherit; justify-items:inherit; }
.pmenu a{ display:block; font:400 clamp(40px,8vw,110px)/1 var(--display); text-decoration:none; }
.pmenu small{ display:block; font:800 12px/1 var(--ui); letter-spacing:.14em; }
html.menu-open{ overflow:hidden; }
.intro{ padding-block:clamp(40px,6vw,88px) clamp(8px,2vw,24px); }
.intro h1{ font-size:clamp(52px, 9vw + 8px, 132px); line-height:.92; }
.intro .lead{ margin-top:clamp(14px,2vw,24px); max-width:62ch; font-size:clamp(18px, .7vw + 14px, 22px); }
.intro.slim{ padding-block:clamp(20px,3vw,32px) 0; } .intro .crumb{ margin:0; }
.inner main > section.block:nth-child(2){ padding-top:clamp(32px,4vw,52px); }

/* home: the menu tab in the corner (no links row); its panel takes the home page's look: soft grey, big ink titles */
.home .menu-tab{ top:18px; right:18px; padding:12px 18px; border:2.5px solid var(--ink); border-radius:999px; background:#fff; color:var(--ink); box-shadow:4px 4px 0 var(--ink); }
.home .menu-tab:hover{ background:var(--pine); }

/* the menu tab is three lines (turning into an X while open) */
.menu-tab{ display:grid; align-content:center; gap:5px; width:46px; height:46px; padding:0 12px !important; }
.menu-tab i{ display:block; height:2.5px; border-radius:2px; background:currentColor; transition:translate .2s, rotate .2s, opacity .2s; }
.menu-tab[aria-expanded="true"] i:nth-child(1){ translate:0 7.5px; rotate:45deg; }
.menu-tab[aria-expanded="true"] i:nth-child(2){ opacity:0; }
.menu-tab[aria-expanded="true"] i:nth-child(3){ translate:0 -7.5px; rotate:-45deg; }
.home .menu-tab{ width:50px; height:50px; border-radius:50%; padding:0 13px !important; }

/* home: the slot machine sits on the top-left corner of the hero letters (behind them), sized with the logo */
.hero-logo{ position:relative; container-type:inline-size; width:min(820px, calc(100vw - 2 * var(--gutter))); }
.hero-logo .wm{ width:100%; }
.hero-logo h1{ position:relative; z-index:1; }
/* every size is a fixed share of the logo's width (cqw), so the machine keeps exactly the same size and place against the
   letters at any screen width; it stays inside the logo's left edge so it never runs off screen */
/* (the tilt is drawn inside the SVG, not a CSS rotate on the button: a rotated element turns into a blurry bitmap as soon as anything in it animates) */
.hero-logo .slot-logo{ position:absolute; z-index:0; left:-1cqw; top:-19.5cqw; margin:0; scale:none; }
.hero-logo .slot-logo svg{ width:28.5cqw; height:auto; }
.hero-logo .slot-logo > img{ width:6cqw; margin:0; }
/* "spin me!": a handwritten note with a loopy arrow pointing at the machine; it writes itself in after the letters fill
   and stays */
.spin-me{ position:absolute; z-index:0; left:27cqw; top:-16.5cqw; width:24cqw; pointer-events:none; color:var(--ink); }
.spin-me span{ display:block; margin-left:10cqw; font:700 5.4cqw/1 'Caveat', cursive; rotate:-7deg; white-space:nowrap; animation:spin-me-in .5s 1.6s both, spin-me-wiggle 4s 3s ease-in-out infinite; }
.spin-me svg{ display:block; width:15cqw; margin-top:.2cqw; overflow:visible; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.spin-me path{ stroke-dasharray:1; stroke-dashoffset:1; }
.spin-me .shaft{ animation:spin-me-draw .7s 1.9s ease-in-out forwards; }
.spin-me .head{ animation:spin-me-draw .2s 2.6s ease-out forwards; }
@keyframes spin-me-in{ from{ opacity:0; scale:.6; } }
@keyframes spin-me-draw{ to{ stroke-dashoffset:0; } }
@keyframes spin-me-wiggle{ 0%, 84%, 100%{ rotate:-7deg; } 88%{ rotate:-1deg; } 92%{ rotate:-11deg; } 96%{ rotate:-4deg; } }
@media (orientation:portrait){ .spin-me{ left:35cqw; top:-22.5cqw; width:34cqw; } .spin-me span{ font-size:7.6cqw; margin-left:14cqw; } .spin-me svg{ width:21cqw; } }
.home .hero > .wrap{ padding-top:calc(var(--navh) + min(820px, 100vw - 2 * var(--gutter)) * .2); } /* room above the logo for the machine, in proportion */
/* inner pages: the footer always sits at the very bottom, even on a page shorter than the window */
body.inner{ display:flex; flex-direction:column; min-height:100svh; }
body.inner > main{ flex:1 0 auto; overflow:clip; } body.inner > footer{ flex:none; } /* clip: the title's rays (a huge square) would otherwise stretch the page past the footer on wide screens */
html:has(body.inner){ background:var(--ink); } /* past the footer (overscroll) it's footer colour, never white */

/* ---------- the inner pages' look ("free stage": the home page's world, nothing boxed) ---------- */
/* Free stage: the inner pages are the home page's world with nothing boxed in. Soft grey, white rays behind the title,
   no panels, no rules, no grid lines: just big type, the real key art as chunky cartoon objects (ink outline + hard
   shadow, like the home buttons) and the juice colours as accents. Space separates things, not lines. */
body.inner{ --c:var(--pine); background:#efefec; }
body.inner.page-studio{ --c:var(--lime); } body.inner.page-contact{ --c:var(--orange); } body.inner.page-game{ --c:var(--punch); }

/* menu button: the home page's round white one */
body.inner .menu-tab{ top:18px; right:18px; width:50px; height:50px; padding:0 13px !important; border:2.5px solid var(--ink); border-radius:50%; background:#fff; color:var(--ink); box-shadow:4px 4px 0 var(--ink); }
body.inner .menu-tab:hover{ background:var(--pine); }
body:is(.inner, .home) .pmenu{ background:#efefec; gap:clamp(4px,1vw,12px); z-index:70; } /* above the ticker */
body:is(.inner, .home) .pmenu a:hover, body:is(.inner, .home) .pmenu a[aria-current="page"]{ color:var(--orange); }

/* the title: white rays fanning out behind it, as on the home page */
body.inner .intro{ position:relative; isolation:isolate; padding-block:clamp(72px,9vw,128px) clamp(12px,2vw,24px); }
body.inner .intro::before{ content:""; position:absolute; z-index:-1; left:clamp(80px,20vw,300px); top:55%; width:240vmax; aspect-ratio:1; translate:-50% -50%; pointer-events:none;
  background:repeating-conic-gradient(rgba(255,255,255,.8) 0 6deg, transparent 6deg 12deg);
  -webkit-mask:radial-gradient(closest-side, #000 4%, transparent 32%); mask:radial-gradient(closest-side, #000 4%, transparent 32%); }
/* the rays stay behind everything: the sections after the intro sit on a layer above it */
body.inner main > section:not(.intro), body.inner footer{ position:relative; z-index:1; }
body.inner .intro h1{ font-size:clamp(56px, 9vw + 10px, 136px); line-height:.9; }
body.inner .intro .lead{ font-weight:500; }
body.inner .intro.slim::before{ display:none; }

/* sections: no bands, no boxes; plain headings with space between */
body.inner :is(.studio, .ops){ background:transparent; }
body.inner :is(.studio, .ops, footer)::before, body.inner :is(.studio, .ops)::after{ display:none; }
body.inner :is(.head, .row-head){ margin-bottom:clamp(20px,2.6vw,32px); }
body.inner .kicker{ display:inline-block; padding:5px 12px 4px; border:2px solid var(--ink); border-radius:999px; background:var(--c); font-size:12px; }
body.inner h2{ font-size:clamp(30px, 3.6vw + 10px, 56px); }

/* game art: chunky cartoon objects floating on the grey */
body.inner .card{ border:2.5px solid var(--ink); border-radius:18px; box-shadow:5px 5px 0 var(--ink); background:#fff; }
body.inner .card:hover, body.inner .card:focus-visible{ translate:-3px -4px; box-shadow:8px 9px 0 var(--ink); }
body.inner .card:not(.has-art) .cover{ background:#e2e1dc; }
body.inner .feature{ border:2.5px solid var(--ink); border-radius:24px; box-shadow:8px 8px 0 var(--ink) !important; background:#fff; }
body.inner .chip{ background:#fff; border-width:2px; } body.inner .chip:hover{ background:var(--pine); }
body.inner .chip[aria-pressed="true"]{ background:var(--ink); color:#fff; }

/* studio: the three crafts as big words, each with its line; the counts as huge numbers; the platforms and casinos as pills */
body.inner .crafts{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(24px,4vw,56px); margin:clamp(24px,3vw,40px) 0 0; padding:0; list-style:none; }
body.inner .crafts b{ display:block; font:400 clamp(48px, 5vw + 14px, 96px)/1 var(--display); }
body.inner .crafts li:nth-child(1) b{ box-shadow:inset 0 -.22em 0 var(--pine); } body.inner .crafts li:nth-child(2) b{ box-shadow:inset 0 -.22em 0 var(--lime); }
body.inner .crafts li:nth-child(3) b{ box-shadow:inset 0 -.22em 0 var(--orange); }
body.inner .crafts b{ width:max-content; padding:0 .04em; }
body.inner .crafts span{ display:block; margin-top:14px; max-width:30ch; font-size:17px; color:#333; }
body.inner .tally{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:20px; margin:0; padding:0; list-style:none; }
body.inner .tally b{ display:block; font:400 clamp(64px, 6vw + 20px, 128px)/.9 var(--display); }
body.inner .tally span{ display:block; margin-top:8px; font-weight:700; font-size:16px; letter-spacing:.06em; text-transform:uppercase; }
body.inner .where{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(24px,4vw,56px); margin-top:clamp(20px,2.4vw,32px); }
body.inner .where h3{ margin-bottom:14px; font-size:clamp(22px, 1vw + 16px, 30px); }
body.inner .where .pills{ gap:12px; margin:0; }
body.inner .where .pill{ padding:10px 18px 9px; font-size:15px; letter-spacing:.04em; border-width:2.5px; background:#fff; box-shadow:3px 3px 0 var(--ink); }
@media (max-width:860px){ body.inner .crafts, body.inner .where{ grid-template-columns:1fr; } body.inner .tally{ grid-template-columns:repeat(2, minmax(0,1fr)); row-gap:28px; } }

body.inner .more-link{ padding:8px 16px; border:2.5px solid var(--ink); border-radius:999px; background:#fff; box-shadow:3px 3px 0 var(--ink); }
body.inner .more-link:hover{ background:var(--pine); }
body.inner .join-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px 40px; padding-block:clamp(8px,2vw,24px); }

/* contact: the text free on the left; the form is the one cartoon object (white, ink outline, hard shadow) */
body.inner .ops .panel{ padding:0; border:0; background:none; box-shadow:none; }
body.inner .contact{ padding:clamp(20px,2.4vw,30px); background:#fff; border:2.5px solid var(--ink); border-radius:24px; box-shadow:8px 8px 0 var(--ink); }
body.inner .contact input, body.inner .contact textarea{ border-width:2px; background:#f7f7f4; }

body.inner footer{ margin-top:clamp(48px,6vw,88px); }
@media (max-width:600px){ body.inner .intro::before{ left:20%; } body.inner .menu-tab{ top:12px; right:12px; } }

/* phones: the featured card stacks (art on top, details below); tiles without art keep just the name, clear of the pill */
@media (max-width:640px){
  body.inner #featured .feature{ grid-template-columns:1fr; }
  body.inner #featured .feature .art{ border-right:0; border-bottom:2.5px solid var(--ink); }
  body.inner #featured .feature .body{ padding:16px 18px 20px; }
  body.inner #featured .feature h3{ margin-top:10px; font-size:clamp(28px, 8vw, 38px); }
  body.inner #featured .feature .desc{ display:block; margin-top:8px; font-size:15px; }
  body.inner #featured .feature .ctas{ padding-top:14px; }
  body.inner .card:not(.has-art) .meta{ display:none; }
  body.inner .card:not(.has-art) .info{ padding:0 12px 10px; }
  body.inner .card:not(.has-art) .name{ font-size:clamp(14px, 4vw, 17px); line-height:1.05; }
  body.inner .card .pill{ top:8px; left:8px; }
}

/* the small round things get the home buttons' hard shadow too, so everything reads as the same cartoon kit */
body.inner .chip{ box-shadow:3px 3px 0 var(--ink); transition:translate .12s, box-shadow .12s; }
body.inner .chip:hover{ translate:-1px -1px; box-shadow:4px 4px 0 var(--ink); }
body.inner .chip[aria-pressed="true"]{ box-shadow:3px 3px 0 var(--pine); }
body.inner .kicker{ box-shadow:2px 2px 0 var(--ink); }
body.inner .crumb a{ display:inline-block; padding:8px 16px; border:2.5px solid var(--ink); border-radius:999px; background:#fff; box-shadow:3px 3px 0 var(--ink); text-decoration:none; }
body.inner .crumb a:hover{ background:var(--pine); text-decoration:none; }

/* Legacy: the original bar (outline, round corners, the count and the +/- at the right end); white so it shows on the grey */
body.inner .archive summary{ background:#fff; } body.inner .archive summary:hover{ background:#fafaf7; }

/* the selected filter: juice yellow, pushed in (the shadow nearly gone), like a pressed home button */
body.inner .chip[aria-pressed="true"]{ background:var(--pine); color:var(--ink); translate:2px 2px; box-shadow:1px 1px 0 var(--ink); }
body.inner .chip[aria-pressed="true"]:hover{ translate:2px 2px; box-shadow:1px 1px 0 var(--ink); }


/* the menu: the home page's rays behind the page names, centred; touched, a name fills with its juice */
body:is(.inner, .home) .pmenu{ align-content:center; justify-items:center; text-align:center; gap:0; isolation:isolate; overflow:hidden; padding-block:0; }
body:is(.inner, .home) .pmenu::before{ content:""; position:absolute; z-index:-1; left:50%; top:50%; width:240vmax; aspect-ratio:1; translate:-50% -50%;
  background:repeating-conic-gradient(rgba(255,255,255,.85) 0 6deg, transparent 6deg 12deg); -webkit-mask:radial-gradient(closest-side, #000 6%, transparent 40%); mask:radial-gradient(closest-side, #000 6%, transparent 40%); }
body:is(.inner, .home) .pmenu a{ position:relative; font-size:min(10vw + 8px, 16vh, 150px); line-height:1.05; } /* as big as fits: four names always fit the screen */
body:is(.inner, .home) .pmenu::before{ position:fixed; }
body:is(.inner, .home) .pmenu small{ display:none; }
body:is(.inner, .home) .pmenu a:hover{ color:#fff; -webkit-text-stroke:.05em var(--ink); paint-order:stroke fill; text-shadow:.03em .045em 0 var(--ink), .06em .09em 0 var(--ink); }
body:is(.inner, .home) .pmenu a:nth-child(2):hover{ color:var(--pine); } body:is(.inner, .home) .pmenu a:nth-child(3):hover{ color:var(--lime); }
body:is(.inner, .home) .pmenu a:nth-child(4):hover{ color:var(--orange); }
body:is(.inner, .home) .pmenu a[aria-current="page"]{ color:var(--c); -webkit-text-stroke:.05em var(--ink); paint-order:stroke fill; text-shadow:.03em .045em 0 var(--ink), .06em .09em 0 var(--ink); }

.menu-tab{ z-index:71; } /* the X stays above the open menu */

/* studio, in the same kit as the other pages: section heads (pill + title), white cards with the ink outline and hard
   shadow like the game tiles and the contact form, black type; the page colour only in the small pills */
body.inner .crafts li, body.inner .tally li{ padding:clamp(20px,2.2vw,28px); border:2.5px solid var(--ink); border-radius:18px; background:#fff; box-shadow:5px 5px 0 var(--ink); }
body.inner .crafts b{ box-shadow:none !important; width:auto; padding:0; font-size:clamp(30px, 2vw + 16px, 48px); }
body.inner .crafts span{ margin-top:10px; font-size:16px; color:#333; }
body.inner .tally b{ font-size:clamp(48px, 4vw + 16px, 88px); }
body.inner .tally span{ font-size:13px; color:#333; }
body.inner .where{ grid-template-columns:repeat(2, minmax(0,1fr)); }
body.inner .where > div{ padding:clamp(20px,2.2vw,28px); border:2.5px solid var(--ink); border-radius:18px; background:#fff; box-shadow:5px 5px 0 var(--ink); }
body.inner .where .pill{ background:#fff; box-shadow:2px 2px 0 var(--ink); }
body.inner section[aria-label="In numbers"]{ padding-top:clamp(28px,3vw,40px); }
body.home .pmenu a[aria-current="page"]{ color:#fff; } /* home: Home is marked like the others, in white (the logo's face) */
body.inner section[aria-label="In numbers"]{ padding-top:clamp(20px,2.4vw,32px); } body.inner section[aria-labelledby="how-h"]{ padding-bottom:0; }

/* studio: the story so far, a line of releases left to right, each a dot on the line with its month and its art */
body.inner .story{ position:relative; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(150px, 1fr); gap:18px; margin:clamp(20px,2.4vw,32px) 0 0; padding:0 0 6px; list-style:none; overflow-x:auto; }
body.inner .story::before{ content:""; position:absolute; left:0; right:0; top:38px; height:3px; background:var(--ink); }
body.inner .story li{ position:relative; display:grid; gap:10px; align-content:start; }
body.inner .story .when{ font-weight:800; font-size:13px; letter-spacing:.1em; text-transform:uppercase; }
body.inner .story .dot{ width:20px; height:20px; border:3px solid var(--ink); border-radius:50%; background:var(--pine); }
body.inner .story li.next .dot{ background:#fff; }
body.inner .story a{ display:grid; gap:8px; text-decoration:none; }
body.inner .story img{ width:100%; aspect-ratio:301/180; object-fit:cover; border:2.5px solid var(--ink); border-radius:14px; box-shadow:4px 4px 0 var(--ink); transition:translate .12s, box-shadow .12s; }
body.inner .story a:hover img{ translate:-2px -3px; box-shadow:6px 7px 0 var(--ink); }
body.inner .story b{ font:400 clamp(17px, .6vw + 13px, 21px)/1.1 var(--display); }
body.inner .story small{ font-weight:600; font-size:13.5px; color:#555; }

/* studio colour: lime timeline dots; the platforms in yellow, the casinos in lime */
body.inner .where > div:first-child .pill{ background:var(--pine) !important; } body.inner .where > div:last-child .pill{ background:var(--lime) !important; }
body.inner .story .dot{ background:var(--lime) !important; } body.inner .story li.next .dot{ background:#fff !important; }
/* the timeline fits the page (no sideways scrolling); on narrow screens it runs downwards */
body.inner .story{ grid-auto-flow:row; grid-template-columns:repeat(auto-fit, minmax(0, 1fr)); grid-auto-columns:auto; overflow:visible; }
body.inner .story{ grid-template-columns:repeat(var(--n, 6), minmax(0, 1fr)); }
@media (max-width:760px){
  body.inner .story{ grid-template-columns:1fr; gap:22px; padding-left:34px; }
  body.inner .story::before{ left:9px; right:auto; top:0; bottom:0; width:3px; height:auto; }
  body.inner .story .dot{ position:absolute; left:-34px; top:0; }
  body.inner .story img{ max-width:260px; }
}
@media (max-width:760px){ body.inner .where{ grid-template-columns:1fr; } }

/* the slot's surprise: the falling symbols, behind the hero's letters and buttons (above its rays) */
.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 ticker: two rows, the white one on top running the other way */
.ticker2{ background:#fff; border-top:var(--edge); border-bottom:var(--edge); }
.ticker2 .ticker-track{ animation-direction:reverse; animation-duration:75s; }
.ticker li::after{ /* the divider: a red sparkle */ clip-path:polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }


.home .ticker.ticker2{ border-bottom:var(--edge); } /* the ink line between the two ticker rows */
/* the slot machine: further left on landscape screens (never past the screen edge); bigger on portrait ones */
@media (orientation:landscape){ .hero-logo .slot-logo{ left:max(-5cqw, 6px - var(--gutter)); } }
@media (orientation:portrait){ .hero-logo .slot-logo{ top:-25cqw; } .hero-logo .slot-logo svg{ width:36cqw; }
  .home .hero > .wrap{ padding-top:calc(var(--navh) + min(820px, 100vw - 2 * var(--gutter)) * .26); } }
.home .ticker.ticker2{ border-top:0; } /* the hero's own bottom line is the top line, so all three lines are the same weight */

.slot-logo:focus{ outline:none; } .slot-logo:focus-visible{ outline:3px solid var(--ink); outline-offset:4px; border-radius:12px; }