@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito+Sans:wght@400;600;700;800;900;1000&display=swap");
:root {
  font-family: "Nunito Sans", sans-serif;
  color: #174735;
  background: #bddfc2;
  font-synthesis: none;
  font-weight: 700;
  --ink: #174735;
  --cream: #fffae9;
  --green: #448d38;
  --yellow: #ffd65b;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button,
input {
  font: inherit;
}
button,
a,
input,
label {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: default;
}
button {
  color: inherit;
}
button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 3px solid #176b87;
  outline-offset: 4px;
}
button[hidden],
[hidden] {
  display: none !important;
}
button svg,
i svg {
  width: 21px;
  height: 21px;
  display: block;
}
i {
  display: inline-flex;
  font-style: normal;
}
a {
  color: inherit;
  text-decoration: none;
}
.game-layout {
  height: 100vh;
  height: 100dvh;
  min-height: 580px;
  display: grid;
  grid-template-rows: 82px minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
  isolation: isolate;
  position: relative;
  overflow: hidden;
  background: #bce6d0;
}
.jungle-background {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  container-type: size;
  background: url("/assets/jungle-day.webp") center/cover no-repeat;
}
/* All layers share the original picture's aspect ratio, including on phones. */
.jungle-frame {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100cqw, 177.6833cqh);
  height: max(56.2799cqw, 100cqh);
  transform: translate(-50%, -50%);
}
.jungle-scene,
.jungle-picture,
.jungle-water,
.jungle-leaves,
.jungle-sunlight,
.jungle-ripples {
  position: absolute;
  inset: 0;
}
.jungle-scene {
  animation: jungle-drift 24s ease-in-out infinite alternate;
  transform: scale(1.045);
}
.jungle-picture,
.jungle-water,
.jungle-leaves {
  background: url("/assets/jungle-day.webp") center/100% 100% no-repeat;
}
.jungle-water {
  /* Feather into the stationary shoreline and keep the foreground plants crisp. */
  mask-image: linear-gradient(transparent 47%, #000 58%);
  clip-path: polygon(8% 45%, 93% 45%, 78% 100%, 22% 100%);
  transform-origin: 50% 47%;
  animation: lagoon-flow 7s ease-in-out infinite alternate;
}
.jungle-leaves-left {
  mask-image: linear-gradient(90deg, #000 3%, #000c 8%, transparent 22%);
  transform-origin: 0 30%;
  animation: leaves-sway-left 8s ease-in-out infinite alternate;
}
.jungle-leaves-right {
  mask-image: linear-gradient(270deg, #000 3%, #000c 8%, transparent 22%);
  transform-origin: 100% 25%;
  animation: leaves-sway-right 9s -3s ease-in-out infinite alternate;
}
.jungle-sunlight {
  background: radial-gradient(ellipse at 79% 10%, #fff3ad5c, transparent 34%);
  animation: sunlight-glow 8s ease-in-out infinite alternate;
}
.jungle-ripples span {
  position: absolute;
  left: 27%;
  top: 61%;
  width: 14%;
  height: 1.6%;
  border: 2px solid #e0fff3;
  border-radius: 50%;
  opacity: 0;
  animation: lagoon-ripple 8s linear infinite;
}
.jungle-ripples span:nth-child(2) {
  left: 61%;
  top: 70%;
  width: 12%;
  animation-delay: -3s;
}
.jungle-ripples span:nth-child(3) {
  left: 18%;
  top: 82%;
  width: 19%;
  animation-delay: -5s;
}
.jungle-ripples span:nth-child(4) {
  left: 67%;
  top: 52%;
  width: 9%;
  animation-delay: -1s;
}
.jungle-background.is-paused * {
  animation-play-state: paused !important;
}
.scenery-toggle {
  position: absolute;
  left: 20px;
  bottom: 16px;
  z-index: 3;
}
.scenery-toggle .scenery-play-icon,
.scenery-toggle[data-paused="true"] .scenery-pause-icon {
  display: none;
}
.scenery-toggle[data-paused="true"] .scenery-play-icon {
  display: block;
}
.scenery-toggle:disabled {
  opacity: 0.55;
}
@keyframes jungle-drift {
  from { transform: scale(1.045) translate3d(-0.65%, -0.3%, 0); }
  to { transform: scale(1.075) translate3d(0.65%, 0.3%, 0); }
}
@keyframes lagoon-flow {
  from { transform: scale(1.012, 1.01) translate3d(-0.35%, 0, 0); }
  to { transform: scale(1.03, 1.025) translate3d(0.35%, 0.6%, 0); }
}
@keyframes leaves-sway-left {
  from { transform: rotate(-0.5deg) scale(1.01); }
  to { transform: rotate(0.65deg) scale(1.02); }
}
@keyframes leaves-sway-right {
  from { transform: rotate(0.55deg) scale(1.01); }
  to { transform: rotate(-0.65deg) scale(1.02); }
}
@keyframes sunlight-glow {
  from { opacity: 0.35; }
  to { opacity: 0.8; }
}
@keyframes lagoon-ripple {
  0% { transform: scale(0.4); opacity: 0; }
  25% { opacity: 0.24; }
  100% { transform: scale(1.6) translateY(14px); opacity: 0; }
}
.game-layout::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    #fff8d235,
    transparent 28%,
    #bce8db10 70%,
    #649f6922
  );
}
.topbar {
  padding: 14px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  z-index: 5;
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: "Fredoka", sans-serif;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.8px;
  filter: drop-shadow(0 2px 0 #ffffff65);
}
.brand > svg {
  width: 44px;
  height: 38px;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wallet {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 7px 8px 7px 15px;
  border: 1px solid #fff9d9a8;
  border-radius: 16px;
  background: #fffbeaeb;
  box-shadow: 0 3px 0 #31794715;
}
.wallet strong {
  font-size: 17px;
  white-space: nowrap;
  font-weight: 900;
}
.currency {
  margin-right: 3px;
  color: #5c8055;
}
.demo-tag {
  font-size: 10px;
  letter-spacing: 1px;
  color: #587858;
  background: #e4edcb;
  padding: 5px 7px;
  border-radius: 6px;
  font-weight: 900;
}
.wallet-reset {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: #e5edcd;
  border: 0;
  border-radius: 9px;
}
.wallet-reset svg {
  width: 17px;
  height: 17px;
}
.icon-button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid #fffae980;
  border-radius: 13px;
  background: #fffbe5b3;
  transition: background 0.15s;
}
.icon-button:hover,
.wallet-reset:hover {
  background: #fffce8;
}
.wallet-reset:disabled {
  opacity: 0.45;
}
.game-board {
  min-height: 0;
  min-width: 0;
  display: grid;
  grid-template-rows: 148px minmax(0, 1fr);
  position: relative;
}
.scoreboard {
  display: grid;
  place-content: center;
  text-align: center;
  z-index: 2;
  filter: drop-shadow(0 2px 0 #ffffff55);
}
#current-multiplier {
  font-family: "Fredoka", sans-serif;
  font-size: 108px;
  line-height: 0.95;
  font-weight: 600;
  letter-spacing: -3px;
  font-variant-numeric: tabular-nums;
}
#current-multiplier > span {
  font-size: 0.64em;
  margin-left: 2px;
}
.next-multiplier {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 800;
  color: #41694c;
}
#next-multiplier {
  font-family: "Fredoka", sans-serif;
  font-size: 22px;
  line-height: 1;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.character-space {
  min-height: 0;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: end center;
  padding: 0 32px 40px;
  container-type: size;
}
/* One generated character, composited into a mouth, two jaws, and ten teeth. */
.character-wrap {
  position: relative;
  width: auto;
  height: min(100cqh, 660px, calc((100cqw - 32px) * 4 / 3));
  aspect-ratio: 3 / 4;
  flex: none;
  transform-origin: 50% 98%;
}
.character-defs {
  position: absolute;
  pointer-events: none;
}
.stage-base {
  position: absolute;
  left: 50%;
  bottom: -6%;
  width: 128%;
  height: 14%;
  transform: translateX(-50%);
  overflow: visible;
  pointer-events: none;
}
.croc-shadow {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 0.6%;
  height: 3.4%;
  border-radius: 50%;
  background: #344c3d85;
  filter: blur(5px);
  pointer-events: none;
}
.croc-wake {
  position: absolute;
  left: -20%;
  top: 83%;
  width: 140%;
  height: 18%;
  pointer-events: none;
}
.croc-wake span {
  position: absolute;
  inset: 0;
  border: 2px solid #d4fff0;
  border-radius: 50%;
  box-shadow: 0 4px 0 #299eac25;
  opacity: 0;
  animation: croc-wake 6s ease-out infinite;
}
.croc-wake span:nth-child(2) { animation-delay: -2s; }
.croc-wake span:nth-child(3) { animation-delay: -4s; }
.character-water-mask {
  position: absolute;
  inset: 0;
  /* Only the jaws emerge; the chin fades beneath the lagoon's surface. */
  mask-image: linear-gradient(#000 87%, #000e 89%, transparent 95%);
}
.character-float {
  position: absolute;
  inset: 0;
  transform-origin: 50% 90%;
  animation: croc-float 6s ease-in-out infinite;
}
.croc-water-front {
  position: absolute;
  left: -20%;
  top: 84%;
  width: 140%;
  height: 21%;
  overflow: visible;
  pointer-events: none;
}
.water-lapping {
  transform-origin: 50% 50%;
  animation: water-lapping 6s ease-in-out infinite;
}
.croc-splash {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.croc-splash span {
  position: absolute;
  top: 91%;
  left: 8%;
  width: 8px;
  height: 16px;
  background: #bbfff0;
  border-radius: 70% 30% 60% 40%;
  opacity: 0;
  --splash-x: -32px;
  --splash-y: -46px;
}
.croc-splash span:nth-child(2) { left: 17%; --splash-x: -16px; --splash-y: -70px; }
.croc-splash span:nth-child(3) { left: 28%; --splash-x: -12px; --splash-y: -34px; }
.croc-splash span:nth-child(4) { left: 72%; --splash-x: 12px; --splash-y: -34px; }
.croc-splash span:nth-child(5) { left: 83%; --splash-x: 16px; --splash-y: -70px; }
.croc-splash span:nth-child(6) { left: 92%; --splash-x: 32px; --splash-y: -46px; }
.biting .croc-splash span {
  animation: croc-splash 0.7s 0.16s ease-out both;
}
.biting .character-float {
  animation: croc-dip 0.6s ease-in-out both;
}
.game-layout:has(.jungle-background.is-paused) .character-float,
.game-layout:has(.jungle-background.is-paused) .croc-wake span,
.game-layout:has(.jungle-background.is-paused) .water-lapping {
  animation-play-state: paused;
}
@keyframes croc-float {
  0%, 100% { transform: translateY(0.8%) rotate(-0.35deg); }
  50% { transform: translateY(-0.8%) rotate(0.35deg); }
}
@keyframes croc-wake {
  0% { transform: scale(0.68); opacity: 0; }
  20% { opacity: 0.48; }
  100% { transform: scale(1.23, 1.18); opacity: 0; }
}
@keyframes water-lapping {
  0%, 100% { transform: translateY(3px) scaleX(0.98); opacity: 0.65; }
  50% { transform: translateY(-3px) scaleX(1.02); opacity: 1; }
}
@keyframes croc-dip {
  0%, 100% { transform: translateY(0.8%); }
  40% { transform: translateY(3%); }
}
@keyframes croc-splash {
  0% { opacity: 0; transform: translate(0, 0) scale(0.3); }
  20% { opacity: 0.9; }
  65% { opacity: 0.6; }
  100% { opacity: 0; transform: translate(var(--splash-x), var(--splash-y)) rotate(35deg) scale(0.5); }
}
#character-motion,
.character-breathe,
.character-art,
.jaw,
#teeth-layer,
.tooth-row {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
}
.character-breathe {
  animation: croc-breathe 5.2s ease-in-out infinite;
  transform-origin: 50% 98%;
}
.character-art {
  pointer-events: none;
  overflow: visible;
}
.mouth-back {
  clip-path: polygon(0 45%, 100% 45%, 100% 80%, 0 80%);
  transition:
    transform 0.16s ease-out,
    opacity 0.14s;
  transform-origin: 50% 65%;
}
.jaw {
  pointer-events: none;
  transition: transform 0.2s cubic-bezier(0.3, 0.8, 0.3, 1);
  transform-origin: 50% 61%;
}
.upper-jaw {
  z-index: 2;
}
.lower-jaw {
  z-index: 1;
}
.upper-jaw .jaw-art {
  clip-path: polygon(0 0, 100% 0, 100% 51.5%, 0 51.5%);
}
.lower-jaw .jaw-art {
  clip-path: polygon(0 63%, 100% 63%, 100% 100%, 0 100%);
}
.tooth-row {
  pointer-events: none;
}
.tooth {
  position: absolute;
  transform: translate(-50%, -50%);
  border: 0;
  padding: 0;
  background: transparent;
  isolation: isolate;
  pointer-events: auto;
  color: #4c542e;
  touch-action: manipulation;
}
.tooth::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  /* Keep nearby teeth distinct when a short screen shrinks the character. */
  width: max(100%, min(44px, 6.5cqh, 8.7cqw));
  height: max(100%, min(44px, 6.5cqh, 8.7cqw));
  transform: translate(-50%, -50%);
}
.tooth-sprite {
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
  transition:
    transform 0.18s cubic-bezier(0.2, 0.8, 0.3, 1),
    filter 0.18s,
    opacity 0.18s;
}
.top-tooth .tooth-sprite {
  transform-origin: 50% 0;
}
.bottom-tooth .tooth-sprite {
  transform-origin: 50% 100%;
}
.tooth:enabled:hover .tooth-sprite,
.tooth:focus-visible .tooth-sprite {
  filter: brightness(1.15) drop-shadow(0 0 7px #fff4a580);
}
.tooth:enabled:active .tooth-sprite {
  transform: scaleY(0.75);
}
.tooth:focus-visible {
  outline: 3px solid #ffe29b;
  outline-offset: 6px;
  border-radius: 35%;
}
.tooth-number {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 900;
  opacity: 0;
  transition: opacity 0.18s;
  pointer-events: none;
}
.tooth:enabled:hover .tooth-number,
.tooth:focus-visible .tooth-number {
  opacity: 0.75;
}
.tooth.picked .tooth-sprite {
  transform: scaleY(0.45);
  filter: brightness(0.78);
}
.tooth.picked .tooth-number {
  display: none;
}
@keyframes croc-breathe {
  0%,
  100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(1.006);
  }
}
.snap-word {
  position: absolute;
  top: 63%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5) rotate(-8deg);
  font-family: "Fredoka", sans-serif;
  color: #ffdf6b;
  font-size: clamp(36px, 6vw, 64px);
  font-weight: 700;
  -webkit-text-stroke: 2px #6e3e25;
  paint-order: stroke fill;
  filter: drop-shadow(0 4px 0 #6e3e25);
  opacity: 0;
  pointer-events: none;
  z-index: 4;
}
.biting .upper-jaw {
  transform: translateY(29%) rotateX(-4deg);
}
.biting .lower-jaw {
  transform: none;
}
.biting .mouth-back {
  transform: scaleY(0.2);
  opacity: 0;
}
.biting .character-breathe {
  animation: jaw-impact 0.28s 0.18s;
}
.biting .tooth {
  pointer-events: none;
}
.biting .snap-word {
  animation: chomp-pop 0.5s 0.12s both;
}
.biting {
  animation: none;
}
.lost #current-multiplier {
  color: #a34b30;
}
.won .character-float,
.won .character-breathe {
  /* Keep idle movement from combining with the single win hop. */
  animation-play-state: paused;
}
.won #character-motion {
  animation: win-hop 560ms both;
}
@keyframes win-hop {
  0% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.2, 0.65, 0.3, 1);
  }
  45% {
    transform: translateY(-12px);
    animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4);
  }
  100% { transform: translateY(0); }
}
.bet-panel {
  background: #fffaecf5;
  border-top: 2px solid #fffdec;
  padding: 19px 32px 10px;
  box-shadow: 0 -6px 35px #2d634312;
  z-index: 7;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
}
.bet-controls {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  align-items: start;
}
.amount-field {
  min-width: 0;
}
.amount-field > label,
.difficulty-field legend {
  display: block;
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: 1.2px;
  margin-bottom: 8px;
  color: #60806a;
}
.amount-input {
  display: flex;
  align-items: center;
  height: 47px;
  background: #eaf0db;
  border: 1px solid #d5dfc7;
  border-radius: 12px;
  padding: 5px;
  gap: 4px;
}
.amount-input > span {
  padding-left: 9px;
  color: #6e8867;
  font-size: 16px;
}
.amount-input input {
  min-width: 0;
  flex: 1;
  width: 70px;
  border: 0;
  background: none;
  outline-offset: 0;
  color: var(--ink);
  font-size: 17px;
  font-weight: 900;
  padding: 4px;
}
.amount-input button {
  width: 35px;
  height: 35px;
  flex: none;
  border: 0;
  border-radius: 7px;
  background: #fffbec;
  font-size: 15px;
  box-shadow: 0 2px 0 #52714113;
}
.amount-input button:hover {
  background: white;
}
.amount-input:focus-within {
  border-color: #5b8e49;
}
.quick-bets {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  margin-top: 8px;
}
.quick-bets button {
  min-width: 0;
  height: 30px;
  padding: 0 3px;
  border: 1px solid #cad7b8;
  border-radius: 8px;
  background: #eff2df;
  font-size: 12px;
  font-weight: 900;
}
.quick-bets button:hover:enabled {
  background: #dce9c5;
  border-color: #88a969;
}
.quick-bets button[aria-pressed="true"] {
  background: #407b3b;
  color: #fffde7;
  border-color: #407b3b;
}
.quick-bets button:disabled {
  opacity: 0.45;
}
.disabled {
  opacity: 0.65;
}
.difficulty-field {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.difficulty-field legend {
  width: 100%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.difficulty-field legend > span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  color: #67805e;
}
.risk-options {
  display: flex;
  height: 47px;
  background: #eaf0db;
  border: 1px solid #d5dfc7;
  border-radius: 12px;
  padding: 4px;
  gap: 3px;
}
.risk-options label {
  position: relative;
  flex: 1;
  display: flex;
  min-width: 0;
  cursor: pointer;
}
.risk-options input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.risk-options span {
  display: grid;
  place-items: center;
  width: 100%;
  font-size: 13px;
  font-weight: 900;
  border-radius: 8px;
  color: #708368;
  transition: background 0.15s;
}
.risk-options input:checked + span {
  background: #407b3b;
  color: #fffee7;
  box-shadow: 0 2px 0 #285d2a;
}
.risk-options input:focus-visible + span {
  outline: 3px solid #176b87;
  outline-offset: 2px;
}
.risk-options input:disabled + span {
  opacity: 0.58;
  cursor: default;
}
.primary-button {
  border: 2px solid #a97e28;
  border-bottom-width: 5px;
  border-radius: 14px;
  background: #ffd660;
  height: 57px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 1000;
  white-space: nowrap;
  box-shadow: inset 0 2px 0 #ffeca0;
  transition:
    background 0.15s,
    transform 0.15s;
  align-self: center;
}
.primary-button svg {
  width: 19px;
  height: 19px;
}
.primary-button > svg:last-child,
.primary-button > i:last-child {
  margin-left: auto;
  width: 18px;
}
.primary-button {
  padding: 0 17px;
}
.primary-button > svg:first-child,
.primary-button > i:first-child {
  margin-right: auto;
}
.primary-button:hover:enabled {
  background: #ffe17d;
  transform: translateY(-1px);
}
.primary-button:active:enabled {
  transform: translateY(2px);
}
.primary-button:disabled {
  background: #e1e7cf;
  border-color: #bdc8a7;
  box-shadow: none;
  color: #6c7e5f;
}
.primary-button.cashing {
  background: #add974;
  border-color: #54863b;
  box-shadow: inset 0 2px 0 #d0ed9e;
}
.bet-error {
  text-align: center;
  font-size: 12px;
  color: #a33724;
  margin: 10px 0 0;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
dialog {
  width: min(490px, calc(100% - 32px));
  border: 2px solid #42643c;
  border-radius: 24px;
  padding: 25px;
  color: var(--ink);
  background: var(--cream);
  box-shadow: 0 25px 100px #11392255;
}
dialog::backdrop {
  background: #143c2d77;
  backdrop-filter: blur(6px);
}
.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  letter-spacing: 1px;
  color: #59814e;
}
.dialog-header .icon-button {
  background: #e8efd8;
}
dialog h2 {
  font:
    600 30px "Fredoka",
    sans-serif;
  letter-spacing: -0.4px;
}
dialog p,
dialog li {
  font-size: 14px;
  line-height: 1.7;
  color: #57704f;
}
dialog ol {
  padding-left: 23px;
}
dialog li {
  padding-left: 5px;
  margin-bottom: 13px;
}
dialog .primary-button {
  width: 100%;
  margin-top: 20px;
}
.dialog-stats {
  display: flex;
  justify-content: space-around;
  background: #e9efd8;
  padding: 16px;
  border-radius: 12px;
  font-size: 11px;
  text-align: center;
  color: #67805c;
}
.dialog-stats strong {
  display: block;
  font-size: 23px;
  color: var(--ink);
}
.math-detail {
  font-size: 12px !important;
}
@keyframes chomp-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5) rotate(-8deg);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2) rotate(-8deg);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(-8deg);
  }
}
@keyframes jaw-impact {
  0%,
  100% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.018, 0.976);
  }
  70% {
    transform: scale(0.994, 1.008);
  }
}

