/* Cute Temple (/cute/): the live 3D Temple lagoon with the painted jade head,
   played with Temple's page (its top bar, wallet, dialogs and the dark petrol
   betting panel, copied below from temple.css with the selectors renamed).
   dist/cute/cute-character.js places the stage (the whole world: 1672 x 941
   on landscape screens, the phone world's 941 x 1672 on portrait ones), the
   teeth and the readout; the world itself (cute-world.js) is drawn exactly as
   painted: nothing here tints, lights or filters the canvas. */
body[data-character="cute"] {
  background: #0b2629;
}
body[data-character="cute"] .game-layout {
  container-type: size;
  background: #0b2629;
}
/* The top bar reads over the dusk sky as on Temple. */
body[data-character="cute"] .topbar {
  background: linear-gradient(180deg, #04131799 0, #04131700 100%);
}
body[data-character="cute"] .game-layout::before {
  display: none;
}
body[data-character="cute"] .brand {
  color: #fff3d8;
  filter: drop-shadow(0 2px 3px #041317b0);
}
/* The music and the ambience toggles in the ☰ menu (cute-menu.css) sit under
   the sound toggle (the game's sounds): the note and the waves wear the
   speaker's marks, a cross while off and waves while on. */
body[data-character="cute"] .music-toggle .music-on-icon,
body[data-character="cute"] .music-toggle[aria-pressed="true"] .music-off-icon,
body[data-character="cute"] .ambience-toggle .ambience-on-icon,
body[data-character="cute"] .ambience-toggle[aria-pressed="true"] .ambience-off-icon {
  display: none;
}
body[data-character="cute"] .music-toggle[aria-pressed="true"] .music-on-icon,
body[data-character="cute"] .ambience-toggle[aria-pressed="true"] .ambience-on-icon {
  display: inline;
}
/* The bar keeps only the brand, the past rounds, the balance and ☰, so the
   brand keeps its crocodile and its size wherever styles.css gives them, and
   on phones down to 340px wide beside a five-digit balance ($99,999.00);
   narrower ones keep the crocodile with a smaller wordmark, 16px or more
   clear of the balance down to 320px. */
@media (max-width: 360px) {
  body[data-character="cute"] .brand {
    font-size: 20px;
  }
  body[data-character="cute"] .brand > svg {
    display: block;
  }
}
@media (max-width: 339px) {
  body[data-character="cute"] .brand {
    font-size: 18px;
  }
}
@media (max-width: 329px) {
  body[data-character="cute"] .brand {
    font-size: 16px;
  }
}

/* ---------- Backdrop: behind the stage where it does not reach ---------- */
/* Wherever the stage does not reach (never on a landscape screen, where the
   world always covers; on a phone its top may sit just under the top bar's
   controls, and it ends above the screen's bottom, behind the panel) the
   same lagoon shows, soft and dim, so it reads as more of the scene rather
   than as black bars. */
body[data-character="cute"] .cute-background {
  background: #0b2629 url("/assets/temple-lagoon-clear-desktop.webp") center / cover no-repeat;
  filter: blur(22px) brightness(0.62) saturate(1.1);
  transform: scale(1.12);
}
@media (orientation: portrait) {
  body[data-character="cute"] .cute-background {
    background-image: url("/assets/temple-lagoon-clear-phone.webp");
  }
}

/* ---------- Stage ---------- */
body[data-character="cute"] .game-board {
  display: block;
}
/* The stage's box is in layout px: this layer covers the whole layout (the
   board starts --board-top below it; cute-character.js measures it). */
body[data-character="cute"] .character-space {
  position: absolute;
  left: 0;
  top: calc(-1 * var(--board-top, 82px));
  width: 100cqw;
  height: 100cqh;
  padding: 0;
  display: block;
  z-index: 1;
  pointer-events: none;
}
body[data-character="cute"] .character-wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  transform: none;
}
body[data-character="cute"] .cute-stage {
  position: absolute;
  inset: 0;
  /* The lagoon still is the world at rest without the island and the head:
     it holds the frame while the world loads, then the canvas fades in over
     it and the island and the head appear. The phone world has its own
     (data-orientation: the world the stage frames). */
  background: #0b2629 url("/assets/temple-lagoon-clear-desktop.webp") 0 0 / 100% 100% no-repeat;
}
body[data-character="cute"] .cute-stage[data-orientation="portrait"] {
  background-image: url("/assets/temple-lagoon-clear-phone.webp");
}
/* The canvas takes the scene's taps, swipes and hovers (the between-round
   stories, the water's rings); everything else on the stage lets them
   through. Not while it loads and warms: it does not show yet. */
body[data-character="cute"] .cute-stage > canvas {
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s ease-out;
}
body[data-character="cute"] .is-world-ready .cute-stage > canvas {
  pointer-events: auto;
  opacity: 1;
}
body[data-character="cute"] .cute-loading {
  position: absolute;
  left: 49.67%;
  top: 60%;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 15px 8px 11px;
  border: 1px solid #fff5d42e;
  border-radius: 999px;
  background: #0a2a24c7;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #d9ead6;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  z-index: 5;
}
body[data-character="cute"] .cute-loading > span {
  width: 14px;
  height: 14px;
  border: 2px solid #9fe3c055;
  border-top-color: #ffd66b;
  border-radius: 50%;
  animation: cute-spin 0.9s linear infinite;
}
body[data-character="cute"] .is-world-ready .cute-loading {
  display: none;
}
body[data-character="cute"] .is-world-failed .cute-loading {
  top: 68%;
  white-space: normal;
  max-width: min(92%, 420px);
  text-align: center;
}
body[data-character="cute"] .is-world-failed .cute-loading > span {
  display: none;
}
@keyframes cute-spin {
  to { transform: rotate(1turn); }
}

/* ---------- Readout: inside the open mouth, above the shut head ---------- */
/* cute-character.js puts it at the head's anchors every frame (--at): in the
   open mouth it is centred in the tooth-free band between the middle teeth
   (--mouth-band tall) and sized to it; above the shut head its bottom sits
   --readout-gap over the head's top. It never takes a pointer event. */
body[data-character="cute"] .cute-readout {
  --readout-gap: 10px;
  --mouth-value: clamp(13px, calc(var(--mouth-band, 60px) * 0.6), 60px);
  --mouth-next: clamp(8px, calc(var(--mouth-band, 60px) * 0.19), 17px);
  position: absolute;
  left: 0;
  top: 0;
  width: max-content;
  transform: var(--at, translate(50%, 30%)) translate(-50%, -100%) translateY(calc(-1 * var(--readout-gap)));
  pointer-events: none;
  z-index: 3;
  transition: opacity 0.16s ease-out;
}
body[data-character="cute"] .cute-readout[data-place="mouth"] {
  max-width: var(--mouth-width, 70%);
  transform: var(--at) translate(-50%, -50%);
}
body[data-character="cute"] .cute-readout.is-moving {
  opacity: 0;
  transition: none;
}
body[data-character="cute"] .cute-readout.is-gone {
  visibility: hidden;
}
body[data-character="cute"] .cute-readout .scoreboard {
  display: grid;
  justify-items: center;
  filter: none;
}
/* Above the shut head (between rounds): Temple's carved number and pill. */
body[data-character="cute"] #current-multiplier {
  font-size: var(--readout-size, 60px);
  letter-spacing: -0.03em;
  color: #f7f1dc;
  -webkit-text-stroke: 0.09em #0f3a2a;
  paint-order: stroke fill;
  text-shadow: 0 0.05em 0 #0f3a2a, 0 0.12em 0.3em #02100cb3;
  font-variant-numeric: tabular-nums;
}
body[data-character="cute"] .next-multiplier {
  margin-top: 6px;
  padding: 5px 13px;
  border: 1px solid #fff5d42e;
  border-radius: 999px;
  background: #0a2a24c7;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #d9ead6;
  font-size: 12px;
  line-height: 1.36;
  white-space: nowrap;
}
body[data-character="cute"] #next-multiplier {
  display: inline-block;
  position: relative;
  color: #ffe08c;
  font-size: 19px;
}
/* In the open mouth: sizes follow the tooth-free band, no pill. */
body[data-character="cute"] .cute-readout[data-place="mouth"] #current-multiplier {
  font-size: var(--mouth-value);
  letter-spacing: -0.02em;
  -webkit-text-stroke: 0 #0f3a2a;
  text-shadow: 0 0 0.24em #010b09d9, 0 0.03em 0.08em #010b09;
}
body[data-character="cute"] .cute-readout[data-place="mouth"] .next-multiplier {
  margin-top: 2px;
  padding: 0;
  border-color: transparent;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: #bfe3c9;
  font-size: var(--mouth-next);
  line-height: 1.1;
  gap: 0.45em;
  text-shadow: 0 0 0.35em #010b09;
}
body[data-character="cute"] .cute-readout[data-place="mouth"] #next-multiplier {
  font-size: 1.15em;
}
/* Landscape phones: the readout above the shut head shrinks to fit under the
   top bar (as on Temple). */
