/* Grizzly (/grizzly/): the page's own sheet. It loads no other edition's
   styles (no styles.css): icy blue and white over the frozen lake at night.
   Every box of the top bar and of the bet panel is Cute Temple's, at every
   screen size (the user, 2026-10-04: the betting panel absolutely the same
   as the crocodile's): the rules that size them are copied from styles.css
   (scoped with :where(), so they keep that sheet's low specificity) and
   from cute.css (scoped to this page), in the same order and with the same
   fonts (Fredoka and Nunito Sans), and only their colours are the ice's.
   The stage (the world and the bear) is grizzly-stage.css; the ☰ menu and
   the past rounds have their own sheets, sized as Cute Temple's too. */

:root {
  color-scheme: dark;
  font-family: "Nunito Sans", sans-serif;
  font-weight: 700;
  font-synthesis: none;
  color: #e7f5ff;
  background: #0a1f4f;
  --ink: #001d4f;
  --ice: #e7faff;
  --ice-2: #b0f0fd;
  --sky: #51b5fd;
  --sky-2: #37a7fd;
  --card: #082c59;
  --card-2: #0a3569;
  --well: #03234a;
  --rim: #1f5a9e;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  overflow: hidden;
}
body {
  background: #0a1f4f;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}
button,
input {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: default;
}
button,
a,
input,
label {
  -webkit-tap-highlight-color: transparent;
}
a {
  color: inherit;
  text-decoration: none;
}
[hidden] {
  display: none !important;
}
i {
  display: inline-flex;
  font-style: normal;
}
/* game.js's line icons (painted into <i data-icon> and its buttons) */
button svg,
i svg {
  width: 21px;
  height: 21px;
  display: block;
}
:is(button, a, input):focus-visible {
  outline: 3px solid #c5f6ff;
  outline-offset: 3px;
}
.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;
}

/* ---------- The layout: the top bar, the band and the panel ---------- */
/* styles.css's grid (the bar's row, the board, the panel) and its minimum
   heights, as on Cute Temple. */
:where(body[data-character="grizzly"]) .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;
}
body[data-character="grizzly"] .game-layout {
  container-type: size;
  background: #0a1f4f;
}
/* The stage (grizzly-stage.js) covers the layout under everything;
   background.js knows it as the scenery (.jungle-background). */
body[data-character="grizzly"] .grizzly-world {
  position: absolute;
  inset: 0;
  z-index: 0;
}
/* The reactions (grizzly-fx.js): a canvas over the stage, inside its element
   so it shakes with it (the frost ferns, the spark and the flakes of a
   pick, the stars, the chips and the snow; the seated fangs' frost is the
   stage's own, on the fangs). grizzly-character.js also places it
   inline and hides it while it holds nothing; it shows with the bear. (fx's
   coins have a canvas of their own over the whole layout, above the top bar.) */
body[data-character="grizzly"] .grizzly-fx {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease-out;
}
body[data-character="grizzly"] .game-layout.is-ready .grizzly-fx {
  opacity: 1;
}
/* The board is the band's room; the readout and the fang buttons cover the
   layout above the stage (grizzly-character.js places them on the bear). */
body[data-character="grizzly"] .game-board,
body[data-character="grizzly"] .character-space {
  min-width: 0;
  min-height: 0;
}
body[data-character="grizzly"] #character-wrap {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

/* ---------- Top bar: logo, past rounds, balance, ☰ (styles.css's boxes) ---------- */
:where(body[data-character="grizzly"]) .topbar {
  padding: 14px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  z-index: 5;
}
:where(body[data-character="grizzly"]) .header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
:where(body[data-character="grizzly"]) .wallet {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 7px 8px 7px 15px;
  border: 1px solid #eef8ff;
  border-radius: 16px;
}
:where(body[data-character="grizzly"]) .wallet strong {
  font-size: 17px;
  white-space: nowrap;
  font-weight: 900;
}
:where(body[data-character="grizzly"]) .currency {
  margin-right: 3px;
}
:where(body[data-character="grizzly"]) .wallet-reset {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 9px;
}
:where(body[data-character="grizzly"]) .wallet-reset svg {
  width: 17px;
  height: 17px;
}
body[data-character="grizzly"] .topbar {
  position: relative;
}
/* The user's GRIZZLY logo (the mountain and the icy wordmark) in the box of
   Cute Temple's brand (its crocodile and CROCODILE in Fredoka): 196 x 38
   here, as the breakpoints below size that brand. */
