html, body {
  height: 100%;
}

/* Form controls don't inherit the body's font-family by default in any
   browser (they use the platform's own UI font unless told otherwise) --
   without this, every button and input on the page silently falls back
   to Arial/system UI instead of Londrina Solid. */
button, input {
  font-family: inherit;
}

body {
  font-family: "Londrina Solid", system-ui, sans-serif;
  margin: 0;
  color: #f1eade;
  /* Fills the space around #app-frame's fixed-ratio box (visible as side
     bars on any viewport wider than the frame itself, e.g. embedded in a
     bigger iframe on the site) -- was a flat near-black before, which
     read as a rendering glitch rather than a deliberate backdrop when
     the frame didn't fill the whole viewport. The image's own heavy blur
     is intentional (site/PAM session confirmed, 2026-09-15): it keeps
     the sharp foreground card the obvious focal point instead of
     competing with it. background-size: cover, not a fixed size --
     this backdrop has no fixed aspect ratio of its own, it's just
     however much space happens to be left over on a given screen.
     #0d0a06 stays as the fallback color for the instant before the
     image loads. */
  background: #0d0a06 url("images/body-bg.jpg") center / cover no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* Our audience overwhelmingly plays on a phone, so on an actual phone
   (viewport <= 480px) the frame fills the real screen edge-to-edge --
   whatever the device's own aspect ratio is, since that's what a player
   is actually holding. The 9:16 (16:9 portrait) shape only matters as a
   fixed preview frame on desktop, where there's no real device shape to
   match against; see the media query below. */
#app-frame {
  position: relative;
  width: 100%;
  max-width: 420px;
  min-height: 100vh;
  box-sizing: border-box;
  padding: calc(0.7rem + 10px) 1rem 0.7rem;
  background: url("images/bg.webp") center / cover no-repeat;
  display: flex;
  flex-direction: column;
  /* #confetti-layer intentionally extends past #card-wrapper's edges
     (confetti bursting around the card, not clipped to it) -- without
     this, that negative inset made the page itself scroll horizontally,
     since nothing else constrained it. Confetti still renders past the
     card, just clipped at the app frame's own edge instead of the whole
     page's. */
  overflow-x: hidden;
}

@media (min-width: 481px) {
  #app-frame {
    min-height: 0;
    aspect-ratio: 9 / 16;
    border-radius: 32px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    overflow-y: auto;
  }
}

/* Card size scales with the height the frame really has, so the card +
   action panel (+ the "Rodadas Grátis" banner while a grant is active,
   toggled as .has-grant by app.js) fit without scrolling. Without this a
   phone shorter than the ~750px the layout assumes (e.g. the site's
   full-screen iframe, ~650-720px) cuts off the buttons, and the banner's
   ~41px broke even the 9:16 desktop frame by a few px (measured 2026-09-20).
   --frame-avail: the height the frame really has. On desktop the frame
   is a fixed 9:16 box (747px at its 420px max width), so never more than
   that even on a taller viewport; on a phone (<481px) it's the whole
   viewport. --frame-other: everything in the frame except the card (frame
   padding, card margin, action panel, plus the banner when a grant is
   active), which doesn't change as the card shrinks. Measured with the
   frame's own 9:16 box removed: 241px without a grant, 258px with one;
   +8px of slack each, room for a one-line status/error message in the
   panel. The card is 2:3, so its width is (available height - other) *
   2/3, clamped between a still-playable floor and its normal 310px max
   (which any frame of 747px or more -- the desktop one -- gets, so
   nothing changes there). */
#app-frame {
  --frame-avail: 100vh;
  --frame-other: 249px;
  --card-w: clamp(180px, calc((var(--frame-avail) - var(--frame-other)) * 2 / 3), 310px);
}

#app-frame.has-grant {
  --frame-other: 266px;
}

@supports (height: 100dvh) {
  #app-frame {
    --frame-avail: 100dvh;
  }
}

