/* ==========================================================================
   MMA Studios: "sticker lid"
   The page is a matte-black laptop lid covered in real vinyl stickers.
   Dark only for now. No JavaScript. Fluid from 320 px to 1920 px.

   Contents
     1. Fonts (self-hosted latin subsets)
     2. Tokens
     3. Base, accessibility helpers
     4. The lid (background, scuffs, page wrappers)
     5. Sticker system (reusable)
     6. Header and nav
     7. Hero: name tag, headline label, bumper stickers, duel badge
     8. Our games: kiss-cut sticker sheet, "How it plays" label
     9. The studio
    10. Write to us (shipping label)
    11. Footer (masking tape)
    12. Page layout: tablet and desktop
    13. 404
    14. Motion, forced colours
    15. Interactions (js/site.js): dice, the email stamp, the duel, the shiny sticker
    16. Filling the gaps: the dice tray and the contact extras
   ========================================================================== */

/* 1. Fonts ---------------------------------------------------------------- */
/* Luckiest Guy and Permanent Marker: Apache License 2.0. Poppins: SIL OFL 1.1.
   Licence texts sit next to the files in /assets/fonts/. */
@font-face {
  font-family: "Luckiest Guy";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/luckiest-guy-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Permanent Marker";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/permanent-marker-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/poppins-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/poppins-latin-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/poppins-latin-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/poppins-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 2. Tokens --------------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* Brand (logo) */
  --ink: #1A1320;
  --ground: #16121C;
  --cream: #F5ECD7;
  --teal: #22C3B2;
  --teal-deep: #0E6B63;
  --pink: #F2427E;
  --pink-deep: #7D1B45;
  --gold: #FFB627;
  --gold-deep: #A8660A;

  /* Extra sticker vinyls */
  --yellow: #FFD23F;
  --violet: #8B6CFF;
  --violet-label: #6E4DF2;  /* violet deep enough for white text at 4.5:1+ */
  --pink-strip: #D6336C;    /* pink deep enough for white text at 4.5:1+ */
  --paper: #FFFFFF;

  /* The lid */
  --lid: #111114;
  --lid-hi: #202026;
  --lid-mid: #141417;
  --lid-lo: #0E0E11;
  --hinge: #08080A;         /* the footer bar: one step down */
  --sheet: #26252C;
  --screen: #0E0E11;

  /* Text */
  --on-lid: #E9E6F2;        /* 15:1 on the lid */
  --on-lid-soft: #B8B5C4;   /* 7.5:1 on the sticker sheet */
  --on-paper-soft: #5E5A6B; /* 6.7:1 on white */
  --rule: #DAD7E1;

  /* Tape */
  --tape: rgba(236, 226, 196, .55);
  --tape-strong: rgba(236, 226, 196, .86);

  /* Sticker physics */
  --cut: clamp(4px, 3.3px + .26vw, 7px);      /* die-cut white border */
  --cut-sm: clamp(3px, 2.6px + .1vw, 4px);
  --drop: 0 clamp(10px, 8.5px + .5vw, 18px) clamp(16px, 13px + 1vw, 30px) rgba(0, 0, 0, .6);
  --drop-sm: 0 6px 10px rgba(0, 0, 0, .5);

  /* Layout */
  --gutter: clamp(16px, 4.4vw - 1px, 56px);
  --content: 1240px;

  /* Type */
  --display: "Luckiest Guy", "Arial Black", Impact, sans-serif;
  --marker: "Permanent Marker", "Segoe Print", "Comic Sans MS", cursive;
  --body: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --focus: #FFD23F;
}

/* 3. Base ----------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background-color: var(--lid-lo);
  scroll-padding-top: 16px;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--on-lid);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg,
picture { display: block; max-width: 100%; }

a { color: inherit; }

h1, h2, h3, h4 { font-weight: 400; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
  border-radius: 4px;
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  z-index: 50;
  left: var(--gutter);
  top: 12px;
  padding: 12px 18px;
  border-radius: 8px;
  background: var(--yellow);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 0 0 var(--cut-sm) var(--paper), var(--drop-sm);
  transform: translateY(calc(-100% - 40px));
}
.skip:focus { transform: none; }
.skip:focus-visible { --focus: var(--paper); }

/* 4. The lid -------------------------------------------------------------- */
/* .scuffs: the faint scratches of a lid that has been carried around. */
.scuffs {
  background-color: var(--lid-lo);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='960' height='1400'%3E%3Cg fill='none' stroke='%23fff' stroke-linecap='round'%3E%3Cpath d='M60 430 270 340' stroke-opacity='.07'/%3E%3Cpath d='M600 560 900 470' stroke-opacity='.05'/%3E%3Cpath d='M180 1180 340 1210' stroke-opacity='.06'/%3E%3Cpath d='M720 1040 890 1070' stroke-opacity='.05'/%3E%3Cpath d='M430 120 520 104' stroke-opacity='.05'/%3E%3Cpath d='M40 760Q90 745 150 752' stroke-opacity='.045'/%3E%3Cpath d='M820 250 860 236' stroke-opacity='.06'/%3E%3Cpath d='M330 900 352 893' stroke-opacity='.08'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(ellipse max(125vw, 620px) 1500px at 28% 240px, var(--lid-hi) 0%, var(--lid-mid) 55%, var(--lid-lo) 100%);
  background-repeat: repeat, no-repeat;
  background-size: 960px 1400px, auto;
}

.lid {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden; /* old browsers */
  overflow-x: clip;   /* stickers may hang off the edge; the page never scrolls sideways */
}