body[data-character="grizzly"] .brand {
  flex: none;
  display: block;
  width: 196px;
  height: 38px;
}
body[data-character="grizzly"] .brand img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 2px 4px #04123a99);
}
/* The balance: a frosted ice pill, $ and the amount in navy, + in a round well. */
body[data-character="grizzly"] .wallet {
  --cap-h: 14px;
  position: relative;
  background: linear-gradient(180deg, #d6ebff, #bcdcfc);
  box-shadow: 0 0 14px #9fd7ff66, inset 0 1px 0 #ffffffb3, inset 0 -2px 0 #8fc2ef66;
  color: var(--ink);
}
body[data-character="grizzly"] .wallet strong {
  font-variant-numeric: tabular-nums;
}
body[data-character="grizzly"] .wallet .currency {
  display: inline-block;
}
body[data-character="grizzly"] .wallet-reset {
  padding: 0;
  border-radius: 50%;
  background: #a9d7fd;
  box-shadow: inset 0 1px 2px #6aa9e055;
  color: #1b6dd6;
  transition: background 0.15s, transform 0.15s;
}
body[data-character="grizzly"] .wallet-reset svg {
  stroke-width: 2.2;
}
body[data-character="grizzly"] .wallet-reset:hover:enabled {
  background: #c4e5ff;
}
body[data-character="grizzly"] .wallet-reset:disabled {
  opacity: 0.45;
}
/* Snow caps (the user's snowcap.webp) on the balance and on ☰ (and on the
   chips: grizzly-rounds.css), slightly wider than each and over its top
   edge; they take no room. */
body[data-character="grizzly"] .wallet::before,
body[data-character="grizzly"] .game-menu-button::before {
  content: "";
  position: absolute;
  left: -4%;
  right: -4%;
  bottom: calc(100% - 0.32 * var(--cap-h));
  height: var(--cap-h);
  background: url("/assets/grizzly/snowcap.webp") center bottom / 100% 100% no-repeat;
  pointer-events: none;
  filter: drop-shadow(0 1px 1px #0a2a6040);
}
/* The caps shine: now and then a soft icy glint sweeps across the snow, and
   on the first caps two tiny sparkles twinkle as it passes; nothing falls.
   It is the compositor's work alone, so the bar never repaints beside the
   live 3D (b720a49 found a glint drawn by background-position repainting it
   every frame): each cap's .cap-shine (the balance's and ☰'s in index.html,
   the chips' from grizzly-rounds.js) lies on the cap's box, cut to the snow
   by the cap's own picture as a mask that never moves, and grizzly-rounds.js
   moves its glint by transform and fades its sparkles by opacity, one short
   Web Animation at a time on each cap's own beat (CAP_GLINT, CAP_TWINKLE).
   Between passes nothing runs, so no frame restyles the bar. It shows only
   where motion is welcome, never while the bar is still (.is-still: a
   hidden tab), and only on the chips the strip shows (grizzly-rounds.css). */
body[data-character="grizzly"] .topbar .cap-shine {
  position: absolute;
  left: -4%;
  right: -4%;
  bottom: calc(100% - 0.32 * var(--cap-h));
  height: var(--cap-h);
  display: none;
  pointer-events: none;
  -webkit-mask: url("/assets/grizzly/snowcap.webp") center bottom / 100% 100% no-repeat;
  mask: url("/assets/grizzly/snowcap.webp") center bottom / 100% 100% no-repeat;
}
/* the glint: a narrow slanted band of light, white in the middle and icy
   blue at its edges, waiting off the cap's left end */
body[data-character="grizzly"] .topbar .cap-glint {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 36%;
  background: linear-gradient(105deg, #8fd8ff00 10%, #8fd8ffc2 36%, #fff 50%, #8fd8ffc2 64%, #8fd8ff00 90%);
  transform: translateX(-100%);
}
/* the sparkles: two tiny icy stars on the snow, one layer, unseen until
   they twinkle */
body[data-character="grizzly"] .topbar .cap-sparks {
  position: absolute;
  inset: 0;
  display: block;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='3.2' fill='%235cbcff' fill-opacity='.5'/%3E%3Cpath d='M5 0Q5.6 4.4 10 5Q5.6 5.6 5 10Q4.4 5.6 0 5Q4.4 4.4 5 0Z' fill='%23fff' stroke='%232f8fe0' stroke-width='.5'/%3E%3C/svg%3E") var(--spark-a, 24% 30%) / calc(0.72 * var(--cap-h)) calc(0.72 * var(--cap-h)) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='3.2' fill='%235cbcff' fill-opacity='.5'/%3E%3Cpath d='M5 0Q5.6 4.4 10 5Q5.6 5.6 5 10Q4.4 5.6 0 5Q4.4 4.4 5 0Z' fill='%23fff' stroke='%232f8fe0' stroke-width='.5'/%3E%3C/svg%3E") var(--spark-b, 71% 40%) / calc(0.54 * var(--cap-h)) calc(0.54 * var(--cap-h)) no-repeat;
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  body[data-character="grizzly"] .topbar:not(.is-still) .cap-shine {
    display: block;
  }
}
/* ---------- The readout: inside the open mouth, above his head ---------- */
/* grizzly-character.js puts it at his anchors every frame (--at), as Cute
   Temple's: in the open mouth during a round (and a cash-out's happy hold) it
   is centred in the fang-free band between the middle fangs (--mouth-band
   tall) and sized to it, with no pill; between rounds its bottom sits
   --readout-gap over the crown of his head, the multiplier sized as Cute
   Temple sizes its own (--readout-size), then the Next fang pill (Cashed out
   after a win), in Cute Temple's fonts, sizes and gaps, in ice. It never
   takes a pointer event: the fang buttons under it stay clickable. */
body[data-character="grizzly"] .grizzly-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(-200vw, 0)) translate(-50%, -100%) translateY(calc(-1 * var(--readout-gap)));
  pointer-events: none;
  z-index: 3;
  transition: opacity 0.16s ease-out;
}
body[data-character="grizzly"] .grizzly-readout[data-place="mouth"] {
  max-width: var(--mouth-width, 70%);
  transform: var(--at, translate(-200vw, 0)) translate(-50%, -50%);
}
body[data-character="grizzly"] .grizzly-readout.is-moving {
  opacity: 0;
  transition: none;
}
body[data-character="grizzly"] .grizzly-readout[data-place="none"] {
  visibility: hidden;
  opacity: 0;
}
body[data-character="grizzly"] .grizzly-readout .scoreboard {
  display: grid;
  justify-items: center;
  place-content: center;
  text-align: center;
}
body[data-character="grizzly"] #current-multiplier,
body[data-character="grizzly"] .grizzly-frozen {
  font-family: "Fredoka", sans-serif;
  font-size: var(--readout-size, 60px);
  line-height: 0.95;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: #f2fbff;
  -webkit-text-stroke: 0.09em #0b3a78;
  paint-order: stroke fill;
  text-shadow: 0 0.05em 0 #0b3a78, 0 0.12em 0.3em #020b25b3;
}
body[data-character="grizzly"] #current-multiplier > span,
body[data-character="grizzly"] .grizzly-frozen > span {
  font-size: 0.64em;
  margin-left: 2px;
}
body[data-character="grizzly"] .next-multiplier {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
  padding: 5px 13px;
  border: 1px solid #c9ecff3d;
  border-radius: 999px;
  background: #082c59c7;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #cfe7fb;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.36;
  white-space: nowrap;
}
body[data-character="grizzly"] #next-multiplier {
  display: inline-block;
  position: relative;
  color: #a3e9fd;
  font-family: "Fredoka", sans-serif;
  font-size: 19px;
  line-height: 1;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* In the open mouth: sizes follow the fang-free band, no pill (Cute
   Temple's), in ice. */
body[data-character="grizzly"] .grizzly-readout[data-place="mouth"] #current-multiplier,
body[data-character="grizzly"] .grizzly-readout[data-place="mouth"] .grizzly-frozen {
  font-size: var(--mouth-value);
  letter-spacing: -0.02em;
  -webkit-text-stroke: 0 #0b3a78;
  text-shadow: 0 0 0.24em #020b25d9, 0 0.03em 0.08em #020b25;
}
body[data-character="grizzly"] .grizzly-readout[data-place="mouth"] .next-multiplier {
  margin-top: 2px;
  padding: 0;
  border-color: transparent;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: #bfe0f7;
  font-size: var(--mouth-next);
  line-height: 1.1;
  gap: 0.45em;
  text-shadow: 0 0 0.35em #020b25;
}
body[data-character="grizzly"] .grizzly-readout[data-place="mouth"] #next-multiplier {
  font-size: 1.15em;
}
/* Landscape phones: above his head, smaller, under the top bar (as on Cute
   Temple). */