@media (min-width: 481px) {
  #app-frame {
    --frame-avail: min(100vh, 747px);
    max-height: 100vh;
  }

  @supports (height: 100dvh) {
    #app-frame {
      --frame-avail: min(100dvh, 747px);
      max-height: 100dvh;
    }
  }
}

header {
  margin-bottom: 0.25rem;
}

main {
  display: flex;
  flex-direction: column;
  flex: 1;
  /* Centers the card+action-section group vertically instead of pinning
     the card to the top and the action section to the very bottom (the
     old #action-section auto-top-margin trick) -- that left a large dead
     gap in the middle on tall/narrow phones, since the card's fixed 2:3
     aspect ratio caps its height well below 100vh on those screens. */
  justify-content: center;
}

.player-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

#identity-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

#balance {
  text-align: left;
  font-size: 1.1rem;
  font-weight: bold;
  color: #e8b84b;
}

#action-section #balance {
  color: #4a1826;
}

/* Full-width strip across the top of the frame while a free-round grant is
   active (was a small centered pill). The negative margins cancel
   #app-frame's own padding (top: calc(0.7rem + 10px), sides: 1rem) so the
   strip runs flush to the frame's top and both side edges -- on desktop
   the frame's rounded corners + overflow clip it to the frame's shape. */
.grant-banner {
  margin: calc(-1 * (0.7rem + 10px)) -1rem 0;
  height: 2.4rem;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  background: #365c2a;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  font-size: 0.9rem;
  text-align: center;
}

.grant-banner.hidden {
  display: none;
}

/* Diagonal highlight sweeping top-left to bottom-right across the strip,
   same 3.2s rhythm as the card/button shine but on its own diagonal. The
   gradient is 3x the strip in both axes; sliding its background-position
   from 100% to 0% drags the band from the top-left to the bottom-right. */
.grant-banner {
  position: relative;
  overflow: hidden;
}

.grant-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, transparent 42%, rgba(255, 255, 255, 0.4) 50%, transparent 58%) 100% 100% / 300% 300% no-repeat;
  animation: grant-shine-sweep 3.2s ease-in-out infinite;
}

@keyframes grant-shine-sweep {
  0% {
    background-position: 100% 100%;
  }
  35%,
  100% {
    background-position: 0% 0%;
  }
}

.tier-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
}

#action-section {
  background: #abc265;
  /* Same width/centering as #card-area (not edge-to-edge anymore). Sits
     right below #card-wrapper now -- main's justify-content:center (see
     above) centers the two as one group, rather than this being pushed
     all the way to the bottom on its own. The fixed 10px bottom margin
     keeps it from ever touching the very bottom edge, so the background
     art shows through underneath it. */
  width: 100%;
  /* 262px floor: below that the tier stepper + 3 round buttons stop fitting
     on one row -- the card can get narrower than the panel, but the
     controls never get squeezed. */
  max-width: max(var(--card-w), 262px);
  box-sizing: border-box;
  margin: 0 auto 10px;
  border: 3px solid #4a1826;
  border-radius: 14px;
  padding: 0.45rem 1rem calc(0.35rem - 5px);
  color: #3a3018;
}

#action-section #status {
  color: #3a3018;
}

#tier-selector {
  margin-bottom: 0.3rem;
}

.tier-stepper .value {
  min-width: 6rem;
  text-align: center;
  font-size: 1.3rem;
  font-weight: bold;
  color: #e8b84b;
}

#action-section .tier-stepper .value {
  color: #4a1826;
}

.tier-stepper button {
  /* >=44px on either axis -- the commonly recommended minimum touch
     target size (Apple HIG/Material) -- 2.4rem measured at ~38px, too
     tight on a real phone. */
  width: 2.75rem;
  height: 2.75rem;
  border: 2px solid #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
  background: #5a9c3f;
  color: white;
  border-radius: 50%;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.tier-stepper button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Sizing/position lives on the wrapper, not #card-area itself, because
   #card-area needs overflow:hidden to clip the canvas/prize-layer to its
   rounded corners -- and overflow:hidden on an element also clips that
   same element's own box-shadow, which would silently hide the win-glow
   effect below if it were applied directly to #card-area. */
#card-wrapper {
  position: relative;
  width: 100%;
  max-width: var(--card-w);
  /* Matches the cover artwork's own aspect ratio (1024x1536 = 2:3)
     exactly, so it fills the card edge-to-edge with no letterbox strip
     showing the fallback background color on the sides. */
  aspect-ratio: 2 / 3;
  margin: 0 auto 0.9rem;
  border-radius: 10px;
}

