@font-face {
  font-family: "Gluten";
  src: url("/putty/type/gluten.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/putty/type/atkinson-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/putty/type/atkinson-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --bb-cream: #f6ead6;
  --bb-paper: #fff8ec;
  --bb-brown: #3a2317;
  --bb-cocoa: #6b4a36;
  --bb-tomato: #e5492e;
  --bb-brick: #b8341d;
  --bb-sun: #f5b92b;
  --bb-butter: #ffe69a;
  --bb-teal: #1f8f87;
  --bb-sea: #14675f;
  --bb-gum: #f395b7;
  --bb-candy: #f9c9da;
  --bb-cork: #c68d57;
  --bb-face: "Gluten", "Trebuchet MS", sans-serif;
  --bb-read: "Atkinson Hyperlegible", Verdana, sans-serif;
  --bb-edge: 3px solid var(--bb-brown);
  --bb-drop: 4px 5px 0 var(--bb-brown);
  --bb-sheen: inset 3px 4px 0 rgba(255, 255, 255, .38), inset -4px -5px 0 rgba(58, 35, 23, .16);
  --bb-lump-a: 28px 16px 32px 20px / 20px 30px 16px 26px;
  --bb-lump-b: 18px 34px 22px 30px / 30px 18px 28px 16px;
  --bb-lump-c: 40px 22px 36px 26px / 24px 40px 22px 34px;
  --bb-print: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cg fill='none' stroke='%233a2317' stroke-opacity='.05' stroke-width='1.6'%3E%3Cellipse cx='60' cy='70' rx='14' ry='19'/%3E%3Cellipse cx='60' cy='70' rx='9' ry='13'/%3E%3Cellipse cx='60' cy='70' rx='4' ry='7'/%3E%3Cellipse cx='165' cy='160' rx='16' ry='12' transform='rotate(30 165 160)'/%3E%3Cellipse cx='165' cy='160' rx='10' ry='7' transform='rotate(30 165 160)'/%3E%3Cellipse cx='165' cy='160' rx='4' ry='3' transform='rotate(30 165 160)'/%3E%3C/g%3E%3C/svg%3E");
  --bb-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .23 0 0 0 0 .14 0 0 0 0 .09 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--bb-cream);
  background-image: var(--bb-grain), var(--bb-print);
  color: var(--bb-brown);
  font-family: var(--bb-read);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: hidden;
}

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

h1, h2, h3 {
  font-family: var(--bb-face);
  font-weight: 700;
  line-height: 1.08;
  margin: 0 0 .5em;
  letter-spacing: -.005em;
}
h1 { font-size: clamp(2.1rem, 5.6vw, 3.9rem); }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.55rem); }

p { margin: 0 0 1em; }

a { color: var(--bb-brick); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--bb-brown); }

code {
  font-family: "Courier New", monospace;
  font-size: .92em;
  background: var(--bb-paper);
  border: 2px solid var(--bb-brown);
  border-radius: 6px 9px 7px 8px;
  padding: 0 .3em;
  overflow-wrap: anywhere;
}

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

.bb-jump {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 60;
  background: var(--bb-sun);
  color: var(--bb-brown);
  font-weight: 700;
  padding: .6em 1em;
  border: var(--bb-edge);
  border-radius: var(--bb-lump-a);
  text-decoration: none;
}
.bb-jump:focus { top: 12px; }

