/* ── Reset ────────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
body {
  background-color: #0c0303;
  background-image:
    radial-gradient(ellipse 90% 55% at 50% 0%,   #3d0808 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 85% 100%, #220505 0%, transparent 65%);
  min-height: 100vh;
  font-family: Georgia, 'Times New Roman', serif;
  color: #f0e0c0;
  display: flex;
  justify-content: center;
}

.page {
  width: 100%;
  max-width: 540px;
  min-height: 100vh;
}

/* ── Views ────────────────────────────────────────────────────────────────── */
.view {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 2.5rem 1.5rem 2rem;
}

.hidden { display: none !important; }

/* ── Header ───────────────────────────────────────────────────────────────── */
header {
  text-align: center;
  margin-bottom: 2.2rem;
}

.title-jp {
  font-size: 3rem;
  color: #d4a017;
  text-shadow: 0 0 28px rgba(212, 160, 23, 0.55);
  letter-spacing: 0.12em;
  line-height: 1;
}

.title-en {
  font-size: 0.78rem;
  color: #c41e3a;
  letter-spacing: 0.65em;
  margin-top: 0.4rem;
}

/* ── Landing ─ main ──────────────────────────────────────────────────────── */
main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
}

/* ── Omikuji box ──────────────────────────────────────────────────────────── */
.box-wrapper {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 280px;
  box-shadow:
    0 0 0 1.5px rgba(196, 30, 58, 0.35),
    0 8px 44px rgba(196, 30, 58, 0.4),
    0 0 90px  rgba(196, 30, 58, 0.18);
  transition: box-shadow 0.3s ease;
}

.box-wrapper:hover {
  box-shadow:
    0 0 0 1.5px rgba(196, 30, 58, 0.65),
    0 12px 56px rgba(196, 30, 58, 0.55),
    0 0 110px  rgba(196, 30, 58, 0.28);
}

.box-wrapper:active { transform: scale(0.975); }

.box-wrapper > img {
  display: block;
  width: 100%;
  height: 280px;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

/* ── Hint bar ─────────────────────────────────────────────────────────────── */
.hint-bar {
  background: rgba(180, 20, 42, 0.88);
  backdrop-filter: blur(6px);
  padding: 0.85rem 1.2rem;
  text-align: center;
}

.hint-bar span {
  font-size: 0.92rem;
  color: #ffe8cc;
  line-height: 1.55;
}

/* ── Dot indicator ────────────────────────────────────────────────────────── */
.shake-dots {
  font-size: 1rem;
  letter-spacing: 0.8rem;
  color: #c41e3a;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 8rem;
}

/* ── Shake animation ──────────────────────────────────────────────────────── */
@keyframes shake {
  0%   { transform: translate(0,     0)    rotate(0deg); }
  8%   { transform: translate(-10px, -2px) rotate(-5deg); }
  18%  { transform: translate( 10px,  2px) rotate( 5deg); }
  28%  { transform: translate(-9px,  -1px) rotate(-4deg); }
  38%  { transform: translate(  9px,  1px) rotate( 4deg); }
  48%  { transform: translate(-7px,   0)   rotate(-3deg); }
  58%  { transform: translate(  7px,  0)   rotate( 3deg); }
  68%  { transform: translate(-4px,   1px) rotate(-1.5deg); }
  78%  { transform: translate(  4px, -1px) rotate( 1.5deg); }
  88%  { transform: translate(-2px,   0)   rotate(-0.5deg); }
  100% { transform: translate(  0,    0)   rotate(0deg); }
}

.box-wrapper > img.shaking {
  animation: shake 0.7s ease-in-out;
}

/* ── Loading ──────────────────────────────────────────────────────────────── */
.loading-main { justify-content: center; gap: 2rem; }

@keyframes spin { to { transform: rotate(360deg); } }

.spinner {
  width: 56px;
  height: 56px;
  border: 4px solid rgba(196, 30, 58, 0.22);
  border-top-color: #c41e3a;
  border-radius: 50%;
  animation: spin 0.85s linear infinite;
}

.loading-text {
  font-size: 1.05rem;
  color: rgba(240, 224, 192, 0.7);
}

/* ── Result ───────────────────────────────────────────────────────────────── */
.result-main {
  gap: 2rem;
}

.result-img-wrap {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 56px rgba(0, 0, 0, 0.65);
  flex-shrink: 0;
}

.result-img-wrap > img {
  display: block;
  width: 280px;
  height: 280px;
  object-fit: cover;
  object-position: center;
}

.result-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  text-align: center;
}

.result-number {
  font-size: 0.8rem;
  color: rgba(240, 224, 192, 0.38);
  letter-spacing: 0.12em;
}

.fortune-heading {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  flex-wrap: wrap;
  justify-content: center;
}

.fortune-kanji {
  font-size: 2.8rem;
  font-weight: bold;
  line-height: 1;
  filter: drop-shadow(0 0 10px currentColor);
}

.fortune-label {
  font-size: 1.45rem;
  font-weight: bold;
  letter-spacing: 0.04em;
}

.fortune-desc {
  font-size: 1rem;
  line-height: 1.8;
  color: rgba(240, 224, 192, 0.82);
  max-width: 380px;
  white-space: pre-line;
}

.reset-note {
  font-size: 0.75rem;
  color: rgba(240, 224, 192, 0.32);
  letter-spacing: 0.06em;
  margin-top: 0.4rem;
}


.draw-limit-note {
  font-size: 0.75rem;
  color: rgba(196, 30, 58, 0.55);
  letter-spacing: 0.05em;
  margin-top: 0.3rem;
}

/* ── Result entrance animation ────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

.result-main {
  animation: fadeUp 0.75s ease forwards;
}