@media (orientation: landscape) and (max-height: 480px) {
  body[data-character="cute"] .cute-readout {
    --readout-gap: 6px;
  }
  body[data-character="cute"] .cute-readout:not([data-place="mouth"]) .next-multiplier {
    margin-top: 3px;
    padding: 2px 9px;
    font-size: 10px;
  }
  body[data-character="cute"] .cute-readout:not([data-place="mouth"]) #next-multiplier {
    font-size: 14px;
  }
}
/* Heat: while a round plays the number warms with the tension (data-tension
   on #character-wrap, 1-4), as on Temple: ivory, cream, then gold inlay.
   Never orange-red. A cash-out holds the gold. */
body[data-character="cute"] .game-board.playing #character-wrap[data-tension="2"] #current-multiplier {
  color: #fce6ae;
}
body[data-character="cute"] .game-board.playing #character-wrap[data-tension="3"] #current-multiplier {
  color: transparent;
  background: linear-gradient(180deg, #fff3c4, #ffd24f 55%, #e0a02a);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: none;
}
body[data-character="cute"] .game-board.playing #character-wrap[data-tension="4"] #current-multiplier,
body[data-character="cute"] .game-board.won #current-multiplier {
  color: transparent;
  background: linear-gradient(180deg, #fff6d0, #ffc948 55%, #c98a1c);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 0.025em #6b420b;
  text-shadow: none;
}
body[data-character="cute"] .game-board.playing #character-wrap:is([data-tension="3"], [data-tension="4"]) .multiplier-readout,
body[data-character="cute"] .game-board.won .multiplier-readout {
  filter: drop-shadow(0 0 3px #010b09e6) drop-shadow(0 1px 2px #010b09);
}
body[data-character="cute"] .game-board.playing #character-wrap[data-tension="2"] #next-multiplier {
  color: #ffd66b;
}
body[data-character="cute"] .game-board.playing #character-wrap[data-tension="3"] #next-multiplier {
  color: #ffc94d;
}
body[data-character="cute"] .game-board.playing #character-wrap[data-tension="4"] #next-multiplier {
  color: #ffbd4a;
}
body[data-character="cute"] .game-board.playing #character-wrap:is([data-tension="3"], [data-tension="4"]) .next-multiplier > span {
  color: #f3d7a0;
}
/* Each new multiplier lands with a stamp; the next value flips in. */
/* The number counts up over Temple's COUNT_TIME (280 ms) and lands on the
   stamp's brighter pop, 61 % of STAMP_TIME (--stamp-time, 460 ms). */