.bb-hush {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

main { display: block; outline: none; overflow-x: clip; }

/* squashy clay buttons */
.bb-squish {
  --bb-fill: var(--bb-paper);
  --bb-ink: var(--bb-brown);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45em;
  min-height: 48px;
  padding: .55em 1.25em .5em;
  font-family: var(--bb-face);
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.1;
  color: var(--bb-ink);
  background: var(--bb-fill);
  border: var(--bb-edge);
  border-radius: var(--bb-lump-a);
  box-shadow: var(--bb-sheen), var(--bb-drop);
  text-decoration: none;
  cursor: pointer;
  transition: transform .42s cubic-bezier(.28, 1.9, .45, 1), box-shadow .18s ease;
  transform-origin: 50% 100%;
  -webkit-tap-highlight-color: transparent;
}
.bb-squish:hover { color: var(--bb-ink); transform: translateY(-2px) rotate(-.6deg); }
.bb-squish:active {
  transform: translateY(3px) scale(1.08, .86);
  box-shadow: var(--bb-sheen), 1px 1px 0 var(--bb-brown);
  transition-duration: .08s;
}
.bb-squish:disabled, .bb-squish[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .55;
  transform: none;
  box-shadow: var(--bb-sheen), 2px 2px 0 var(--bb-brown);
}
.bb-squish--tomato { --bb-fill: var(--bb-brick); --bb-ink: var(--bb-paper); }
.bb-squish--sun { --bb-fill: var(--bb-sun); }
.bb-squish--teal { --bb-fill: var(--bb-sea); --bb-ink: var(--bb-paper); border-radius: var(--bb-lump-b); }
.bb-squish--ghost { --bb-fill: var(--bb-paper); border-radius: var(--bb-lump-b); }
.bb-squish--big { font-size: 1.32rem; min-height: 58px; padding: .6em 1.6em .55em; }

.bb-linkish {
  background: none;
  border: 0;
  padding: .3em 0;
  font: inherit;
  font-weight: 700;
  color: var(--bb-brick);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* dialogs */
.bb-pop {
  width: min(92vw, 470px);
  max-height: 92vh;
  padding: 0;
  border: 4px solid var(--bb-brown);
  border-radius: var(--bb-lump-c);
  background: var(--bb-paper);
  background-image: var(--bb-print);
  color: var(--bb-brown);
  box-shadow: var(--bb-sheen), 8px 10px 0 var(--bb-brown);
  overflow: auto;
}
.bb-pop::backdrop { background: rgba(58, 35, 23, .62); }
.bb-pop[open] { animation: bb-plonk .5s cubic-bezier(.3, 1.7, .5, 1); }
.bb-pop-in { position: relative; padding: 30px 24px 24px; }
.bb-pop h2 { font-size: clamp(1.5rem, 5vw, 1.95rem); padding-right: 30px; }
.bb-pop--gate .bb-pop-in { text-align: left; }
.bb-pop-seal {
  display: grid;
  place-items: center;
  width: 72px; height: 66px;
  margin: 0 0 14px;
  font-family: var(--bb-face);
  font-weight: 800;
  font-size: 1.6rem;
  background: var(--bb-sun);
  border: var(--bb-edge);
  border-radius: 46% 54% 50% 50% / 56% 46% 54% 44%;
  box-shadow: var(--bb-sheen), 3px 4px 0 var(--bb-brown);
  transform: rotate(-6deg);
}
.bb-pop-acts { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 6px; }
.bb-pop-small { font-size: .9rem; color: var(--bb-cocoa); margin: 12px 0 0; }
.bb-pop-help { padding-left: 1.2em; margin: 0 0 14px; }
.bb-pop-help li { margin-bottom: .4em; }
.bb-pop-x {
  position: absolute;
  top: 10px; right: 12px;
  width: 44px; height: 44px;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--bb-brown);
  background: var(--bb-candy);
  border: var(--bb-edge);
  border-radius: 50% 44% 52% 46%;
  cursor: pointer;
}
.bb-field { display: block; font-weight: 700; margin: 14px 0 6px; }
.bb-field-hint { display: block; font-weight: 400; font-size: .9rem; color: var(--bb-cocoa); }
.bb-input {
  width: 100%;
  min-height: 50px;
  padding: .45em .8em;
  font: inherit;
  font-size: 1.15rem;
  color: var(--bb-brown);
  background: #fff;
  border: var(--bb-edge);
  border-radius: 14px 20px 12px 18px;
  box-shadow: inset 2px 3px 0 rgba(58, 35, 23, .1);
}
.bb-input[aria-invalid="true"] { border-color: var(--bb-brick); background: #fff1ed; }
.bb-field-err { min-height: 1.4em; margin: 6px 0 0; color: var(--bb-brick); font-weight: 700; }

.bb-me-list { margin: 8px 0 0; }
.bb-me-list div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 2px dashed rgba(58, 35, 23, .3);
}
.bb-me-list dt { color: var(--bb-cocoa); }
.bb-me-list dd { margin: 0; font-weight: 700; text-align: right; }

/* storage note */
.bb-jar {
  position: fixed;
  z-index: 40;
  left: 12px; right: 12px; bottom: 12px;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bb-paper);
  border: var(--bb-edge);
  border-radius: var(--bb-lump-b);
  box-shadow: var(--bb-sheen), 5px 6px 0 var(--bb-brown);
  font-size: .95rem;
}
.bb-jar[hidden] { display: none; }
.bb-jar p { margin: 0; }
.bb-jar .bb-squish { flex: none; }
@media (max-width: 520px) { .bb-jar { font-size: .86rem; padding: 12px 12px; gap: 10px; } .bb-jar .bb-squish { min-height: 44px; padding: .4em .9em; font-size: 1rem; } }

/* odds tables */
.bb-table-hold { overflow-x: auto; margin: 0 0 1.4em; -webkit-overflow-scrolling: touch; }
.bb-odds {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--bb-paper);
  border: var(--bb-edge);
  border-radius: 18px 26px 16px 22px;
  overflow: hidden;
  font-size: .98rem;
}
.bb-odds caption {
  caption-side: top;
  text-align: left;
  font-family: var(--bb-face);
  font-weight: 700;
  font-size: 1.15rem;
  padding: 0 0 8px;
}
.bb-odds th, .bb-odds td { padding: 9px 12px; text-align: left; border-bottom: 2px solid rgba(58, 35, 23, .14); }
.bb-odds thead th { background: var(--bb-brown); color: var(--bb-paper); font-weight: 700; font-size: .92rem; }
.bb-odds tbody tr:nth-child(even) { background: rgba(245, 185, 43, .14); }
.bb-odds tbody tr:last-child th, .bb-odds tbody tr:last-child td { border-bottom: 0; }
.bb-odds td { font-variant-numeric: tabular-nums; }

@keyframes bb-plonk {
  0% { transform: scale(.7, 1.25); opacity: 0; }
  55% { transform: scale(1.06, .93); opacity: 1; }
  100% { transform: none; }
}

/* stop-motion "boil": clay shifting slightly between frames */
@keyframes bb-boil {
  0% { transform: rotate(var(--bb-tilt, 0deg)) translate(0, 0); }
  33% { transform: rotate(calc(var(--bb-tilt, 0deg) + .4deg)) translate(.5px, -.5px); }
  66% { transform: rotate(calc(var(--bb-tilt, 0deg) - .3deg)) translate(-.5px, .4px); }
  100% { transform: rotate(var(--bb-tilt, 0deg)) translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .bb-squish:hover, .bb-squish:active { transform: none; }
}