#card-area {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: #222;
  /* Above #confetti-layer on purpose -- confetti starts dead-center,
     hidden behind the (opaque) card, and only becomes visible once it
     drifts past the card's own edges. */
  z-index: 2;
}

#prize-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-size: 2rem;
  font-weight: bold;
  background: linear-gradient(160deg, #6b8f4e, #3a5a30);
}

#prize-illustration {
  width: 62%;
  max-width: 170px;
}

#prize-illustration img {
  display: block;
  width: 100%;
  height: auto;
}

#prize-illustration img {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

#scratch-canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
}

/* A diagonal highlight band that periodically sweeps across the cover
   art while the card is waiting to be scratched -- pure attention-drawing
   decoration, toggled off (via .hidden) the moment the reveal animation
   actually starts stripping the cover, in app.js. */
#scratch-shine {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}

#scratch-shine.hidden {
  display: none;
}

#scratch-shine::before {
  content: "";
  position: absolute;
  top: -20%;
  left: -60%;
  width: 12%;
  height: 140%;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
  transform: skewX(-20deg);
  animation: shine-sweep 3.2s ease-in-out infinite;
}

@keyframes shine-sweep {
  0% {
    left: -60%;
  }
  35% {
    left: 130%;
  }
  100% {
    left: 130%;
  }
}

/* Same idle attention-drawing treatment (gentle pulse + shine sweep) on
   the card and the play button, both toggled by the .idle-attention
   class in app.js at the same moments #scratch-shine shows/hides. */
@keyframes idle-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.03);
  }
}

#card-area.idle-attention,
#btn-play.idle-attention {
  animation: idle-pulse 2.4s ease-in-out infinite;
}

#btn-play {
  position: relative;
  overflow: hidden;
}

#btn-play.idle-attention::before {
  content: "";
  position: absolute;
  top: -60%;
  left: -60%;
  width: 12%;
  height: 220%;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.6) 50%, transparent 100%);
  transform: skewX(-20deg);
  animation: shine-sweep 3.2s ease-in-out infinite;
  pointer-events: none;
}

/* Explicit press feedback (not just :active, which only covers however
   long the pointer stays down -- often too brief on a fast tap to read
   as anything). Toggled by app.js on click and cleared on animationend,
   so it always plays out fully. Placed after .idle-attention in the
   stylesheet so it wins the very first click, when both classes can be
   present for a moment. */
@keyframes btn-press {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(0.86);
  }
  100% {
    transform: scale(1);
  }
}

#btn-play.pressed,
.tier-stepper button.pressed {
  animation: btn-press 0.25s ease-out;
}

/* Win celebration, triggered in app.js right after the reveal animation
   finishes (only when the round actually won something). Phases, timed
   against the total 0.5s duration below:
     0%  - 10% (0.05s) quick press down, glow flashes in immediately
     10% - 70% (0.3s)  shakes side to side while held pressed, glow fading out
     70% - 100% (0.15s) settles back to rest, silent
   The glow pays off at the press itself, not the release. */
@keyframes card-win-press {
  0% {
    transform: scale(1) translateX(0);
    box-shadow: 0 0 0 rgba(255, 213, 79, 0);
  }
  10% {
    transform: scale(0.95) translateX(0);
    box-shadow: 0 0 26px 8px rgba(255, 213, 79, 0.85);
  }
  25% {
    transform: scale(0.95) translateX(-6px);
    box-shadow: 0 0 12px 4px rgba(255, 213, 79, 0.4);
  }
  40% {
    transform: scale(0.95) translateX(6px);
  }
  55% {
    transform: scale(0.95) translateX(-4px);
    box-shadow: 0 0 0 rgba(255, 213, 79, 0);
  }
  70% {
    transform: scale(0.95) translateX(4px);
  }
  100% {
    transform: scale(1) translateX(0);
    box-shadow: 0 0 0 rgba(255, 213, 79, 0);
  }
}