.lid > main { flex: 1 0 auto; }
.wrap {
  width: 100%;
  max-width: calc(var(--content) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* 5. Sticker system -------------------------------------------------------- */
/* .sticker   anything stuck on the lid: sits at a small angle (--r) and casts a soft shadow
   .diecut    adds the white die-cut border (set --cut-color for a coloured one)
   .sheen     a diagonal band of vinyl gloss
   .peel      folds the bottom-right corner over; put a .peel__curl inside
   .decal     an SVG sticker from /assets/stickers/*-cut.svg (border already built in)
   .tape      masking tape; .tape--torn gives it ripped ends
   .label     a white paper label with a coloured .label__strip on top
   .kisscut   a sheet of stickers; .kisscut__slot is the empty outline one left behind
   .marker    handwriting in permanent marker */
.sticker {
  position: relative;
  box-shadow: var(--drop);
  transform: rotate(var(--r, 0deg));
}
.diecut {
  box-shadow: 0 0 0 var(--cut) var(--cut-color, var(--paper)), var(--drop);
}
.sheen { isolation: isolate; }
.sheen::after {
  content: "";
  position: absolute;
  z-index: -1; /* above the sticker's own background, below its text */
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, var(--sheen, .22)) 46%, transparent 56%);
}
.peel {
  --peel: clamp(34px, 30px + 1.6vw, 56px);
  clip-path: polygon(
    -90px -90px,
    calc(100% + 90px) -90px,
    calc(100% + 90px) calc(100% - var(--peel) - 90px),
    calc(100% - var(--peel) - 90px) calc(100% + 90px),
    -90px calc(100% + 90px)
  );
}
/* A .peel sticker is clipped at its folded corner, and the clip would cut its drop shadow into a
   hard wedge on the lid. So a peeled sticker drops no box-shadow of its own: an unclipped
   .peel-shadow wrapper casts a soft one that follows the cut corner. */
.peel-shadow { filter: drop-shadow(0 clamp(8px, 7px + .45vw, 14px) clamp(7px, 6px + .5vw, 14px) rgba(0, 0, 0, .55)); }
.peel.sticker { box-shadow: none; }
.peel.diecut { box-shadow: 0 0 0 var(--cut) var(--cut-color, var(--paper)); }
.peel__curl {
  position: absolute;
  right: 0;
  bottom: 0;
  width: var(--peel);
  height: var(--peel);
  border-top-left-radius: 5px;
  background: linear-gradient(135deg, #EDEDF1 0%, #FFFFFF 40%, #C9C9D1 49.4%, transparent 50.4%);
  filter: drop-shadow(-2px -2px 3px rgba(0, 0, 0, .42));
  pointer-events: none;
}
.decal {
  height: auto;
  filter: drop-shadow(0 clamp(5px, 4px + .3vw, 9px) clamp(5px, 4px + .3vw, 9px) rgba(0, 0, 0, .55));
  transform: rotate(var(--r, 0deg));
}
.tape {
  background: var(--tape);
}
.tape--torn {
  clip-path: polygon(0 9%, 2.6% 0, 97.2% 0, 100% 11%, 98.2% 27%, 100% 44%, 98.5% 61%, 100% 79%, 97.6% 100%, 2.4% 100%, 0 89%, 1.7% 71%, 0 53%, 1.5% 35%, 0 20%);
}
.label {
  background: var(--paper);
  color: var(--ink);
  border-radius: clamp(9px, 8px + .3vw, 12px);
  --focus: var(--ink);
}
.label__strip {
  margin: 0;
  padding: clamp(8px, 7.4px + .2vw, 10px) clamp(14px, 13px + .3vw, 18px);
  border-radius: inherit;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  font-size: clamp(0.75rem, 0.725rem + .1vw, 0.8125rem);
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1.3;
  text-transform: uppercase;
}
.kisscut {
  position: relative;
  background: var(--sheet);
  border-radius: clamp(14px, 12px + .7vw, 22px);
  box-shadow:
    0 clamp(14px, 12px + .6vw, 22px) clamp(26px, 22px + 1.2vw, 40px) rgba(0, 0, 0, .7),
    inset 0 1px 0 rgba(255, 255, 255, .08);
  transform: rotate(var(--r, 0deg));
}
.kisscut__slot path {
  fill: rgba(255, 255, 255, .035);
  stroke: rgba(255, 255, 255, .36);
  stroke-width: 4;
  stroke-dasharray: 10 8;
  stroke-linecap: round;
}
.marker {
  font-family: var(--marker);
  font-weight: 400;
}
.scrawl {             /* hand-drawn arrows beside marker notes */
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 6. Header and nav ------------------------------------------------------- */
.site-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 16px;
  padding-top: clamp(16px, 2vw, 28px);
}
.navtags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px 14px;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
}
.navtag {
  --cut: var(--cut-sm);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 4px clamp(12px, 10px + .5vw, 18px);
  border-radius: 6px;
  color: var(--ink);
  font-size: clamp(0.8125rem, 0.775rem + .15vw, 0.9375rem);
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: 0 0 0 var(--cut) var(--paper), var(--drop-sm);
}
.navtag--studio { --r: -3deg; background: var(--teal); }
.navtag--games { --r: 2deg; background: var(--yellow); }
.navtag--contact { --r: -1.5deg; background: var(--pink); } /* ink on pink: 5:1 */

.home-tag {
  --r: -3deg;
  display: inline-block;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--paper);
  --focus: var(--yellow);
}
.home-tag img { width: clamp(132px, 120px + 3vw, 176px); height: auto; }

/* 7. Hero ------------------------------------------------------------------ */
.page {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: clamp(48px, 6vw, 72px);
  padding-top: clamp(20px, 3vw, 36px);
}

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: clamp(32px, 4vw, 44px);
  align-items: start;
}

