/* ===== Ink-on-paper palette ===== */
:root {
  --paper: #FAFAF7;
  --card: #FFFFFF;
  --ink-deep: #1A1A1A;
  --ink-mid: #3D3A36;
  --ink-light: #8A857E;
  --ink-faint: rgba(26, 26, 26, 0.08);
  --ink-faint-2: rgba(26, 26, 26, 0.05);
  --serif: "Noto Serif SC", "Songti SC", "STSong", "SimSun", "PingFang SC", serif;
  --radius-card: 28px;
  --radius-btn: 999px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink-deep);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  /* very light paper grain */
  background-image:
    radial-gradient(circle at 20% 10%, rgba(26,26,26,0.018) 0, transparent 35%),
    radial-gradient(circle at 80% 80%, rgba(26,26,26,0.018) 0, transparent 40%);
}

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

/* ===== Screen system ===== */
.screen-host { position: relative; min-height: 100dvh; overflow: hidden; }

.screen {
  position: absolute; inset: 0;
  display: none;
  flex-direction: column;
  padding: max(env(safe-area-inset-top), 24px) 24px max(env(safe-area-inset-bottom), 24px);
  animation: fadeIn 380ms ease both;
}
.screen.is-active { display: flex; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ===== Home ===== */
.brand { text-align: center; margin-top: 12px; }
.brand__title {
  font-weight: 900;
  font-size: 30px;
  letter-spacing: 18px;
  margin: 0 0 6px;
  padding-left: 18px;
}
.brand__subtitle {
  margin: 0;
  color: var(--ink-light);
  letter-spacing: 6px;
  font-size: 13px;
}

.home__center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
}

.draw-btn {
  position: relative;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--ink-faint);
  color: var(--ink-deep);
  font-family: inherit;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 14px;
  padding-left: 14px;
  box-shadow:
    0 1px 0 rgba(0,0,0,0.02),
    0 12px 32px -16px rgba(26,26,26,0.18);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.draw-btn:active { transform: scale(0.97); }
.draw-btn:hover {
  box-shadow:
    0 1px 0 rgba(0,0,0,0.02),
    0 18px 40px -18px rgba(26,26,26,0.28);
}

.draw-btn__ring {
  position: absolute; inset: 10px;
  border-radius: 50%;
  border: 1px solid rgba(26,26,26,0.06);
  pointer-events: none;
}

.home__hint { color: var(--ink-light); letter-spacing: 4px; font-size: 13px; margin: 0; }

.home__foot { display: flex; justify-content: center; padding-bottom: 8px; }

.link-btn {
  background: transparent;
  border: 0;
  color: var(--ink-light);
  letter-spacing: 4px;
  font-size: 13px;
  padding: 8px 12px;
}

/* ===== Draw screen ===== */
.screen--draw { padding: 24px; align-items: center; justify-content: center; }
.paper {
  position: relative;
  width: min(78vw, 360px);
  aspect-ratio: 3 / 4;
  background: var(--card);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 0 rgba(0,0,0,0.03), 0 24px 60px -28px rgba(26,26,26,0.25);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ink-blot {
  position: absolute;
  width: 60%;
  aspect-ratio: 1 / 1;
  background: radial-gradient(circle, rgba(26,26,26,0.08) 0%, rgba(26,26,26,0.04) 40%, transparent 70%);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 600ms ease, transform 600ms ease;
}
.ink-blot.is-on { opacity: 1; transform: scale(1); }

.hexagram-stage {
  position: relative;
  width: 70%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== Card ===== */
.screen--card {
  padding: 24px;
  gap: 16px;
  align-items: center;
  overflow-y: auto;
  padding-bottom: 48px;
}
.gua-card {
  position: relative;
  width: min(78vw, 340px);
  /* keep 3:4 as the minimum, but let long content grow the card downward */
  min-height: calc(min(78vw, 340px) * 4 / 3);
  background: var(--card);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 0 rgba(0,0,0,0.03), 0 24px 60px -28px rgba(26,26,26,0.25);
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  padding: 22px 22px 22px;
}

.gua-card__ink-bg {
  position: absolute;
  left: 50%; top: 38%;
  width: 70%; aspect-ratio: 1/1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(26,26,26,0.05) 0%, transparent 65%);
  pointer-events: none;
}

.gua-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
}
.gua-card__num {
  writing-mode: vertical-rl;
  font-size: 12px;
  letter-spacing: 4px;
  color: var(--ink-light);
}
.gua-card__name {
  writing-mode: vertical-rl;
  font-weight: 900;
  font-size: 26px;
  letter-spacing: 8px;
  color: var(--ink-deep);
}

.gua-card__hex {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  /* take the leftover middle space when content is short, but never force
     overflow when the judgement / short text is long */
  flex: 1 1 auto;
  min-height: 110px;
}

.gua-card__judgement {
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 2px;
  color: var(--ink-deep);
  margin-top: 8px;
  padding: 0 4px;
  word-break: break-word;
}

.gua-card__short {
  text-align: center;
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--ink-light);
  margin-top: 14px;
}

.gua-card__level {
  display: flex; justify-content: center;
  margin-top: 14px;
}
.level-pill {
  font-size: 12px;
  letter-spacing: 6px;
  color: var(--ink-mid);
  padding: 6px 18px;
  border: 1px solid var(--ink-faint);
  border-radius: 999px;
  background: rgba(255,255,255,0.6);
}