body[data-character="cute"] .cute-readout.is-stamping #current-multiplier {
  animation: cute-readout-stamp var(--stamp-time, 460ms) cubic-bezier(0.2, 0.7, 0.3, 1);
}
body[data-character="cute"] .cute-readout.is-stamping #next-multiplier {
  animation: cute-next-in 220ms cubic-bezier(0.2, 0.8, 0.3, 1) 80ms both;
}
@keyframes cute-readout-stamp {
  0% { transform: scale(1); filter: none; }
  55% { transform: scale(0.97); filter: brightness(1); }
  61% { transform: scale(1.07); filter: brightness(1.28); }
  80% { transform: scale(0.99); }
  100% { transform: scale(1); filter: none; }
}
@keyframes cute-next-in {
  0% { opacity: 0; transform: translateY(0.55em); }
  100% { opacity: 1; transform: none; }
}
/* Hover preview: pointing at (or focusing) a standing tooth lifts the
   next-tooth value and underlines it, what that tooth would pay. */
body[data-character="cute"] .game-board.playing #next-multiplier {
  transition:
    transform 160ms cubic-bezier(0.3, 0.7, 0.4, 1.3),
    color 160ms;
}
body[data-character="cute"] #next-multiplier::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.12em;
  height: 1.5px;
  border-radius: 1px;
  background: #ffd46b;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease-out;
  pointer-events: none;
}
@media (hover: hover) {
  body[data-character="cute"] .game-board.playing:has(.tooth:enabled:not(.picked):hover) #character-wrap #next-multiplier {
    color: #fff1c2;
    transform: translateY(-1px) scale(1.1);
  }
  body[data-character="cute"] .game-board.playing:has(.tooth:enabled:not(.picked):hover) #next-multiplier::after {
    transform: scaleX(1);
  }
}
body[data-character="cute"] .game-board.playing:has(.tooth:enabled:not(.picked):focus-visible) #character-wrap #next-multiplier {
  color: #fff1c2;
  transform: translateY(-1px) scale(1.1);
}
body[data-character="cute"] .game-board.playing:has(.tooth:enabled:not(.picked):focus-visible) #next-multiplier::after {
  transform: scaleX(1);
}
/* The wind-up before a bite: the number the player saw is held in a copy
   (game.js writes 0.00 at the reveal), which cowers, shrinks and drains to
   cold stone (never red)... */
body[data-character="cute"] .cute-frozen {
  display: none;
  font-family: "Fredoka", sans-serif;
  font-size: var(--mouth-value);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: #f7f1dc;
  text-shadow: 0 0 0.24em #010b09d9, 0 0.03em 0.08em #010b09;
}
body[data-character="cute"] .cute-frozen > span {
  margin-left: 2px;
  font-size: 0.64em;
}
body[data-character="cute"] .cute-readout.is-frozen > .scoreboard {
  display: none;
}
body[data-character="cute"] .cute-readout.is-frozen > .cute-frozen {
  display: block;
}
body[data-character="cute"] .cute-readout.is-dreading > .cute-frozen {
  animation: cute-readout-dread 420ms both;
}
@keyframes cute-readout-dread {
  0% { transform: none; filter: none; opacity: 1; }
  28% { transform: scale(0.93) translateY(0.02em); filter: saturate(0.35) brightness(0.85); opacity: 0.85; }
  42% { transform: scale(0.93) translate(-1px, 0.02em); }
  54% { transform: scale(0.93) translate(1px, 0.02em); }
  66% { transform: scale(0.93) translate(-1px, 0.02em); }
  78% { transform: scale(0.93) translate(0.6px, 0.02em); }
  100% { transform: scale(0.93) translateY(0.02em); filter: saturate(0.35) brightness(0.85); opacity: 0.8; }
}
/* ...then the closing jaws squash it flat where it stood, and it is gone
   until the next bet. */
body[data-character="cute"] .cute-readout.is-crushed > .cute-frozen {
  animation: cute-readout-crush 220ms cubic-bezier(0.5, 0, 0.9, 0.4) both;
}
@keyframes cute-readout-crush {
  0% { transform: scale(0.93); filter: saturate(0.35) brightness(0.85); opacity: 0.8; }
  45% { transform: scale(1.15, 0.35); opacity: 0.8; }
  100% { transform: scale(1.3, 0.02); filter: saturate(0.35) brightness(0.85); opacity: 0; visibility: hidden; }
}

/* ---------- Teeth: real buttons riding the 3D teeth ---------- */
/* cute-character.js sizes each button to its tooth and moves it with the
   jaw (the world's anchors); --hit is the hit area: 44 px, never past the
   spacing of the teeth. The buttons are transparent: the tooth you see is
   the painted 3D tooth. Only the open mouth shows them. */