/* The "HELLO my name is" slap tag */
.hero__tag {
  position: relative;
  width: min(86%, 380px);
  margin: 10px 0 0 2%;
}
.nametag {
  --r: -4deg;
  --sheen: .08; /* white on pink is 3.6:1; a stronger band pulled WE ARE down to 3.0:1 where it crossed */
  container-type: inline-size;
  background: var(--pink);
  color: var(--paper);
  border-radius: clamp(16px, 13px + .9vw, 28px);
}
.nametag__head {
  margin: 0;
  padding: 4.4cqi 0 3.6cqi;
  text-align: center;
}
.nametag__we {
  display: block;
  font-family: var(--display);
  font-size: 3rem;
  font-size: max(2.5rem, 16cqi);
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: -.04em; /* Luckiest Guy leaves empty descender room under its capitals */
}
.nametag__name {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2cqi;
  margin: 0 3.4cqi 3.4cqi;
  padding: 6.4cqi 4cqi 4.4cqi;
  border-radius: 3.2cqi;
  background: var(--paper);
}
.nametag__logo { width: 81cqi; height: auto; }
.nametag__line {
  width: 68cqi;
  height: auto;
  fill: none;
  stroke: var(--teal);
  stroke-width: 5;
  stroke-linecap: round;
}
.hero__die {
  --r: 18deg;
  position: absolute;
  z-index: 1;
  width: 24%;
  right: -13%;
  top: -9%;
}

/* The yellow label: the page's one h1 */
.headline {
  --r: 2deg;
  --sheen: .3;
  container-type: inline-size;
  width: calc(100% - 6px);
  margin-inline: auto;
  padding: clamp(14px, 12px + .9vw, 26px) clamp(16px, 13.5px + 1.1vw, 30px) clamp(10px, 8px + .8vw, 20px);
  border-radius: clamp(7px, 6px + .3vw, 10px);
  background: var(--yellow);
  color: var(--ink);
}
.headline h1 {
  margin: 0;
  font-family: var(--display);
  font-size: 1.75rem;
  /* The rem floor follows the reader's text size, but stops where the longest word
     ("independent", about 6.4em) still fits on the label: clipped words are worse than smaller ones. */
  font-size: min(max(1.75rem, 8.8cqi), 14.5cqi);
  line-height: 1.04;
  letter-spacing: .01em;
  overflow-wrap: break-word; /* last resort, for a wider fallback font */
  /* no uppercase transform: Luckiest Guy's lowercase are cap-height alternates, which gives
     the hand-lettered mix the mockup shows, and screen readers get plain sentence case */
}

/* Bumper stickers + the round duel badge. .slogans is a size container, so the pair can stack
   when the reader's text size is large for the space (the query below is in rem). */
.slogans { container: slogans / inline-size; }
.slogans__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "a a"
    "b c"
    "d c";
  align-items: center;
  column-gap: 10px;
  row-gap: clamp(16px, 1.6vw, 24px);
}
.bumpers { display: contents; }
.bumper {
  --cut: clamp(4px, 3.6px + .1vw, 5px);
  display: inline-block;
  justify-self: start;
  padding: .6em 1em;
  border-radius: 6px;
  font-size: clamp(1rem, 0.9062rem + .38vw, 1.25rem);
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}
.bumper--teal {
  --r: -3deg;
  grid-area: a;
  margin-left: 2%;
  background: var(--teal);
  color: var(--ink);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.bumper--ink {
  --r: 2deg;
  grid-area: b;
  justify-self: end;
  background: var(--ink);
  color: var(--paper);
}
.bumper--violet {
  --r: -2deg;
  grid-area: d;
  margin-left: 4%;
  background: var(--violet-label);
  color: var(--paper);
}
.badge {
  --r: 10deg;
  grid-area: c;
  container-type: inline-size;
  display: grid;
  place-items: center;
  width: clamp(112px, 99.7px + 4.2vw, 160px);
  width: max(clamp(112px, 99.7px + 4.2vw, 160px), 7rem); /* grows with a large text size, so its words stay inside the ring */
  aspect-ratio: 1;
  margin: 0;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: var(--drop);
  transform: rotate(var(--r));
}
.badge__in {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 90%;
  aspect-ratio: 1;
  border: max(3px, 2.4cqi) dashed var(--pink);
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  text-align: center;
}
.badge__num {
  font-family: var(--display);
  font-size: 23cqi;
  line-height: 1;
  color: var(--pink); /* 5:1 on ink */
  margin-bottom: .04em;
}
.badge__txt {
  display: block;
  max-width: 7em;
  font-size: max(0.75rem, 8.8cqi);
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.2;
  text-transform: uppercase;
}
/* Large text on a narrow screen: the badge moves under the bumpers, and the bumpers may wrap.
   At the default text size this never applies (a 320px screen gives 18rem). */
@container slogans (max-width: 17.5rem) {
  .slogans__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "a" "b" "d" "c";
  }
  .bumper { white-space: normal; }
  .badge { justify-self: end; margin-right: 8%; }
}

/* 8. Our games -------------------------------------------------------------- */
.games {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: clamp(36px, 5vw, 56px);
}
/* The games section, set apart from the studio above it: a full-width band of deep teal across the
   lid (owner's pick, 29 Sep), opened by the OUR GAMES title sticker. The band's content lines up
   with the rest of the page. */
.games {
  position: relative;
  margin: clamp(64px, 9vw, 110px) calc(50% - 50vw) 0;
  padding: clamp(28px, 4vw, 56px) max(var(--gutter), 50vw - var(--content) / 2) clamp(56px, 7vw, 96px);
  background: var(--teal-deep);
  box-shadow: inset 0 14px 30px -18px rgba(0, 0, 0, .6), inset 0 -14px 30px -18px rgba(0, 0, 0, .6);
}
.games__head {
  justify-self: start;
  margin: 0 0 0 1%;
  line-height: 0;
  transform: rotate(-3deg);
}
.games__title { display: block; width: clamp(220px, 160px + 17vw, 420px); height: auto; }
.games .note { color: var(--paper); } /* 6.4:1 on the teal */

.game { position: relative; }

.note {
  --r: -5deg;
  display: flex;
  width: fit-content;
  align-items: flex-end;
  gap: .25em;
  margin: 0 0 clamp(14px, 2vw, 24px) 4%;
  color: var(--on-lid);
  font-size: clamp(1.25rem, 1.0875rem + .7vw, 1.75rem);
  line-height: 1.1;
  transform: rotate(var(--r));
}
.note .scrawl { width: .8em; height: 1.35em; margin-bottom: -.35em; }

