/* ============================================
   tarot.css — ARCANA タロット占い（あんこ堂HP版）
   ============================================ */

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

:root {
  --bg:        #080818;
  --surface:   #12122a;
  --gold:      #d4a843;
  --gold-lt:   #f0cc6e;
  --text:      #e8e0f0;
  --text-dim:  #9090b0;
  --card-back: #1a1040;
  --radius:    14px;
}

html, body {
  height: 100%;
  font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', Georgia, serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
}

/* ---- 星空背景 ---- */
#stars {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
#stars::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, #1e1060 0%, #080818 70%);
}
.star {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  animation: twinkle var(--dur, 3s) ease-in-out infinite alternate;
  opacity: 0;
}
@keyframes twinkle {
  from { opacity: 0.1; transform: scale(0.8); }
  to   { opacity: 0.9; transform: scale(1.2); }
}

/* ---- HPへ戻るボタン（全画面共通・固定表示） ---- */
.back-to-hp {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(212,168,67,0.6);
  text-decoration: none;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  transition: color 0.2s;
  padding: 8px;
}
.back-to-hp:hover { color: var(--gold); }

/* ---- Screen 共通 ---- */
.screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow-y: auto;
  padding: 40px 20px 60px;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.screen.active {
  opacity: 1;
  pointer-events: all;
}
.screen-inner {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

/* ---- Screen 1: イントロ ---- */
.logo-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 20px;
}
.logo-symbol {
  font-size: 3rem;
  color: var(--gold);
  animation: float 4s ease-in-out infinite;
  line-height: 1;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
.logo-title {
  font-size: 2.8rem;
  letter-spacing: 0.3em;
  color: var(--gold);
  text-shadow: 0 0 30px rgba(212,168,67,0.6);
  font-weight: 400;
}
.logo-sub {
  font-size: 0.85rem;
  color: var(--text-dim);
  letter-spacing: 0.15em;
}

.theme-block {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.theme-label {
  font-size: 0.9rem;
  color: var(--text-dim);
  letter-spacing: 0.1em;
}
.theme-row {
  display: flex;
  gap: 10px;
  width: 100%;
}
.theme-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(212,168,67,0.25);
  border-radius: var(--radius);
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.25s;
  font-family: inherit;
}
.theme-btn:hover {
  border-color: var(--gold);
  color: var(--text);
  background: rgba(212,168,67,0.08);
}
.theme-btn.active {
  border-color: var(--gold);
  background: rgba(212,168,67,0.15);
  color: var(--gold);
  box-shadow: 0 0 16px rgba(212,168,67,0.2);
}
.theme-icon { font-size: 1.4rem; }
.theme-name { font-size: 0.75rem; letter-spacing: 0.05em; }

.btn-primary {
  display: block;
  width: 100%;
  max-width: 320px;
  padding: 16px 24px;
  background: linear-gradient(135deg, #b8860b, #d4a843, #b8860b);
  background-size: 200% 100%;
  border: none;
  border-radius: 100px;
  color: #1a0e00;
  font-size: 1rem;
  font-family: inherit;
  font-weight: 700;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: all 0.3s;
  animation: shimmer 3s linear infinite;
  box-shadow: 0 4px 20px rgba(212,168,67,0.35);
}
@keyframes shimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(212,168,67,0.5);
}
.btn-primary:active { transform: translateY(0); }

.intro-note {
  font-size: 0.75rem;
  color: var(--text-dim);
  letter-spacing: 0.08em;
}

/* ---- Screen 2: シャッフル ---- */
.calm-text {
  font-size: 1.2rem;
  color: var(--text);
  text-align: center;
  line-height: 2;
  letter-spacing: 0.08em;
  min-height: 80px;
}

.deck-wrap {
  position: relative;
  width: 120px;
  height: 200px;
  margin: 16px auto;
}
.deck-card {
  position: absolute;
  width: 90px;
  height: 150px;
  top: 50%;
  left: 50%;
  border-radius: 10px;
  background: var(--card-back);
  border: 1px solid rgba(212,168,67,0.35);
  transform: translate(-50%, -50%);
  box-shadow: inset 0 0 20px rgba(100,50,200,0.3), 0 4px 12px rgba(0,0,0,0.5);
}
.deck-card::after {
  content: '✦';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: rgba(212,168,67,0.25);
}
.dc1 { transform: translate(-50%, -50%) rotate(-8deg); animation: deal1 1.8s ease-in-out infinite; }
.dc2 { transform: translate(-50%, -50%) rotate(-4deg); animation: deal2 1.8s ease-in-out infinite 0.1s; }
.dc3 { transform: translate(-50%, -50%) rotate(0deg);  animation: deal3 1.8s ease-in-out infinite 0.2s; }
.dc4 { transform: translate(-50%, -50%) rotate(4deg);  animation: deal4 1.8s ease-in-out infinite 0.3s; }
.dc5 { transform: translate(-50%, -50%) rotate(8deg);  animation: deal5 1.8s ease-in-out infinite 0.4s; }

@keyframes deal1 { 0%,100% { transform: translate(calc(-50% - 20px), -50%) rotate(-8deg); } 50% { transform: translate(calc(-50% + 20px), -50%) rotate(4deg); } }
@keyframes deal2 { 0%,100% { transform: translate(calc(-50% - 10px), -50%) rotate(-4deg); } 50% { transform: translate(calc(-50% + 10px), -50%) rotate(2deg); } }
@keyframes deal3 { 0%,100% { transform: translate(-50%, calc(-50% - 6px)) rotate(0deg);   } 50% { transform: translate(-50%, calc(-50% + 6px)) rotate(0deg); } }
@keyframes deal4 { 0%,100% { transform: translate(calc(-50% + 10px), -50%) rotate(4deg);  } 50% { transform: translate(calc(-50% - 10px), -50%) rotate(-2deg); } }
@keyframes deal5 { 0%,100% { transform: translate(calc(-50% + 20px), -50%) rotate(8deg);  } 50% { transform: translate(calc(-50% - 20px), -50%) rotate(-4deg); } }

.theme-msg {
  font-size: 0.95rem;
  color: var(--gold);
  text-align: center;
  line-height: 1.8;
  letter-spacing: 0.05em;
  min-height: 60px;
  opacity: 0;
  transition: opacity 0.8s;
  padding: 0 8px;
}
.theme-msg.visible { opacity: 1; }

/* ---- Screen 3: カード選択 ---- */
.select-inner { justify-content: flex-start; }
.select-guide {
  font-size: 1rem;
  color: var(--text-dim);
  text-align: center;
  line-height: 2;
  letter-spacing: 0.06em;
  padding-top: 8px;
}
.spread-wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  width: 100%;
  padding-bottom: 20px;
}