.gua-card__temp {
  text-align: center;
  margin-top: 12px;
  font-size: 11px;
  letter-spacing: 4px;
  color: var(--ink-light);
  padding-bottom: 2px;
}

/* card actions */
.card-actions {
  display: flex; gap: 12px; justify-content: center;
  margin-top: 12px;
}
.primary-btn, .ghost-btn {
  border-radius: var(--radius-btn);
  font-family: inherit;
  font-size: 14px;
  letter-spacing: 4px;
  padding: 12px 22px;
  border: 1px solid var(--ink-faint);
  background: var(--card);
  color: var(--ink-deep);
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.primary-btn {
  background: var(--ink-deep);
  color: var(--paper);
  border-color: var(--ink-deep);
}
.primary-btn:active, .ghost-btn:active { transform: scale(0.97); }

/* ===== Detail ===== */
.screen--detail { overflow-y: auto; padding-bottom: 64px; }
.back-btn {
  align-self: flex-start;
  background: transparent;
  border: 0;
  color: var(--ink-mid);
  font-size: 14px;
  letter-spacing: 2px;
  padding: 8px 4px 16px;
}
.detail { max-width: 640px; margin: 0 auto; width: 100%; }
.detail__head {
  display: flex; align-items: baseline; gap: 16px;
  border-bottom: 1px solid var(--ink-faint);
  padding-bottom: 14px; margin-bottom: 18px;
}
.detail__num { color: var(--ink-light); font-size: 14px; letter-spacing: 4px; }
.detail__name { font-weight: 900; font-size: 26px; letter-spacing: 6px; }
.detail__full { color: var(--ink-mid); font-size: 14px; letter-spacing: 4px; margin-left: auto; }

.detail__hex {
  display: flex; justify-content: center;
  margin: 6px 0 22px;
}

.detail__section { margin-bottom: 22px; }
.detail__section h3 {
  font-size: 13px;
  letter-spacing: 6px;
  color: var(--ink-light);
  font-weight: 400;
  margin: 0 0 8px;
}
.detail__section p,
.detail__section .judgement,
.detail__section .image {
  font-size: 15px;
  line-height: 1.9;
  color: var(--ink-mid);
  margin: 0;
  white-space: pre-wrap;
}
.detail__section .judgement { color: var(--ink-deep); font-weight: 700; letter-spacing: 2px; }

.fortune-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 560px) {
  .fortune-grid { grid-template-columns: 1fr 1fr; }
}
.fortune-item {
  background: var(--card);
  border: 1px solid var(--ink-faint-2);
  border-radius: 18px;
  padding: 14px 16px;
}
.fortune-item__label {
  font-size: 12px;
  letter-spacing: 6px;
  color: var(--ink-light);
  margin-bottom: 6px;
}
.fortune-item__text {
  font-size: 14px;
  line-height: 1.85;
  color: var(--ink-mid);
  margin: 0;
}

/* ===== About ===== */
.screen--about { overflow-y: auto; padding-bottom: 64px; }
.about { max-width: 560px; margin: 0 auto; width: 100%; }
.about h2 {
  font-weight: 900;
  font-size: 22px;
  letter-spacing: 8px;
  margin: 8px 0 18px;
}
.about h3 {
  font-size: 13px;
  letter-spacing: 6px;
  color: var(--ink-light);
  font-weight: 400;
  margin: 22px 0 6px;
}
.about p {
  font-size: 15px; line-height: 1.9; color: var(--ink-mid); margin: 0 0 6px;
}
.about__sig {
  margin-top: 36px;
  text-align: center;
  color: var(--ink-light);
  letter-spacing: 4px;
  font-size: 12px;
}

/* ===== Ink ripple (click feedback) ===== */
.ripple-host {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* default ripple shade, overridden per-button below */
  --ripple-strong: rgba(26, 26, 26, 0.22);
  --ripple-soft:   rgba(26, 26, 26, 0.08);
}
.primary-btn.ripple-host {
  --ripple-strong: rgba(255, 255, 255, 0.32);
  --ripple-soft:   rgba(255, 255, 255, 0.10);
}
.draw-btn.ripple-host {
  --ripple-strong: rgba(26, 26, 26, 0.18);
  --ripple-soft:   rgba(26, 26, 26, 0.05);
}

.ink-ripple {
  position: absolute;
  z-index: -1;          /* sits behind button text/ring inside isolated stack */
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  background: radial-gradient(
    circle,
    var(--ripple-strong) 0%,
    var(--ripple-soft) 45%,
    transparent 70%
  );
  animation: ink-ripple 720ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.draw-btn .ink-ripple { animation-duration: 900ms; }

@keyframes ink-ripple {
  from { transform: translate(-50%, -50%) scale(0);   opacity: 1; }
  to   { transform: translate(-50%, -50%) scale(1);   opacity: 0; }
}

/* ===== Hexagram SVG strokes ===== */
.hex-svg { width: 100%; height: 100%; overflow: visible; }
.hex-stroke {
  fill: none;
  stroke: var(--ink-deep);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hex-stroke--writing {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  animation: stroke-write 380ms cubic-bezier(0.5, 0, 0.2, 1) forwards;
}
@keyframes stroke-write {
  to { stroke-dashoffset: 0; }
}