/* Licensed font: put mtm-palma-67.woff2 in public/fonts/ and replace src below
   with url("/fonts/mtm-palma-67.woff2") format("woff2"). See docs/fonts.md. */
@font-face {
  font-family: "MTM Palma 67";
  src: local("MTM Palma 67"), local("MTM Palma 67 Estrecha");
  font-display: swap;
  font-weight: 400 900;
}
:root { color-scheme: light; --display: "MTM Palma 67", Impact, "Arial Narrow", "Helvetica Neue", sans-serif; }
* { box-sizing: border-box; }
html { background: #fff; }
body { margin: 0; background: #fff; color: #000; }
main {
  min-height: 100svh; width: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: clamp(30px, 6svh, 70px);
  padding: 40px 20px; position: relative;
}
.counter {
  display: block; max-width: 100%; font-family: var(--display); font-size: clamp(72px, 14svh, 150px);
  font-weight: 900; line-height: 1; letter-spacing: .01em; font-variant-numeric: tabular-nums lining-nums;
  text-align: center; overflow-wrap: anywhere;
}
button { color: #000; border: 0; padding: 0; background: transparent; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 3px solid #000; outline-offset: 10px; }
button:disabled { cursor: wait; }
.flower { display: block; position: relative; width: min(66vw, 50svh, 530px); aspect-ratio: 1295 / 1214; flex: none; user-select: none; -webkit-user-select: none; }
.flower img { display: block; position: absolute; width: 100%; height: auto; pointer-events: none; transition: opacity 65ms ease-out; }
.flower-rest { left: 0; top: 0; opacity: 1; }
/* Register the untouched PNGs by their opaque footprint and bottom edge.
   Rest bounds: (112,85)-(1183,1140). Pressed: (122,179)-(1168,1093).
   Uniform size ratio 1071/1046; preserve the pressed image's aspect ratio.
   These positions never animate, so the base cannot jump between states. */
.flower .flower-pressed { width: 102.39005736%; left: -.99736448%; top: 1.71966005%; opacity: 0; }
.flower.is-pressed .flower-rest { opacity: 0; }
.flower.is-pressed .flower-pressed { opacity: 1; }
.reset { font-family: var(--display); font-size: clamp(36px, 6.4svh, 68px); font-weight: 900; line-height: 1.1; min-height: 48px; padding: 6px 12px; }
.reset:active { transform: translateY(2px); }
.status { position: absolute; bottom: 9px; left: 20px; right: 20px; margin: 0; font: 14px/1.4 system-ui, sans-serif; text-align: center; }
[hidden] { display: none !important; }
@media (max-width: 540px) {
  main { gap: clamp(35px, 7svh, 65px); padding: 46px 18px; }
  .flower { width: min(84vw, 48svh, 420px); }
  .counter { font-size: clamp(68px, 23vw, 112px); }
  .reset { font-size: clamp(36px, 11vw, 50px); }
}
@media (max-height: 480px) and (min-width: 541px) { main { gap: 16px; padding: 24px; } .flower { width: 44svh; } .counter { font-size: 64px; } .reset { font-size: 32px; } }
@media (prefers-reduced-motion: reduce) { .flower img { transition: none; } }