#card-wrapper.win-pop {
  animation: card-win-press 0.5s ease-out;
}

/* Confetti burst for a big win (>10x, triggered in app.js after the
   reveal), in the card's own palette (cream/maroon/green/gold -- see
   CONFETTI_COLORS in app.js) instead of generic party colors, so it
   reads as "this card" celebrating, not a generic effect pasted on top.
   Radiates from dead-center outward to random points past the card's
   edges -- each piece starts exactly at center, hidden behind #card-area
   (which sits above this layer, see its z-index), and only becomes
   visible once it drifts past the card's own boundary, so it reads as
   bursting out from behind the card rather than raining down on it.
   Extends past #card-wrapper's own edges on purpose (clipped at
   #app-frame's edge instead, see its overflow-x). Pieces are plain divs
   created/removed by app.js, this file only defines their shared
   animation. */
#confetti-layer {
  position: absolute;
  inset: -15% -25%;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}

.confetti-piece {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 14px;
  opacity: 0;
  border-radius: 2px;
  animation: confetti-burst var(--fall-duration, 0.9s) ease-out var(--fall-delay, 0s) forwards;
}

@keyframes confetti-burst {
  0% {
    opacity: 1;
    transform: translate(calc(-50% + var(--start-x, 0px)), calc(-50% + var(--start-y, 0px))) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--drift-x, 0px)), calc(-50% + var(--drift-y, 0px)))
      rotate(var(--spin, 480deg));
  }
}

.countdown-num {
  font-size: 1.35rem;
}

#play-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
}

#play-row #btn-play {
  margin: 0;
}

#btn-play {
  margin: 0 auto;
  font-size: 1rem;
  font-weight: 600;
  border: 2px solid #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
  background: #5a9c3f;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.8rem;
  height: 4.8rem;
  padding: 0;
  border-radius: 50%;
  font-size: 0.95rem;
  line-height: 1.15;
  text-align: center;
}

#btn-play:disabled {
  background: #555;
  cursor: not-allowed;
}

#btn-play.stop-mode {
  background: #b23b3b;
}

.icon-btn {
  /* Same >=44px touch-target reasoning as .tier-stepper button above. */
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #6b5a3f;
  background: #2a2118;
  color: #f1eade;
  border-radius: 50%;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

/* Same visual identity as #btn-play (green fill, white border, drop
   shadow) for both side buttons -- just smaller, matching their place
   beside the main button. #btn-turbo.active below overrides just the
   background to yellow when turbo is toggled on, keeping the same white
   icon/border. */
#btn-auto,
#btn-turbo {
  background: #5a9c3f;
  border: 2px solid #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
  color: white;
}

#btn-turbo.active {
  background: #ffd400;
  color: #000;
  box-shadow: 0 0 8px rgba(255, 212, 0, 0.6);
}

.icon-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

#status {
  margin: 0;
  text-align: center;
  min-height: 0.9em;
}

/* Bottom sheet: slides up from the bottom edge and covers the lower half
   of the game, same interaction as a hamburger-triggered sidebar drawer
   but sliding vertically instead of horizontally. The backdrop stays in
   the DOM at all times (never display:none) so its opacity and the
   sheet's transform can both transition smoothly. */
.modal {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  border-radius: inherit;
  opacity: 1;
  visibility: visible;
  /* Clips the sheet's own translateY(100%) resting position -- without
     this, the transformed-but-hidden sheet still extends the scrollable
     overflow area of #app-frame (which has overflow-y: auto), producing a
     phantom scrollbar even though nothing is visually cut off. */
  overflow: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0s;
}

.modal.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.modal-content {
  width: 100%;
  height: 50%;
  max-width: none;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: #2a2118;
  border: 1px solid #6b5a3f;
  border-bottom: none;
  border-radius: 20px 20px 0 0;
  padding: 1.25rem;
  overflow-y: auto;
  transform: translateY(0);
  transition: transform 0.3s ease;
}