@media (orientation: landscape) and (max-height: 480px) {
  body[data-character="grizzly"] .grizzly-readout {
    --readout-gap: 6px;
  }
  body[data-character="grizzly"] .grizzly-readout:not([data-place="mouth"]) .next-multiplier {
    margin-top: 3px;
    padding: 2px 9px;
    font-size: 10px;
  }
  body[data-character="grizzly"] .grizzly-readout:not([data-place="mouth"]) #next-multiplier {
    font-size: 14px;
  }
}
/* Cold: while a round plays the number frosts over with the tension
   (data-tension on #character-wrap, 1-4), as Cute Temple's warms: ice
   white, pale frost, then a frosted inlay. A cash-out holds the inlay. */
body[data-character="grizzly"] .game-board.playing #character-wrap[data-tension="2"] #current-multiplier {
  color: #d9f4ff;
}
body[data-character="grizzly"] .game-board.playing #character-wrap[data-tension="3"] #current-multiplier {
  color: transparent;
  background: linear-gradient(180deg, #ffffff, #bfeaff 55%, #6cc2f5);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: none;
}
body[data-character="grizzly"] .game-board.playing #character-wrap[data-tension="4"] #current-multiplier,
body[data-character="grizzly"] .game-board.won #current-multiplier {
  color: transparent;
  background: linear-gradient(180deg, #ffffff 8%, #d2f3ff 45%, #8fd3fb 92%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 0.025em #1a4c9a;
  text-shadow: none;
}
body[data-character="grizzly"] .game-board.playing #character-wrap:is([data-tension="3"], [data-tension="4"]) .multiplier-readout,
body[data-character="grizzly"] .game-board.won .multiplier-readout {
  filter: drop-shadow(0 0 3px #020b25e6) drop-shadow(0 1px 2px #020b25);
}
body[data-character="grizzly"] .game-board.playing #character-wrap[data-tension="2"] #next-multiplier {
  color: #bdf1ff;
}
body[data-character="grizzly"] .game-board.playing #character-wrap[data-tension="3"] #next-multiplier {
  color: #d4f6ff;
}
body[data-character="grizzly"] .game-board.playing #character-wrap[data-tension="4"] #next-multiplier {
  color: #eafbff;
}
/* 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="grizzly"] .grizzly-readout.is-stamping #current-multiplier {
  animation: grizzly-readout-stamp var(--stamp-time, 460ms) cubic-bezier(0.2, 0.7, 0.3, 1);
}
body[data-character="grizzly"] .grizzly-readout.is-stamping #next-multiplier {
  animation: grizzly-next-in 220ms cubic-bezier(0.2, 0.8, 0.3, 1) 80ms both;
}
@keyframes grizzly-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 grizzly-next-in {
  0% { opacity: 0; transform: translateY(0.55em); }
  100% { opacity: 1; transform: none; }
}
/* Hover preview: pointing at (or focusing) a standing fang lifts the
   next-fang value and underlines it, what that fang would pay. */