body[data-character="cute"] #teeth-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  visibility: hidden;
  z-index: 4;
}
body[data-character="cute"] #teeth-layer.is-open {
  visibility: visible;
}
body[data-character="cute"] .tooth-row {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
body[data-character="cute"] .tooth {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-radius: 38%;
  transform: none;
  will-change: transform;
  color: #173a2b;
}
body[data-character="cute"] .tooth::after {
  width: max(100%, var(--hit, 44px));
  height: max(100%, var(--hit, 44px));
  border-radius: 30%;
}
body[data-character="cute"] .tooth:enabled {
  cursor: pointer;
}
body[data-character="cute"] .tooth:focus-visible {
  outline: 3px solid #ffe29b;
  outline-offset: 3px;
  box-shadow: 0 0 0 7px #0b2629a6;
}
body[data-character="cute"] .tooth-number {
  top: 50%;
  font-size: clamp(9px, 1.1vw, 12px);
}
/* The bite's wind-up: the trap tooth cracks under the pointer; no number on it. */
body[data-character="cute"] #teeth-layer.is-biting .tooth-number {
  opacity: 0;
}
/* Without the world (no WebGL, or its files failed): plain ivory teeth in two
   rows over the lagoon still, so the round can still be played. */
body[data-character="cute"] .is-world-failed #teeth-layer {
  visibility: visible;
}
body[data-character="cute"] .is-world-failed .tooth-row {
  inset: auto 0 auto 0;
  display: flex;
  justify-content: center;
  gap: 10px;
  top: 34%;
}
body[data-character="cute"] .is-world-failed #lower-teeth {
  top: 52%;
}
body[data-character="cute"] .is-world-failed .tooth {
  position: relative;
  width: 44px;
  height: 52px;
  border: 2px solid #c9b98f;
  background: #fff6de;
  pointer-events: auto;
}
body[data-character="cute"] .is-world-failed .tooth .tooth-number {
  opacity: 0.8;
}
body[data-character="cute"] .is-world-failed .tooth.picked {
  background: #4f7f4d;
}
body[data-character="cute"] .is-world-failed .cute-readout {
  transform: translate(-50%, -100%);
  left: 49.67%;
  top: 30%;
}

@media (prefers-reduced-motion: reduce) {
  body[data-character="cute"] .cute-readout,
  body[data-character="cute"] .cute-readout * {
    animation: none !important;
    transition: none !important;
  }
  body[data-character="cute"] .cute-loading > span {
    animation: none;
  }
}

/* ---------- Temple's presses and betting panel ----------
   Copied from temple.css (its "Presses" and "Betting panel" sections)
   with the selectors renamed for this page: the cute edition keeps
   Temple's panel. temple-bet.js drives the steppers and the BET / BET
   AGAIN labels here as on Temple (cute-character.js installs it), and
   ends each press on its temple-tap animation, so the keyframes keep
   their Temple names (temple.css is not loaded on this page). */
/* temple-bet.js adds .is-tapped on each press (and to a newly chosen risk). The
   BET button presses deeper and a light sweeps across it; while it waits for a
   bet, a soft sheen passes over it every few seconds. */
body[data-character="cute"] :is(.bet-panel, .topbar) button.is-tapped,
body[data-character="cute"] .risk-options span.is-tapped {
  animation: temple-tap 320ms cubic-bezier(0.3, 0.7, 0.4, 1);
}
body[data-character="cute"] #bet-button.is-tapped {
  animation: temple-tap-deep 420ms cubic-bezier(0.3, 0.7, 0.4, 1);
}
body[data-character="cute"] #bet-button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
body[data-character="cute"] #bet-button::before,
body[data-character="cute"] #bet-button::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, #fff0 30%, #ffffff8c 47%, #fff0 64%);
  transform: translateX(-110%);
  pointer-events: none;
}
body[data-character="cute"] #bet-button.is-tapped::after {
  animation: temple-sweep 420ms ease-out;
}
body[data-character="cute"] #bet-button[data-label="bet"]:enabled::before {
  opacity: 0.6;
  animation: temple-sheen 5s ease-in-out 1.5s infinite;
}
@keyframes temple-tap {
  0%, 100% { transform: scale(1); }
  35% { transform: scale(0.9); }
  70% { transform: scale(1.05); }
}
@keyframes temple-tap-deep {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(0.95, 0.92); }
  65% { transform: scale(1.02, 1.03); }
}
@keyframes temple-sweep {
  from { transform: translateX(-110%); }
  to { transform: translateX(110%); }
}
@keyframes temple-sheen {
  0%, 72% { transform: translateX(-110%); }
  100% { transform: translateX(110%); }
}

/* ---------- Betting panel: dark petrol glass with three cards ---------- */
/* Temple-only restyle of the shared panel (styles.css keeps it for the other
   editions): a floating glass panel over the water with the amount card
   (− amount + ½ 2× and the quick chips), the BET button and the risk card.
   temple-bet.js drives the −/+ steppers and the BET / BET AGAIN labels. */
/* While the world loads and warms (cute-character.js: .is-loading, the panel
   inert) the panel waits with it, dimmed. */