.sheet {
  --r: -1deg;
  container: sheet / inline-size;
}
.sheet__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "head  head"
    "brand brand"
    "pcs   pcs"
    "phone dice"
    "foot  foot";
  align-items: center;
  column-gap: 4cqi;
  row-gap: 5cqi;
  padding: max(12px, 3.4cqi) 5cqi;
}
.sheet__head,
.sheet__foot {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  margin: 0;
  color: var(--on-lid-soft);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.35;
  text-transform: uppercase;
}
.sheet__head { grid-area: head; }
.sheet__foot { grid-area: foot; }
.sheet__foot > :first-child { color: var(--on-lid); }
.sheet__tag-long { display: none; } /* phones show the short maker's mark "MMA" */
@container sheet (max-width: 329px) {
  .sheet__tag,
  .sheet__foot > :last-child { display: none; } /* 320px screens: room for the full head and "coming soon" lines */
}

.sheet__brand {
  grid-area: brand;
  display: flex;
  align-items: center;
  gap: 6cqi;
}
.sheet__icon {
  --r: 0deg;
  --sheen: .25;
  flex: none;
  width: 31cqi;
  border-radius: 25%;
  overflow: hidden;
}
.sheet__icon img { width: 100%; height: auto; }
.sheet__word {
  --r: -3deg;
  --cut-color: var(--pink);
  margin: 0;
  padding: .2em .34em .06em;
  border-radius: clamp(10px, 3cqi, 16px);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--display);
  font-size: 11cqi;
  line-height: .95;
  text-transform: uppercase;
}
.sheet__word span { display: block; }

.sheet__pieces {
  grid-area: pcs;
  display: flex;
  align-items: flex-end;
  gap: 3cqi;
}
.sheet__pieces .decal,
.kisscut__slot { width: 14.4cqi; height: auto; flex: none; }
.sheet__note {
  --r: -6deg;
  display: flex;
  align-items: center;
  gap: .3em;
  align-self: center;
  max-width: 10em;
  margin-left: 1cqi;
  color: var(--on-lid-soft);
  font-size: max(0.9375rem, 4.2cqi);
  line-height: 1.15;
  transform: rotate(var(--r));
}
.sheet__note .scrawl { width: 1.5em; height: .9em; }
.sheet__note-text > span { white-space: nowrap; } /* breaks as "stuck it / on the lid" or not at all */

.sheet__phone {
  --r: -2deg;
  grid-area: phone;
  width: 52cqi;
  margin: 0;
  padding: 2.2cqi;
  border-radius: 5cqi;
  background: var(--screen);
}
.sheet__phone img {
  width: 100%;
  height: auto;
  border-radius: 3cqi;
}
.sheet__dice {
  grid-area: dice;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4cqi;
  padding-right: 2cqi;
}
.sheet__dice .decal:first-child { --r: -10deg; width: 23cqi; }
.sheet__dice .decal:last-child { --r: 14deg; width: 20cqi; margin-left: 6cqi; }

.sheet__peeled {        /* the one sticker already peeled off the sheet, now on the lid */
  --r: 22deg;
  position: absolute;
  z-index: 2;
  width: clamp(50px, 42px + 2vw, 74px);
  right: -6px;
  top: clamp(-66px, -44px - 1.6vw, -50px);
}

/* Wide sheet: brand, pieces and dice on the left, the phone on the right. 530px, because the
   first two-column width (960px) gives the sheet about 553px, or 543px beside a classic scrollbar;
   the narrow arrangement there made a 900px-tall stretched phone. Every size in here is cqi, so
   the wide sheet at 530px is the same picture as at 560px, only smaller. */
@container sheet (min-width: 530px) {
  .sheet__grid {
    grid-template-areas:
      "head  head"
      "brand phone"
      "pcs   phone"
      "dice  phone"
      "foot  foot";
    column-gap: 4cqi;
    row-gap: 2.4cqi;
    padding: 2.2cqi 3.2cqi;
  }
  .sheet__head,
  .sheet__foot { font-size: max(0.75rem, 1.6cqi); }
  .sheet__tag-long { display: inline; }
  .sheet__brand { gap: 3.8cqi; }
  .sheet__icon { width: 19.2cqi; }
  .sheet__word { font-size: 7.2cqi; border-radius: 2cqi; }
  .sheet__pieces { gap: 2.4cqi; }
  .sheet__pieces .decal,
  .kisscut__slot { width: 8.8cqi; }
  .sheet__note { font-size: max(0.9375rem, 2.3cqi); max-width: none; margin-left: 1.4cqi; }
  .sheet__phone {
    --r: 3deg;
    width: 29.5cqi;
    padding: 1.3cqi;
    border-radius: 3.1cqi;
    margin: 1cqi 1.4cqi 0 0;
  }
  .sheet__phone img { border-radius: 1.8cqi; }
  .sheet__dice {
    flex-direction: row;
    align-items: flex-start;
    gap: 3cqi;
    margin-top: -1.4cqi;
    padding: 0 0 0 1.6cqi;
  }
  .sheet__dice .decal:first-child { width: 10cqi; }
  .sheet__dice .decal:last-child { width: 9.2cqi; margin: -.6cqi 0 0 0; }
}

/* "How it plays": a product label, with the round duel badge slapped on its top-right corner.
   The box carries the layout (the label clips its own corners, so the badge cannot live inside
   it). The badge overlaps only the label's dark strip, never its text, so the box is pushed
   down by the part of the badge that sticks out above the label. */
