.yozo-tarot-root{
  --yz-bg:#1b1633;
  --yz-panel:#241d46;
  --yz-panel2:#2b234f;
  --yz-text:#ece6d9;
  --yz-muted:#a89bc9;
  --yz-gold:#c9a66b;
  --yz-gold-soft:#e4c68c;
  --yz-line:#3a3266;
  --yz-reversed:#d98c8c;
  max-width: 780px;
  margin: 0 auto;
  padding: 20px 14px 40px;
  background: var(--yz-bg);
  color: var(--yz-text);
  border-radius: 16px;
  font-family: "Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  box-sizing: border-box;
}
.yozo-tarot-root *{ box-sizing:border-box; }
.yozo-tarot-root .yz-screen{ display:none; }
.yozo-tarot-root .yz-screen.active{ display:block; animation: yzFade .4s ease both; }
@keyframes yzFade{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }

.yozo-tarot-root h2.yz-h{ font-size:1.2rem; margin:0 0 14px; text-align:center; }
.yozo-tarot-root .yz-back{ display:inline-block; margin-bottom:14px; color:var(--yz-muted); font-size:0.82rem; cursor:pointer; }
.yozo-tarot-root .yz-back:hover{ color:var(--yz-gold); }

.yz-spread-list{ display:flex; flex-direction:column; gap:12px; }
.yz-spread-card{
  background: linear-gradient(155deg, var(--yz-panel), var(--yz-panel2));
  border:1px solid var(--yz-line);
  border-radius:14px;
  padding:14px 16px;
  cursor:pointer;
  color:inherit;
  text-align:left;
  width:100%;
  font:inherit;
  position:relative;
}
.yz-spread-card:disabled, .yz-spread-card.yz-locked{ opacity:.55; }
.yz-spread-card .yz-name{ font-weight:700; font-size:1.02rem; margin:0 0 4px; }
.yz-spread-card .yz-desc{ font-size:0.8rem; color:var(--yz-muted); margin:0; line-height:1.5;}
.yz-spread-card .yz-badge{
  position:absolute; top:12px; right:14px;
  font-size:0.68rem; padding:2px 9px; border-radius:999px;
  border:1px solid var(--yz-gold); color:var(--yz-gold);
}
.yz-spread-card .yz-badge.yz-lock{ border-color:var(--yz-reversed); color:var(--yz-reversed); }
.yz-lock-msg{ font-size:0.76rem; margin-top:6px; color:var(--yz-reversed); }
.yz-lock-msg a{ color:var(--yz-gold); }