body[data-character="cute"] .game-layout.is-loading .bet-panel {
  opacity: 0.55;
}
body[data-character="cute"] .bet-panel {
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto 16px;
  padding: 12px;
  border: 1px solid #2c5b52;
  border-radius: 18px;
  background: #0f2b28e0;
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 18px 44px -14px #010a09cc, inset 0 1px 0 #ffffff0f;
  color: #c9e6d0;
  transition: opacity 0.35s ease-out;
}
body[data-character="cute"] .bet-controls {
  max-width: none;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.92fr) minmax(0, 1.12fr);
  gap: 12px;
  align-items: stretch;
}
body[data-character="cute"] .amount-field,
body[data-character="cute"] .difficulty-field {
  position: relative;
  padding: 10px 12px 12px;
  border: 1px solid #1f4a44;
  border-radius: 12px;
  background: #0b2321;
}
body[data-character="cute"] .amount-field > label,
body[data-character="cute"] .difficulty-field legend {
  margin: 0 0 6px;
  color: #c9e6d0;
  font-size: 11px;
  font-weight: 900;
  line-height: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
/* The risk card: label row on top (an absolute legend is an ordinary box, not
   the fieldset's border legend), the segmented control fills the rest. */
body[data-character="cute"] .difficulty-field {
  display: flex;
  flex-direction: column;
  padding-top: 30px;
}
body[data-character="cute"] .difficulty-field legend {
  position: absolute;
  top: 10px;
  left: 12px;
  right: 12px;
  width: auto;
  margin: 0;
}
body[data-character="cute"] #risk-hint {
  color: #c9e6d0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.88;
}
body[data-character="cute"] .risk-options {
  flex: 1 1 auto;
  height: auto;
  min-height: 40px;
  padding: 4px;
  gap: 4px;
  border: 1px solid #1f4a44;
  border-radius: 11px;
  background: #081d1b;
}
body[data-character="cute"] .risk-options span {
  border-radius: 8px;
  color: #cfe6d3;
  font-size: 15px;
  font-weight: 800;
  transition: background 0.15s, color 0.15s;
}
body[data-character="cute"] .risk-options label:hover input:enabled:not(:checked) + span {
  background: #ffffff0d;
}
body[data-character="cute"] .risk-options input:checked + span {
  background: #4f7f4d;
  color: #fff;
  box-shadow: inset 0 1px 0 #ffffff21, 0 2px 6px #00000047;
}
body[data-character="cute"] .risk-options input:disabled + span {
  opacity: 0.5;
}
/* The amount row: − $10.00 + ½ 2× straight on the card, the amount centred
   between the steppers. */
body[data-character="cute"] .amount-input {
  --amount-gap: 8px;
  height: 40px;
  padding: 0;
  gap: var(--amount-gap);
  border: 0;
  border-radius: 0;
  background: none;
}
body[data-character="cute"] .amount-input > span,
body[data-character="cute"] .amount-input input {
  color: #f7f1dc;
  font-family: "Fredoka", sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
}
/* "$" and the digits read as one word: cancel most of the row gap between. */
body[data-character="cute"] .amount-input > span {
  margin-left: auto;
  margin-right: calc(2px - var(--amount-gap));
  padding: 0;
}
body[data-character="cute"] .amount-input input {
  flex: 0 1 auto;
  width: 5.4ch;
  min-width: 2ch;
  margin-right: auto;
  padding: 2px 0;
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
}
@supports (field-sizing: content) {
  body[data-character="cute"] .amount-input input {
    width: auto;
    field-sizing: content;
  }
}
body[data-character="cute"] .amount-input button {
  flex: none;
  width: 40px;
  height: 40px;
  border: 1px solid #2a5a52;
  border-radius: 999px;
  background: #0f302c;
  box-shadow: none;
  color: #e9f4e7;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  transition: background 0.15s, border-color 0.15s;
}
body[data-character="cute"] #temple-bet-minus,
body[data-character="cute"] #temple-bet-plus {
  font-size: 22px;
  font-weight: 600;
}
body[data-character="cute"] #half-bet,
body[data-character="cute"] #double-bet {
  width: 52px;
}
body[data-character="cute"] .amount-input button:hover:enabled {
  background: #174640;
  border-color: #3b766b;
}
body[data-character="cute"] .amount-input button:disabled {
  opacity: 0.45;
}
/* While a round plays game.js marks the amount field; dim its controls and
   keep the card. */
body[data-character="cute"] .amount-field.disabled {
  opacity: 1;
}
body[data-character="cute"] .amount-field.disabled > label,
body[data-character="cute"] .amount-field.disabled > .amount-input {
  opacity: 0.55;
}
body[data-character="cute"] .quick-bets {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}
body[data-character="cute"] .quick-bets button {
  height: 28px;
  border: 1px solid #1f4a44;
  border-radius: 8px;
  background: #0f2c29;
  color: #e3efe1;
  font-size: 13px;
  font-weight: 900;
}
body[data-character="cute"] .quick-bets button:hover:enabled:not([aria-pressed="true"]) {
  background: #16403a;
  border-color: #2f6559;
}
body[data-character="cute"] .quick-bets button[aria-pressed="true"] {
  background: #4f7f4d;
  border-color: #4f7f4d;
  color: #fff;
}
body[data-character="cute"] .quick-bets button:disabled {
  opacity: 0.4;
}
/* BET: amber, bold uppercase and letter-spaced; the short BET / BET AGAIN
   labels (data-label="bet", set by temple-bet.js) are larger than the
   in-round ones ("Pick a tooth", "Cash out $X"). */
