.omikuji-container {
  --night: #071713;
  --forest: #0d2d22;
  --gold: #f4c967;
  --gold-bright: #ffe5a0;
  --cream: #fff7df;
  max-width: 430px;
  margin: 0 auto;
  padding: 14px;
  text-align: center;
  font-family: "Noto Sans Thai", "Leelawadee UI", Tahoma, sans-serif;
  color: var(--cream);
  background:
    radial-gradient(circle at 50% 8%, rgba(60, 150, 96, .28), transparent 34%),
    linear-gradient(180deg, #06130f 0%, #0d2d22 58%, #06130f 100%);
  border: 1px solid rgba(244, 201, 103, .24);
  border-radius: 32px;
  box-shadow: 0 22px 65px rgba(0, 24, 16, .34), inset 0 1px 0 rgba(255, 255, 255, .04);
  overflow: hidden;
}

.screen { display: none; }
.screen.active { display: block; }
.premium-title-screen { animation: titleEnter .55s ease-out both; }

.title-hero {
  position: relative;
  aspect-ratio: 9 / 14;
  min-height: 540px;
  overflow: hidden;
  border: 1px solid rgba(255, 226, 153, .38);
  border-radius: 25px;
  background: #06130f;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .42), inset 0 0 0 1px rgba(255, 255, 255, .04);
  isolation: isolate;
}

.start-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  margin: 0;
  transform: scale(1.015);
  animation: heroBreath 4s ease-in-out infinite;
}

.title-hero-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(1, 9, 7, .2) 0%, rgba(1, 9, 7, 0) 34%),
    linear-gradient(0deg, rgba(1, 13, 9, .8) 0%, rgba(1, 13, 9, 0) 32%);
  pointer-events: none;
}

.title-copy {
  position: absolute;
  z-index: 2;
  top: 6.5%;
  left: 20px;
  right: 20px;
  color: var(--cream);
  text-shadow: 0 3px 18px rgba(0, 0, 0, .88);
}

.title-kicker {
  margin: 0 0 7px;
  color: var(--gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .23em;
}

.omikuji-container .title-copy h1 {
  margin: 0;
  font-family: "Noto Serif Thai", "Th Sarabun New", Georgia, serif;
  font-size: clamp(27px, 8vw, 36px);
  font-weight: 700;
  line-height: 1.18;
}

.title-divider {
  position: relative;
  display: block;
  width: 92px;
  height: 1px;
  margin: 13px auto 11px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.title-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  background: var(--gold);
  transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: 0 0 14px rgba(244, 201, 103, .8);
}

.title-tagline {
  margin: 0;
  color: rgba(255, 247, 223, .9);
  font-size: 14px;
  font-weight: 500;
}

.fortune-count {
  position: absolute;
  z-index: 2;
  right: 14px;
  bottom: 14px;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 5px 11px;
  color: #fff5d2;
  background: rgba(4, 24, 17, .76);
  border: 1px solid rgba(255, 221, 136, .44);
  border-radius: 999px;
  box-shadow: 0 5px 18px rgba(0, 0, 0, .3);
  backdrop-filter: blur(8px);
}

.fortune-count strong {
  color: var(--gold-bright);
  font-family: Georgia, serif;
  font-size: 20px;
  line-height: 1;
}

.fortune-count span { font-size: 11px; font-weight: 700; }
.title-actions { padding: 19px 10px 6px; }
.subtitle { margin: 0 0 14px; color: rgba(255, 247, 223, .88); font-size: 15px; line-height: 1.6; }
.subtitle small { display: block; margin-top: 3px; color: rgba(255, 231, 172, .68); font-size: 11px; font-weight: 500; }

.secret-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 12px 0 0;
  color: rgba(255, 231, 172, .78);
  font-size: 12px;
}

.secret-hint span {
  width: 7px;
  height: 7px;
  background: var(--gold);
  transform: rotate(45deg);
  box-shadow: 0 0 10px rgba(244, 201, 103, .75);
}

.main-button,
.replay-button,
.sub-button,
.back-button {
  width: 100%;
  max-width: 320px;
  min-height: 56px;
  padding: 15px 22px;
  margin: 12px auto;
  border: none;
  border-radius: 999px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  display: block;
}

