:root { color-scheme: dark; }
* { box-sizing: border-box; }
body {
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", sans-serif;
  background:#0b0b0e;
  color:#eaeaf0;
}
.hero {
  padding:48px 16px 16px;
  text-align:center;
}
.hero-sub {
  margin:8px 0 0;
  color:#b6b5d6;
  font-size:1rem;
}
.stay-timer {
  margin:12px 0 0;
  font-size:0.95rem;
  letter-spacing:.08em;
  color:#f3f2ff;
}
.card {
  max-width:900px;
  margin:24px auto;
  background:#121217;
  border:1px solid #26262e;
  border-radius:18px;
  padding:20px;
  box-shadow:0 18px 40px rgba(0,0,0,.35);
}
h1,h2 { margin:0 0 12px; letter-spacing:.04em; }
pre {
  white-space:pre-wrap;
  word-break:break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:0.95rem;
  line-height:1.6;
  min-height:140px;
}
.note {
  max-width:900px;
  margin:32px auto 80px;
  padding:0 16px;
  opacity:.75;
  font-size:.9rem;
  text-align:center;
}

.fortune-note {
  margin:0 0 16px;
  color:#9f9ed0;
  font-size:0.9rem;
}
.fortune-links {
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:12px;
}
.fortune-links a {
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 14px;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(40,38,68,.8),rgba(32,30,58,.8));
  color:#edeafc;
  text-decoration:none;
  font-size:0.95rem;
  transition:transform .2s ease, box-shadow .2s ease;
}
.fortune-links a:hover {
  transform:translateY(-2px);
  box-shadow:0 12px 24px rgba(0,0,0,.35);
}

.tarot {
  position:relative;
}
.tarot-note {
  margin:0 0 16px;
  color:#9a99c3;
  font-size:0.9rem;
}
.tarot-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
  gap:16px;
}
.tarot-card {
  position:relative;
  padding:0;
  border:none;
  background:transparent;
  cursor:pointer;
  perspective:1000px;
  overflow:hidden;
}
.tarot-card.disabled {
  cursor:default;
  pointer-events:none;
}
.tarot-card.disabled::after {
  content:"";
  position:absolute;
  inset:0;
  border-radius:14px;
  background:rgba(6,6,12,.65);
  z-index:2;
}
.tarot-inner {
  position:relative;
  z-index:1;
  width:100%;
  height:170px;
  border-radius:14px;
  transform-style:preserve-3d;
  transition:transform .6s ease, box-shadow .3s ease, filter .3s ease;
  box-shadow:0 16px 30px rgba(0,0,0,.35);
}
.tarot-card.disabled .tarot-inner {
  filter:grayscale(.6) brightness(.45);
}
.tarot-card:not(.revealed):hover .tarot-inner { transform:translateY(-4px); }
.tarot-card.revealed .tarot-inner { transform:rotateY(180deg); }
.tarot-face {
  position:absolute;
  inset:0;
  border-radius:14px;
  backface-visibility:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:16px;
}
.tarot-back {
  background:linear-gradient(135deg,#1e1d32,#2c2850);
  border:1px solid rgba(255,255,255,.15);
  font-weight:600;
  letter-spacing:.1em;
}
.tarot-front {
  background:linear-gradient(135deg,#19182c,#292545);
  border:1px solid rgba(255,255,255,.12);
  transform:rotateY(180deg);
  flex-direction:column;
  gap:10px;
}
.tarot-front h3 {
  margin:0;
  font-size:1rem;
}
.tarot-front p {
  margin:0;
  font-size:0.9rem;
  color:#b6b5d6;
}
.tarot-prompt {
  margin-top:18px;
  font-size:0.9rem;
  color:#a7a4d6;
}

@media (max-width:480px){
  .card { margin:16px 12px; padding:18px; }
  pre { font-size:0.9rem; }
  .fortune-links { grid-template-columns:1fr; }
}