body[data-character="cute"] #bet-button {
  height: auto;
  min-height: 60px;
  padding: 0 16px;
  gap: 8px;
  justify-content: center;
  border: 0;
  border-radius: 14px;
  background: #f0c14b linear-gradient(180deg, #ffffff30, #ffffff00 55%, #0000000d);
  box-shadow: inset 0 -3px 0 #c8912d, inset 0 1px 0 #ffe7a3, 0 10px 22px -10px #010a09b3;
  color: #1a2d10;
  font-family: "Fredoka", sans-serif;
  font-size: clamp(17px, 1.5vw, 22px);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
body[data-character="cute"] #bet-button[data-label="bet"] {
  font-size: clamp(22px, 2.2vw, 32px);
  letter-spacing: 0.07em;
}
body[data-character="cute"] #bet-button > svg,
body[data-character="cute"] #bet-button > i {
  display: none;
}
/* A long cash-out ("Cash out $29,100.00") wraps in a narrow button. */
body[data-character="cute"] #bet-button > span {
  white-space: normal;
  text-wrap: balance;
  line-height: 1.1;
}
body[data-character="cute"] #bet-button:hover:enabled {
  background-color: #f5cd63;
}
body[data-character="cute"] #bet-button.cashing {
  background-color: #add974;
  box-shadow: inset 0 -3px 0 #6c9a44, inset 0 1px 0 #d0ed9e, 0 10px 22px -10px #010a09b3;
}
body[data-character="cute"] #bet-button.cashing:hover:enabled {
  background-color: #b8e083;
}
body[data-character="cute"] #bet-button:disabled {
  background: #1b3934;
  box-shadow: inset 0 0 0 1px #2c5b52;
  color: #9dbfae;
}
body[data-character="cute"] .bet-error {
  margin: 8px 0 0;
  color: #ffc4b0;
  font-weight: 700;
}
body[data-character="cute"] .bet-panel :is(button, input):focus-visible,
body[data-character="cute"] .risk-options input:focus-visible + span {
  outline: 2px solid #9fe3c0;
  outline-offset: 2px;
}
/* Narrower cards: smaller amount-row controls so "$1000.00" still fits. */
@media (max-width: 1100px) {
  body[data-character="cute"] .amount-input {
    --amount-gap: 6px;
  }
  body[data-character="cute"] .amount-input button {
    width: 36px;
    height: 36px;
  }
  body[data-character="cute"] #half-bet,
  body[data-character="cute"] #double-bet {
    width: 44px;
  }
  body[data-character="cute"] .amount-input > span,
  body[data-character="cute"] .amount-input input {
    font-size: 21px;
  }
}
@media (max-width: 1000px) {
  body[data-character="cute"] .amount-input {
    --amount-gap: 5px;
  }
  body[data-character="cute"] .amount-input button {
    width: 34px;
    height: 34px;
  }
  body[data-character="cute"] #half-bet,
  body[data-character="cute"] #double-bet {
    width: 40px;
  }
  body[data-character="cute"] .amount-input > span,
  body[data-character="cute"] .amount-input input {
    font-size: 20px;
  }
}
/* Short screens (landscape phones, low windows): the same three cards,
   tighter, so the head keeps its room. */
@media (max-height: 650px) and (min-width: 601px) {
  body[data-character="cute"] .bet-panel {
    width: min(1120px, calc(100% - 24px));
    margin-bottom: 8px;
    padding: 8px;
    border-radius: 14px;
  }
  /* (the two cards share the sides equally, so BET stays in the middle of
     the screen) */
  body[data-character="cute"] .bet-controls {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.75fr) minmax(0, 1.15fr);
    gap: 8px;
  }
  body[data-character="cute"] .amount-field,
  body[data-character="cute"] .difficulty-field {
    padding: 7px 10px 9px;
    border-radius: 10px;
  }
  body[data-character="cute"] .amount-field > label,
  body[data-character="cute"] .difficulty-field legend {
    margin-bottom: 4px;
    font-size: 10px;
    line-height: 12px;
  }
  body[data-character="cute"] .difficulty-field {
    padding-top: 23px;
  }
  body[data-character="cute"] .difficulty-field legend {
    top: 7px;
    left: 10px;
    right: 10px;
    margin: 0;
  }
  body[data-character="cute"] #risk-hint {
    font-size: 10px;
  }
  body[data-character="cute"] .amount-input {
    --amount-gap: 5px;
    height: 32px;
  }
  body[data-character="cute"] .amount-input button {
    width: 32px;
    height: 32px;
  }
  body[data-character="cute"] #half-bet,
  body[data-character="cute"] #double-bet {
    width: 38px;
  }
  body[data-character="cute"] .amount-input > span,
  body[data-character="cute"] .amount-input input {
    font-size: 18px;
  }
  body[data-character="cute"] .quick-bets {
    margin-top: 6px;
    gap: 5px;
  }
  body[data-character="cute"] .quick-bets button {
    height: 24px;
    font-size: 11px;
  }
  body[data-character="cute"] .risk-options {
    min-height: 32px;
  }
  body[data-character="cute"] .risk-options span {
    font-size: 13px;
  }
  body[data-character="cute"] #bet-button {
    min-height: 0;
    font-size: 15px;
  }
  body[data-character="cute"] #bet-button[data-label="bet"] {
    font-size: 21px;
  }
}
/* Narrow short screens: BET's column gives up its width instead, so the
   amount's digits keep their room and BET stays in the middle. */
@media (max-height: 650px) and (min-width: 601px) and (max-width: 740px) {
  body[data-character="cute"] .bet-controls {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.5fr) minmax(0, 1.3fr);
  }
}
/* Very short screens (landscape phones, a low window or pane): the amount
   card drops its title (the amount and its chips say it; the label still
   names the field for screen readers) and every row tightens, so the panel
   takes about a quarter less of the height. */