.main-button {
  position: relative;
  overflow: hidden;
  color: #fffbed;
  background: linear-gradient(180deg, #3ca36a 0%, #176342 48%, #0d482f 100%);
  border: 1px solid #efcb73;
  box-shadow:
    0 11px 26px rgba(0, 0, 0, .34),
    0 0 0 3px rgba(244, 201, 103, .09),
    inset 0 1px 0 rgba(255, 255, 255, .28),
    inset 0 -3px 8px rgba(0, 25, 15, .28);
  text-shadow: 0 2px 4px rgba(0, 0, 0, .34);
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}

.main-button::before {
  content: "";
  position: absolute;
  top: -40%;
  left: -42%;
  width: 32%;
  height: 180%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: skewX(-18deg);
  animation: buttonShine 6.2s ease-in-out infinite;
}

.main-button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.main-button:active { transform: translateY(2px) scale(.99); box-shadow: 0 5px 14px rgba(0, 0, 0, .34), inset 0 2px 7px rgba(0, 20, 12, .34); }
.main-button:disabled { cursor: wait; filter: saturate(.72); }
.replay-button { color: #173b2b; background: #f4e5bd; border: 1px solid rgba(244, 201, 103, .8); }
.sub-button { color: #fff; background: #176342; border: 1px solid rgba(244, 201, 103, .55); }
.back-button { color: #2e3f37; background: #e5e8e5; }

.history-panel { margin: 18px auto 0; padding: 12px; background: rgba(3, 20, 14, .48); border: 1px solid rgba(244, 201, 103, .2); border-radius: 16px; }
.history-panel > p { margin: 0 0 9px; color: rgba(255, 240, 199, .78); font-size: 11px; font-weight: 700; }
.history-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.history-day { min-width: 0; padding: 7px 2px; color: #fff2cc; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 230, 170, .12); border-radius: 9px; }
.history-day strong { display: block; font-family: Georgia, serif; font-size: 12px; }
.history-day span { display: block; margin-top: 2px; color: rgba(255, 240, 199, .58); font-size: 8px; }
.trust-note, .entertainment-note { margin: 14px auto 2px; max-width: 330px; color: rgba(255, 247, 223, .52); font-size: 10px; line-height: 1.6; }
.entertainment-note { margin-bottom: 10px; }

.loading-text {
  display: none;
  margin-top: 18px;
  font-size: 18px;
  font-weight: bold;
  color: var(--gold-bright);
  animation: pulse 1s infinite;
}

.fortune-card {
  --rank-color: #f0c45c;
  --rank-glow: rgba(255, 190, 60, .55);
  --rank-flash: rgba(255, 215, 80, .95);
  --rank-label: #5a2e16;
  background: linear-gradient(180deg, #fff9ed 0%, #fffaf2 100%);
  border: 3px solid var(--rank-color);
  border-radius: 28px;
  padding: 18px;
  margin: 0 auto 20px;
  color: #332317;
  box-shadow: 0 0 28px var(--rank-glow);
  overflow: hidden;
  transition: border-color .35s ease, box-shadow .35s ease;
}

.fortune-header {
  position: relative;
  max-width: 310px;
  margin: 0 auto 10px;
  padding: 14px 16px 7px;
  text-align: center;
}

.fortune-header::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 50%;
  width: 154px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #c79a43 34%, #c79a43 66%, transparent);
  transform: translateX(-50%);
}

.fortune-header::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 7px;
  height: 7px;
  border: 2px solid #fff9ed;
  border-radius: 1px;
  background: #c79a43;
  transform: translateX(-50%) rotate(45deg);
}

.card-no {
  display: block;
  margin: 0;
  padding: 0;
  color: #285b43;
  background: transparent;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: .015em;
}

.result-mode-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 5px auto 0;
  padding: 3px 10px;
  border: 1px solid rgba(40, 91, 67, .12);
  border-radius: 999px;
  color: #44624f;
  background: #eef4ec;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
}

.played-time-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 7px auto 0;
  color: #786b56;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .01em;
}

.played-time-badge[hidden] { display: none; }

.played-time-badge::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  border-radius: 1px;
  background: #c79a43;
  transform: rotate(45deg);
}

.fortune-theme { display: inline-block; margin: 3px 0 7px; padding: 5px 12px; color: #285640; background: #e4f0e8; border-radius: 999px; font-size: 11px; font-weight: 700; }
.result-section-label { margin: 10px 0 3px; color: #8a6b2e; font-size: 10px; font-weight: 800; letter-spacing: .08em; }

.fortune-image {
  width: 280px !important;
  max-width: 90% !important;
  height: auto !important;
  display: block;
  margin: 10px auto 15px;
  border-radius: 20px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .2);
}

#fortuneTitle {
  font-size: 24px;
  margin: 14px 0 8px;
  border-left: none !important;
  border: none !important;
  background: transparent !important;
  padding-left: 0 !important;
}

.stars { font-size: 22px; margin: 8px 0 12px; }
.message { font-size: 15px; line-height: 1.7; margin: 12px auto; text-wrap: balance; }
.advice { font-size: 15px; line-height: 1.7; font-weight: bold; margin: 12px auto; text-wrap: balance; }
.message .balanced-line { display: block; }
.fortune-card h2,
.fortune-card h3,
.fortune-card blockquote { border-left: none !important; }
.fortune-card.reveal { animation: cardReveal .85s ease-out; }
.shake { animation: shake .5s infinite; }

@keyframes titleEnter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes heroBreath {
  0%, 100% { transform: scale(1.015); filter: brightness(1); }
  50% { transform: scale(1.025); filter: brightness(1.025); }
}

@keyframes buttonShine {
  0%, 66% { left: -42%; opacity: 0; }
  72% { opacity: 1; }
  82%, 100% { left: 118%; opacity: 0; }
}

@keyframes cardReveal {
  0% { transform: translateY(90px) scale(.55); opacity: 0; }
  60% { transform: translateY(-12px) scale(1.06); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes shake {
  0%, 50%, 100% { transform: rotate(-3deg); }
  25%, 75% { transform: rotate(3deg); }
}

@keyframes pulse {
  0%, 100% { opacity: .4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

@media (max-width: 390px) {
  .omikuji-container { padding: 10px; border-radius: 24px; }
  .title-hero { min-height: 510px; border-radius: 21px; }
  .title-copy { top: 5.5%; left: 14px; right: 14px; }
  .omikuji-container .title-copy h1 { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .premium-title-screen,
  .start-image,
  .main-button::before,
  .loading-text,
  .fortune-card.reveal,
  .shake { animation: none !important; }
}