:root{--bg:#070b16;--glass:rgba(15,25,45,.72);--border:rgba(125,211,252,.22);--text:#e8eef8;--sub:#94a3b8;--blue:#38bdf8;--gold:#fef08a}
*{box-sizing:border-box;margin:0;padding:0} body{min-height:100vh;color:var(--text);font-family:Georgia,"Yu Mincho","游明朝",serif;background:radial-gradient(circle at 50% 5%,#21436f 0,#101d39 25%,#080d19 65%,#050811 100%);padding:28px 18px}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(1px 1px at 20% 20%,white,transparent),radial-gradient(1px 1px at 70% 30%,white,transparent),radial-gradient(1.5px 1.5px at 40% 60%,#bae6fd,transparent);background-size:240px 240px,320px 320px,400px 400px;opacity:.35}
a{color:inherit}.hero{text-align:center;padding:42px 15px 34px}.moon{font-size:68px;color:var(--gold);text-shadow:0 0 25px rgba(254,240,138,.55)}h1{font-weight:300;font-size:clamp(36px,7vw,58px);letter-spacing:.28em;margin-left:.28em;text-shadow:0 0 25px rgba(186,230,253,.35)}.subtitle{color:#bae6fd;letter-spacing:.25em;margin:14px 0}.description,.muted{color:var(--sub);line-height:1.8}
.grid{width:min(1080px,94%);margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.panel{background:linear-gradient(145deg,rgba(25,40,65,.78),rgba(8,15,30,.82));border:1px solid var(--border);border-radius:18px;padding:30px;backdrop-filter:blur(12px);box-shadow:0 20px 60px rgba(0,0,0,.35)}.navcard{text-decoration:none;text-align:center;min-height:290px;display:flex;flex-direction:column;justify-content:center;transition:.3s}.navcard:hover{transform:translateY(-6px);border-color:rgba(56,189,248,.65)}.symbol{font-size:42px;color:var(--gold);margin-bottom:18px}.navcard h2,.panel h2{letter-spacing:.16em;margin-bottom:10px}.jp{color:#7dd3fc;margin-bottom:20px}.enter{margin-top:28px;color:#bae6fd;letter-spacing:.16em}
.toolbar,.choices{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:20px 0}button,select,input{font:inherit}button,.choice{background:transparent;border:1px solid var(--border);color:var(--text);padding:10px 18px;border-radius:20px;cursor:pointer}button:hover,.choice.active{border-color:var(--blue);box-shadow:0 0 14px rgba(56,189,248,.25);background:rgba(56,189,248,.08)}
input[type=text],input[type=date]{width:100%;padding:12px 14px;background:#0f172a;color:var(--text);border:1px solid var(--border);border-radius:10px;margin:8px 0 16px}.reading{width:min(1000px,94%);margin:auto}.cards{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:22px}.drawn{width:150px;min-height:210px;padding:18px 12px;border:1px solid var(--border);border-radius:12px;background:rgba(9,18,35,.8);text-align:center;display:flex;flex-direction:column;justify-content:center}.drawn .name{color:var(--gold);font-weight:bold;margin-bottom:10px}.position{color:#7dd3fc;font-size:.85rem;margin-bottom:9px}.result{margin-top:24px;line-height:1.8}.topbar{width:min(1080px,94%);margin:auto;display:flex;justify-content:space-between;gap:10px;align-items:center}.topbar select{background:#0f172a;color:var(--text);border:1px solid var(--border);padding:7px;border-radius:8px}.back{text-decoration:none;color:#bae6fd}footer{width:min(1080px,94%);margin:50px auto 10px;padding-top:20px;border-top:1px solid var(--border);color:#64748b;text-align:center;font-size:.85rem}
@media(max-width:800px){.grid{grid-template-columns:1fr;max-width:440px}.hero{padding-top:28px}.drawn{width:135px}}

/* LUNA interactive card draw */
.deck-stage{margin-top:26px;padding:22px 8px;border-top:1px solid var(--border)}
.flip-card{width:150px;height:230px;perspective:1000px;background:transparent;border:0;padding:0;cursor:pointer}
.flip-card-inner{position:relative;width:100%;height:100%;transition:transform .72s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d}
.flip-card.revealed .flip-card-inner{transform:rotateY(180deg)}
.flip-face{position:absolute;inset:0;backface-visibility:hidden;border:1px solid rgba(125,211,252,.32);border-radius:13px;overflow:hidden}
.flip-back{display:grid;place-items:center;background:
 radial-gradient(circle at 50% 45%,rgba(254,240,138,.18),transparent 24%),
 linear-gradient(145deg,#17284a,#081020)}
.flip-back:before{content:"☾";font-size:54px;color:var(--gold);text-shadow:0 0 22px rgba(254,240,138,.45)}
.flip-back:after{content:"LUNA";position:absolute;bottom:20px;letter-spacing:.22em;color:#bae6fd;font-size:.75rem}
.flip-front{transform:rotateY(180deg);display:flex;flex-direction:column;justify-content:center;text-align:center;padding:14px;background:linear-gradient(160deg,#101b31,#070d19)}
.flip-card:not(.revealed):hover{transform:translateY(-5px)}
.flip-card:active{transform:translateY(1px) scale(.98)}
.flip-card:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.reversed-content{transform:rotate(180deg)}
.shuffle-note{text-align:center;color:#94a3b8;margin-top:12px;min-height:1.5em}
@media(prefers-reduced-motion:reduce){.flip-card-inner{transition-duration:.01ms}.flip-card:not(.revealed):hover{transform:none}}

/* ===== LUNA v3: responsive + magical discovery ===== */
html,body{max-width:100%;overflow-x:hidden}
img,svg{max-width:100%;height:auto}
.hero,.grid,.reading,.topbar,footer{min-width:0}
.navcard{position:relative;overflow:hidden;isolation:isolate}
.navcard::before{
 content:"";position:absolute;inset:-35%;pointer-events:none;opacity:0;
 background:radial-gradient(circle at 50% 55%,rgba(186,230,253,.18),transparent 35%);
 transition:opacity .45s ease
}
.navcard::after{
 content:"✦";position:absolute;right:18px;top:16px;color:var(--gold);opacity:0;
 transform:translateY(8px) scale(.75);transition:.45s ease;pointer-events:none
}
.oracle-summary{
 max-height:0;opacity:0;overflow:hidden;transform:translateY(10px);
 transition:max-height .55s ease,opacity .45s ease,transform .55s ease;
 color:#cbd5e1;line-height:1.75;margin:0 auto;width:min(100%,330px)
}
.oracle-summary strong{display:block;color:#e0f2fe;margin-bottom:5px}
.oracle-action{
 display:inline-flex;min-height:44px;align-items:center;justify-content:center;
 margin-top:15px;padding:9px 18px;border:1px solid var(--border);border-radius:999px;
 text-decoration:none;color:#e0f2fe;background:rgba(56,189,248,.06)
}
.navcard.reveal .oracle-summary,.navcard:focus-within .oracle-summary{
 max-height:180px;opacity:1;transform:none
}
.navcard.reveal::before,.navcard:focus-within::before{opacity:1}
.navcard.reveal::after,.navcard:focus-within::after{opacity:.8;transform:none}
.luna-script{font-family:inherit}
html[lang="en"] .luna-script{
 font-family:"Snell Roundhand","Segoe Script","Brush Script MT",cursive;
 font-style:italic;letter-spacing:.035em
}
.cards{align-items:stretch}
.flip-card{flex:0 1 150px;max-width:calc(50vw - 28px)}
.flip-front .muted{font-size:.85rem;line-height:1.45;margin-top:8px}
@media (hover:hover) and (pointer:fine){
 .navcard:hover .oracle-summary{max-height:180px;opacity:1;transform:none}
 .navcard:hover::before{opacity:1}
 .navcard:hover::after{opacity:.8;transform:none}
}
@media(max-width:800px){
 body{padding:18px 12px}.topbar{width:100%;align-items:flex-start;flex-wrap:wrap}
 .topbar>div{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
 .topbar select{max-width:46vw}
 .grid,.reading,footer{width:100%}
 .panel{padding:24px 18px}.navcard{min-height:260px}
 h1{font-size:clamp(32px,11vw,48px);letter-spacing:.18em;margin-left:.18em}
 .subtitle{letter-spacing:.12em}
 .cards{gap:10px}.flip-card{width:132px;height:205px;max-width:calc(50vw - 24px)}
}
@media(max-width:360px){
 .flip-card{width:126px;height:196px}
 .panel{padding:20px 12px}
 .topbar select{max-width:100%;width:100%}
 .topbar>div{width:100%}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* v4 shuffle/deal */
.reverse-toggle{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:#cbd5e1}
.reverse-toggle input{width:18px;height:18px;accent-color:#38bdf8}
@keyframes lunaDeal{from{opacity:0;transform:translateY(-10px) scale(.94)}to{opacity:1;transform:none}}
.dealing .flip-card{animation:lunaDeal .48s ease both}
@media(prefers-reduced-motion:reduce){.dealing .flip-card{animation:none}}

/* ===== LUNA v5: 9-card Tarot / 9 & 36-card Lenormand + temporary art ===== */
.placeholder-art{width:72%;aspect-ratio:3/2;margin:5px auto 8px;border:1px solid rgba(254,240,138,.22);border-radius:7px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,rgba(254,240,138,.10),transparent 42%),linear-gradient(145deg,rgba(31,55,88,.7),rgba(7,13,25,.9));color:var(--gold)}
.placeholder-art>span{font-size:1.45rem;line-height:1}.placeholder-art small{font-size:.48rem;letter-spacing:.13em;margin-top:6px;color:#bae6fd}
.spread-9{display:grid;grid-template-columns:repeat(3,150px);justify-content:center;align-items:start}
.lenormand-spread.spread-36{display:grid;grid-template-columns:repeat(8,minmax(76px,1fr));gap:8px;max-width:900px;margin-left:auto;margin-right:auto}
.lenormand-spread.spread-36 .flip-card{width:100%;height:auto;aspect-ratio:15/23;max-width:none}
.lenormand-spread.spread-36 .flip-front{padding:7px}.lenormand-spread.spread-36 .position{font-size:.68rem;margin-bottom:3px}.lenormand-spread.spread-36 .name{font-size:.70rem;line-height:1.15}.lenormand-spread.spread-36 .muted{font-size:.58rem;line-height:1.25;margin-top:4px}.lenormand-spread.spread-36 .placeholder-art{width:64%;margin:2px auto 5px}.lenormand-spread.spread-36 .placeholder-art small{display:none}.lenormand-spread.spread-36 .placeholder-art>span{font-size:1rem}.lenormand-spread.spread-36 .flip-back:before{font-size:30px}.lenormand-spread.spread-36 .flip-back:after{font-size:.48rem;bottom:10px}
@media(max-width:800px){.spread-9{grid-template-columns:repeat(3,minmax(0,132px))}.spread-9 .flip-card{width:100%;max-width:none}.lenormand-spread.spread-36{grid-template-columns:repeat(6,minmax(46px,1fr));gap:5px}.lenormand-spread.spread-36 .flip-front{padding:4px}.lenormand-spread.spread-36 .muted,.lenormand-spread.spread-36 .placeholder-art{display:none}.lenormand-spread.spread-36 .name{font-size:.58rem}.lenormand-spread.spread-36 .flip-back:after{display:none}}
@media(max-width:520px){.spread-9{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.spread-9 .flip-card{height:auto;aspect-ratio:15/23}.spread-9 .flip-front{padding:6px}.spread-9 .flip-front .muted{font-size:.62rem}.spread-9 .name{font-size:.72rem}.spread-9 .placeholder-art{width:64%}.lenormand-spread.spread-36{grid-template-columns:repeat(4,minmax(50px,1fr))}}


/* ===== LUNA frontend completion: temporary card artwork ===== */
.temp-card-art{position:relative;width:76%;aspect-ratio:3/4;margin:4px auto 8px;border:1px solid rgba(218,190,112,.48);border-radius:6px;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 38%,rgba(218,190,112,.18),transparent 34%),linear-gradient(155deg,#192642,#0a1121 68%,#151b2b);box-shadow:inset 0 0 0 3px rgba(8,15,30,.55),inset 0 0 0 4px rgba(218,190,112,.14)}
.temp-card-art::before,.temp-card-art::after{content:"";position:absolute;border:1px solid rgba(218,190,112,.18);width:78%;height:78%;transform:rotate(45deg);border-radius:10%}
.temp-card-art::after{width:52%;height:52%;transform:rotate(calc(15deg + var(--seed)*3deg));border-radius:50%}
.temp-mark{font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.7rem,4vw,2.7rem);color:#e7ce86;text-shadow:0 0 18px rgba(231,206,134,.35);z-index:2}
.temp-stars{position:absolute;bottom:22%;font-size:.52rem;letter-spacing:.18em;color:#9ecde2;z-index:2}.temp-card-art small{position:absolute;bottom:7%;font-size:.42rem;letter-spacing:.14em;color:#8195ae;z-index:2}.temp-number{position:absolute;top:7%;left:10%;font-family:Georgia,serif;color:#e7ce86;font-size:.68rem;z-index:2}
.lenormand-temp{aspect-ratio:4/3}.lenormand-temp .temp-mark{font-size:2rem}
.flip-front .name{color:#f3dda0;font-family:Georgia,"Times New Roman",serif;font-weight:600;line-height:1.25}
.flip-front{border-color:rgba(218,190,112,.32)}
.lenormand-spread.spread-36 .temp-card-art{width:68%;margin:1px auto 4px}.lenormand-spread.spread-36 .temp-card-art small{display:none}.lenormand-spread.spread-36 .temp-mark{font-size:1.1rem}.lenormand-spread.spread-36 .temp-number{font-size:.5rem}
@media(max-width:520px){.spread-9 .temp-card-art{width:70%;margin:2px auto 4px}.spread-9 .temp-card-art small,.spread-9 .temp-stars{display:none}.spread-9 .temp-mark{font-size:1.45rem}}

/* ===== Reading flow: spread -> theme -> perspective -> shuffle -> touch -> flip ===== */
.center{text-align:center}.theme-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0 26px}.theme-card{min-height:210px;border-radius:16px;padding:18px 14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;overflow:hidden}.theme-card strong{color:#f3dda0}.theme-card small{color:#94a3b8;line-height:1.45}.theme-art{position:relative;width:92px;height:92px;display:grid;place-items:center}.theme-art i{font-style:normal;font-size:2.2rem;color:#e7ce86;opacity:.45;transform:scale(.8);transition:.55s}.theme-art b,.theme-art em{position:absolute;border:1px solid rgba(231,206,134,.7);border-radius:50%;inset:16px;opacity:0;transform:scale(.45);transition:.6s}.theme-art em{inset:5px;border-style:dashed;transition-delay:.08s}.theme-card:hover .theme-art i,.theme-card.active .theme-art i{opacity:1;transform:scale(1);text-shadow:0 0 18px rgba(231,206,134,.65)}.theme-card:hover .theme-art b,.theme-card:hover .theme-art em,.theme-card.active .theme-art b,.theme-card.active .theme-art em{opacity:1;transform:scale(1)}.theme-card.active{border-color:#e7ce86;box-shadow:0 0 22px rgba(231,206,134,.2)}
.flip-card{transition:transform .22s ease,filter .35s ease}.flip-card.moonlit:not(.revealed){filter:drop-shadow(0 0 8px rgba(125,211,252,.8)) drop-shadow(0 0 16px rgba(231,206,134,.5));transform:translateY(-6px)}.flip-card.selected:not(.revealed) .flip-face{border-color:#e7ce86;box-shadow:inset 0 0 18px rgba(231,206,134,.2)}@keyframes shufflePulse{0%,100%{transform:none}35%{transform:translateX(-5px) rotate(-2deg)}70%{transform:translateX(5px) rotate(2deg)}}.shuffle-pulse{animation:shufflePulse .6s ease}.real-card-art{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.flip-front:has(.real-card-art){padding:0}.flip-front:has(.real-card-art) .position{position:absolute;z-index:3;top:7px;left:7px;background:rgba(4,8,17,.75);padding:4px 6px;border-radius:6px}.flip-front:has(.real-card-art) .name,.flip-front:has(.real-card-art)>span>span:not(.position):not(.real-card-art){position:relative;z-index:3}.minimal-art{font-size:2.2rem;color:#e7ce86;margin:auto}.copy-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}.result-list{display:grid;gap:10px;margin-top:12px}.result-list p{padding:12px;border:1px solid rgba(125,211,252,.15);border-radius:10px;background:rgba(7,13,25,.45)}
.tarot-spread.spread-10{display:grid;grid-template-columns:repeat(6,150px);grid-template-rows:repeat(4,230px);gap:12px;justify-content:center}.tarot-spread.spread-10 .flip-card:nth-child(1){grid-column:2;grid-row:2}.tarot-spread.spread-10 .flip-card:nth-child(2){grid-column:2;grid-row:2;transform:rotate(90deg);z-index:2}.tarot-spread.spread-10 .flip-card:nth-child(3){grid-column:2;grid-row:3}.tarot-spread.spread-10 .flip-card:nth-child(4){grid-column:1;grid-row:2}.tarot-spread.spread-10 .flip-card:nth-child(5){grid-column:2;grid-row:1}.tarot-spread.spread-10 .flip-card:nth-child(6){grid-column:3;grid-row:2}.tarot-spread.spread-10 .flip-card:nth-child(7){grid-column:5;grid-row:4}.tarot-spread.spread-10 .flip-card:nth-child(8){grid-column:5;grid-row:3}.tarot-spread.spread-10 .flip-card:nth-child(9){grid-column:5;grid-row:2}.tarot-spread.spread-10 .flip-card:nth-child(10){grid-column:5;grid-row:1}
@media(max-width:800px){.theme-grid{grid-template-columns:repeat(2,1fr)}.tarot-spread.spread-10{display:flex;flex-wrap:wrap}.tarot-spread.spread-10 .flip-card:nth-child(2){transform:none}}
@media(max-width:420px){.theme-grid{grid-template-columns:1fr}.theme-card{min-height:170px}}

/* =========================================================
   LUNA Reading UI
   Tarot / Lenormand
   ========================================================= */

/* ---------- Spread selection ---------- */

.reading-setup {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
}

.reading-section {
  margin: 36px 0;
}

.reading-section-title {
  margin: 0 0 22px;
  color: #edf3ff;
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  font-weight: 600;
  letter-spacing: 0.08em;
}

.spread-options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.spread-option {
  min-width: 112px;
  padding: 12px 20px;

  border: 1px solid rgba(116, 166, 211, 0.35);
  border-radius: 999px;

  background: rgba(10, 29, 54, 0.38);
  color: #e9eff9;

  font: inherit;
  font-weight: 600;

  cursor: pointer;

  transition:
    border-color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.spread-option:hover,
.spread-option:focus-visible {
  border-color: rgba(237, 204, 107, 0.8);
  background: rgba(23, 52, 82, 0.72);
  box-shadow: 0 0 18px rgba(229, 196, 94, 0.12);
  outline: none;
}

/* 選択したものだけ金色 */
.spread-option.is-selected,
.spread-option[aria-pressed="true"] {
  border-color: #e6c85f;
  color: #f3d978;
  background: rgba(35, 58, 82, 0.82);
  box-shadow:
    0 0 0 1px rgba(230, 200, 95, 0.15),
    0 0 24px rgba(230, 200, 95, 0.12);
}

.spread-description {
  min-height: 1.8em;
  margin: 20px auto 0;
  max-width: 850px;

  color: #9eacc1;
  text-align: center;
  line-height: 1.8;
}


/* =========================================================
   Theme cards
   ========================================================= */

.theme-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.theme-card {
  position: relative;
  min-height: 245px;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 30px 24px;

  border: 1px solid rgba(90, 145, 194, 0.35);
  border-radius: 20px;

  background:
    radial-gradient(
      circle at 50% 38%,
      rgba(32, 71, 105, 0.18),
      transparent 45%
    ),
    rgba(10, 28, 52, 0.48);

  color: #eaf0fa;
  text-align: center;

  cursor: pointer;

  transition:
    transform 0.28s ease,
    border-color 0.28s ease,
    background 0.28s ease,
    box-shadow 0.28s ease;
}

/*
  重要:
  初期状態では金色にしない。
  hover と選択状態を分離。
*/

.theme-card:hover,
.theme-card:focus-visible {
  transform: translateY(-3px);

  border-color: rgba(226, 198, 101, 0.65);

  background:
    radial-gradient(
      circle at 50% 38%,
      rgba(218, 190, 93, 0.08),
      transparent 46%
    ),
    rgba(13, 34, 61, 0.66);

  box-shadow:
    0 10px 35px rgba(0, 0, 0, 0.18),
    0 0 22px rgba(226, 198, 101, 0.08);

  outline: none;
}

/* クリックして選択された時だけ黄色 */
.theme-card.is-selected,
.theme-card[aria-pressed="true"] {
  border-color: #e5c65e;

  background:
    radial-gradient(
      circle at 50% 38%,
      rgba(229, 198, 94, 0.11),
      transparent 48%
    ),
    rgba(18, 43, 70, 0.8);

  box-shadow:
    0 0 0 1px rgba(229, 198, 94, 0.12),
    0 0 28px rgba(229, 198, 94, 0.1);
}

.theme-icon {
  width: 76px;
  height: 76px;

  display: grid;
  place-items: center;

  margin-bottom: 18px;

  color: rgba(223, 196, 103, 0.62);

  font-size: 2rem;

  transition:
    color 0.28s ease,
    transform 0.28s ease,
    filter 0.28s ease;
}

.theme-card:hover .theme-icon {
  color: #e6c85f;
  transform: scale(1.04);
}

.theme-card.is-selected .theme-icon,
.theme-card[aria-pressed="true"] .theme-icon {
  color: #f0d66f;
  filter: drop-shadow(0 0 9px rgba(230, 200, 95, 0.3));
}

.theme-title {
  margin: 0 0 10px;

  color: #e8edf6;

  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.theme-card.is-selected .theme-title,
.theme-card[aria-pressed="true"] .theme-title {
  color: #f0d575;
}

.theme-description {
  margin: 0;

  color: #94a4ba;

  font-size: 0.95rem;
  line-height: 1.7;
}


/* =========================================================
   CSS LUNA COIN
   お金・豊かさ用
   画像ファイルは増やさない
   ========================================================= */

.luna-coin {
  position: relative;

  width: 64px;
  height: 64px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 3px double #d8b852;
  border-radius: 50%;

  background:
    radial-gradient(
      circle at 35% 28%,
      #24486a 0%,
      #102b4b 42%,
      #071a32 75%,
      #061427 100%
    );

  box-shadow:
    inset 0 0 0 3px rgba(216, 184, 82, 0.2),
    inset 0 0 15px rgba(0, 0, 0, 0.45),
    0 0 8px rgba(216, 184, 82, 0.14);

  color: #e0c35d;
}

/* 三日月 */
.luna-coin::before {
  content: "";

  position: absolute;

  width: 25px;
  height: 25px;

  border: 3px solid #e2c45d;
  border-radius: 50%;

  left: 16px;
  top: 13px;

  box-sizing: border-box;
}

/* 三日月を削る */
.luna-coin::after {
  content: "";

  position: absolute;

  width: 24px;
  height: 24px;

  border-radius: 50%;

  background: #102b4b;

  left: 23px;
  top: 10px;
}

.luna-coin-star {
  position: absolute;
  z-index: 2;

  top: 11px;
  right: 12px;

  color: #e2c45d;
  font-size: 0.75rem;
  line-height: 1;
}

.luna-coin-text {
  position: absolute;
  z-index: 3;

  bottom: 7px;
  left: 50%;

  transform: translateX(-50%);

  color: #e3c45e;

  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.48rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}


/* =========================================================
   Perspective / sub selection
   ========================================================= */

.perspective-panel {
  margin-top: 24px;
  padding: 22px;

  border: 1px solid rgba(90, 145, 194, 0.25);
  border-radius: 18px;

  background: rgba(7, 22, 43, 0.42);
}

.perspective-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.perspective-option {
  padding: 11px 18px;

  border: 1px solid rgba(104, 151, 192, 0.35);
  border-radius: 999px;

  background: rgba(11, 31, 56, 0.55);
  color: #dce6f3;

  cursor: pointer;

  transition: 0.25s ease;
}

.perspective-option:hover,
.perspective-option.is-selected,
.perspective-option[aria-pressed="true"] {
  border-color: #ddc15e;
  color: #efd66e;
}


/* =========================================================
   Question input
   ========================================================= */

.question-area {
  margin-top: 30px;
}

.question-input {
  width: 100%;
  min-height: 110px;

  resize: vertical;

  padding: 17px 18px;

  border: 1px solid rgba(91, 145, 192, 0.35);
  border-radius: 16px;

  background: rgba(5, 20, 40, 0.56);
  color: #edf3fb;

  font: inherit;
  line-height: 1.65;

  outline: none;
}

.question-input:focus {
  border-color: rgba(228, 198, 94, 0.8);
  box-shadow: 0 0 18px rgba(228, 198, 94, 0.08);
}

.question-input::placeholder {
  color: #73859d;
}


/* =========================================================
   Reading table
   ========================================================= */

.reading-table {
  width: min(1180px, calc(100% - 32px));

  margin: 32px auto;

  padding: clamp(22px, 4vw, 44px);

  border: 1px solid rgba(83, 137, 183, 0.35);
  border-radius: 22px;

  background:
    radial-gradient(
      circle at 50% 30%,
      rgba(29, 68, 105, 0.14),
      transparent 48%
    ),
    rgba(8, 25, 48, 0.54);
}


/* =========================================================
   Reading navigation
   「選び直す」だけでは何に戻るか分からない問題
   ========================================================= */

.reading-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;

  margin-bottom: 28px;
}

.luna-action-button {
  min-width: 140px;

  padding: 12px 20px;

  border: 1px solid rgba(101, 153, 197, 0.38);
  border-radius: 999px;

  background: rgba(10, 30, 55, 0.58);
  color: #e8eef8;

  font: inherit;

  cursor: pointer;

  transition:
    border-color 0.25s ease,
    color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.luna-action-button:hover,
.luna-action-button:focus-visible {
  border-color: rgba(230, 200, 95, 0.75);
  color: #f0d570;
  background: rgba(20, 45, 72, 0.75);

  outline: none;
}

/* メイン操作：カードを引く */
.luna-action-button.primary,
.draw-button {
  border-color: #d9bb58;

  background:
    linear-gradient(
      180deg,
      rgba(213, 181, 77, 0.22),
      rgba(116, 88, 27, 0.12)
    ),
    rgba(15, 38, 63, 0.8);

  color: #f1d875;

  box-shadow: 0 0 20px rgba(221, 190, 88, 0.1);
}

.luna-action-button.primary:hover,
.draw-button:hover {
  transform: translateY(-2px);

  box-shadow:
    0 0 0 1px rgba(232, 203, 102, 0.15),
    0 0 26px rgba(232, 203, 102, 0.17);
}

.luna-action-button:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}


/* =========================================================
   Card area
   ========================================================= */

.card-area,
.reading-cards {
  display: flex;
  flex-wrap: wrap;

  align-items: center;
  justify-content: center;

  gap: clamp(12px, 2vw, 24px);

  min-height: 260px;

  margin: 22px auto;
}


/* =========================================================
   Actual LUNA card
   ========================================================= */

.luna-reading-card {
  position: relative;

  width: clamp(112px, 14vw, 165px);
  aspect-ratio: 2 / 3;

  border: 0;
  padding: 0;

  background: transparent;

  perspective: 1200px;

  cursor: pointer;

  -webkit-tap-highlight-color: transparent;
}

.luna-card-inner {
  position: relative;

  width: 100%;
  height: 100%;

  transform-style: preserve-3d;

  transition:
    transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
    filter 0.28s ease;
}

.luna-card-face {
  position: absolute;
  inset: 0;

  overflow: hidden;

  border-radius: 11px;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  box-shadow:
    0 9px 24px rgba(0, 0, 0, 0.32);
}


/* ---------- Card back ---------- */

.luna-card-back {
  z-index: 2;

  border: 1px solid rgba(209, 181, 82, 0.52);

  background-color: #07182d;

  /*
    tarot/index.html から見ると ../images/
    lenormand/index.html からも ../images/
  */
  background-image: url("../images/luna-card-back.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}


/* img を使う実装にも対応 */
.luna-card-back img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


/* ---------- Card front ---------- */

.luna-card-front {
  transform: rotateY(180deg);

  border: 1px solid rgba(214, 186, 88, 0.55);

  background: #07172a;
}

.luna-card-front img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


/* =========================================================
   Hover = 月光
   まだ選択確定ではない
   ========================================================= */

.luna-reading-card.is-drawable:hover .luna-card-inner,
.luna-reading-card.is-drawable:focus-visible .luna-card-inner {
  transform: translateY(-8px);

  filter:
    drop-shadow(0 0 8px rgba(177, 214, 255, 0.28))
    drop-shadow(0 0 14px rgba(226, 199, 99, 0.16));
}

.luna-reading-card:focus-visible {
  outline: none;
}


/* =========================================================
   DRAW後、選ばれたカード
   ========================================================= */

.luna-reading-card.is-drawn .luna-card-face {
  border-color: #efd36b;

  box-shadow:
    0 0 0 1px rgba(239, 211, 107, 0.35),
    0 0 15px rgba(239, 211, 107, 0.3),
    0 0 32px rgba(123, 180, 226, 0.18),
    0 12px 28px rgba(0, 0, 0, 0.38);
}

.luna-reading-card.is-drawn .luna-card-inner {
  filter:
    drop-shadow(0 0 10px rgba(235, 206, 103, 0.22))
    drop-shadow(0 0 18px rgba(120, 183, 232, 0.12));
}


/* 月光リング */
.luna-reading-card.is-drawn::after {
  content: "";

  position: absolute;
  inset: -7px;

  z-index: -1;

  border-radius: 15px;

  background:
    radial-gradient(
      ellipse at center,
      rgba(237, 208, 106, 0.12),
      rgba(105, 174, 226, 0.06) 45%,
      transparent 72%
    );

  filter: blur(6px);

  pointer-events: none;
}


/* =========================================================
   Flip
   ========================================================= */

.luna-reading-card.is-flipped .luna-card-inner {
  transform: rotateY(180deg);
}

/* 逆位置 */
.luna-reading-card.is-flipped.is-reversed .luna-card-front img {
  transform: rotate(180deg);
}


/* =========================================================
   Shuffle animation
   ========================================================= */

.reading-cards.is-shuffling .luna-reading-card:nth-child(odd) {
  animation: lunaShuffleLeft 0.55s ease-in-out;
}

.reading-cards.is-shuffling .luna-reading-card:nth-child(even) {
  animation: lunaShuffleRight 0.55s ease-in-out;
}

@keyframes lunaShuffleLeft {
  0% {
    transform: translateX(0) rotate(0deg);
  }

  40% {
    transform: translateX(18px) rotate(2deg);
  }

  70% {
    transform: translateX(-10px) rotate(-1deg);
  }

  100% {
    transform: translateX(0) rotate(0deg);
  }
}

@keyframes lunaShuffleRight {
  0% {
    transform: translateX(0) rotate(0deg);
  }

  40% {
    transform: translateX(-18px) rotate(-2deg);
  }

  70% {
    transform: translateX(10px) rotate(1deg);
  }

  100% {
    transform: translateX(0) rotate(0deg);
  }
}


/* =========================================================
   Spread layouts
   ========================================================= */

/* 3×3 */
.reading-cards.spread-9 {
  display: grid;

  grid-template-columns: repeat(3, minmax(90px, 165px));

  justify-content: center;
}

/* Celtic Cross */
.reading-cards.spread-celtic {
  display: grid;

  grid-template-columns: repeat(6, minmax(72px, 135px));
  grid-template-rows: repeat(4, auto);

  align-items: center;
  justify-content: center;

  gap: 14px;
}

/* Grand Tableau */
.reading-cards.spread-grand-tableau {
  display: grid;

  grid-template-columns: repeat(8, minmax(58px, 100px));

  justify-content: center;

  gap: 8px;
}

.reading-cards.spread-grand-tableau .luna-reading-card {
  width: min(9vw, 100px);
  min-width: 58px;
}


/* =========================================================
   Instruction
   ========================================================= */

.reading-instruction {
  margin: 18px auto 8px;

  color: #94a6bc;

  text-align: center;
  line-height: 1.8;
}

.reading-instruction.is-active {
  color: #d8c279;
}


/* =========================================================
   Results
   ========================================================= */

.reading-results {
  width: min(1000px, calc(100% - 32px));

  margin: 40px auto;
}

.result-card {
  margin: 16px 0;
  padding: 22px;

  border: 1px solid rgba(83, 137, 183, 0.28);
  border-radius: 18px;

  background: rgba(8, 25, 47, 0.5);
}

.result-card-title {
  margin: 0 0 10px;

  color: #ecd16d;

  font-size: 1.1rem;
}

.result-position {
  color: #9eafc4;
}

.result-meaning {
  color: #d8e1ec;
  line-height: 1.8;
}

.result-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;

  margin-top: 28px;
}

.copy-result-button,
.copy-card-button {
  cursor: pointer;
}

.copy-status {
  min-height: 1.5em;

  margin-top: 10px;

  color: #d9c46d;
  text-align: center;
}


/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 760px) {
  .reading-setup,
  .reading-table,
  .reading-results {
    width: min(100% - 20px, 100%);
  }

  .theme-grid {
    grid-template-columns: 1fr;
  }

  .theme-card {
    min-height: 205px;
  }

  .spread-options {
    justify-content: flex-start;

    overflow-x: auto;

    flex-wrap: nowrap;

    padding-bottom: 8px;

    scrollbar-width: thin;
  }

  .spread-option {
    flex: 0 0 auto;
  }

  .reading-cards {
    gap: 10px;
  }

  .luna-reading-card {
    width: clamp(88px, 27vw, 125px);
  }

  .reading-cards.spread-9 {
    grid-template-columns: repeat(3, minmax(74px, 1fr));
  }

  .reading-cards.spread-9 .luna-reading-card {
    width: 100%;
  }

  /*
    Grand Tableau:
    全体配置を維持して横スクロール可能にする
  */
  .reading-cards.spread-grand-tableau {
    width: max-content;

    min-width: 720px;

    grid-template-columns: repeat(8, 80px);
  }

  .reading-cards.spread-grand-tableau .luna-reading-card {
    width: 80px;
    min-width: 80px;
  }

  .grand-tableau-scroll {
    overflow-x: auto;

    padding: 8px 4px 18px;

    -webkit-overflow-scrolling: touch;
  }

  .reading-nav {
    gap: 9px;
  }

  .luna-action-button {
    min-width: 0;
    padding: 11px 15px;
  }
}


/* =========================================================
   Reduced motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .theme-card,
  .theme-icon,
  .spread-option,
  .luna-action-button,
  .luna-card-inner {
    transition: none !important;
  }

  .reading-cards.is-shuffling .luna-reading-card {
    animation: none !important;
  }

  .luna-reading-card.is-drawable:hover .luna-card-inner,
  .luna-reading-card.is-drawable:focus-visible .luna-card-inner {
    transform: none;
  }

  .luna-reading-card.is-flipped .luna-card-inner {
    transform: rotateY(180deg);
  }
}

/* =========================================================
   LUNA TAROT CARD GUIDE
   css/style.css
   ========================================================= */


/* ---------------------------------------------------------
   GUIDE HERO
   --------------------------------------------------------- */

.tarot-guide-hero{
  padding-bottom:24px;
}

.tarot-guide-subtitle{
  margin:8px 0 0;
  text-align:center;
  letter-spacing:.28em;
  font-size:.78rem;
  color:#d7c486;
  opacity:.9;
}


/* ---------------------------------------------------------
   GUIDE
   --------------------------------------------------------- */

.tarot-guide{
  width:min(1180px,94%);
  margin:0 auto;
}

.tarot-guide-index{
  width:100%;
}

.tarot-guide-index > h2{
  text-align:center;
  margin-bottom:8px;
}


/* ---------------------------------------------------------
   SEARCH
   --------------------------------------------------------- */

.tarot-guide-tools{
  width:min(650px,100%);
  margin:26px auto 20px;
}

.tarot-guide-tools input{
  width:100%;
  min-height:48px;
}


/* ---------------------------------------------------------
   CATEGORY
   --------------------------------------------------------- */

.tarot-guide-categories{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:9px;
  margin:18px 0 30px;
}

.tarot-guide-categories .choice{
  min-height:42px;
  padding:9px 15px;
}

.tarot-guide-categories .choice.active,
.tarot-guide-categories .choice.is-selected{
  border-color:#dbc274;
  box-shadow:
    0 0 0 1px rgba(219,194,116,.25),
    0 0 18px rgba(219,194,116,.15);
}


/* ---------------------------------------------------------
   78 CARD GRID
   --------------------------------------------------------- */

.tarot-guide-grid{
  display:grid;
  grid-template-columns:
    repeat(auto-fill,minmax(145px,1fr));
  gap:16px;
  width:100%;
}

.tarot-guide-card{
  appearance:none;
  border:1px solid rgba(215,196,134,.22);
  border-radius:15px;
  padding:10px;
  background:
    linear-gradient(
      155deg,
      rgba(18,31,49,.94),
      rgba(6,16,29,.97)
    );
  color:inherit;
  cursor:pointer;
  text-align:left;
  min-width:0;
  transition:
    border-color .25s ease,
    transform .25s ease,
    box-shadow .25s ease;
}

.tarot-guide-card:focus-visible{
  outline:2px solid #dbc274;
  outline-offset:3px;
}

@media (hover:hover) and (pointer:fine){

  .tarot-guide-card:hover{
    transform:translateY(-4px);
    border-color:rgba(219,194,116,.7);
    box-shadow:
      0 8px 28px rgba(0,0,0,.24),
      0 0 18px rgba(219,194,116,.08);
  }

}


/* ---------------------------------------------------------
   CARD THUMBNAIL
   --------------------------------------------------------- */

.tarot-guide-card-visual{
  display:block;
  width:100%;
  aspect-ratio:2 / 3;
  overflow:hidden;
  border-radius:10px;
  border:1px solid rgba(215,196,134,.24);
  background:#071321;
}

.tarot-guide-card-visual img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}


/* ---------------------------------------------------------
   FALLBACK CARD

   Used only if the actual card image path is unavailable.
   --------------------------------------------------------- */

.tarot-guide-fallback-card{
  width:100%;
  height:100%;
  min-height:180px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding:16px;
  text-align:center;
  box-sizing:border-box;

  background:
    radial-gradient(
      circle at 50% 35%,
      rgba(198,173,102,.10),
      transparent 36%
    ),
    linear-gradient(
      160deg,
      #102337,
      #071421 72%
    );

  color:#e0cc8a;
}

.tarot-guide-fallback-moon{
  display:block;
  font-size:2.7rem;
  line-height:1;
  font-family:Georgia,serif;
  text-shadow:
    0 0 16px rgba(224,204,138,.2);
}

.tarot-guide-fallback-name{
  display:block;
  font-family:Georgia,serif;
  font-size:.83rem;
  line-height:1.45;
  letter-spacing:.03em;
  overflow-wrap:anywhere;
}


/* ---------------------------------------------------------
   CARD GRID INFO
   --------------------------------------------------------- */

.tarot-guide-card-info{
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:11px 3px 4px;
  min-width:0;
}

.tarot-guide-card-info small{
  color:#b8aa7a;
  font-size:.68rem;
  letter-spacing:.06em;
}

.tarot-guide-card-info strong{
  color:#eee8d9;
  font-family:Georgia,serif;
  font-size:.88rem;
  line-height:1.35;
  overflow-wrap:anywhere;
}


/* ---------------------------------------------------------
   EMPTY SEARCH
   --------------------------------------------------------- */

.tarot-guide-empty{
  grid-column:1 / -1;
  padding:45px 10px;
}


/* =========================================================
   CARD DETAIL
   ========================================================= */

.tarot-card-detail{
  width:100%;
}

.tarot-card-detail[hidden]{
  display:none !important;
}


/* ---------------------------------------------------------
   BACK
   --------------------------------------------------------- */

.tarot-detail-nav{
  margin-bottom:25px;
}


/* ---------------------------------------------------------
   DETAIL LAYOUT
   --------------------------------------------------------- */

.tarot-detail-layout{
  display:grid;
  grid-template-columns:
    minmax(210px,330px)
    minmax(0,1fr);
  gap:clamp(28px,5vw,65px);
  align-items:start;
}


/* ---------------------------------------------------------
   LARGE CARD
   --------------------------------------------------------- */

.tarot-detail-visual{
  width:100%;
}

.tarot-detail-image{
  width:min(100%,330px);
  aspect-ratio:2 / 3;
  margin:0 auto;
  overflow:hidden;
  border-radius:17px;
  border:1px solid rgba(219,194,116,.42);

  background:#071321;

  box-shadow:
    0 18px 45px rgba(0,0,0,.28),
    0 0 30px rgba(219,194,116,.07);
}

.tarot-detail-image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.tarot-detail-image
.tarot-guide-fallback-card{
  min-height:100%;
}

.tarot-detail-image
.tarot-guide-fallback-moon{
  font-size:4.2rem;
}

.tarot-detail-image
.tarot-guide-fallback-name{
  max-width:230px;
  font-size:1.1rem;
}


/* ---------------------------------------------------------
   DETAIL TEXT
   --------------------------------------------------------- */

.tarot-detail-content{
  min-width:0;
}

.tarot-detail-arcana{
  margin:0 0 7px;
  color:#c9b776;
  font-size:.75rem;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.tarot-detail-name{
  margin:0 0 28px;
  color:#f0eadb;
  font-family:Georgia,serif;
  font-size:
    clamp(1.6rem,4vw,2.5rem);
  line-height:1.2;
  overflow-wrap:anywhere;
}


/* ---------------------------------------------------------
   UPRIGHT / REVERSED
   --------------------------------------------------------- */

.tarot-meaning-section{
  margin:0 0 16px;
  padding:19px 21px;

  border:1px solid rgba(215,196,134,.18);
  border-radius:13px;

  background:
    rgba(8,21,34,.58);
}

.tarot-meaning-section h3{
  margin:0 0 8px;
  color:#ddca87;
  font-size:.9rem;
}

.tarot-meaning-section p{
  margin:0;
  line-height:1.8;
  color:#ddd9ce;
}


/* ---------------------------------------------------------
   THEME MEANINGS
   --------------------------------------------------------- */

.tarot-theme-meanings{
  margin-top:30px;
}

.tarot-theme-meanings > h3{
  margin:0 0 15px;
  color:#e2cf8a;
}

.tarot-theme-meaning{
  padding:15px 0;
  border-bottom:
    1px solid rgba(215,196,134,.12);
}

.tarot-theme-meaning:last-child{
  border-bottom:0;
}

.tarot-theme-meaning strong{
  display:block;
  margin-bottom:6px;
  color:#cdbc83;
  font-size:.84rem;
}

.tarot-theme-meaning p{
  margin:0;
  line-height:1.75;
  color:#d7d3ca;
}


/* ---------------------------------------------------------
   PREVIOUS / NEXT
   --------------------------------------------------------- */

.tarot-card-navigation{
  display:flex;
  justify-content:space-between;
  gap:14px;
  margin-top:32px;
}

.tarot-card-navigation button{
  min-width:70px;
}

.tarot-card-navigation button:disabled{
  opacity:.28;
  cursor:not-allowed;
}


/* =========================================================
   RESULT -> CARD GUIDE LINK
   ========================================================= */

.result-card-name{
  display:inline-block;
  margin:6px 0;
  color:#e2cd83;
  font-family:Georgia,serif;
  font-size:1.08rem;
  text-decoration:none;
  border-bottom:
    1px solid rgba(226,205,131,.25);
}

.result-card-name:hover{
  border-bottom-color:#e2cd83;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:720px){

  .tarot-guide{
    width:min(95%,1180px);
  }

  .tarot-guide-grid{
    grid-template-columns:
      repeat(3,minmax(0,1fr));
    gap:9px;
  }

  .tarot-guide-card{
    padding:6px;
    border-radius:11px;
  }

  .tarot-guide-card-visual{
    border-radius:7px;
  }

  .tarot-guide-card-info{
    padding:8px 2px 3px;
  }

  .tarot-guide-card-info small{
    font-size:.58rem;
  }

  .tarot-guide-card-info strong{
    font-size:.69rem;
  }

  .tarot-guide-fallback-card{
    min-height:130px;
    padding:8px;
    gap:9px;
  }

  .tarot-guide-fallback-moon{
    font-size:1.9rem;
  }

  .tarot-guide-fallback-name{
    font-size:.62rem;
  }


  /* detail becomes vertical */

  .tarot-detail-layout{
    grid-template-columns:1fr;
    gap:28px;
  }

  .tarot-detail-image{
    width:min(260px,78%);
  }

  .tarot-detail-content{
    width:100%;
  }

  .tarot-detail-name{
    text-align:center;
  }

  .tarot-detail-arcana{
    text-align:center;
  }

}


/* =========================================================
   VERY SMALL PHONE
   ========================================================= */

@media (max-width:380px){

  .tarot-guide-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}


/* =========================================================
   RTL
   Arabic / Hebrew
   ========================================================= */

html[dir="rtl"]
.tarot-guide-card{
  text-align:right;
}

html[dir="rtl"]
.tarot-detail-content{
  text-align:right;
}

html[dir="rtl"]
.tarot-card-navigation{
  flex-direction:row-reverse;
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion:reduce){

  .tarot-guide-card{
    transition:none;
  }

  .tarot-guide-card:hover{
    transform:none;
  }

}

/* LUNA Tarot final integration */
.tarot-card-image{width:100%;height:100%;object-fit:cover;display:block;}
.tarot-guide-card-visual img,.tarot-detail-image img{width:100%;height:100%;object-fit:contain;display:block;}
.result-card-name{display:inline-block;margin:.35rem 0;color:var(--gold,#d8b36a);text-decoration:none;}
.result-card-name:hover{text-decoration:underline;}

/* =========================================================
   LUNA TAROT — HARD VISIBILITY FIX
   Do not depend on 3D backface rendering. Both faces are full-size layers;
   flipping is represented by opacity, so Chromium cannot collapse/hide them.
   ========================================================= */
.reading-cards .luna-reading-card{
  position:relative !important;
  display:block !important;
  flex:0 0 clamp(112px,14vw,165px) !important;
  width:clamp(112px,14vw,165px) !important;
  height:auto !important;
  aspect-ratio:2 / 3 !important;
  overflow:visible !important;
}
.reading-cards .luna-card-inner{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  transform:none !important;
  transform-style:flat !important;
}
.reading-cards .luna-card-face{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  opacity:1;
  visibility:visible;
  backface-visibility:visible !important;
  -webkit-backface-visibility:visible !important;
  transition:opacity .32s ease,filter .32s ease,transform .32s ease;
}
.reading-cards .luna-card-back{
  z-index:2 !important;
  opacity:1 !important;
  background:#07182d url("../images/luna-card-back.png") center/cover no-repeat !important;
  border:1px solid rgba(239,211,107,.62) !important;
}
.reading-cards .luna-card-front{
  z-index:1 !important;
  opacity:0 !important;
  transform:none !important;
  background:#07172a !important;
  border:1px solid rgba(239,211,107,.62) !important;
}
.reading-cards .luna-card-front .tarot-card-image,
.reading-cards .luna-card-front img{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:cover !important;
  opacity:1 !important;
  visibility:visible !important;
}
.reading-cards .luna-reading-card.is-flipped .luna-card-back{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none;
}
.reading-cards .luna-reading-card.is-flipped .luna-card-front{
  z-index:3 !important;
  opacity:1 !important;
  visibility:visible !important;
}
.reading-cards .luna-reading-card.is-flipped.is-reversed .luna-card-front img{
  transform:rotate(180deg) !important;
}
/* Hover/draw moonlight */
.reading-cards .luna-reading-card.is-drawable:hover,
.reading-cards .luna-reading-card.is-drawn{
  filter:drop-shadow(0 0 8px rgba(239,211,107,.48)) drop-shadow(0 0 18px rgba(125,190,238,.28));
}
/* Shuffle: glow and cross the actual cards. */
.reading-cards.is-shuffling .luna-reading-card{
  filter:drop-shadow(0 0 10px rgba(239,211,107,.70)) drop-shadow(0 0 24px rgba(125,190,238,.48));
}
.reading-cards.is-shuffling .luna-reading-card:nth-child(3n+1){animation:lunaHardShuffleA .68s cubic-bezier(.22,.7,.25,1) both !important;}
.reading-cards.is-shuffling .luna-reading-card:nth-child(3n+2){animation:lunaHardShuffleB .68s cubic-bezier(.22,.7,.25,1) both !important;}
.reading-cards.is-shuffling .luna-reading-card:nth-child(3n){animation:lunaHardShuffleC .68s cubic-bezier(.22,.7,.25,1) both !important;}
@keyframes lunaHardShuffleA{0%,100%{transform:translate(0) rotate(0)}35%{transform:translate(24px,-8px) rotate(4deg)}70%{transform:translate(-12px,5px) rotate(-2deg)}}
@keyframes lunaHardShuffleB{0%,100%{transform:translate(0) rotate(0)}35%{transform:translate(-24px,7px) rotate(-4deg)}70%{transform:translate(12px,-5px) rotate(2deg)}}
@keyframes lunaHardShuffleC{0%,100%{transform:translate(0) rotate(0)}40%{transform:translate(8px,-14px) rotate(2deg)}72%{transform:translate(-8px,7px) rotate(-2deg)}}
/* Result hover */
.result-card{transition:transform .24s ease,border-color .24s ease,box-shadow .3s ease,background .24s ease;}
.result-card:hover,.result-card:focus-within{
  transform:translateY(-3px);
  border-color:rgba(239,211,107,.72) !important;
  box-shadow:0 0 0 1px rgba(239,211,107,.12),0 0 18px rgba(239,211,107,.20),0 0 34px rgba(125,190,238,.15),0 14px 30px rgba(0,0,0,.22);
}
@media(max-width:760px){
 .reading-cards .luna-reading-card{flex-basis:clamp(88px,27vw,125px) !important;width:clamp(88px,27vw,125px) !important;}
 .reading-cards.spread-9 .luna-reading-card{width:100% !important;flex-basis:auto !important;}
}
@media(prefers-reduced-motion:reduce){
 .reading-cards.is-shuffling .luna-reading-card{animation:none !important;}
 .reading-cards .luna-card-face{transition:none !important;}
 .result-card:hover,.result-card:focus-within{transform:none;}
}

/* LUNA TAROT — direct image renderer (no 3D face dependency) */
.luna-reading-card{
  position:relative;
  display:block;
  width:clamp(112px,14vw,165px);
  aspect-ratio:2/3;
  padding:0!important;
  border:0;
  background:transparent;
  overflow:visible;
}
.luna-direct-card-image{
  position:absolute;
  inset:0;
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  object-fit:cover;
  border-radius:11px;
  border:1px solid rgba(209,181,82,.62);
  background:#07182d;
  box-shadow:0 9px 24px rgba(0,0,0,.32);
  opacity:1!important;
  visibility:visible!important;
}
.luna-reading-card.is-drawn .luna-direct-card-image{
  border-color:#efd36b;
  box-shadow:0 0 0 1px rgba(239,211,107,.35),0 0 15px rgba(239,211,107,.30),0 0 32px rgba(123,180,226,.18),0 12px 28px rgba(0,0,0,.38);
}
.luna-reading-card.is-drawable:hover .luna-direct-card-image,
.luna-reading-card.is-drawable:focus-visible .luna-direct-card-image{
  transform:translateY(-7px);
  filter:drop-shadow(0 0 8px rgba(177,214,255,.34)) drop-shadow(0 0 14px rgba(226,199,99,.22));
}
.luna-reading-card.is-flipped .luna-direct-card-image{animation:lunaDirectReveal .42s ease both;}


@keyframes lunaDirectReveal{0%{opacity:.25;transform:scaleX(.08)}100%{opacity:1;transform:scaleX(1)}}

.reading-cards.is-shuffling .luna-direct-card-image{
  border-color:rgba(239,211,107,.95);
  box-shadow:0 0 0 1px rgba(239,211,107,.38),0 0 18px rgba(239,211,107,.42),0 0 34px rgba(118,183,235,.30),0 12px 28px rgba(0,0,0,.40);
}
@media(prefers-reduced-motion:reduce){
 .luna-reading-card.is-flipped .luna-direct-card-image{animation:none;}
 .luna-reading-card.is-drawable:hover .luna-direct-card-image{transform:none;}
}

/* LUNA FINAL: uploaded Tarot PNGs are the visible card layer */
.reading-cards .luna-reading-card{position:relative!important;display:block!important;aspect-ratio:2/3!important;min-height:0!important;}
.reading-cards .luna-direct-card-image{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;display:block!important;opacity:1!important;visibility:visible!important;object-fit:cover!important;z-index:20!important;border-radius:11px!important;}
.reading-cards 


/* LUNA Tarot: keep reversed artwork upright and show REV badge */
.reading-cards 
.luna-rev-badge{
  position:absolute;
  top:8px;
  right:8px;
  z-index:40;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:38px;
  height:24px;
  padding:0 8px;
  border:1px solid rgba(244,216,112,.92);
  border-radius:999px;
  background:rgba(5,18,35,.90);
  color:#f4d870;
  box-shadow:0 0 12px rgba(244,216,112,.32),0 3px 10px rgba(0,0,0,.38);
  font:700 11px/1 system-ui,-apple-system,"Segoe UI",sans-serif;
  letter-spacing:.14em;
  pointer-events:none;
}
@media(prefers-reduced-motion:reduce){
  .reading-cards 
}


/* =========================================================
   LUNA TAROT FINAL — REV badge + 3-stage shuffle
   ========================================================= */

/* Reversed means reversed interpretation only. Artwork always remains upright. */
.reading-cards .luna-reading-card.is-flipped.is-reversed > .luna-direct-card-image,
.reading-cards .luna-reading-card.is-flipped.is-reversed .luna-direct-card-image{
  transform:scaleX(1) rotate(0deg)!important;
  animation:lunaDirectReveal .42s ease both!important;
}
.luna-rev-badge{
  position:absolute!important;
  top:8px!important;
  right:8px!important;
  z-index:80!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:40px!important;
  height:25px!important;
  padding:0 8px!important;
  border:1px solid rgba(244,216,112,.96)!important;
  border-radius:999px!important;
  background:rgba(5,18,35,.92)!important;
  color:#f4d870!important;
  box-shadow:0 0 13px rgba(244,216,112,.38),0 3px 10px rgba(0,0,0,.42)!important;
  font:800 11px/1 system-ui,-apple-system,"Segoe UI",sans-serif!important;
  letter-spacing:.14em!important;
  pointer-events:none!important;
}

/* Stable base so gather offsets are calculated from each card's own grid position. */
.reading-cards .luna-reading-card{
  transition:
    transform .58s cubic-bezier(.22,.72,.18,1),
    filter .34s ease,
    opacity .34s ease!important;
  transform-origin:center center!important;
}

/* 1. Color/light appears around the cards. */
.reading-cards.is-shuffle-glow .luna-reading-card{
  filter:
    drop-shadow(0 0 8px rgba(239,211,107,.95))
    drop-shadow(0 0 19px rgba(125,211,252,.78))
    drop-shadow(0 0 30px rgba(186,126,255,.36))!important;
}
.reading-cards.is-shuffle-glow .luna-direct-card-image{
  border-color:rgba(248,220,112,1)!important;
  box-shadow:
    0 0 0 2px rgba(239,211,107,.55),
    0 0 18px rgba(125,211,252,.52),
    0 0 34px rgba(186,126,255,.26)!important;
}

/* 2. Gather all cards into one central pile.
   Offsets are defined for the 3-column spread used by 9 cards. */
.reading-cards.spread-9.is-gathering .luna-reading-card:nth-child(1){transform:translate(100%,150%) rotate(-7deg)!important}
.reading-cards.spread-9.is-gathering .luna-reading-card:nth-child(2){transform:translate(0,150%) rotate(5deg)!important}
.reading-cards.spread-9.is-gathering .luna-reading-card:nth-child(3){transform:translate(-100%,150%) rotate(-3deg)!important}
.reading-cards.spread-9.is-gathering .luna-reading-card:nth-child(4){transform:translate(100%,0) rotate(4deg)!important}
.reading-cards.spread-9.is-gathering .luna-reading-card:nth-child(5){transform:translate(0,0) rotate(-2deg)!important}
.reading-cards.spread-9.is-gathering .luna-reading-card:nth-child(6){transform:translate(-100%,0) rotate(6deg)!important}
.reading-cards.spread-9.is-gathering .luna-reading-card:nth-child(7){transform:translate(100%,-150%) rotate(-4deg)!important}
.reading-cards.spread-9.is-gathering .luna-reading-card:nth-child(8){transform:translate(0,-150%) rotate(3deg)!important}
.reading-cards.spread-9.is-gathering .luna-reading-card:nth-child(9){transform:translate(-100%,-150%) rotate(-6deg)!important}

/* Generic pile for other spread sizes: visually collapse around the center. */
.reading-cards:not(.spread-9).is-gathering{
  grid-template-columns:repeat(1,minmax(112px,165px))!important;
  justify-content:center!important;
}
.reading-cards:not(.spread-9).is-gathering .luna-reading-card{
  grid-column:1!important;
  grid-row:1!important;
  transform:rotate(var(--pile-rot,0deg))!important;
}
.reading-cards:not(.spread-9).is-gathering .luna-reading-card:nth-child(3n+1){--pile-rot:-5deg}
.reading-cards:not(.spread-9).is-gathering .luna-reading-card:nth-child(3n+2){--pile-rot:4deg}
.reading-cards:not(.spread-9).is-gathering .luna-reading-card:nth-child(3n){--pile-rot:-2deg}

/* 3. Shuffle the gathered pile. */
.reading-cards.is-deck-shuffling .luna-reading-card{
  filter:
    drop-shadow(0 0 9px rgba(239,211,107,.92))
    drop-shadow(0 0 18px rgba(125,211,252,.58))!important;
}
.reading-cards.is-deck-shuffling .luna-reading-card:nth-child(3n+1){
  animation:lunaPileShuffleA .82s cubic-bezier(.2,.72,.22,1) both!important;
}
.reading-cards.is-deck-shuffling .luna-reading-card:nth-child(3n+2){
  animation:lunaPileShuffleB .82s cubic-bezier(.2,.72,.22,1) both!important;
}
.reading-cards.is-deck-shuffling .luna-reading-card:nth-child(3n){
  animation:lunaPileShuffleC .82s cubic-bezier(.2,.72,.22,1) both!important;
}
@keyframes lunaPileShuffleA{
  0%,100%{transform:translate(0,0) rotate(-4deg)}
  30%{transform:translate(-34px,-5px) rotate(-10deg)}
  65%{transform:translate(25px,5px) rotate(7deg)}
}
@keyframes lunaPileShuffleB{
  0%,100%{transform:translate(0,0) rotate(3deg)}
  28%{transform:translate(36px,4px) rotate(10deg)}
  66%{transform:translate(-27px,-4px) rotate(-7deg)}
}
@keyframes lunaPileShuffleC{
  0%,100%{transform:translate(0,0) rotate(-1deg)}
  34%{transform:translate(-23px,7px) rotate(6deg)}
  70%{transform:translate(30px,-6px) rotate(-8deg)}
}

/* Return to the selected spread after shuffling. */
.reading-cards.is-spreading .luna-reading-card{
  animation:lunaSpreadBack .48s ease both!important;
}
@keyframes lunaSpreadBack{
  from{opacity:.72;filter:drop-shadow(0 0 16px rgba(239,211,107,.72))}
  to{opacity:1;filter:none}
}

@media(prefers-reduced-motion:reduce){
  .reading-cards.is-shuffle-glow .luna-reading-card,
  .reading-cards.is-gathering .luna-reading-card,
  .reading-cards.is-deck-shuffling .luna-reading-card,
  .reading-cards.is-spreading .luna-reading-card{
    animation:none!important;
    transform:none!important;
    transition:none!important;
  }
  .reading-cards .luna-reading-card.is-flipped.is-reversed .luna-direct-card-image{
    animation:none!important;
    transform:none!important;
  }
}


/* LUNA Tarot — manual flip + sequential Reveal All */
.reveal-all-button{
  margin-left:.55rem;
  position:relative;
  overflow:hidden;
}
.reveal-all-button:not(:disabled){
  border-color:rgba(239,211,107,.72);
  box-shadow:0 0 14px rgba(239,211,107,.18);
}
.reveal-all-button:not(:disabled)::after{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.14) 48%,transparent 70%);
  transform:translateX(-120%);
  animation:lunaRevealAllSheen 2.8s ease-in-out infinite;
}
@keyframes lunaRevealAllSheen{
  0%,55%{transform:translateX(-120%)}
  82%,100%{transform:translateX(120%)}
}
@media(max-width:600px){
  .reveal-all-button{margin-left:0;margin-top:.45rem;}
}
@media(prefers-reduced-motion:reduce){
  .reveal-all-button::after{animation:none!important;}
}


/* FINAL robust shuffle / reveal-all */
#revealAllCards.reveal-all-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  min-width:150px;
  min-height:44px;
  margin:14px auto 18px!important;
  position:relative!important;
  z-index:100!important;
}
#revealAllCards[hidden]{display:none!important}
.reading-cards.luna-shuffle-running{overflow:visible!important}
.reading-cards .luna-reading-card.luna-shuffle-lit{
  filter:drop-shadow(0 0 9px rgba(239,211,107,.95))
         drop-shadow(0 0 20px rgba(125,211,252,.78))
         drop-shadow(0 0 31px rgba(185,125,255,.42))!important;
}
.luna-reading-card.luna-auto-flip .luna-direct-card-image{
  animation:lunaPaperFlip .42s cubic-bezier(.2,.7,.2,1) both!important;
}
@keyframes lunaPaperFlip{
  0%{transform:perspective(700px) rotateY(0deg) scale(1)}
  45%{transform:perspective(700px) rotateY(82deg) scale(.98)}
  55%{transform:perspective(700px) rotateY(-82deg) scale(.98)}
  100%{transform:perspective(700px) rotateY(0deg) scale(1)}
}
/* =========================================================
   LUNA LENORMAND
   ルノルマン専用
   css/style.css の一番下へ追加
   ========================================================= */


/* ---------- Card Area ---------- */

.lenormand-reading-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 14px;
  margin-top: 24px;
  overflow: visible;
}


/* ---------- Card ---------- */

.lenormand-reading-card {
  position: relative;

  width: clamp(112px, 14vw, 165px);
  aspect-ratio: 2 / 3;

  padding: 0;
  border: 0;
  border-radius: 10px;

  background: transparent;

  cursor: pointer;

  transition:
    transform 0.4s ease,
    filter 0.3s ease;
}


/* ---------- Card Image ---------- */

.lenormand-direct-card-image {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  border-radius: 10px;

  border:
    1px solid
    rgba(196, 178, 123, 0.46);

  background: #07101c;

  box-shadow:
    0 10px 26px
    rgba(0, 0, 0, 0.34);

  backface-visibility: hidden;
}


/* ---------- Drawn Card Glow ---------- */

.lenormand-reading-card.is-drawn:not(.is-flipped) {
  filter:
    drop-shadow(
      0 0 9px
      rgba(198, 184, 132, 0.22)
    );
}


.lenormand-reading-card.is-drawn:not(.is-flipped):hover {
  transform: translateY(-6px);

  filter:
    drop-shadow(
      0 0 14px
      rgba(211, 197, 145, 0.42)
    );
}


/* ---------- Flip ---------- */

.lenormand-reading-card.is-flipped
.lenormand-direct-card-image {
  animation:
    lunaLenormandFlip
    0.42s
    ease
    both;
}


@keyframes lunaLenormandFlip {

  0% {
    opacity: 0.2;

    transform:
      perspective(700px)
      rotateY(82deg);
  }

  100% {
    opacity: 1;

    transform:
      perspective(700px)
      rotateY(0deg);
  }

}


/* =========================================================
   SHUFFLE
   ========================================================= */


/* Light appears before gathering */

.lenormand-reading-cards.is-shuffling
.lenormand-reading-card {

  filter:
    drop-shadow(
      0 0 12px
      rgba(195, 185, 145, 0.28)
    );

}


/* Gathering */

.lenormand-reading-cards.is-gathering
.lenormand-reading-card {

  transition:
    transform 0.5s ease,
    filter 0.3s ease;

}


/* Mixing */

.lenormand-reading-cards.is-mixing
.lenormand-reading-card:nth-child(3n + 1) {

  animation:
    lunaLenMixA
    0.68s
    ease-in-out
    1;

}


.lenormand-reading-cards.is-mixing
.lenormand-reading-card:nth-child(3n + 2) {

  animation:
    lunaLenMixB
    0.68s
    ease-in-out
    1;

}


.lenormand-reading-cards.is-mixing
.lenormand-reading-card:nth-child(3n) {

  animation:
    lunaLenMixC
    0.68s
    ease-in-out
    1;

}


@keyframes lunaLenMixA {

  50% {

    transform:
      translate(25px, -8px)
      rotate(5deg);

  }

}


@keyframes lunaLenMixB {

  50% {

    transform:
      translate(-25px, 8px)
      rotate(-5deg);

  }

}


@keyframes lunaLenMixC {

  50% {

    transform:
      translate(8px, 14px)
      rotate(3deg);

  }

}


/* =========================================================
   SPREADS
   ========================================================= */


/* 9 cards = 3 × 3 */

.lenormand-spread.spread-9 {

  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(100px, 150px)
    );

  justify-content: center;

  gap: 12px;

}


/* Grand Tableau */

.lenormand-spread.spread-36 {

  display: grid;

  grid-template-columns:
    repeat(
      8,
      minmax(72px, 1fr)
    );

  gap: 7px;

  max-width: 980px;

  margin-left: auto;
  margin-right: auto;

}


.lenormand-spread.spread-36
.lenormand-reading-card {

  width: 100%;

  aspect-ratio: 2 / 3;

}


/* =========================================================
   RESULT
   ========================================================= */

.lenormand-reading-result {

  margin-top: 32px;

}


.lenormand-reading-result h3 {

  margin:
    24px
    0
    8px;

  color: #d8c98d;

  font-weight: 600;

  letter-spacing: 0.03em;

}


.lenormand-reading-result p {

  margin: 0;

  color: #d8dde6;

  line-height: 1.85;

}


/* ---------- Result Cards ---------- */

.lenormand-result-cards {

  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(180px, 1fr)
    );

  gap: 10px;

  margin-top: 26px;

}


.lenormand-result-card {

  padding:
    12px
    14px;

  border:
    1px solid
    rgba(196, 178, 123, 0.20);

  border-radius: 10px;

  background:
    rgba(6, 16, 29, 0.48);

}


.lenormand-result-card strong {

  display: block;

  margin-bottom: 6px;

  color: #e3d49c;

}


.lenormand-result-card span {

  color: #aeb9c7;

  font-size: 0.88rem;

  line-height: 1.55;

}


/* =========================================================
   REVEAL ALL BUTTON
   ========================================================= */

#revealAllCards {

  border:
    1px solid
    rgba(198, 181, 124, 0.55);

  background:
    rgba(8, 20, 35, 0.82);

  color: #e4d59e;

}


#revealAllCards:hover:not(:disabled) {

  border-color:
    rgba(221, 202, 139, 0.85);

  box-shadow:
    0 0 16px
    rgba(199, 182, 123, 0.15);

}


#revealAllCards:disabled {

  opacity: 0.42;

  cursor: default;

}


/* =========================================================
   RTL
   Arabic / Hebrew
   ========================================================= */

html[dir="rtl"]
.lenormand-reading-result {

  text-align: right;

}


html[dir="rtl"]
.lenormand-result-card {

  text-align: right;

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

  .lenormand-reading-card {

    width:
      clamp(
        88px,
        27vw,
        125px
      );

  }


  .lenormand-spread.spread-9 {

    grid-template-columns:
      repeat(
        3,
        minmax(80px, 1fr)
      );

    gap: 7px;

  }


  .lenormand-spread.spread-36 {

    grid-template-columns:
      repeat(
        4,
        minmax(55px, 1fr)
      );

    gap: 5px;

  }


  .lenormand-spread.spread-36
  .lenormand-reading-card {

    width: 100%;

  }

}


/* =========================================================
   Reduced Motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .lenormand-reading-card,
  .lenormand-reading-card * {

    animation: none !important;

    transition: none !important;

  }

}
/* =========================================================
   LUNA LENORMAND
   css/style.css の一番下へ追加
   ========================================================= */

.lenormand-reading-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 24px;
  overflow: visible;
}

.lenormand-reading-card {
  position: relative;
  width: clamp(112px, 14vw, 165px);
  aspect-ratio: 2 / 3;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition:
    transform 0.4s ease,
    filter 0.3s ease;
}

.lenormand-direct-card-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(196, 178, 123, 0.46);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.34);
  background: #07101c;
}

.lenormand-reading-card.is-drawn:not(.is-flipped):hover {
  transform: translateY(-6px);
  filter:
    drop-shadow(
      0 0 14px
      rgba(211, 197, 145, 0.42)
    );
}


/* =========================
   カードをめくる
   ========================= */

.lenormand-reading-card.is-flipped
.lenormand-direct-card-image {
  animation: lunaLenormandFlip 0.42s ease both;
}

@keyframes lunaLenormandFlip {
  0% {
    opacity: 0.2;
    transform:
      perspective(700px)
      rotateY(82deg);
  }

  100% {
    opacity: 1;
    transform:
      perspective(700px)
      rotateY(0deg);
  }
}


/* =========================
   シャッフル
   ========================= */

.lenormand-reading-cards.is-shuffling
.lenormand-reading-card {
  filter:
    drop-shadow(
      0 0 12px
      rgba(195, 185, 145, 0.28)
    );
}

.lenormand-reading-cards.is-gathering
.lenormand-reading-card {
  transition:
    transform 0.5s ease,
    filter 0.3s ease;
}

.lenormand-reading-cards.is-mixing
.lenormand-reading-card:nth-child(3n + 1) {
  animation:
    lunaLenMixA
    0.68s
    ease-in-out
    1;
}

.lenormand-reading-cards.is-mixing
.lenormand-reading-card:nth-child(3n + 2) {
  animation:
    lunaLenMixB
    0.68s
    ease-in-out
    1;
}

.lenormand-reading-cards.is-mixing
.lenormand-reading-card:nth-child(3n) {
  animation:
    lunaLenMixC
    0.68s
    ease-in-out
    1;
}

@keyframes lunaLenMixA {
  50% {
    transform:
      translate(25px, -8px)
      rotate(5deg);
  }
}

@keyframes lunaLenMixB {
  50% {
    transform:
      translate(-25px, 8px)
      rotate(-5deg);
  }
}

@keyframes lunaLenMixC {
  50% {
    transform:
      translate(8px, 14px)
      rotate(3deg);
  }
}


/* =========================
   9枚スプレッド
   ========================= */

.lenormand-spread.spread-9 {
  display: grid;
  grid-template-columns:
    repeat(
      3,
      minmax(100px, 150px)
    );
  justify-content: center;
  gap: 12px;
}


/* =========================
   36枚 GRAND TABLEAU
   ========================= */

.lenormand-spread.spread-36 {
  display: grid;
  grid-template-columns:
    repeat(
      8,
      minmax(72px, 1fr)
    );
  gap: 7px;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

.lenormand-spread.spread-36
.lenormand-reading-card {
  width: 100%;
  aspect-ratio: 2 / 3;
}


/* =========================
   結果
   ========================= */

.lenormand-reading-result {
  margin-top: 32px;
}

.lenormand-reading-result h3 {
  margin: 24px 0 8px;
  color: #d8c98d;
}

.lenormand-reading-result p {
  color: #d8dde6;
  line-height: 1.85;
}

.lenormand-result-cards {
  display: grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(180px, 1fr)
    );
  gap: 10px;
  margin-top: 26px;
}

.lenormand-result-card {
  padding: 12px 14px;
  border:
    1px solid
    rgba(196, 178, 123, 0.20);
  border-radius: 10px;
  background:
    rgba(6, 16, 29, 0.48);
}

.lenormand-result-card strong {
  display: block;
  margin-bottom: 6px;
  color: #e3d49c;
}

.lenormand-result-card span {
  color: #aeb9c7;
  font-size: 0.88rem;
}


/* =========================
   RTL
   Arabic / Hebrew
   ========================= */

html[dir="rtl"]
.lenormand-reading-result,

html[dir="rtl"]
.lenormand-result-card {
  text-align: right;
}


/* =========================
   スマホ
   ========================= */

@media (max-width: 760px) {

  .lenormand-reading-card {
    width:
      clamp(
        88px,
        27vw,
        125px
      );
  }

  .lenormand-spread.spread-9 {
    grid-template-columns:
      repeat(
        3,
        minmax(80px, 1fr)
      );
    gap: 7px;
  }

  .lenormand-spread.spread-36 {
    grid-template-columns:
      repeat(
        4,
        minmax(55px, 1fr)
      );
    gap: 5px;
  }

  .lenormand-spread.spread-36
  .lenormand-reading-card {
    width: 100%;
  }
}


/* =========================
   動きを減らす設定
   ========================= */

@media (prefers-reduced-motion: reduce) {

  .lenormand-reading-card,
  .lenormand-reading-card * {
    animation: none !important;
    transition: none !important;
  }
}
/* =========================================================
   LUNA — TAROT + LENORMAND
   RESULT / SHUFFLE / DEAL FX
   css/style.css の一番下へ追加
   ========================================================= */


/* =========================================================
   共通：シャッフル中の月光＋金色発光
   ========================================================= */

#cards.luna-shuffle-running .luna-reading-card,
#cards.luna-shuffle-running .lenormand-reading-card,
.luna-shuffle-lit {
  filter:
    drop-shadow(0 0 8px rgba(123, 180, 255, 0.42))
    drop-shadow(0 0 18px rgba(222, 196, 113, 0.34));
}

#cards.luna-shuffle-running {
  overflow: visible !important;
  isolation: isolate;
}

/* Deal from the gathered pile one card at a time; glow after the last card lands. */
#cards.luna-deal-sequence .is-drawn,
#cards.luna-deal-complete .is-drawn {
  animation: none !important;
  opacity: 1 !important;
}
#cards.luna-deal-sequence .is-drawn { pointer-events: none !important; }
#drawCards[hidden] { display: none !important; }
#cards.luna-deal-complete .luna-shuffle-lit:not(.is-flipped) {
  box-shadow: 0 0 0 2px #d7b966, 0 0 16px #72b9dfbb, 0 0 30px #cda65c99 !important;
  filter: saturate(1.24) drop-shadow(0 0 10px #8bc2e0a8) !important;
}


/* =========================================================
   共通：DRAW後
   カードが順番に配られて並ぶ
   ========================================================= */

.tarot-spread .luna-reading-card.is-drawn,
.lenormand-spread .lenormand-reading-card.is-drawn {
  opacity: 0;
  animation:
    lunaDealCard
    0.58s
    cubic-bezier(.2, .76, .2, 1)
    forwards;
}


/* 1枚目 */

.tarot-spread
.luna-reading-card.is-drawn:nth-child(1),

.lenormand-spread
.lenormand-reading-card.is-drawn:nth-child(1) {
  animation-delay: 0.04s;
}


/* 2枚目 */

.tarot-spread
.luna-reading-card.is-drawn:nth-child(2),

.lenormand-spread
.lenormand-reading-card.is-drawn:nth-child(2) {
  animation-delay: 0.11s;
}


/* 3枚目 */

.tarot-spread
.luna-reading-card.is-drawn:nth-child(3),

.lenormand-spread
.lenormand-reading-card.is-drawn:nth-child(3) {
  animation-delay: 0.18s;
}


/* 4枚目 */

.tarot-spread
.luna-reading-card.is-drawn:nth-child(4),

.lenormand-spread
.lenormand-reading-card.is-drawn:nth-child(4) {
  animation-delay: 0.25s;
}


/* 5枚目 */

.tarot-spread
.luna-reading-card.is-drawn:nth-child(5),

.lenormand-spread
.lenormand-reading-card.is-drawn:nth-child(5) {
  animation-delay: 0.32s;
}


/* 6枚目 */

.tarot-spread
.luna-reading-card.is-drawn:nth-child(6),

.lenormand-spread
.lenormand-reading-card.is-drawn:nth-child(6) {
  animation-delay: 0.39s;
}


/* 7枚目 */

.tarot-spread
.luna-reading-card.is-drawn:nth-child(7),

.lenormand-spread
.lenormand-reading-card.is-drawn:nth-child(7) {
  animation-delay: 0.46s;
}


/* 8枚目 */

.tarot-spread
.luna-reading-card.is-drawn:nth-child(8),

.lenormand-spread
.lenormand-reading-card.is-drawn:nth-child(8) {
  animation-delay: 0.53s;
}


/* 9枚目 */

.tarot-spread
.luna-reading-card.is-drawn:nth-child(9),

.lenormand-spread
.lenormand-reading-card.is-drawn:nth-child(9) {
  animation-delay: 0.60s;
}


/* タロット10枚目 */

.tarot-spread
.luna-reading-card.is-drawn:nth-child(10) {
  animation-delay: 0.67s;
}


@keyframes lunaDealCard {

  0% {
    opacity: 0;
    transform:
      translate(0, -42px)
      scale(0.82)
      rotate(-2deg);

    filter:
      brightness(0.65);
  }

  65% {
    opacity: 1;

    transform:
      translate(0, 5px)
      scale(1.025);

    filter:
      brightness(1.12);
  }

  100% {
    opacity: 1;

    transform:
      translate(0, 0)
      scale(1);

    filter:
      brightness(1);
  }
}


/* =========================================================
   共通：めくれるカードを発光
   青い月光＋アンティークゴールド
   ========================================================= */

.luna-reading-card.is-drawable,

.lenormand-reading-card.is-drawn:not(.is-flipped) {
  box-shadow:
    0 0 0 1px
      rgba(224, 199, 120, 0.35),

    0 0 15px
      rgba(89, 158, 255, 0.25),

    0 0 28px
      rgba(221, 193, 105, 0.13);

  border-radius: 11px;
}


.luna-reading-card.is-drawable:hover,

.lenormand-reading-card.is-drawn:not(.is-flipped):hover {
  filter:
    drop-shadow(
      0 0 9px
      rgba(104, 173, 255, 0.45)
    )

    drop-shadow(
      0 0 17px
      rgba(228, 201, 117, 0.36)
    );

  transform:
    translateY(-6px);
}


/* =========================================================
   TAROT RESULT

   これまでの縦長表示ではなく
   ルノルマンのように一覧で見やすくする
   ========================================================= */

#result {
  width: 100%;
}


#result > h2 {
  grid-column: 1 / -1;
  margin:
    4px
    0
    10px;
}


/* 個別カードを横並びグリッド */

#result:has(> .result-card) {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(220px, 1fr)
    );

  gap: 12px;

  align-items: stretch;
}


/* 個別結果カード */

#result > .result-card {
  margin: 0 !important;

  padding:
    15px
    16px !important;

  min-width: 0;

  border:
    1px solid
    rgba(196, 178, 123, 0.24);

  border-radius:
    12px;

  background:
    rgba(5, 15, 29, 0.58);

  box-shadow:
    none;
}


#result > .result-card h3 {
  margin:
    0
    0
    8px;

  color:
    #ddcb87;

  font-size:
    1rem;
}


#result > .result-card
.result-card-name {
  display: block;

  margin-bottom:
    5px;

  color:
    #eadb9e;

  font-weight:
    650;

  line-height:
    1.35;
}


/* 正位置 / 逆位置 */

#result > .result-card
.result-orientation {
  display:
    inline-flex;

  margin:
    0
    0
    8px;

  padding:
    2px
    8px;

  border:
    1px solid
    rgba(197, 180, 121, 0.28);

  border-radius:
    999px;

  font-size:
    0.76rem;

  opacity:
    0.88;
}


/* 個別解説 */

#result > .result-card p {
  margin:
    0
    0
    10px;

  line-height:
    1.62;

  font-size:
    0.91rem;

  color:
    #c8d0dc;
}


/* カード単体コピー */

#result > .result-card
.copy-card-button {
  margin-top:
    auto;

  font-size:
    0.78rem;

  padding:
    6px
    10px;
}


/* =========================================================
   TAROT 全体リーディング

   個別カード一覧の下に1つの大きな結果欄
   ========================================================= */

#result > .overall-reading {
  grid-column:
    1 / -1;

  margin-top:
    8px;

  padding:
    18px
    20px;

  border:
    1px solid
    rgba(205, 185, 116, 0.32);

  border-radius:
    13px;

  background:
    rgba(7, 20, 37, 0.72);
}


#result > .overall-reading h3 {
  color:
    #dfca7e;

  margin:
    0
    0
    9px;
}


#result > .overall-reading p {
  margin:
    0;

  line-height:
    1.8;
}


/* 全体コピー */

#result > .copy-all-button {
  grid-column:
    1 / -1;

  justify-self:
    start;
}


/* =========================================================
   LENORMAND CARD AREA
   ========================================================= */

.lenormand-reading-cards {
  display:
    flex;

  flex-wrap:
    wrap;

  justify-content:
    center;

  align-items:
    flex-start;

  gap:
    14px;

  margin-top:
    24px;

  overflow:
    visible;
}


.lenormand-reading-card {
  position:
    relative;

  width:
    clamp(
      112px,
      14vw,
      165px
    );

  aspect-ratio:
    2 / 3;

  padding:
    0;

  border:
    0;

  background:
    transparent;

  cursor:
    pointer;

  transition:
    transform 0.4s ease,
    filter 0.3s ease,
    box-shadow 0.3s ease;
}


.lenormand-direct-card-image {
  position:
    absolute;

  inset:
    0;

  width:
    100%;

  height:
    100%;

  display:
    block;

  object-fit:
    cover;

  border-radius:
    10px;

  border:
    1px solid
    rgba(196, 178, 123, 0.46);

  background:
    #07101c;

  box-shadow:
    0 10px 26px
    rgba(0, 0, 0, 0.34);
}


/* =========================================================
   LENORMAND FLIP
   ========================================================= */

.lenormand-reading-card.is-flipped
.lenormand-direct-card-image {
  animation:
    lunaLenFlip
    0.42s
    ease
    both;
}


@keyframes lunaLenFlip {

  0% {
    opacity:
      0.2;

    transform:
      perspective(700px)
      rotateY(82deg);
  }

  100% {
    opacity:
      1;

    transform:
      perspective(700px)
      rotateY(0deg);
  }
}


/* =========================================================
   LENORMAND 9 CARD
   ========================================================= */

.lenormand-spread.spread-9 {
  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(100px, 150px)
    );

  justify-content:
    center;

  gap:
    12px;
}