@media (max-height: 560px) and (min-width: 601px) {
  body[data-character="cute"] .bet-panel {
    margin-bottom: 6px;
    padding: 6px;
    border-radius: 12px;
  }
  body[data-character="cute"] .bet-controls {
    gap: 6px;
  }
  body[data-character="cute"] .amount-field,
  body[data-character="cute"] .difficulty-field {
    padding: 6px 8px;
    border-radius: 9px;
  }
  body[data-character="cute"] .amount-field > label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
  body[data-character="cute"] .difficulty-field {
    padding-top: 21px;
  }
  body[data-character="cute"] .difficulty-field legend {
    top: 5px;
    left: 8px;
    right: 8px;
  }
  body[data-character="cute"] .amount-input {
    height: 30px;
  }
  body[data-character="cute"] .amount-input button {
    width: 30px;
    height: 30px;
  }
  body[data-character="cute"] #half-bet,
  body[data-character="cute"] #double-bet {
    width: 36px;
  }
  body[data-character="cute"] .quick-bets {
    margin-top: 5px;
  }
  body[data-character="cute"] .quick-bets button {
    height: 22px;
  }
  body[data-character="cute"] .risk-options {
    min-height: 28px;
    padding: 3px;
  }
}
/* Phones and narrow tall screens: the amount card and the risk card side by
   side, the quick chips below both (phones hide them: see below), then a
   full-width BET. The amount field's box steps aside (display: contents) so
   its chips can span the row; a grid pseudo-element draws the amount card
   behind its label and amount row. */
@media (max-width: 600px), (max-width: 900px) and (min-height: 651px) {
  body[data-character="cute"] .bet-panel {
    width: calc(100% - 16px);
    margin: 0 auto max(8px, env(safe-area-inset-bottom));
    padding: 8px;
    border-radius: 16px;
  }
  body[data-character="cute"] .bet-controls {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    gap: 0 8px;
  }
  body[data-character="cute"] .bet-controls::before {
    content: "";
    grid-column: 1;
    grid-row: 1 / span 2;
    border: 1px solid #1f4a44;
    border-radius: 12px;
    background: #0b2321;
  }
  body[data-character="cute"] .amount-field {
    display: contents;
  }
  body[data-character="cute"] .amount-field > label {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    padding: 9px 11px 6px;
  }
  body[data-character="cute"] .amount-input {
    grid-column: 1;
    grid-row: 2;
    height: auto;
    min-height: 36px;
    margin: 0 9px 9px;
  }
  body[data-character="cute"] .difficulty-field {
    grid-column: 2;
    grid-row: 1 / span 2;
    padding: 29px 9px 9px;
  }
  body[data-character="cute"] .difficulty-field legend {
    top: 9px;
    left: 11px;
    right: 11px;
  }
  body[data-character="cute"] .quick-bets {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 8px;
  }
  body[data-character="cute"] .quick-bets button {
    height: 32px;
  }
  body[data-character="cute"] #bet-button {
    grid-column: 1 / -1;
    grid-row: 4;
    min-height: 50px;
    height: 50px;
    margin-top: 8px;
    font-size: 17px;
  }
  body[data-character="cute"] #bet-button[data-label="bet"] {
    font-size: 22px;
  }
}
@media (max-width: 600px) {
  /* Phones: − amount + on the first line of the amount card, ½ and 2× on the
     second; the segmented risk control fills its card beside it. */
  body[data-character="cute"] .amount-input {
    --amount-gap: 4px;
    flex-wrap: wrap;
    row-gap: 6px;
  }
  body[data-character="cute"] .amount-input button {
    width: 32px;
    height: 32px;
  }
  body[data-character="cute"] #half-bet,
  body[data-character="cute"] #double-bet {
    flex: 1 1 40%;
    height: 28px;
    border-radius: 8px;
  }
  body[data-character="cute"] .amount-input > span,
  body[data-character="cute"] .amount-input input {
    font-size: 18px;
  }
  body[data-character="cute"] .amount-field > label,
  body[data-character="cute"] .difficulty-field legend {
    font-size: 10px;
    letter-spacing: 0.1em;
  }
  body[data-character="cute"] #risk-hint {
    font-size: 10px;
  }
  /* Narrow cards: each segment as wide as its label needs. */
  body[data-character="cute"] .risk-options {
    padding: 3px;
    gap: 2px;
  }
  body[data-character="cute"] .risk-options label {
    flex: 1 1 auto;
  }
  body[data-character="cute"] .risk-options span {
    padding: 0 5px;
    font-size: 12px;
  }
}
/* Phones drop the quick chips ($5 to $100): portrait ones (600 px wide or
   less) and landscape ones in the hand (touch, 500 px tall or less). −/+, ½
   and 2× still set any amount; the panel is a row shorter and the stage gets
   the room (cute-character.js measures the panel). Laptops, tablets and low
   windows without touch keep the chips, which game.js renders everywhere. */
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  body[data-character="cute"] .quick-bets {
    display: none;
  }
}
/* Landscape phones (the very short tier above, the card's title visually
   hidden): the amount card is as tall as the risk card beside it, so its
   amount row sits in the middle rather than at the top. */