body[data-character="grizzly"] .game-board.playing #next-multiplier {
  transition:
    transform 160ms cubic-bezier(0.3, 0.7, 0.4, 1.3),
    color 160ms;
}
body[data-character="grizzly"] #next-multiplier::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.12em;
  height: 1.5px;
  border-radius: 1px;
  background: #bdf1ff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease-out;
  pointer-events: none;
}
@media (hover: hover) {
  body[data-character="grizzly"] .game-board.playing:has(.tooth:enabled:not(.picked):hover) #character-wrap #next-multiplier {
    color: #ffffff;
    transform: translateY(-1px) scale(1.1);
  }
  body[data-character="grizzly"] .game-board.playing:has(.tooth:enabled:not(.picked):hover) #next-multiplier::after {
    transform: scaleX(1);
  }
}
body[data-character="grizzly"] .game-board.playing:has(.tooth:enabled:not(.picked):focus-visible) #character-wrap #next-multiplier {
  color: #ffffff;
  transform: translateY(-1px) scale(1.1);
}
body[data-character="grizzly"] .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), where the number was, which cowers,
   shrinks and pales to a dull frost (never red)... */
body[data-character="grizzly"] .grizzly-frozen {
  display: none;
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% 0;
}
body[data-character="grizzly"] .grizzly-readout.is-frozen > .scoreboard {
  visibility: hidden;
}
body[data-character="grizzly"] .grizzly-readout.is-frozen > .grizzly-frozen {
  display: block;
}
body[data-character="grizzly"] .grizzly-readout.is-dreading > .grizzly-frozen {
  animation: grizzly-readout-dread 420ms both;
}
@keyframes grizzly-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, as the jaws meet, it is squashed flat where it stood, and it is
   gone until the next bet. */
body[data-character="grizzly"] .grizzly-readout.is-crushed > .grizzly-frozen {
  animation: grizzly-readout-crush 220ms cubic-bezier(0.5, 0, 0.9, 0.4) both;
}
@keyframes grizzly-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; }
}

/* ---------- The fang buttons ---------- */
/* game.js's ten buttons, transparent, riding the fangs (grizzly-character.js
   places and sizes them: hit areas of 44 px, never past the fangs' spacing,
   taller instead). As on Cute Temple, a standing fang takes the pointer
   cursor and the fang you see is the stage's (the bear wobbles a pointed
   fang: grizzly-fx.js); a focused one shows an icy ring. */
body[data-character="grizzly"] #teeth-layer,
body[data-character="grizzly"] .tooth-row {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
body[data-character="grizzly"] .tooth {
  position: absolute;
  left: 0;
  top: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 38%;
  background: transparent;
  pointer-events: auto;
  touch-action: manipulation;
  will-change: transform;
  color: transparent;
}
body[data-character="grizzly"] .tooth:enabled {
  cursor: pointer;
}
body[data-character="grizzly"] .tooth:disabled {
  pointer-events: none;
}
body[data-character="grizzly"] .tooth-number {
  display: none;
}
body[data-character="grizzly"] .tooth:focus-visible {
  outline: 3px solid #c5f6ff;
  outline-offset: 3px;
  box-shadow: 0 0 0 7px #0a1f4fa6;
}
body[data-character="grizzly"] #teeth-layer.is-biting .tooth {
  pointer-events: none;
}

/* ---------- The bet panel: styles.css's boxes ---------- */
:where(body[data-character="grizzly"]) .bet-panel {
  padding: 19px 32px 10px;
  z-index: 7;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
}
:where(body[data-character="grizzly"]) .bet-controls {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  align-items: start;
}
:where(body[data-character="grizzly"]) .amount-field {
  min-width: 0;
}
:where(body[data-character="grizzly"]) :is(.amount-field > label, .difficulty-field legend) {
  display: block;
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: 1.2px;
  margin-bottom: 8px;
}
:where(body[data-character="grizzly"]) .amount-input {
  display: flex;
  align-items: center;
  height: 47px;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 5px;
  gap: 4px;
}
:where(body[data-character="grizzly"]) .amount-input > span {
  padding-left: 9px;
  font-size: 16px;
}
:where(body[data-character="grizzly"]) .amount-input input {
  min-width: 0;
  flex: 1;
  width: 70px;
  border: 0;
  background: none;
  outline-offset: 0;
  font-size: 17px;
  font-weight: 900;
  padding: 4px;
}
:where(body[data-character="grizzly"]) .amount-input button {
  width: 35px;
  height: 35px;
  flex: none;
  border: 0;
  border-radius: 7px;
  font-size: 15px;
}
:where(body[data-character="grizzly"]) .quick-bets {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  margin-top: 8px;
}
:where(body[data-character="grizzly"]) .quick-bets button {
  min-width: 0;
  height: 30px;
  padding: 0 3px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 900;
}
:where(body[data-character="grizzly"]) .difficulty-field {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
:where(body[data-character="grizzly"]) .difficulty-field legend {
  width: 100%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
:where(body[data-character="grizzly"]) .difficulty-field legend > span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
}
:where(body[data-character="grizzly"]) .risk-options {
  display: flex;
  height: 47px;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 4px;
  gap: 3px;
}
:where(body[data-character="grizzly"]) .risk-options label {
  position: relative;
  flex: 1;
  display: flex;
  min-width: 0;
  cursor: pointer;
}
:where(body[data-character="grizzly"]) .risk-options input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
:where(body[data-character="grizzly"]) .risk-options span {
  display: grid;
  place-items: center;
  width: 100%;
  font-size: 13px;
  font-weight: 900;
  border-radius: 8px;
  transition: background 0.15s;
}
:where(body[data-character="grizzly"]) .risk-options input:disabled + span {
  opacity: 0.58;
  cursor: default;
}
:where(body[data-character="grizzly"]) .primary-button {
  border: 2px solid transparent;
  border-bottom-width: 5px;
  border-radius: 14px;
  height: 57px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 1000;
  white-space: nowrap;
  transition:
    background 0.15s,
    transform 0.15s;
  align-self: center;
  padding: 0 17px;
}
:where(body[data-character="grizzly"]) .primary-button svg {
  width: 19px;
  height: 19px;
}
:where(body[data-character="grizzly"]) .primary-button:hover:enabled {
  transform: translateY(-1px);
}
:where(body[data-character="grizzly"]) .primary-button:active:enabled {
  transform: translateY(2px);
}
:where(body[data-character="grizzly"]) .bet-error {
  text-align: center;
  font-size: 12px;
  margin: 10px 0 0;
}
:where(body[data-character="grizzly"]) #bet-button {
  width: 100%;
  height: auto;
  align-self: stretch;
  margin-top: 0;
}
/* styles.css's sizes by screen (the bar's; the panel's are all cute.css's
   below, which win over these) */