/* =========================================================
   LENORMAND 36
   GRAND TABLEAU

   8 × 4
   ＋
   下4枚
   ========================================================= */

.lenormand-spread.spread-36 {
  display:
    grid;

  grid-template-columns:
    repeat(
      8,
      minmax(72px, 1fr)
    );

  gap:
    7px;

  max-width:
    980px;

  margin-left:
    auto;

  margin-right:
    auto;
}


.lenormand-spread.spread-36
.lenormand-reading-card {
  width:
    100%;
}


/* 33〜36枚目を下段中央へ */

.lenormand-spread.spread-36
.lenormand-reading-card:nth-child(33) {
  grid-column:
    3;
}


.lenormand-spread.spread-36
.lenormand-reading-card:nth-child(34) {
  grid-column:
    4;
}


.lenormand-spread.spread-36
.lenormand-reading-card:nth-child(35) {
  grid-column:
    5;
}


.lenormand-spread.spread-36
.lenormand-reading-card:nth-child(36) {
  grid-column:
    6;
}


/* =========================================================
   LENORMAND RESULT
   ========================================================= */

.lenormand-reading-result {
  margin-top:
    32px;
}


.lenormand-reading-result h3 {
  margin:
    22px
    0
    8px;

  color:
    #d8c98d;
}