.yz-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-size:0.95rem; padding:11px 24px; border-radius:999px;
  border:1px solid var(--yz-gold); background:transparent; color:var(--yz-gold);
  cursor:pointer;
}
.yz-btn.yz-primary{ background:linear-gradient(135deg,var(--yz-gold),var(--yz-gold-soft)); color:#241a06; border-color:transparent; }
.yz-btn:disabled{ opacity:.4; cursor:default; }
.yz-actions{ display:flex; justify-content:center; gap:10px; margin-top:22px; flex-wrap:wrap; }

.yz-deck-stack{ position:relative; width:110px; height:166px; margin:20px auto; }
.yz-deck-stack .yz-layer{ position:absolute; inset:0; border-radius:10px; background:linear-gradient(150deg,#2c2352,#140f28); border:1px solid var(--yz-gold); }
.yz-deck-stack.yz-shuffling .yz-layer:nth-child(1){ animation: yzShufA .5s ease-in-out infinite; }
.yz-deck-stack.yz-shuffling .yz-layer:nth-child(2){ animation: yzShufB .46s ease-in-out infinite; }
.yz-deck-stack.yz-shuffling .yz-layer:nth-child(3){ animation: yzShufC .54s ease-in-out infinite; }
@keyframes yzShufA{ 0%,100%{transform:translate(3px,3px) rotate(-3deg);} 50%{transform:translate(-26px,-10px) rotate(-18deg);} }
@keyframes yzShufB{ 0%,100%{transform:translate(1px,1px) rotate(2deg);} 50%{transform:translate(24px,10px) rotate(16deg);} }
@keyframes yzShufC{ 0%,100%{transform:translate(-2px,4px) rotate(1deg);} 50%{transform:translate(6px,-16px) rotate(-8deg);} }
@media (prefers-reduced-motion: reduce){
  .yz-deck-stack.yz-shuffling .yz-layer{ animation:none !important; }
}
.yz-hint{ text-align:center; color:var(--yz-muted); font-size:0.85rem; margin-top:6px; }

/* 相談事入力 */
.yz-concern-box{ background:var(--yz-panel); border:1px solid var(--yz-line); border-radius:14px; padding:16px; margin-bottom:6px; }
.yz-concern-lead{ margin:0 0 10px; font-size:0.85rem; color:var(--yz-muted); line-height:1.6; }
.yz-concern-row{ display:flex; gap:8px; align-items:flex-start; }
.yz-concern-textarea{ flex:1; min-height:96px; resize:vertical; background:var(--yz-panel2); border:1px solid var(--yz-line); border-radius:10px; color:var(--yz-text); font-family:inherit; font-size:0.88rem; padding:10px 12px; }
.yz-concern-textarea:focus{ outline:1px solid var(--yz-gold); }
.yz-mic-btn{ flex:0 0 auto; width:44px; height:44px; border-radius:50%; border:1px solid var(--yz-gold); background:var(--yz-panel2); color:var(--yz-gold); font-size:1.1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.yz-mic-btn.yz-listening{ background:var(--yz-gold); color:#241a06; animation: yzMicPulse 1.1s ease infinite; }
@keyframes yzMicPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(201,166,107,.5);} 50%{ box-shadow:0 0 0 8px rgba(201,166,107,0);} }
.yz-mic-status{ font-size:0.72rem; color:var(--yz-muted); margin-top:6px; min-height:1.2em; }

/* タップ開封のヒント表示 */
.yz-slot{ cursor:pointer; }
.yz-slot .yz-frame::after{
  content:"タップ"; position:absolute; bottom:-2px; left:50%; transform:translateX(-50%);
  font-size:0.5rem; color:var(--yz-gold-soft); background:rgba(20,15,40,.75);
  padding:1px 6px; border-radius:999px; opacity:.9; pointer-events:none;
}
.yz-slot.yz-revealed .yz-frame::after{ display:none; }
.yz-reading-item{ display:none; }
.yz-reading-item.yz-shown{ display:block; animation: yzFade .4s ease both; }

/* 総括鑑定 */
.yz-summary-box{ margin-top:22px; background:linear-gradient(155deg, var(--yz-panel2), var(--yz-panel)); border:1px solid var(--yz-gold); border-radius:14px; padding:16px 18px; }
.yz-summary-box h3{ font-size:1.0rem; margin:0 0 8px; color:var(--yz-gold-soft); }
.yz-summary-box .yz-concern-echo{ font-size:0.76rem; color:var(--yz-muted); margin-bottom:8px; }
.yz-summary-box .yz-summary-body{ font-size:0.9rem; line-height:1.85; white-space:pre-wrap; }

.yz-pick-progress{ text-align:center; color:var(--yz-muted); font-size:0.85rem; margin-bottom:12px; }
.yz-pick-progress b{ color:var(--yz-gold); }
.yz-pick-strip-wrap{ overflow-x:auto; padding:8px 2px 18px; margin:0 -14px; }
.yz-pick-strip{ display:flex; gap:5px; padding:0 14px; width:max-content; }
.yz-pick-card{ flex:0 0 auto; width:42px; height:66px; border-radius:6px; background:linear-gradient(150deg,#2c2352,#140f28); border:1px solid var(--yz-gold); cursor:pointer; transition:transform .15s ease, opacity .25s ease; }
.yz-pick-card:active{ transform:translateY(-6px); }
.yz-pick-card.yz-picked{ opacity:0; pointer-events:none; transform:scale(.6); }
.yz-pick-card.yz-disabled{ pointer-events:none; opacity:.3; }

.yz-layout-scroll{ overflow-x:auto; margin:20px -14px 6px; padding:4px 14px 24px; }
.yz-layout-box{ position:relative; margin:0 auto; }
.yz-layout-box.one{ width:min(220px,58vw); aspect-ratio:4/6.4; }
.yz-layout-box.three{ width:min(540px,92vw); aspect-ratio:12/6.4; min-width:320px; }
.yz-layout-box.seven{ width:min(560px,92vw); aspect-ratio:1/1.05; min-width:420px; }
.yz-layout-box.hexagram{ width:min(560px,92vw); aspect-ratio:1/1.15; min-width:420px; }
.yz-layout-box.celtic{ width:min(760px,92vw); aspect-ratio:12/8; min-width:620px; }

.yz-slot{ position:absolute; transform:translate(-50%,-50%); width:14%; display:flex; flex-direction:column; align-items:center; gap:5px; }
.yz-slot .yz-label{ font-size:0.6rem; color:var(--yz-muted); text-align:center; line-height:1.3; max-width:96px; }
.yz-slot .yz-frame{ width:100%; aspect-ratio:5/8; position:relative; perspective:800px; }
.yz-slot .yz-flip{ position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .7s cubic-bezier(.4,.2,.2,1); }
.yz-slot.yz-revealed .yz-flip{ transform:rotateY(180deg); }
.yz-slot .yz-face{ position:absolute; inset:0; border-radius:7px; backface-visibility:hidden; border:1px solid var(--yz-gold); overflow:hidden; display:flex; align-items:center; justify-content:center; background:linear-gradient(150deg,#2c2352,#140f28); }
.yz-slot .yz-face.yz-front{ transform:rotateY(180deg); background:linear-gradient(160deg,#352a5c,#1c1636); }
.yz-slot .yz-face.yz-front.yz-rev{ transform:rotateY(180deg) rotate(180deg); }
.yz-slot .yz-face img{ width:100%; height:100%; object-fit:cover; }
.yz-slot .yz-face .yz-noimg{ font-size:0.62rem; text-align:center; padding:4px; color:var(--yz-gold-soft); }

.yz-reversed-tag{ display:inline-block; font-size:0.6rem; color:var(--yz-reversed); border:1px solid var(--yz-reversed); border-radius:999px; padding:0 6px; margin-left:5px; }
.yz-upright-tag{ display:inline-block; font-size:0.6rem; color:var(--yz-gold); border:1px solid var(--yz-gold); border-radius:999px; padding:0 6px; margin-left:5px; }

.yz-reading-list{ margin-top:18px; display:flex; flex-direction:column; gap:9px; }
.yz-reading-item{ background:var(--yz-panel); border:1px solid var(--yz-line); border-radius:12px; padding:13px 15px; }
.yz-reading-item .yz-pos{ font-size:0.7rem; color:var(--yz-gold); margin-bottom:3px; }
.yz-reading-item .yz-cardname{ font-weight:700; font-size:1.0rem; margin-bottom:5px; }
.yz-reading-item .yz-meaning{ font-size:0.85rem; line-height:1.7; }

.yozo-tarot-notice{ padding:14px 16px; background:#241d46; color:#ece6d9; border-radius:10px; }


/* 使うカード(全78枚 / 大アルカナのみ) */
.yz-deck-mode{ background:var(--yz-panel); border:1px solid var(--yz-line); border-radius:14px; padding:12px 16px; margin:10px 0 6px; }
.yz-deck-mode-title{ margin:0 0 8px; font-size:0.85rem; color:var(--yz-muted); }
.yz-deck-opt{ display:flex; align-items:center; gap:8px; padding:6px 0; font-size:0.9rem; color:var(--yz-text); cursor:pointer; }
.yz-deck-opt input{ accent-color:var(--yz-gold); width:18px; height:18px; }