@media (min-width: 1500px) {
  :where(body[data-character="grizzly"]) .topbar {
    padding-inline: 44px;
  }
}
@media (max-width: 900px) {
  :where(body[data-character="grizzly"]) .topbar {
    padding-inline: 20px;
  }
  :where(body[data-character="grizzly"]) .header-actions {
    gap: 6px;
  }
}
@media (max-width: 600px) {
  :where(body[data-character="grizzly"]) .game-layout {
    min-height: 560px;
    grid-template-rows: 64px minmax(0, 1fr) auto;
  }
  :where(body[data-character="grizzly"]) .topbar {
    padding: 10px 13px;
    gap: 8px;
  }
  :where(body[data-character="grizzly"]) .header-actions {
    gap: 5px;
  }
  :where(body[data-character="grizzly"]) .wallet {
    gap: 5px;
    padding: 5px 5px 5px 9px;
    border-radius: 12px;
  }
  :where(body[data-character="grizzly"]) .wallet strong {
    font-size: 13px;
  }
  :where(body[data-character="grizzly"]) .wallet-reset {
    width: 26px;
    height: 28px;
  }
}
@media (max-height: 650px) and (min-width: 601px) {
  :where(body[data-character="grizzly"]) .game-layout {
    min-height: 350px;
    grid-template-rows: 52px minmax(0, 1fr) auto;
  }
  :where(body[data-character="grizzly"]) .topbar {
    padding: 5px 20px;
  }
  :where(body[data-character="grizzly"]) .wallet {
    padding-block: 3px;
  }
}
@media (max-width: 360px) {
  :where(body[data-character="grizzly"]) .topbar {
    gap: 6px;
  }
}
/* the logo's box: Cute Temple's brand at styles.css's font sizes (28 px; 25
   up to 900 px wide; 22 on short screens; 20 on phones) */
@media (max-width: 900px) {
  body[data-character="grizzly"] .brand {
    width: 179.91px;
  }
}
@media (max-width: 600px) {
  body[data-character="grizzly"] .brand {
    width: 137.78px;
    height: 30px;
  }
}
@media (max-height: 650px) and (min-width: 601px) {
  body[data-character="grizzly"] .brand {
    width: 163.8px;
    height: 30px;
  }
}

/* (cute.css: the brand keeps its size on phones down to 340 px, then a
   smaller wordmark; its box is the logo's here) */
@media (max-width: 360px) {
  body[data-character="grizzly"] .brand {
    width: 137.78px;
    height: 30px;
  }
}
@media (max-width: 339px) {
  body[data-character="grizzly"] .brand {
    width: 127.06px;
  }
}
@media (max-width: 329px) {
  body[data-character="grizzly"] .brand {
    width: 116.33px;
  }
}

/* ---------- The bet panel: cute.css's panel, in ice ---------- */
/* temple-bet.js adds .is-tapped on each press (and to a newly chosen risk):
   every press squashes; BET presses deeper and a frost sweep crosses it;
   while it waits for a bet, a soft sheen passes over it every few seconds. */
body[data-character="grizzly"] :is(.bet-panel, .topbar) button.is-tapped,
body[data-character="grizzly"] .risk-options span.is-tapped {
  animation: temple-tap 320ms cubic-bezier(0.3, 0.7, 0.4, 1);
}
body[data-character="grizzly"] #bet-button.is-tapped {
  animation: temple-tap-deep 420ms cubic-bezier(0.3, 0.7, 0.4, 1);
}
body[data-character="grizzly"] #bet-button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
body[data-character="grizzly"] #bet-button::before,
body[data-character="grizzly"] #bet-button::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, #fff0 30%, #ffffff9e 47%, #fff0 64%);
  transform: translateX(-110%);
  pointer-events: none;
}
body[data-character="grizzly"] #bet-button.is-tapped::after {
  animation: temple-sweep 420ms ease-out;
}
body[data-character="grizzly"] #bet-button[data-label="bet"]:enabled::before {
  opacity: 0.55;
  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%); }
}
/* While the bear's world loads the panel waits dimmed, as Cute Temple's does
   while its world loads (it never waits here: the stand-in shows first). */