#bet-button {
  width: 100%;
  height: auto;
  align-self: stretch;
  margin-top: 0;
}
.tooth {
  min-width: 0;
  min-height: 0;
}
@media (min-width: 1500px) {
  .topbar {
    padding-inline: 44px;
  }
  .bet-panel {
    padding-top: 23px;
    padding-bottom: 14px;
  }
  .bet-controls {
    max-width: 1100px;
    gap: 36px;
  }
}
@media (max-width: 900px) {
  .topbar {
    padding-inline: 20px;
  }
  .bet-controls {
    gap: 18px;
  }
  .bet-panel {
    padding-inline: 22px;
  }
  .brand {
    font-size: 25px;
  }
  .header-actions {
    gap: 6px;
  }
  #bet-button {
    padding-inline: 8px;
    font-size: 14px;
    gap: 4px;
  }
  #bet-button > svg,
  #bet-button > i {
    display: none;
  }
}
@media (max-width: 740px) {
  .quick-bets {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .game-layout {
    min-height: 560px;
    grid-template-rows: 64px minmax(0, 1fr) auto;
  }
  .topbar {
    padding: 10px 13px;
    gap: 8px;
  }
  .brand {
    font-size: 20px;
    gap: 5px;
    letter-spacing: -0.5px;
  }
  .brand > svg {
    width: 30px;
    height: 30px;
  }
  .header-actions {
    gap: 5px;
  }
  .wallet {
    gap: 5px;
    padding: 5px 5px 5px 9px;
    border-radius: 12px;
  }
  .wallet strong {
    font-size: 13px;
  }
  .demo-tag {
    position: absolute;
    top: 58px;
    right: 17px;
    font-size: 8px;
    padding: 3px 5px;
    background: #fffbe4ba;
  }
  .wallet-reset {
    width: 26px;
    height: 28px;
  }
  .icon-button {
    width: 34px;
    height: 36px;
    border-radius: 10px;
  }
  .icon-button svg {
    width: 17px;
    height: 17px;
  }
  .fullscreen-button {
    display: none;
  }
  .game-board {
    grid-template-rows: 124px minmax(0, 1fr);
  }
  .character-space {
    padding: 0 18px 28px;
  }
  .character-wrap {
    height: min(100cqh, calc((100cqw - 8px) * 4 / 3));
  }
  #current-multiplier {
    font-size: 84px;
    letter-spacing: -2px;
  }
  .next-multiplier {
    font-size: 12px;
    margin-top: 6px;
  }
  #next-multiplier {
    font-size: 20px;
  }
  .tooth-number {
    font-size: 12px;
  }
  .bet-panel {
    padding: 13px 16px max(10px, env(safe-area-inset-bottom));
    border-radius: 20px 20px 0 0;
  }
  .bet-controls {
    grid-template-columns: 1fr 1.15fr;
    gap: 12px 15px;
  }
  .amount-field {
    grid-column: 1;
    grid-row: 1;
  }
  .difficulty-field {
    grid-column: 2;
    grid-row: 1;
  }
  #bet-button {
    grid-column: 1/-1;
    grid-row: 2;
    font-size: 16px;
    height: 49px;
    min-height: 49px;
    align-self: start;
    margin-top: 0;
  }
  .amount-field > label,
  .difficulty-field legend {
    font-size: 9px;
    letter-spacing: 0.8px;
    margin-bottom: 6px;
  }
  .difficulty-field legend > span {
    font-size: 9px;
    letter-spacing: 0;
  }
  .amount-input,
  .risk-options {
    height: 43px;
  }
  .amount-input button {
    width: 28px;
    height: 31px;
  }
  .amount-input > span {
    padding-left: 3px;
  }
  .amount-input input {
    font-size: 15px;
    width: 42px;
  }
  .risk-options span {
    font-size: 12px;
  }
  .primary-button {
    height: 49px;
    font-size: 16px;
    border-radius: 12px;
  }
}
@media (max-height: 650px) and (min-width: 601px) {
  .game-layout {
    min-height: 350px;
    grid-template-rows: 52px minmax(0, 1fr) auto;
  }
  .topbar {
    padding: 5px 20px;
  }
  .brand {
    font-size: 22px;
  }
  .brand > svg {
    height: 30px;
  }
  .wallet {
    padding-block: 3px;
  }
  .icon-button {
    height: 36px;
  }
  .game-board {
    grid-template-rows: 88px minmax(0, 1fr);
  }
  .character-space {
    padding-bottom: 18px;
  }
  #current-multiplier {
    font-size: 64px;
    letter-spacing: -2px;
  }
  .next-multiplier {
    margin-top: 4px;
    font-size: 11px;
  }
  #next-multiplier {
    font-size: 17px;
  }
  .bet-panel {
    padding-top: 7px;
    padding-bottom: max(6px, env(safe-area-inset-bottom));
  }
  .bet-controls {
    gap: 16px;
  }
  .amount-field > label,
  .difficulty-field legend {
    margin-bottom: 4px;
  }
  .amount-input,
  .risk-options {
    height: 41px;
  }
  .primary-button {
    height: 49px;
  }
  .quick-bets {
    margin-top: 6px;
  }
  .quick-bets button {
    height: 25px;
    font-size: 11px;
  }
}
@media (max-width: 360px) {
  .amount-input input {
    font-size: 14px;
    padding-inline: 0;
  }
  .amount-input {
    gap: 2px;
  }
  .brand {
    font-size: 18px;
  }
  .brand > svg {
    display: none;
  }
  .topbar {
    gap: 6px;
  }
  .bet-panel {
    padding-inline: 12px;
  }
  .bet-controls {
    gap: 12px;
  }
  .difficulty-field legend > span {
    font-size: 8px;
  }
}
.version-back-link {
  margin-right: auto;
  margin-left: 12px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 12px;
  background: #fffbe5bd;
}
.version-back-link:hover { background: #fffbe5; }
body[data-character="swimming"] .character-space {
  place-items: end center;
  padding-bottom: 12px;
}
body[data-character="swimming"] .character-wrap {
  aspect-ratio: 4 / 3;
  height: min(112cqh, 720px, calc(100cqw * 3 / 4));
}
.swimming-open {
  position: absolute;
  inset: 0;
  visibility: visible;
}
.swimming-closed {
  visibility: hidden;
  object-fit: contain;
}
/* Switch complete poses together, at the impact, without ghost teeth or cut seams. */
body[data-character="swimming"] .biting.has-closed-pose .swimming-open {
  visibility: hidden;
  transition: visibility 0s 110ms;
}
body[data-character="swimming"] .biting.has-closed-pose .swimming-closed {
  visibility: visible;
  transition: visibility 0s 110ms;
}
body[data-character="swimming"] .biting .character-breathe {
  transform-origin: 42% 78%;
  animation: lagoon-chomp 360ms ease-out both;
}
@keyframes lagoon-chomp {
  0% { transform: scale(1); }
  30% { transform: scale(1.025, 0.95); }
  50% { transform: scale(0.985, 1.015); }
  100% { transform: scale(1); }
}
body[data-character="swimming"] .croc-wake {
  left: 0; top: 67%; width: 80%; height: 23%;
}
body[data-character="swimming"] .croc-splash { width: 75%; height: 90%; }
body[data-character="swimming"] .snap-word { left: 40%; top: 65%; }
@media (max-width: 600px) {
  .version-back-link {
    position: absolute; left: 12px; top: 61px; margin: 0;
    padding: 5px 8px; font-size: 10px;
  }
  body[data-character="swimming"] .character-space {
    padding-inline: 0;
    place-items: center;
  }
  body[data-character="swimming"] .character-wrap {
    height: min(108cqh, calc(112cqw * 3 / 4));
  }
}
@media (prefers-reduced-motion: reduce) {
  body[data-character="swimming"] .biting.has-closed-pose .swimming-open,
  body[data-character="swimming"] .biting.has-closed-pose .swimming-closed {
    transition: none !important;
  }
  .jungle-background * {
    animation: none !important;
  }
  .character-float,
  .croc-wake span,
  .water-lapping,
  .croc-splash span {
    animation: none !important;
  }
  #character-motion,
  .character-breathe {
    animation: none !important;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .biting .snap-word {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-8deg);
  }
}