.howto-box {
  --badge: max(clamp(112px, 99.7px + 4.2vw, 160px), 7rem);
  position: relative;
  width: calc(100% - 8px);
  margin: calc(var(--badge) * .6) auto 0;
}
.howto {
  --r: 1.5deg;
  overflow: hidden;
}
.badge--duel {
  --r: 10deg;
  position: absolute;
  top: calc(var(--badge) * -.68);
  right: -4px;
  width: var(--badge);
  z-index: 1;
}
.howto__text {
  margin: 0;
  padding: clamp(14px, 12.5px + .4vw, 18px) clamp(16px, 14.5px + .4vw, 20px) 0;
  font-size: clamp(1rem, 0.9563rem + .19vw, 1.125rem);
  line-height: 1.55;
}
.facts {
  margin: clamp(12px, 11px + .3vw, 16px) clamp(16px, 14.5px + .4vw, 20px) clamp(16px, 14.5px + .4vw, 20px);
  padding: 0;
  border-top: 3px solid var(--ink);
}
.facts__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  column-gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 1rem;
  line-height: 1.4;
}
.facts__row:last-child { border-bottom-width: 3px; border-bottom-color: var(--ink); }
.facts dt { font-weight: 500; }
.facts dd { margin: 0 0 0 auto; font-weight: 700; text-align: right; }

/* 9. The studio ---------------------------------------------------------------- */
.studio {
  position: relative;
  align-self: start;
}
.studio__card {
  --r: -2.5deg;
  --sheen: .28;
  width: min(86%, 460px);
  margin-left: 1%;
  padding: clamp(16px, 14.5px + .5vw, 24px) clamp(18px, 16.5px + .5vw, 26px) clamp(24px, 21px + .8vw, 32px);
  border-radius: clamp(12px, 11px + .4vw, 16px);
  background: var(--teal);
  color: var(--ink);
}
.studio__card h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.625rem, 1.4375rem + .77vw, 2.125rem);
  line-height: 1;
  text-transform: uppercase;
}
.studio__card p {
  margin: .6em 0 0;
  font-size: clamp(1rem, 0.975rem + .1vw, 1.0625rem);
  line-height: 1.55;
}
.studio__tape {
  position: absolute;
  top: -10px;
  right: -24px;
  width: clamp(70px, 62px + 2vw, 92px);
  height: clamp(24px, 22px + .6vw, 30px);
  transform: rotate(38deg);
}
.studio__star {
  --r: -12deg;
  position: absolute;
  width: clamp(56px, 49px + 1.8vw, 76px);
  right: 0;
  bottom: 4%;
}

/* 10. Write to us ------------------------------------------------------------- */
.contact { position: relative; }
/* The .peel-shadow wrapper is the label's outer box, so it carries the width. Sized by its content
   instead, it collapses: .ship's container-type gives the label no intrinsic width at all. */