@media (min-width: 601px) and (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  body[data-character="cute"] .amount-field {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* ---------- The purse: the cash-out's coins land in the wallet ---------- */
/* cute-purse.js draws the coins on this canvas over the whole layout, above
   the top bar, so they land in the pill rather than slipping under it. */
body[data-character="cute"] .cute-purse {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 6;
  pointer-events: none;
}
body[data-character="cute"] .wallet {
  position: relative;
}
body[data-character="cute"] .wallet .currency {
  display: inline-block;
}
body[data-character="cute"] .wallet strong {
  font-variant-numeric: tabular-nums;
}
/* It catches every coin: the amount ticks and the $ spins like a coin (by
   narrowing to its edge and back, never through a mirrored $). */
body[data-character="cute"] .wallet.is-catching strong {
  animation: cute-wallet-tick 150ms ease-out;
}
body[data-character="cute"] .wallet.is-catching .currency {
  animation: cute-wallet-coin 320ms ease-in-out;
}
/* The first coin lights the pill and the gain rises out of it. */
body[data-character="cute"] .wallet.is-collecting {
  animation: cute-wallet-glow 1.6s ease-out;
}
body[data-character="cute"] .wallet.is-collecting .cute-gain {
  animation: cute-gain 1.6s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
@keyframes cute-wallet-tick {
  0%, 100% { transform: none; color: inherit; }
  35% { transform: scale(1.05) translateY(1px); color: #b7780f; }
}
@keyframes cute-wallet-coin {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(0.08); color: #b7780f; }
}
@keyframes cute-wallet-glow {
  0%, 100% { box-shadow: 0 3px 0 #31794715, 0 0 0 0 #ffc94d00; }
  12% { box-shadow: 0 3px 0 #31794715, 0 0 0 5px #ffc94d8c; }
  40% { box-shadow: 0 3px 0 #31794715, 0 0 18px 4px #ffc94d59; }
}
.cute-gain,
.cute-spend {
  position: absolute;
  top: calc(100% + 4px);
  font-family: "Fredoka", sans-serif;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  pointer-events: none;
}
.cute-gain {
  right: 14px;
  font-size: 18px;
  color: #ffd95e;
  -webkit-text-stroke: 0.14em #5a3a0e;
  paint-order: stroke fill;
}
@keyframes cute-gain {
  0% { opacity: 0; transform: translateY(14px) scale(0.7); }
  15% { opacity: 1; transform: translateY(0) scale(1.08); }
  75% { opacity: 1; transform: translateY(-2px) scale(1); }
  100% { opacity: 0; transform: translateY(-10px) scale(0.95); }
}
/* A new bet pays its stake: the balance counts down and a cream "−$stake"
   tag (never red) drops out of the pill. */
.cute-spend {
  left: 14px;
  padding: 2px 9px;
  border: 1px solid #fff5d42e;
  border-radius: 999px;
  background: #0a2a24c7;
  color: #d9ead6;
  font-size: 16px;
}
body[data-character="cute"] .wallet.is-spending {
  animation: cute-wallet-dip 200ms ease-out;
}
body[data-character="cute"] .wallet.is-spending .cute-spend {
  animation: cute-spend 900ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
@keyframes cute-wallet-dip {
  0%, 100% { transform: none; }
  45% { transform: scale(0.97); }
}
@keyframes cute-spend {
  0% { opacity: 0; transform: none; }
  25% { opacity: 1; transform: translateY(6px); }
  70% { opacity: 1; transform: translateY(9px); }
  100% { opacity: 0; transform: translateY(14px); }
}
@media (max-width: 600px) {
  /* Under the pill's right end: a long stake's tag grows to the left, never
     under ☰. */
  .cute-spend {
    left: auto;
    right: 4px;
  }
  .cute-gain {
    font-size: 15px;
  }
}
/* As the last coin lands, a gold arc runs once round the pill. */
.cute-wallet-arc {
  position: absolute;
  inset: -1px;
  padding: 2px;
  border-radius: inherit;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.cute-wallet-arc::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 300%;
  aspect-ratio: 1;
  translate: -50% -50%;
  background: conic-gradient(#ffd24f00 0deg, #ffd24f 30deg, #fff3c4 45deg, #ffd24f00 70deg);
}
.cute-wallet-arc.is-running {
  animation: cute-wallet-arc 600ms linear both;
}
.cute-wallet-arc.is-running::before {
  animation: cute-wallet-arc-turn 600ms linear both;
}
@keyframes cute-wallet-arc {
  0%, 100% { opacity: 0; }
  20%, 75% { opacity: 1; }
}
@keyframes cute-wallet-arc-turn {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ---------- Plain glass on a struggling GPU ---------- */
/* cute-quality.js sets .cute-lite on the layout at its lowest steps: the
   glass behind the panel and the readout's pill stops blurring the lagoon
   under it (a backdrop blur is redrawn with every frame of the moving
   water), and a slightly darker glass keeps the text as clear. */
body[data-character="cute"] .game-layout.cute-lite .bet-panel,
body[data-character="cute"] .game-layout.cute-lite .next-multiplier,
body[data-character="cute"] .game-layout.cute-lite .cute-loading {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body[data-character="cute"] .game-layout.cute-lite .bet-panel {
  background: #0f2b28f2;
}
body[data-character="cute"] .game-layout.cute-lite .next-multiplier,
body[data-character="cute"] .game-layout.cute-lite .cute-loading {
  background: #0a2a24e6;
}
body[data-character="cute"] .game-layout.cute-lite .cute-readout[data-place="mouth"] .next-multiplier {
  background: transparent;
}