/* Kriollo brand palette — sampled from the logo */
:root {
  --yellow: #FDDA05;
  --yellow-deep: #F5A800;
  --red: #E01F1F;
  --brown: #652E22;
  --white: #FFFFFF;
  --font: 'Fredoka', 'Arial Rounded MT Bold', 'Trebuchet MS', system-ui, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

html, body { height: 100%; margin: 0; }

body {
  font-family: var(--font);
  color: var(--brown);
  background:
    radial-gradient(circle at 15% 12%, rgba(255,255,255,.35) 0 90px, transparent 91px),
    radial-gradient(circle at 88% 82%, rgba(224,31,31,.12) 0 140px, transparent 141px),
    var(--yellow);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

button { font-family: inherit; cursor: pointer; border: 0; }

#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 10; }

.screen {
  height: 100vh;
  height: 100dvh;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---------------- Landing ---------------- */
.landing { justify-content: center; gap: clamp(20px, 5vh, 44px); }

.logo-btn {
  background: none;
  padding: 12px;
  width: min(86vw, 640px);
  filter: drop-shadow(0 12px 14px rgba(101,46,34,.28));
}
.logo-btn img { width: 100%; height: auto; display: block; pointer-events: none; }
.logo-btn:focus-visible { outline: 4px dashed var(--brown); outline-offset: 6px; border-radius: 24px; }

.hint {
  margin: 0;
  background: var(--brown);
  color: var(--yellow);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: clamp(14px, 2.6vw, 20px);
  padding: 10px 22px;
  border-radius: 999px;
  animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }

/* ---------------- Play ---------------- */
.play { gap: 12px; }

.top {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.mini-logo { height: clamp(36px, 7vh, 64px); width: auto; filter: drop-shadow(0 3px 4px rgba(101,46,34,.3)); }


/* The number: three digit reels that spin down and lock in one after another */
.num {
  display: flex;
  font-size: clamp(72px, 24vw, 190px);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 5px 0 rgba(0,0,0,.22);
  animation: land .5s cubic-bezier(.2,1.6,.4,1) 1.9s both;
}
.reel { display: block; height: 1em; width: .62em; overflow: hidden; }
.strip {
  display: block;
  animation: spin 1.5s cubic-bezier(.12,.7,.15,1) both;
}
.cell { display: block; height: 1em; line-height: 1; text-align: center; }

@keyframes spin  { from { transform: translateY(0); } to { transform: translateY(calc(var(--n) * -1em)); } }
@keyframes land  { 0% { transform: scale(1); } 50% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* One blank panel — the tap position decides which range is drawn */
.panel-wrap { flex: 1 1 auto; width: 100%; min-height: 0; display: flex; }
.panel {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  background: var(--red);
  color: var(--white);
  border: 6px solid var(--white);
  border-radius: 28px;
  box-shadow: 0 6px 0 rgba(101,46,34,.35), 0 12px 20px rgba(101,46,34,.18);
  cursor: pointer;
  overflow: hidden;
  touch-action: manipulation;
}
.panel.spinning { cursor: default; }

@keyframes pop { 0% { transform: scale(.6); } 100% { transform: scale(1); } }

/* ---------------- Responsive ---------------- */
@media (min-width: 700px) {            /* tablets and up */
  .screen { padding-left: 28px; padding-right: 28px; }
  .play { gap: 16px; }
}

@media (max-height: 560px) {            /* short landscape phones */
  .play { gap: 8px; padding-top: 8px; padding-bottom: 8px; }
  .panel { border-width: 4px; border-radius: 20px; }