.lenormand-reading-result p {
  margin:
    0;

  color:
    #d8dde6;

  line-height:
    1.8;
}


/* 結果カード一覧 */

.lenormand-result-cards {
  display:
    grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(180px, 1fr)
    );

  gap:
    10px;

  margin-top:
    25px;
}


.lenormand-result-card {
  padding:
    12px
    14px;

  border:
    1px solid
    rgba(196, 178, 123, 0.20);

  border-radius:
    10px;

  background:
    rgba(6, 16, 29, 0.48);
}


.lenormand-result-card strong {
  display:
    block;

  margin-bottom:
    5px;

  color:
    #e3d49c;
}


.lenormand-result-card span {
  color:
    #aeb9c7;

  font-size:
    0.88rem;

  line-height:
    1.55;
}


/* =========================================================
   RTL
   Arabic / Hebrew
   ========================================================= */

html[dir="rtl"]
.lenormand-reading-result,

html[dir="rtl"]
.lenormand-result-card,

html[dir="rtl"]
#result > .result-card,

html[dir="rtl"]
#result > .overall-reading {
  text-align:
    right;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

  /* Tarot result */

  #result:has(> .result-card) {
    grid-template-columns:
      1fr
      1fr;

    gap:
      8px;
  }


  #result > .result-card {
    padding:
      11px
      12px !important;
  }


  #result > .result-card p {
    font-size:
      0.84rem;
  }


  /* Lenormand */

  .lenormand-reading-card {
    width:
      clamp(
        88px,
        27vw,
        125px
      );
  }


  .lenormand-spread.spread-36 {
    grid-template-columns:
      repeat(
        4,
        minmax(55px, 1fr)
      );

    gap:
      5px;
  }


  /* スマホではGrand Tableauの
     下4枚固定位置を解除 */

  .lenormand-spread.spread-36
  .lenormand-reading-card:nth-child(n) {
    grid-column:
      auto;
  }
}