body[data-character="grizzly"] .bet-panel {
  position: relative;
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto 16px;
  padding: 12px;
  border: 1px solid #2e6fb8;
  border-radius: 18px;
  /* (no backdrop blur: over the live lake it would blur again every frame;
     the glass is nearly opaque anyway) */
  background: linear-gradient(180deg, #11498af2, #0c3b75f7);
  box-shadow: 0 18px 44px -14px #020b25cc, inset 0 1px 0 #8fd0ff40;
  color: var(--ice);
}
body[data-character="grizzly"] .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="grizzly"] .amount-field,
body[data-character="grizzly"] .difficulty-field {
  position: relative;
  padding: 10px 12px 12px;
  border: 1px solid #0d3a72;
  border-radius: 12px;
  background: var(--card);
  box-shadow: inset 0 1px 0 #ffffff0d;
}
body[data-character="grizzly"] .amount-field > label,
body[data-character="grizzly"] .difficulty-field legend {
  margin: 0 0 6px;
  color: var(--ice);
  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="grizzly"] .difficulty-field {
  display: flex;
  flex-direction: column;
  padding-top: 30px;
  background: var(--card-2);
}
body[data-character="grizzly"] .difficulty-field legend {
  position: absolute;
  top: 10px;
  left: 12px;
  right: 12px;
  width: auto;
  margin: 0;
}
body[data-character="grizzly"] #risk-hint {
  color: #edf9fe;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.88;
}
body[data-character="grizzly"] .risk-options {
  flex: 1 1 auto;
  height: auto;
  min-height: 40px;
  padding: 4px;
  gap: 4px;
  border: 1px solid #0b3366;
  border-radius: 11px;
  background: var(--well);
}
body[data-character="grizzly"] .risk-options span {
  border-radius: 8px;
  color: #eef8ff;
  font-size: 15px;
  font-weight: 800;
  transition: background 0.15s, color 0.15s;
}
body[data-character="grizzly"] .risk-options label:hover input:enabled:not(:checked) + span {
  background: #ffffff0f;
}
body[data-character="grizzly"] .risk-options input:checked + span {
  background: linear-gradient(180deg, var(--sky), var(--sky-2));
  color: #fff;
  box-shadow: inset 0 1px 0 #ffffff47, 0 2px 6px #02183f80;
}
body[data-character="grizzly"] .risk-options input:disabled + span {
  opacity: 0.5;
}
/* The amount row: − $10.00 + ½ 2x straight on the card, the amount centred
   between the steppers. */
body[data-character="grizzly"] .amount-input {
  --amount-gap: 8px;
  height: 40px;
  padding: 0;
  gap: var(--amount-gap);
  border: 0;
  border-radius: 0;
  background: none;
}
body[data-character="grizzly"] .amount-input > span,
body[data-character="grizzly"] .amount-input input {
  color: #fdfdfe;
  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="grizzly"] .amount-input > span {
  margin-left: auto;
  margin-right: calc(2px - var(--amount-gap));
  padding: 0;
}
body[data-character="grizzly"] .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="grizzly"] .amount-input input {
    width: auto;
    field-sizing: content;
  }
}
body[data-character="grizzly"] .amount-input button {
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--rim);
  border-radius: 999px;
  background: #062a58;
  box-shadow: none;
  color: #def3ff;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  transition: background 0.15s, border-color 0.15s;
}
body[data-character="grizzly"] #temple-bet-minus,
body[data-character="grizzly"] #temple-bet-plus {
  font-size: 22px;
  font-weight: 600;
}
body[data-character="grizzly"] #half-bet,
body[data-character="grizzly"] #double-bet {
  width: 52px;
}
body[data-character="grizzly"] .amount-input button:hover:enabled {
  background: #0a376f;
  border-color: #4b93e0;
}
body[data-character="grizzly"] .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="grizzly"] .amount-field.disabled {
  opacity: 1;
}
body[data-character="grizzly"] .amount-field.disabled > label,
body[data-character="grizzly"] .amount-field.disabled > .amount-input {
  opacity: 0.55;
}
body[data-character="grizzly"] .quick-bets {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}
body[data-character="grizzly"] .quick-bets button {
  height: 28px;
  border: 1px solid var(--rim);
  border-radius: 8px;
  background: #052a56;
  color: #eaf7ff;
  font-size: 13px;
  font-weight: 900;
}
body[data-character="grizzly"] .quick-bets button:hover:enabled:not([aria-pressed="true"]) {
  background: #0a376f;
  border-color: #4b93e0;
}
body[data-character="grizzly"] .quick-bets button[aria-pressed="true"] {
  border-color: #6cc2ff;
  background: linear-gradient(180deg, var(--sky), var(--sky-2));
  color: #fff;
}
body[data-character="grizzly"] .quick-bets button:disabled {
  opacity: 0.4;
}
/* BET: the big ice button, 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 fang", "Cash out $X"). */
body[data-character="grizzly"] #bet-button {
  height: auto;
  min-height: 60px;
  padding: 0 16px;
  gap: 8px;
  justify-content: center;
  border: 0;
  border-radius: 14px;
  background:
    radial-gradient(120% 90% at 18% 12%, #ffffff40, #fff0 60%),
    linear-gradient(180deg, #8fd9fd 0%, #62c2fd 48%, #55b9fc 100%);
  box-shadow: inset 0 -3px 0 #2f86d6, inset 0 1px 0 #ffffffb3, 0 10px 22px -10px #020b25b3;
  color: var(--ink);
  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="grizzly"] #bet-button[data-label="bet"] {
  font-size: clamp(22px, 2.2vw, 32px);
  letter-spacing: 0.07em;
}
body[data-character="grizzly"] #bet-button > svg,
body[data-character="grizzly"] #bet-button > i {
  display: none;
}
/* A long cash-out ("Cash out $29,100.00") wraps in a narrow button. */
body[data-character="grizzly"] #bet-button > span {
  white-space: normal;
  text-wrap: balance;
  line-height: 1.1;
}
body[data-character="grizzly"] #bet-button:hover:enabled {
  filter: brightness(1.06);
}
body[data-character="grizzly"] #bet-button.cashing {
  background:
    radial-gradient(120% 90% at 18% 12%, #ffffff45, #fff0 60%),
    linear-gradient(180deg, #8ff5d6 0%, #5fe0bd 48%, #4fd2b0 100%);
  box-shadow: inset 0 -3px 0 #23a184, inset 0 1px 0 #ffffffb3, 0 10px 22px -10px #020b25b3;
  color: #00382c;
}
body[data-character="grizzly"] #bet-button:disabled {
  background: linear-gradient(180deg, #5c86b3, #4a76a6);
  box-shadow: inset 0 0 0 1px #6f9fca;
  color: #183a66;
}
body[data-character="grizzly"] .bet-error {
  margin: 8px 0 0;
  color: #ffc2cc;
  font-weight: 700;
}
body[data-character="grizzly"] .bet-panel :is(button, input):focus-visible,
body[data-character="grizzly"] .risk-options input:focus-visible + span {
  outline: 2px solid #c5f6ff;
  outline-offset: 2px;
}
/* Narrower cards: smaller amount-row controls so "$1000.00" still fits. */
@media (max-width: 1100px) {
  body[data-character="grizzly"] .amount-input {
    --amount-gap: 6px;
  }
  body[data-character="grizzly"] .amount-input button {
    width: 36px;
    height: 36px;
  }
  body[data-character="grizzly"] #half-bet,
  body[data-character="grizzly"] #double-bet {
    width: 44px;
  }
  body[data-character="grizzly"] .amount-input > span,
  body[data-character="grizzly"] .amount-input input {
    font-size: 21px;
  }
}
@media (max-width: 1000px) {
  body[data-character="grizzly"] .amount-input {
    --amount-gap: 5px;
  }
  body[data-character="grizzly"] .amount-input button {
    width: 34px;
    height: 34px;
  }
  body[data-character="grizzly"] #half-bet,
  body[data-character="grizzly"] #double-bet {
    width: 40px;
  }
  body[data-character="grizzly"] .amount-input > span,
  body[data-character="grizzly"] .amount-input input {
    font-size: 20px;
  }
}
/* Short screens (landscape phones, low windows): the same three cards,
   tighter, so the bear keeps his room. */