/* ---- カード（選択画面）---- */
.spread-card {
  aspect-ratio: 2/3;
  border-radius: 10px;
  cursor: pointer;
  perspective: 600px;
  transform: rotate(var(--rot));
  transition: transform 0.2s;
}
.spread-card:hover .card-inner { transform: scale(1.05); }
.spread-card:active .card-inner { transform: scale(0.97); }

.card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 10px;
}
.spread-card.flipping .card-inner { transform: rotateY(180deg); }

.card-back, .card-front {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.card-back {
  background: linear-gradient(160deg, #1a1040 0%, #0e0830 100%);
  border: 1px solid rgba(212,168,67,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.card-back::before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(212,168,67,0.15);
  border-radius: 7px;
}
.card-back-symbol { font-size: 1.4rem; color: rgba(212,168,67,0.3); }
.card-front {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 4px;
  border: 1px solid rgba(255,255,255,0.15);
}
.card-front-symbol { font-size: 1.8rem; filter: drop-shadow(0 0 6px rgba(255,255,255,0.5)); }
.card-front-name   { font-size: 0.6rem; color: rgba(255,255,255,0.9); letter-spacing: 0.05em; text-align: center; }

/* ---- Screen 4: 結果 ---- */
.result-scroll {
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px 80px;
}

.result-card-wrap {
  width: 180px;
  height: 280px;
  min-height: 280px;
  flex-shrink: 0;
  perspective: 800px;
  margin-bottom: 32px;
}
.result-card-3d {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation: revealCard 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes revealCard {
  0%   { transform: rotateY(-180deg) scale(0.8); opacity: 0; }
  60%  { transform: rotateY(8deg) scale(1.02); }
  100% { transform: rotateY(0deg) scale(1); opacity: 1; }
}
.result-card-face {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 8px 40px rgba(0,0,0,0.6), 0 0 60px rgba(212,168,67,0.15);
  overflow: hidden;
}
.result-card-face::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, transparent 60%);
}
.result-card-symbol-big    { font-size: 4rem; filter: drop-shadow(0 0 12px rgba(255,255,255,0.6)); z-index: 1; }
.result-card-number        { font-size: 0.7rem; letter-spacing: 0.25em; color: rgba(255,255,255,0.6); z-index: 1; }
.result-card-name-on-card  { font-size: 1rem; color: rgba(255,255,255,0.95); letter-spacing: 0.1em; z-index: 1; }

.result-body {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  animation: fadeUp 0.8s 0.6s ease both;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.result-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.result-card-en { font-size: 0.75rem; color: var(--text-dim); letter-spacing: 0.2em; text-transform: uppercase; }
.result-card-jp { font-size: 2rem; color: var(--gold); letter-spacing: 0.1em; }

.keywords-row { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.keyword-chip {
  padding: 5px 14px;
  border: 1px solid rgba(212,168,67,0.4);
  border-radius: 100px;
  font-size: 0.75rem;
  color: var(--gold);
  background: rgba(212,168,67,0.06);
  letter-spacing: 0.05em;
}

.result-section {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.result-section-label {
  font-size: 0.7rem;
  color: var(--gold);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(212,168,67,0.2);
  padding-bottom: 8px;
}
.result-section-text {
  font-size: 0.92rem;
  line-height: 1.9;
  color: var(--text);
  letter-spacing: 0.04em;
}

.advice-section {
  background: linear-gradient(135deg, rgba(212,168,67,0.1), rgba(212,168,67,0.04));
  border: 1px solid rgba(212,168,67,0.3);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 0 20px rgba(212,168,67,0.05);
}
.advice-label { font-size: 0.7rem; color: var(--gold-lt); letter-spacing: 0.2em; }
.advice-text  { font-size: 0.95rem; line-height: 1.9; color: var(--text); letter-spacing: 0.04em; }

/* ---- ボタン（結果画面） ---- */
.result-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.btn-retry {
  display: block;
  width: 100%;
  max-width: 320px;
  padding: 16px;
  background: transparent;
  border: 1px solid rgba(212,168,67,0.4);
  border-radius: 100px;
  color: var(--gold);
  font-size: 0.9rem;
  font-family: inherit;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: all 0.3s;
}
.btn-retry:hover {
  background: rgba(212,168,67,0.1);
  border-color: var(--gold);
  box-shadow: 0 0 20px rgba(212,168,67,0.2);
}
.btn-back-hp {
  display: block;
  font-size: 0.8rem;
  color: var(--text-dim);
  text-decoration: none;
  letter-spacing: 0.1em;
  padding: 8px;
  transition: color 0.2s;
}
.btn-back-hp:hover { color: var(--text); }

/* ---- レスポンシブ ---- */
@media (min-width: 480px) {
  .spread-wrap { grid-template-columns: repeat(5, 1fr); }
  .logo-title  { font-size: 3.4rem; }
}
@media (min-width: 768px) {
  .spread-wrap       { grid-template-columns: repeat(6, 1fr); }
  .result-card-wrap  { width: 200px; height: 320px; min-height: 320px; }
}