/* 小さいスマホ */

@media (max-width: 480px) {

  #result:has(> .result-card) {
    grid-template-columns:
      1fr;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .luna-reading-card,
  .luna-reading-card *,

  .lenormand-reading-card,
  .lenormand-reading-card * {
    animation:
      none !important;

    transition:
      none !important;
  }
}

/* Smaller paint area on mobile; keep the three shuffle stages. */
@media (max-width: 700px) {
 #cards.luna-shuffle-running .luna-reading-card,
 #cards.luna-shuffle-running .lenormand-reading-card,
 #cards .luna-shuffle-lit,
 #cards.luna-deal-complete .luna-shuffle-lit:not(.is-flipped) {
   filter: none !important;
   box-shadow: 0 0 0 1px #d7b966 !important;
 }
 #cards .luna-direct-card-image, #cards .lenormand-direct-card-image {
   filter: none !important;
   box-shadow: none !important;
 }
 #cards .luna-reading-card.is-flipped .luna-direct-card-image,
 #cards .lenormand-reading-card.is-flipped .lenormand-direct-card-image {
   animation-duration: .22s !important;
 }
}

@media (max-width: 700px) {
 #cards .luna-reading-card, #cards .lenormand-reading-card {
   filter:none !important; text-shadow:none !important;
 }
}

.luna-result-note{margin:24px auto 8px;padding:16px 18px;max-width:58rem;border:1px solid rgba(215,185,102,.5);border-radius:12px;background:rgba(215,185,102,.08);color:#e9dfbf;font-size:clamp(16px,2vw,19px);line-height:1.8;text-align:center;overflow-wrap:anywhere}

/* The last touched card and its reading stay visibly connected. */
#result > .result-card.luna-result-selected,
#result .lenormand-result-card.luna-result-selected{
 background:linear-gradient(145deg,rgba(43,81,94,.88),rgba(23,47,60,.96)) !important;
 border:2px solid #ead18a !important;
 box-shadow:0 0 0 2px rgba(125,211,252,.24),0 8px 20px rgba(0,0,0,.18) !important;
 color:#fff2cd !important;
}
#result > .result-card:focus-visible,
#result .lenormand-result-card:focus-visible{outline:2px solid #a8dbea;outline-offset:3px}
#cards .luna-reading-card.luna-touched-card,
#cards .lenormand-reading-card.luna-touched-card{
 outline:2px solid #ead18a !important;outline-offset:2px;
 box-shadow:0 0 0 3px rgba(125,211,252,.42) !important;
}