@media (max-height: 650px) and (min-width: 601px) {
  body[data-character="grizzly"] .bet-panel {
    width: min(1120px, calc(100% - 24px));
    margin-bottom: 8px;
    padding: 8px;
    border-radius: 14px;
  }
  body[data-character="grizzly"] .bet-controls {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.75fr) minmax(0, 1.15fr);
    gap: 8px;
  }
  body[data-character="grizzly"] .amount-field,
  body[data-character="grizzly"] .difficulty-field {
    padding: 7px 10px 9px;
    border-radius: 10px;
  }
  body[data-character="grizzly"] .amount-field > label,
  body[data-character="grizzly"] .difficulty-field legend {
    margin-bottom: 4px;
    font-size: 10px;
    line-height: 12px;
  }
  body[data-character="grizzly"] .difficulty-field {
    padding-top: 23px;
  }
  body[data-character="grizzly"] .difficulty-field legend {
    top: 7px;
    left: 10px;
    right: 10px;
    margin: 0;
  }
  body[data-character="grizzly"] #risk-hint {
    font-size: 10px;
  }
  body[data-character="grizzly"] .amount-input {
    --amount-gap: 5px;
    height: 32px;
  }
  body[data-character="grizzly"] .amount-input button {
    width: 32px;
    height: 32px;
  }
  body[data-character="grizzly"] #half-bet,
  body[data-character="grizzly"] #double-bet {
    width: 38px;
  }
  body[data-character="grizzly"] .amount-input > span,
  body[data-character="grizzly"] .amount-input input {
    font-size: 18px;
  }
  body[data-character="grizzly"] .quick-bets {
    margin-top: 6px;
    gap: 5px;
  }
  body[data-character="grizzly"] .quick-bets button {
    height: 24px;
    font-size: 11px;
  }
  body[data-character="grizzly"] .risk-options {
    min-height: 32px;
  }
  body[data-character="grizzly"] .risk-options span {
    font-size: 13px;
  }
  body[data-character="grizzly"] #bet-button {
    min-height: 0;
    font-size: 15px;
  }
  body[data-character="grizzly"] #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="grizzly"] .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. */
