/* ChipClack — generated from "ChipClack Website.dc.html" by tools/build.py.
   Edit the design doc and rebuild; do not hand-edit. */
/* --- self-hosted webfaces (vendored from Google Fonts) ------------- */
@font-face {font-family: 'Archivo';font-style: normal;font-weight: 400;font-stretch: 100%;font-display: swap;src: url(/assets/fonts/archivo-c628a829.woff2) format('woff2');unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}

@font-face {font-family: 'Archivo';font-style: normal;font-weight: 400;font-stretch: 100%;font-display: swap;src: url(/assets/fonts/archivo-0186fb75.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: 'Archivo';font-style: normal;font-weight: 500;font-stretch: 100%;font-display: swap;src: url(/assets/fonts/archivo-c628a829.woff2) format('woff2');unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}

@font-face {font-family: 'Archivo';font-style: normal;font-weight: 500;font-stretch: 100%;font-display: swap;src: url(/assets/fonts/archivo-0186fb75.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: 'Archivo';font-style: normal;font-weight: 600;font-stretch: 100%;font-display: swap;src: url(/assets/fonts/archivo-c628a829.woff2) format('woff2');unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}

@font-face {font-family: 'Archivo';font-style: normal;font-weight: 600;font-stretch: 100%;font-display: swap;src: url(/assets/fonts/archivo-0186fb75.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: 'Archivo';font-style: normal;font-weight: 700;font-stretch: 100%;font-display: swap;src: url(/assets/fonts/archivo-c628a829.woff2) format('woff2');unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}

@font-face {font-family: 'Archivo';font-style: normal;font-weight: 700;font-stretch: 100%;font-display: swap;src: url(/assets/fonts/archivo-0186fb75.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: 'Archivo';font-style: normal;font-weight: 800;font-stretch: 100%;font-display: swap;src: url(/assets/fonts/archivo-c628a829.woff2) format('woff2');unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}

@font-face {font-family: 'Archivo';font-style: normal;font-weight: 800;font-stretch: 100%;font-display: swap;src: url(/assets/fonts/archivo-0186fb75.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: 'Newsreader';font-style: normal;font-weight: 400;font-display: swap;src: url(/assets/fonts/newsreader-997f7492.woff2) format('woff2');unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}

@font-face {font-family: 'Newsreader';font-style: normal;font-weight: 400;font-display: swap;src: url(/assets/fonts/newsreader-4aa9bb70.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: 'Newsreader';font-style: normal;font-weight: 500;font-display: swap;src: url(/assets/fonts/newsreader-997f7492.woff2) format('woff2');unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}

@font-face {font-family: 'Newsreader';font-style: normal;font-weight: 500;font-display: swap;src: url(/assets/fonts/newsreader-4aa9bb70.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: 'Newsreader';font-style: normal;font-weight: 600;font-display: swap;src: url(/assets/fonts/newsreader-997f7492.woff2) format('woff2');unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}

@font-face {font-family: 'Newsreader';font-style: normal;font-weight: 600;font-display: swap;src: url(/assets/fonts/newsreader-4aa9bb70.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;}

*{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{margin:0;background:#141210;color:#f2ece0;font-family:'Archivo',sans-serif;-webkit-font-smoothing:antialiased;}
  h1,h2,h3,p{margin:0;}
  a{color:#c9a24b;text-decoration:none;}
  a:hover{color:#e6c884;}
  a:focus-visible{outline:1px solid #c9a24b;outline-offset:3px;border-radius:3px;}
  @keyframes ccEdge{to{transform:rotate(360deg);}}
  @keyframes ccClack{0%{transform:translateX(-42%) rotate(-16deg) scale(.93);}14%{transform:translateX(0) rotate(2deg) scale(1.05);}20%{transform:translateX(3%) rotate(-2deg) scale(.99);}28%,100%{transform:translateX(0) rotate(0deg) scale(1);}}
  @keyframes ccKnock{0%{transform:translateX(0) rotate(0deg);}15%{transform:translateX(7%) rotate(4deg);}30%,100%{transform:translateX(0) rotate(0deg);}}
  @keyframes ccRipple{0%{transform:scale(.62);opacity:0;}12%{opacity:.5;}46%{transform:scale(2.1);opacity:0;}100%{transform:scale(2.1);opacity:0;}}
  @keyframes ccHover{0%{transform:translateX(-32%) rotate(-12deg);}40%{transform:translateX(0) rotate(2deg);}100%{transform:translateX(0) rotate(0deg);}}
  @keyframes ccFloatA{0%,100%{transform:rotate(-8deg) translateY(0);}50%{transform:rotate(-6deg) translateY(-16px);}}
  @keyframes ccFloatB{0%,100%{transform:rotate(8deg) translateY(0);}50%{transform:rotate(6deg) translateY(-22px);}}
  @keyframes ccSheen{0%,66%{transform:translateX(-60%) rotate(19deg);opacity:0;}72%{opacity:.6;}100%{transform:translateX(360%) rotate(19deg);opacity:0;}}
  @keyframes ccFlash{0%,68%{opacity:0;transform:scale(.35);}74%{opacity:1;transform:scale(1.05);}86%{opacity:.35;transform:scale(1.35);}100%{opacity:0;transform:scale(1.6);}}
  @keyframes ccStreak{0%,69%{opacity:0;transform:scaleX(.12);}74%{opacity:1;}100%{opacity:0;transform:scaleX(1);}}
  @keyframes ccEmber{0%,70%{opacity:0;transform:translateX(0) scale(.5);}76%{opacity:1;transform:translateX(320%) scale(1);}100%{opacity:0;transform:translateX(1500%) scale(.25);}}
  @keyframes ccArt{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}
  @keyframes ccCue{0%,100%{transform:translateY(0);opacity:.35;}50%{transform:translateY(9px);opacity:1;}}
/* --- font fallbacks, metric-matched to kill first-visit CLS ---------
   The webfonts load with display=swap, so text is first painted in a
   fallback and reflows when they arrive. Newsreader vs Georgia is the
   worst offender (ascent .74em vs .92em) and it sets every heading.
   Overriding the fallback metrics to match makes the swap invisible.
   Measured with canvas TextMetrics; overrides are divided by
   size-adjust because it rescales them. --------------------------- */
@font-face{font-family:"Archivo Fallback";src:local("Arial"),local("Helvetica");
  size-adjust:99%;ascent-override:88.89%;descent-override:21.21%;line-gap-override:0%;}
@font-face{font-family:"Newsreader Fallback";src:local("Georgia"),local("Times New Roman");
  size-adjust:102.08%;ascent-override:72.49%;descent-override:25.47%;line-gap-override:0%;}
body{font-family:"Archivo","Archivo Fallback",sans-serif;}
/* --disp is an inline style on #cc-root, so this needs !important */
#cc-root{--disp:"Newsreader","Newsreader Fallback",serif !important;}
/* --- reserve the scrollbar gutter --------------------------------
   Short pages (contact, games) land within a few px of the viewport
   height at some window sizes, so the vertical scrollbar toggles. Each
   toggle narrows the content column by the scrollbar width while the
   full-bleed 100vw backgrounds ignore it, so image and text visibly
   shift against each other. Reserving the gutter makes the width
   constant whether or not the page scrolls. */
html{scrollbar-gutter:stable;}
/* --- structural: runtime conditional blocks ------------------------- */
.dc-if{display:contents;}
.dc-if[hidden]{display:none;}
[data-rv]{will-change:opacity,transform;}
/* --- header: desktop nav vs burger, in CSS so it needs no JS --- */
.nav-wide,.nav-narrow{display:contents;}
@media (max-width:859.98px){.nav-wide{display:none;}}
@media (min-width:860px){.nav-narrow,.nav-menu{display:none;}}
/* --- <picture> must not join the layout tree: the doc sizes the
       <img> itself with width/height:100% against its parent --- */
picture{display:contents;}
img{max-width:100%;}
/* --- controls converted from <a> to <button> keep the doc's inline
       styling; strip only the UA defaults it never set --- */
.dc-btn{font:inherit;color:inherit;background:none;border:0;margin:0;
  text-align:inherit;-webkit-appearance:none;appearance:none;}
/* the doc styles a:focus-visible only; these controls used to be
   anchors, so carry the same ring over instead of the UA default */
.dc-btn:focus-visible{outline:1px solid var(--gold);outline-offset:3px;
  border-radius:3px;}
/* --- A11Y-5: footer links were 12px tall, under the WCAG 2.2 AA
       minimum of 24x24. The header links already carry min-height:44px. */
footer nav a{display:inline-flex;align-items:center;min-height:24px;}
/* --- embedded Instant Duel demo -------------------------------------
   The app scales its 390x844 stage to fit the frame and clips rather
   than scrolls, so the frame only has to hold that proportion. Width
   is capped by the viewport height as well as by 390px: 40.6vh of width
   is 88vh once multiplied back up by 844/390, which keeps a whole phone
   on screen on a laptop instead of running off the bottom — but not below
   300px of width, under which the scaled-down UI stops being legible
   (a landscape phone scrolls the page instead). The frame
   carries no border of its own — the app draws one inside the 8px
   letterbox, and a second ring around it read as a frame in a frame. */
.demo-embed{display:flex;justify-content:center;margin-top:clamp(26px,3.4vw,40px);}
.demo-frame{width:min(100%,390px,max(300px,40.6vh));width:min(100%,390px,max(300px,40.6svh));border-radius:42px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.5);}
.demo-frame iframe{display:block;width:100%;aspect-ratio:390/844;border:0;background:#0e0e10;}
/* --- skip link: offscreen until focused --- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;
  padding:12px 20px;border-radius:0 0 7px 0;font-size:12px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;
  background:#c9a24b;color:#141210;text-decoration:none;}
.skip-link:focus{left:0;}
main:focus{outline:none;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}
/* --- hover states (were style-hover="…" in the design doc) ---------- */
.hv1:hover{color:var(--ivory) !important}
.hv2:hover{background:var(--goldb) !important;color:var(--bg) !important}
.hv3:hover{border-color:var(--gold) !important;color:var(--goldb) !important}
.hv4:hover{color:var(--goldb) !important}
.hv5:hover{color:var(--goldb) !important;border-color:var(--goldb) !important;background:rgba(201,162,75,.08) !important}
.hv6:hover{border-color:var(--gold) !important}
.hv7:hover{background:#a8343b !important;color:#fff !important}