.contact > .peel-shadow {
  width: min(100% - 8px, 470px);
  margin-left: 2%;
}
.ship {
  --r: -1deg;
  container-type: inline-size;
  width: 100%;
}
.ship__strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
  background: var(--pink-strip); /* white text: 4.6:1 */
}
.ship__strip h2 {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
}
.ship__body {
  padding: 12px clamp(14px, 13px + .3vw, 18px) clamp(16px, 15px + .3vw, 20px);
}
.ship__to {
  margin: 0;
  color: var(--on-paper-soft);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ship__addr { margin: 0; }
.ship__mail {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  max-width: 100%;
  color: var(--ink);
  font-size: 1.3125rem;
  font-size: min(30px, (100cqi - 36px) / 13.6);
  line-height: 1.2;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.ship__mail:focus-visible { outline-offset: 0; }
.barcode {
  height: clamp(30px, 27px + 1vw, 40px);
  margin-top: 6px;
  background: repeating-linear-gradient(90deg,
    var(--ink) 0 3px, transparent 3px 5px,
    var(--ink) 5px 6px, transparent 6px 9px,
    var(--ink) 9px 13px, transparent 13px 15px,
    var(--ink) 15px 16px, transparent 16px 19px,
    var(--ink) 19px 21px, transparent 21px 23px);
}

/* 11. Footer --------------------------------------------------------------------- */
/* The footer is the lid's hinge: a darker, solid bar across the full width, clearly off the lid.
   Two faint rails along its top edge read as the hinge; the logo, legal links and (c) sit on it. */
.site-foot {
  position: relative;
  margin-top: clamp(72px, 10vw, 120px);
  background: var(--hinge);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, .08), 0 -24px 48px rgba(0, 0, 0, .45);
}
.site-foot::before {
  content: "";
  position: absolute;
  inset: 5px 0 auto;
  height: 4px;
  border-block: 1px solid rgba(255, 255, 255, .05);
}
.site-foot__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 36px;
  padding-block: clamp(30px, 4vw, 44px) clamp(34px, 4.5vw, 52px);
}
.foot-logo { display: block; margin-right: auto; border-radius: 6px; }
.foot-logo img { display: block; width: clamp(140px, 124px + 3vw, 178px); height: auto; }
.foot-links {
  display: flex;
  flex-wrap: wrap;
  column-gap: clamp(20px, 3vw, 32px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.foot-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--on-lid);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(233, 230, 242, .38);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.foot-links a:hover,
.foot-links a[aria-current] { text-decoration-color: currentColor; }
.copy {
  flex-basis: 100%;
  margin: 0;
  color: var(--on-lid-soft);
  font-size: 0.8125rem;
}

/* Extra loose stickers for very wide screens, in the empty lid either side of the content */
.deco { display: none; }

/* 12. Page layout: tablet and desktop --------------------------------------------- */
@media (min-width: 720px) {
  .hero {
    grid-template-columns: minmax(0, 47fr) minmax(0, 64fr);
    grid-template-rows: auto auto;
    column-gap: clamp(36px, 11vw - 44px, 130px);
    row-gap: clamp(36px, 4vw, 56px);
  }
  .hero__tag {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 100%;
    max-width: 470px;
    margin: clamp(20px, 3vw, 44px) 0 0;
  }
  .hero > .headline {
    grid-column: 2;
    grid-row: 1;
    margin-top: clamp(24px, 4vw, 56px);
  }
  /* Each column packs on its own: the spans let the studio card start right under the name tag
     and the dice tray right under the bumpers, whichever column is taller. */
  .slogans {
    grid-column: 2;
    grid-row: 2 / span 2;
  }
  .hero > .studio {
    grid-column: 1;
    grid-row: 3 / span 2;
    max-width: 470px;
  }
  .bumper--ink { justify-self: start; margin-left: 24%; }
  .bumper--violet { margin-left: 7%; }

  /* Tablet: below the hero the stickers zig-zag down one column. */
  .howto-box { width: min(100% - 8px, 540px); margin: calc(var(--badge) * .6) 2% 0 auto; }
  .studio__card { width: calc(100% - 16px); }
  .studio__star { right: -2%; bottom: -12%; }
  .contact > .peel-shadow { margin: 0 3% 0 auto; }
}

/* Desktop: the games zone sets the sheet and the product label side by side. Every item sits in
   one row: a two-row span made Chrome over-measure the sheet (its container-query sizes) and open
   a gap. The studio zone above keeps the tablet layout; contact sits alone below the games. */
@media (min-width: 960px) {
  .games {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    column-gap: clamp(40px, 5vw, 72px);
  }
  .games__head { grid-column: 1 / -1; }
  .game { grid-column: 1; }
  .howto-box {
    grid-column: 2;
    align-self: start;
    width: calc(100% - 8px);
    margin: max(clamp(60px, 8vw, 120px), calc(var(--badge) * .75)) auto 0;
  }
  .badge--duel { right: -3%; }
  .sheet__peeled { right: calc(-1 * clamp(50px, 42px + 2vw, 74px) - 14px); top: -26px; }
  .contact { padding: 0 0 0 5%; }
  .contact > .peel-shadow { margin: 0; }

  /* Footer: logo, links and (c) on one line */
  .copy { flex-basis: auto; }
}

@media (min-width: 1520px) {
  .deco {
    display: block;
    position: absolute;
    width: 84px;
  }
  /* Each sticker is centred in the empty lid beside the content. The offsets are measured from
     .page's padding box, which starts one gutter outside the content, so the gutter is added back
     and half the sticker's width taken off. */
  .deco--1 { --r: -12deg; left: calc((var(--content) - 100vw) / 4 + var(--gutter) - 42px); top: 44%; }
  .deco--2 { --r: 14deg; right: calc((var(--content) - 100vw) / 4 + var(--gutter) - 38px); top: 6%; width: 76px; }
  .deco--3 { --r: 8deg; left: calc((var(--content) - 100vw) / 4 + var(--gutter) - 36px); top: 82%; width: 72px; }
  .deco--4 { --r: -20deg; right: calc((var(--content) - 100vw) / 4 + var(--gutter) - 31px); top: 60%; width: 62px; }
}

/* 13. 404 ----------------------------------------------------------------------------- */
.lost {
  display: grid;
  justify-items: center;
  row-gap: clamp(26px, 4vw, 36px);
  padding-top: clamp(32px, 6vw, 72px);
  text-align: center;
}
/* The scene: a dashed empty square where a die sticker was, the die lying nearby */
.lost__scene {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3vw, 30px);
  width: min(100%, 470px);
  padding: 8px 0 clamp(44px, 7vw, 64px);
}
.lost__slot {
  --r: -6deg;
  flex: none;
  width: clamp(108px, 84px + 8vw, 156px);
  aspect-ratio: 1;
  border: 3px dashed rgba(255, 255, 255, .36);
  border-radius: 24%;
  background: rgba(255, 255, 255, .035);
  transform: rotate(var(--r));
}
.lost__note {
  --r: -5deg;
  display: flex;
  align-items: center;
  gap: .35em;
  margin: 0;
  color: var(--on-lid-soft);
  font-size: clamp(1.25rem, 1.0625rem + .8vw, 1.75rem);
  line-height: 1.15;
  text-align: left;
  transform: rotate(var(--r));
}
.lost__note .scrawl { width: 1.5em; height: .9em; }
.lost__note span span { white-space: nowrap; }
.lost__fallen {
  position: absolute;
  width: clamp(60px, 48px + 3vw, 86px);
  left: 50%;
  bottom: 0;
  transform: translateX(-20%) rotate(34deg);
}
.lost .headline { width: min(100%, 560px); }
.lost .headline h1 { font-size: 2.125rem; font-size: max(1.75rem, 11cqi); }
.lost__copy {
  max-width: 32ch;
  margin: 0;
  text-wrap: balance;
  color: var(--on-lid);
  font-size: clamp(1rem, 0.9625rem + .2vw, 1.125rem);
}
.lost__actions { margin: 0; }
.btn-sticker {
  --r: -2deg;
  --cut: var(--cut-sm);
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 10px 22px;
  border-radius: 8px;
  background: var(--teal);
  color: var(--ink);
  font-size: clamp(1rem, 0.9625rem + .2vw, 1.125rem);
  font-weight: 700;
  text-decoration: none;
}

/* 14. Motion, forced colours -------------------------------------------------------- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .lift { transition: transform .18s ease-out; }
  .lift:hover { transform: translateY(-3px) rotate(var(--r, 0deg)); }
}

@media (forced-colors: active) {
  .sticker,
  .kisscut,
  .badge { border: 2px solid CanvasText; }
  .sheen::after,
  .peel__curl { display: none; }
  /* The logo image is drawn for white paper (ink STUDIOS). Left to the system colours, the paper
     behind it turns black and the word disappears, so the paper stays white. */
  .nametag__name,
  .home-tag { forced-color-adjust: none; background: #fff; }
}

/* 15. Interactions (js/site.js) ---------------------------------------------------------
   The script adds these classes; without it the page is the same static lid. Animations use
   the separate rotate / scale / translate properties, so they add to each sticker's tilt
   instead of replacing it. With reduced motion the script skips them and swaps state at once. */