.modal.hidden .modal-content {
  transform: translateY(100%);
}

@media (min-width: 481px) {
  .modal-content {
    border-radius: 20px 20px 32px 32px;
  }
}

.modal-content h3 {
  margin: 0;
  text-align: center;
  font-size: 1.05rem;
}

.modal-field {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.modal-field label {
  font-size: 0.85rem;
  color: #aaa;
}

.quantity-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem;
  width: 100%;
}

.qty-btn {
  padding: 0.4rem 0;
  border-radius: 6px;
  border: 1px solid #6b5a3f;
  background: #1c1712;
  color: #f1eade;
  font-size: 0.9rem;
  cursor: pointer;
}

.qty-btn.active {
  background: #4a3a00;
  border-color: #e8b84b;
  color: #e8b84b;
  font-weight: 700;
}

#btn-auto-start {
  padding: 0.6rem;
  border: none;
  border-radius: 10px;
  background: #5a9c3f;
  color: white;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}

.modal-cancel {
  background: transparent;
  border: none;
  color: #999;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.2rem;
}

/* Centered popup (as opposed to .modal's bottom sheet) -- same palette
   and card styling as .modal-content, just anchored to the middle of the
   screen instead of sliding up from the bottom. Used for errors that need
   the player's attention right away (e.g. insufficient balance). */
.center-modal {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  border-radius: inherit;
  opacity: 1;
  visibility: visible;
  padding: 1.5rem;
  box-sizing: border-box;
  transition: opacity 0.2s ease, visibility 0s linear 0s;
}

.center-modal.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

.center-modal-content {
  width: 100%;
  max-width: 360px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.25rem;
  background: #2a2118;
  border: 1px solid #6b5a3f;
  border-radius: 16px;
  padding: 2.25rem 1.75rem;
  text-align: center;
  transform: scale(1);
  transition: transform 0.2s ease;
}

.center-modal.hidden .center-modal-content {
  transform: scale(0.9);
}

.center-modal-content p {
  margin: 0;
  color: #f1eade;
  font-size: 1.3rem;
  font-weight: 700;
}

.center-modal-close {
  /* min-height guarantees the >=44px touch-target minimum regardless of
     font metrics -- padding alone measured ~34px tall on a real render. */
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem;
  border: none;
  border-radius: 10px;
  background: #5a9c3f;
  color: white;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}

/* Wraps the two-button layout (#grant-auto-modal) that a plain yes/no
   popup needs -- .center-modal-content's own gap already spaces this
   wrapper from the message above it, this just stacks Raspar/Cancelar. */
.center-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Opening splash shown before the game UI appears: fades the brand in,
   fills a short loading bar, then fades the whole overlay out. Its
   background matches the page backdrop so it reads as the same screen. */
#splash {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  background: #0d0a06;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

/* Only a game-width strip of the backdrop shows while loading (same width
   as #app-frame on desktop, the full screen on a phone). The full backdrop
   appears once the splash fades out and the game is open. */
.splash-stage {
  width: min(420px, 100vw);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  background: url("images/body-bg.jpg") center / cover no-repeat;
}

#splash.done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Logo artwork has its ground removed (transparent PNG), so only the white
   mark sits over the backdrop; a soft shadow keeps it readable on the
   lighter parts of the art. */
.splash-logo {
  width: min(300px, 80vw);
  height: auto;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
  animation: splash-fade-in 0.6s ease-out both;
}

.splash-bar {
  width: min(260px, 70vw);
  height: 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid #6b5a3f;
  overflow: hidden;
}

.splash-bar-fill {
  height: 100%;
  width: 0;
  background: #5a9c3f;
  animation: splash-bar-fill 2s linear forwards;
}

@keyframes splash-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes splash-bar-fill {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .splash-logo,
  .splash-bar-fill {
    animation: none;
  }
  .splash-bar-fill {
    width: 100%;
  }
}