@media (max-height: 560px) and (min-width: 601px) {
  body[data-character="grizzly"] .bet-panel {
    margin-bottom: 6px;
    padding: 6px;
    border-radius: 12px;
  }
  body[data-character="grizzly"] .bet-controls {
    gap: 6px;
  }
  body[data-character="grizzly"] .amount-field,
  body[data-character="grizzly"] .difficulty-field {
    padding: 6px 8px;
    border-radius: 9px;
  }
  body[data-character="grizzly"] .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="grizzly"] .difficulty-field {
    padding-top: 21px;
  }
  body[data-character="grizzly"] .difficulty-field legend {
    top: 5px;
    left: 8px;
    right: 8px;
  }
  body[data-character="grizzly"] .amount-input {
    height: 30px;
  }
  body[data-character="grizzly"] .amount-input button {
    width: 30px;
    height: 30px;
  }
  body[data-character="grizzly"] #half-bet,
  body[data-character="grizzly"] #double-bet {
    width: 36px;
  }
  body[data-character="grizzly"] .quick-bets {
    margin-top: 5px;
  }
  body[data-character="grizzly"] .quick-bets button {
    height: 22px;
  }
  body[data-character="grizzly"] .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="grizzly"] .bet-panel {
    width: calc(100% - 16px);
    margin: 0 auto max(8px, env(safe-area-inset-bottom));
    padding: 8px;
    border-radius: 16px;
  }
  body[data-character="grizzly"] .bet-controls {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    gap: 0 8px;
  }
  body[data-character="grizzly"] .bet-controls::before {
    content: "";
    grid-column: 1;
    grid-row: 1 / span 2;
    border: 1px solid #0d3a72;
    border-radius: 12px;
    background: var(--card);
  }
  body[data-character="grizzly"] .amount-field {
    display: contents;
  }
  body[data-character="grizzly"] .amount-field > label {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    padding: 9px 11px 6px;
  }
  body[data-character="grizzly"] .amount-input {
    grid-column: 1;
    grid-row: 2;
    height: auto;
    min-height: 36px;
    margin: 0 9px 9px;
  }
  body[data-character="grizzly"] .difficulty-field {
    grid-column: 2;
    grid-row: 1 / span 2;
    padding: 29px 9px 9px;
  }
  body[data-character="grizzly"] .difficulty-field legend {
    top: 9px;
    left: 11px;
    right: 11px;
  }
  body[data-character="grizzly"] .quick-bets {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 8px;
  }
  body[data-character="grizzly"] .quick-bets button {
    height: 32px;
  }
  body[data-character="grizzly"] #bet-button {
    grid-column: 1 / -1;
    grid-row: 4;
    min-height: 50px;
    height: 50px;
    margin-top: 8px;
    font-size: 17px;
  }
  body[data-character="grizzly"] #bet-button[data-label="bet"] {
    font-size: 22px;
  }
}
@media (max-width: 600px) {
  /* Phones: − amount + on the first line of the amount card, ½ and 2x on the
     second; the segmented risk control fills its card beside it. */
  body[data-character="grizzly"] .amount-input {
    --amount-gap: 4px;
    flex-wrap: wrap;
    row-gap: 6px;
  }
  body[data-character="grizzly"] .amount-input button {
    width: 32px;
    height: 32px;
  }
  body[data-character="grizzly"] #half-bet,
  body[data-character="grizzly"] #double-bet {
    flex: 1 1 40%;
    height: 28px;
    border-radius: 8px;
  }
  body[data-character="grizzly"] .amount-input > span,
  body[data-character="grizzly"] .amount-input input {
    font-size: 18px;
  }
  body[data-character="grizzly"] .amount-field > label,
  body[data-character="grizzly"] .difficulty-field legend {
    font-size: 10px;
    letter-spacing: 0.1em;
  }
  body[data-character="grizzly"] #risk-hint {
    font-size: 10px;
  }
  /* Narrow cards: each segment as wide as its label needs. */
  body[data-character="grizzly"] .risk-options {
    padding: 3px;
    gap: 2px;
  }
  body[data-character="grizzly"] .risk-options label {
    flex: 1 1 auto;
  }
  body[data-character="grizzly"] .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 2x still set any amount, and the bear gets the room. */
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  body[data-character="grizzly"] .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="grizzly"] .amount-field {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* ---------- The dialogs (game.js: How to play, Fair play, Reset) ---------- */
body[data-character="grizzly"] dialog {
  width: min(490px, calc(100% - 32px));
  padding: 24px;
  border: 1px solid #3f7cc6;
  border-radius: 24px;
  background: linear-gradient(180deg, #123f7c, #0b2d5e);
  box-shadow: 0 25px 100px #01081acc, inset 0 1px 0 #8fd0ff33;
  color: var(--ice);
}
body[data-character="grizzly"] dialog::backdrop {
  background: #04123acc;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
body[data-character="grizzly"] .dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #9fd7ff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
}
body[data-character="grizzly"] .icon-button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #2e6fb8;
  border-radius: 12px;
  background: #0a3266;
  color: var(--ice);
  font-size: 20px;
}
body[data-character="grizzly"] dialog h2 {
  margin: 18px 0 10px;
  font-family: "Fredoka", sans-serif;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
}
body[data-character="grizzly"] dialog p,
body[data-character="grizzly"] dialog li {
  font-size: 15px;
  line-height: 1.6;
  color: #cfe7fb;
}
body[data-character="grizzly"] dialog ol {
  padding-left: 22px;
}
body[data-character="grizzly"] dialog li {
  margin-bottom: 10px;
}
body[data-character="grizzly"] dialog strong {
  color: #fff;
  font-weight: 800;
}
body[data-character="grizzly"] dialog summary {
  cursor: pointer;
  color: #9fd7ff;
}
body[data-character="grizzly"] .dialog-stats {
  display: flex;
  justify-content: space-around;
  padding: 14px;
  border-radius: 14px;
  background: #062a58;
  color: #9fd7ff;
  font-size: 12px;
  text-align: center;
}
body[data-character="grizzly"] .dialog-stats strong {
  display: block;
  font-size: 24px;
  color: #fff;
}
body[data-character="grizzly"] .math-detail {
  font-size: 13px !important;
}
body[data-character="grizzly"] dialog .primary-button {
  width: 100%;
  height: 52px;
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 2px solid #b9e8ff;
  border-radius: 16px;
  background: linear-gradient(180deg, #8fd9fd, #55b9fc);
  color: var(--ink);
  font-size: 18px;
  font-weight: 900;
}
body[data-character="grizzly"] dialog .primary-button svg {
  width: 20px;
  height: 20px;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  body[data-character="grizzly"] *,
  body[data-character="grizzly"] *::before,
  body[data-character="grizzly"] *::after {
    animation: none !important;
    transition: none !important;
  }
}