/* Dice: tap to roll; all dice matching hop together */
.die-btn { cursor: pointer; touch-action: manipulation; }
.die-btn:focus-visible { outline: 3px solid var(--yellow); outline-offset: 5px; border-radius: 16px; }
.die-btn.is-rolling { animation: die-roll .56s cubic-bezier(.3, .7, .4, 1); }
@keyframes die-roll {
  0% { rotate: 0deg; scale: 1; }
  35% { rotate: 200deg; scale: 1.28; }
  70% { rotate: 330deg; scale: .94; }
  100% { rotate: 360deg; scale: 1; }
}
.is-hopping { animation: hop .7s cubic-bezier(.3, .6, .4, 1); }
@keyframes hop {
  0%, 50%, 100% { translate: 0 0; }
  25% { translate: 0 -18px; }
  72% { translate: 0 -7px; }
}
/* 404: a rolled 6 carries the fallen die back into its slot */
.lost__fallen.is-home { cursor: default; }
.lost__slot.is-filled { border-color: rgba(255, 255, 255, .14); }
@media (prefers-reduced-motion: no-preference) {
  .lost__fallen { transition: transform .75s cubic-bezier(.34, 1.45, .5, 1); }
}

/* Email: tapping the address copies it; a COPIED stamp lands on the barcode */
.ship__body { position: relative; }
.ship__open { margin: 0; font-size: 0.875rem; }
.ship__open a {
  display: inline-block;
  padding: 3px 0 5px;
  color: var(--on-paper-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.stamp {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 2;
  padding: .14em .45em 0;
  border: 3px solid currentColor;
  border-radius: 6px;
  background: rgba(255, 255, 255, .88); /* ink on a barcode only reads where it has paper behind it */
  color: var(--pink-strip);
  font-family: var(--display);
  font-size: 1.375rem;
  line-height: 1.05;
  letter-spacing: .06em;
  text-transform: uppercase;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(var(--r));
}
@media (prefers-reduced-motion: no-preference) {
  .stamp { animation: stamp .3s cubic-bezier(.2, 1.6, .4, 1) both; }
}
@keyframes stamp {
  from { opacity: 0; transform: translate(-50%, -50%) rotate(var(--r)) scale(1.9); }
}

/* Duel: the 15s badge opens a Stop the Needle duel */
.badge--duel.is-live { cursor: pointer; touch-action: manipulation; }
.badge--duel.is-live:focus-visible { outline: 3px solid var(--yellow); outline-offset: 5px; }
@media (prefers-reduced-motion: no-preference) {
  .badge--duel.is-live { animation: nudge 7s ease-in-out 3s infinite; }  /* a small wiggle now and then says "tap me" */
}
@keyframes nudge {
  0%, 88%, 100% { rotate: 0deg; }
  91% { rotate: -8deg; }
  94% { rotate: 6deg; }
  97% { rotate: -3deg; }
}
.duel {
  width: min(100% - 32px, 26rem);
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  overflow: visible;
}
.duel::backdrop { background: rgba(8, 6, 12, .76); }
.duel__card {
  --r: -1deg;
  max-height: calc(100dvh - 32px);
  overflow: hidden auto; /* a short landscape phone scrolls inside the card */
  box-shadow: 0 0 0 var(--cut) var(--paper), var(--drop);
  transform: rotate(var(--r));
}
@media (prefers-reduced-motion: no-preference) {
  .duel[open] .duel__card { animation: duel-in .3s cubic-bezier(.2, 1.4, .4, 1); }
  .duel__card.is-cheering { animation: hop .7s cubic-bezier(.3, .6, .4, 1); }
  .duel__card.is-shaking { animation: shake .5s ease-in-out; }
}
@keyframes duel-in { from { scale: .85; opacity: 0; } }
@keyframes shake {
  0%, 100% { translate: 0 0; }
  20% { translate: -9px 0; }
  40% { translate: 8px 0; }
  60% { translate: -5px 0; }
  80% { translate: 3px 0; }
}
.duel__strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 4px 4px 18px;
  background: var(--ink);
  color: var(--paper);
}
.duel__strip h2 {
  margin: 0;
  padding-top: .15em;
  font-family: var(--display);
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.duel__close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.duel__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.duel__close:focus-visible { outline: 3px solid var(--yellow); outline-offset: -4px; }
.duel__body {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 16px 18px 20px;
  text-align: center;
}
.duel__score {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  width: 100%;
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}
.duel__side b {
  margin-left: .2em;
  font-family: var(--display);
  font-size: 1.75rem;
  font-weight: 400;
  vertical-align: -.12em;
}
.duel__clock {
  font-family: var(--display);
  font-size: min(2.25rem, 10vw);
  line-height: 1;
  color: var(--pink-strip); /* 4.9:1 on white */
}
.duel__dial {
  width: 100%;
  max-width: 20rem;
  height: auto;
  cursor: pointer;
  touch-action: manipulation;
}
.duel__track { fill: none; stroke: #ECEAF1; stroke-width: 16; stroke-linecap: round; }
.duel__zone { fill: none; stroke: var(--pink); stroke-width: 16; }
.duel__needle line { stroke: var(--ink); stroke-width: 5; stroke-linecap: round; }
.duel__needle circle { fill: var(--ink); }
.duel__rival line { stroke: var(--violet-label); stroke-width: 5; stroke-linecap: round; }
.duel__rival circle { fill: var(--violet-label); }
.duel__rival.is-off { opacity: 0; }
/* each side's colour next to its name, so it is clear whose needle is whose */
.duel__side::before {
  content: "";
  display: inline-block;
  width: .9em;
  height: .3em;
  margin-right: .35em;
  border-radius: 2px;
  vertical-align: .2em;
  background: var(--ink);
}
.duel__side--bot::before { background: var(--violet-label); }
.duel__side--bot b { color: var(--violet-label); }
/* the moment a needle stops: its hub pops; the side that took the round bumps its score */
.duel__needle circle,
.duel__rival circle { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .is-stopped circle { animation: tap .4s cubic-bezier(.2, 1.6, .4, 1); }
  .duel__side b.is-scored { display: inline-block; animation: tap .6s cubic-bezier(.2, 1.6, .4, 1); }
}
@keyframes tap { 40% { scale: 1.7; } }
.duel__msg { min-height: 2.9em; margin: 0; font-size: 1rem; line-height: 1.45; text-wrap: balance; }
.duel__actions { margin: 0; }
.duel__go { min-width: 9rem; justify-content: center; cursor: pointer; border: 0; font-family: inherit; }
.duel__go:disabled { opacity: .55; cursor: default; }
.duel__outro { margin: 0; color: var(--on-paper-soft); font-size: 0.9375rem; line-height: 1.45; }

/* Secret: type M-M-A, or tap the logo's three dice, for a shiny sticker by the footer */
.holo {
  --r: -9deg;
  position: relative;
  flex: none;
  display: inline-block;
  width: clamp(5.5rem, 4.6rem + 4vw, 7.5rem);
  margin: 0 4px;
  transform: rotate(var(--r));
  filter: drop-shadow(0 6px 7px rgba(0, 0, 0, .5));
  cursor: pointer;
}
.holo img { display: block; width: 100%; height: auto; }
.holo::before,
.holo::after {
  content: "";
  position: absolute;
  inset: 0;
  -webkit-mask: url(/assets/brand/logo-stacked-sticker.svg) center / 100% 100% no-repeat;
  mask: url(/assets/brand/logo-stacked-sticker.svg) center / 100% 100% no-repeat;
  pointer-events: none;
}
.holo::after {  /* the rainbow foil */
  background: linear-gradient(115deg, #FF9ECB 0%, #FFE38A 20%, #9DFFE6 40%, #A9B8FF 60%, #FF9ECB 80%, #FFE38A 100%);
  background-size: 250% 100%;
  mix-blend-mode: multiply;
  opacity: .6;
}
.holo::before {  /* a white glint that sweeps across on tap */
  z-index: 1;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .9) 50%, transparent 62%);
  background-size: 250% 100%;
  background-position: 120% 0;
  mix-blend-mode: screen;
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .holo::after { animation: foil 6s linear infinite; }
  .holo.is-shining::before { animation: glint .9s ease-out; }
  .holo.is-dropping { animation: drop 1.6s cubic-bezier(.3, 1.3, .5, 1) both; }
}
@keyframes foil { to { background-position: 250% 0; } }
@keyframes glint {
  from { opacity: 1; background-position: 120% 0; }
  to { opacity: 1; background-position: -20% 0; }
}
@keyframes drop {
  0%, 35% { opacity: 0; translate: 0 -150px; rotate: 30deg; }
  72% { opacity: 1; translate: 0 8px; rotate: -4deg; }
  100% { opacity: 1; translate: 0 0; rotate: 0deg; }
}
@media (forced-colors: active) {
  .stamp { border-color: CanvasText; color: CanvasText; background: Canvas; }
  .holo::before, .holo::after { display: none; }
}

/* 16. Filling the gaps: the dice tray and the contact extras (owner, 29 Sep) ------------------
   The tray sits under the bumpers (beside "The studio" from 720 px); one tap throws all three dice.
   The postage stamp sits on the shipping label's top-right corner, and a note beside the label
   (below it on narrower screens) says who should write. */
.tray {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 0 0 0 3%;
}
.tray__dice {
  display: flex;
  align-items: flex-end;
  gap: clamp(8px, 1.4vw, 16px);
  padding: 8px;
  border-radius: 18px;
  cursor: pointer;
  touch-action: manipulation;
}
.tray__dice:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.tray__die { width: clamp(56px, 46px + 2.4vw, 80px); }
.tray__die:nth-child(1) { --r: -14deg; }
.tray__die:nth-child(2) { --r: 9deg; margin-bottom: 16px; }
.tray__die:nth-child(3) { --r: 22deg; }
.tray__die.is-rolling { animation: die-roll .56s cubic-bezier(.3, .7, .4, 1); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .tray__die { transition: translate .18s ease-out; }
  .tray__dice:hover .tray__die { translate: 0 -4px; }
}
.tray__note {
  display: flex;
  align-items: center;
  gap: .3em;
  margin: 0;
  color: var(--on-lid);
  font-size: clamp(1.125rem, 1rem + .5vw, 1.5rem);
  line-height: 1.1;
  transform: rotate(-4deg);
}
.tray__note .scrawl { flex: none; width: 1.4em; height: .8em; rotate: 90deg; }  /* under the dice on a phone: points up */

.contact {
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.contact > .peel-shadow { position: relative; }
.contact__stamp {
  --r: 9deg;
  position: absolute;
  top: -30px;
  right: -8px;
  z-index: 2;
  width: clamp(62px, 52px + 2.6vw, 90px);
}
.contact__note {
  display: flex;
  align-items: center;
  gap: .4em;
  max-width: 17em;
  margin: 0 0 0 4%;
  color: var(--on-lid);
  font-size: clamp(1.125rem, 1rem + .5vw, 1.5rem);
  line-height: 1.25;
  transform: rotate(-3deg);
}
.contact__arrow { flex: none; width: 1.4em; height: .8em; rotate: 90deg; }  /* points up at the label */
.contact__note-text > span { display: block; }  /* "players, partners, press:" / "we read every email" */

@media (min-width: 720px) {
  .hero > .tray {
    grid-column: 2;
    grid-row: 4;
    align-self: start;
    margin-left: 14%;
  }
  .tray__note .scrawl { rotate: 0deg; }  /* beside the dice: points left */
  .contact { align-items: flex-end; }
  .contact__note { margin: 0 6% 0 0; }
}
@media (min-width: 960px) {
  .contact {
    flex-direction: row;
    align-items: center;
    gap: clamp(40px, 6vw, 96px);
  }
  .contact__stamp { right: -22px; }
  .contact__note { margin: 0; }
  .contact__arrow { rotate: 0deg; }  /* points left at the label */
}