/* Petakamu — base layout & shared component styles.
   The app is a fixed 390x844 phone viewport; screens stack in a vertical strip
   that translates on the Y axis for navigation. */

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: transparent;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

.app {
  width: 390px;
  height: 844px;
  position: relative;
  overflow: hidden;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.4;
}

/* --- navigation strip --- */
.strip {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
  transition: transform .55s cubic-bezier(.7,0,.2,1);
}
.screen {
  flex: 0 0 844px;
  height: 844px;
  box-sizing: border-box;
}
.pk-scroll { overflow-y: auto; }
.pk-scroll::-webkit-scrollbar { width: 0; height: 0; }

/* --- theme-specific decor: only the active theme's layer shows --- */
.decor-aurora, .decor-confetti { display: none; }
.theme-aurora .decor-aurora { display: block; }
.theme-confetti .decor-confetti { display: block; }

/* --- reusable buttons (were JS-computed inline styles in the design) --- */
.seg {
  appearance: none; cursor: pointer; padding: 13px 10px;
  border-radius: var(--radius-sm); font-family: var(--font-body);
  font-weight: 800; font-size: 14.5px;
  border: var(--card-bd); background: var(--card-bg); color: var(--text);
  box-shadow: none; transition: all .15s;
}
.seg.active {
  border: var(--btn-bd); background: var(--grad); color: var(--on-accent);
  box-shadow: var(--btn-sh);
}
.method {
  appearance: none; cursor: pointer; display: flex; flex-direction: column;
  align-items: center; gap: 6px; padding: 13px 6px;
  border-radius: var(--radius-sm); font-family: var(--font-body);
  border: var(--card-bd); background: var(--card-bg); color: var(--text);
  box-shadow: none; transition: all .12s;
}
.method.active {
  border: var(--btn-bd); background: var(--chip-bg); box-shadow: var(--btn-sh);
  outline: 2px solid var(--accent); outline-offset: 1px;
}

/* --- primary/secondary CTA helpers --- */
.btn-primary {
  appearance: none; cursor: pointer; border: var(--btn-bd);
  background: var(--grad); color: var(--on-accent); box-shadow: var(--btn-sh);
  border-radius: 16px; padding: 17px; font-weight: 800; font-size: 17px;
  font-family: var(--font-display);
}
.btn-back {
  appearance: none; background: none; border: none; cursor: pointer;
  color: var(--text-dim); font-size: 15px; font-weight: 700; padding: 0;
  text-align: left;
}
.hidden { display: none !important; }

/* --- animations (ported from FlowApp helmet) --- */
@keyframes pkfloat { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-12px) } }
@keyframes pkfloat2 { 0%,100% { transform: translateY(0) rotate(var(--rot,0deg)) } 50% { transform: translateY(-9px) rotate(var(--rot,0deg)) } }
@keyframes pkspin { to { transform: rotate(360deg) } }
@keyframes pktwinkle { 0%,100% { opacity: .18 } 50% { opacity: 1 } }
@keyframes pkpulse { 0%,100% { transform: scale(1) } 50% { transform: scale(1.14) } }
@keyframes pkpop { 0% { transform: scale(.6); opacity: 0 } 60% { transform: scale(1.08) } 100% { transform: scale(1); opacity: 1 } }
@keyframes pkrise { 0% { transform: translateY(14px); opacity: 0 } 100% { transform: translateY(0); opacity: 1 } }