/* W3SEO Tarot – Draw Game UI (dark/gold) */
.w3tarot-draw-page { padding: 24px 0 48px;  color: var(--tt-text); }

.w3tarot-draw-hero { text-align:center; max-width: 980px; margin: 0 auto 18px; padding: 0 14px; }
.w3tarot-draw-hero h1 { color: var(--tt-gold-2); margin: 0 0 8px; font-size: clamp(24px, 4vw, 38px); letter-spacing: .2px; }
.w3tarot-lead { margin: 0 auto 12px; opacity: .9; max-width: 760px; }

.w3tarot-draw-nav { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.w3tarot-draw-nav a { display:inline-flex; align-items:center; gap:8px; padding: 8px 12px; border-radius: 999px; border:1px solid rgba(215,181,109,.35); text-decoration:none; }
.w3tarot-draw-nav a.is-active { background: rgba(215,181,109,.10); border-color: rgba(215,181,109,.55); }

.w3tarot-card.w3tarot-draw-card { max-width: 1100px; margin: 0 auto; padding: 0 14px; }
.w3tarot-draw-app { border-radius: 16px; padding: 18px; border: 1px solid rgba(215,181,109,.25); background: rgba(0,0,0,.35); box-shadow: 0 12px 30px rgba(0,0,0,.35); }

/* Setup form – 2 columns (no empty 3rd column) */
.w3tarot-grid,
.tt-formgrid { display:grid; grid-template-columns: 1fr; gap: 12px; align-items:start; }
.w3tarot-field--wide,
.tt-field--wide { grid-column: 1 / -1; }
@media (max-width: 860px) {
  .w3tarot-grid,
  .tt-formgrid { grid-template-columns: 1fr; }
  .w3tarot-field--wide,
  .tt-field--wide { grid-column:auto; }
}


.w3tarot-field label,
.tt-field label { display:block; font-size: 13px; opacity:.9; margin-bottom: 6px; }

.w3tarot-field select, .w3tarot-field input,
.tt-field select, .tt-field input {
  width:100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35);
  color: inherit;
  outline: none;
}

.w3tarot-field select:focus, .w3tarot-field input:focus,
.tt-field select:focus, .tt-field input:focus {
  border-color: rgba(215,181,109,.55);
  box-shadow: 0 0 0 3px rgba(215,181,109,.12);
}


.w3tarot-toggle,
.tt-toggle { display:flex; gap:10px; align-items:center; user-select:none; cursor:pointer; }

.w3tarot-toggle input,
.tt-toggle input { width: 18px; height: 18px; }

.w3tarot-note,
.tt-note { font-size: 12px; opacity: .75; margin-top: 6px; }

.w3tarot-setup-error,
.tt-setup-error{
  display:none;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
  font-size: 13px;
  opacity: .95;
}

.w3tarot-actions { display:flex; gap: 10px; justify-content:center; flex-wrap:wrap; margin-top: 14px; }
.w3tarot-btn { border-radius: 999px; padding: 10px 14px; border: 1px solid rgba(215,181,109,.55); background: rgba(215,181,109,.10); cursor:pointer; }
.w3tarot-btn:hover { background: rgba(215,181,109,.16); }
.w3tarot-btn:disabled { opacity:.45; cursor:not-allowed; }
.w3tarot-btn--ghost { background: transparent; border-color: rgba(255,255,255,.18); }
.w3tarot-btn--small { padding: 8px 12px; font-size: 13px; }

.w3tarot-draw-stage { position: relative; margin-top: 18px; padding-top: 10px; }
.w3tarot-deck { position: absolute; left: 12px; top: 8px; width: 120px; height: 170px; opacity: .95; pointer-events:none; }
@media (max-width: 860px) { .w3tarot-deck { position: relative; left:auto; top:auto; margin: 0 auto 10px; } }

.w3tarot-deck__card { position:absolute; inset:0; border-radius: 16px; border:1px solid rgba(215,181,109,.25);
  background: radial-gradient(circle at 30% 20%, rgba(215,181,109,.20), rgba(0,0,0,.75) 60%), linear-gradient(135deg, rgba(0,0,0,.85), rgba(20,20,20,.95));
  box-shadow: 0 10px 20px rgba(0,0,0,.35);
}
.w3tarot-deck__card:nth-child(2){ transform: translate(10px, 8px) rotate(2deg); opacity:.85; }
.w3tarot-deck__card:nth-child(3){ transform: translate(20px, 16px) rotate(4deg); opacity:.7; }

.w3tarot-spread { display:flex; justify-content:center; gap: 16px; flex-wrap:wrap; min-height: 220px; padding: 8px 0 10px; }
.w3tarot-spread.is-celtic { gap: 22px; align-items:flex-start; }
.w3tarot-cross { display:grid; grid-template-columns: repeat(3, minmax(110px, 150px)); grid-auto-rows: auto; gap: 14px; align-items:center; justify-items:center; }
.w3tarot-staff { display:grid; grid-template-columns: 1fr; gap: 14px; align-items:center; justify-items:center; margin-left: 14px; }
@media (max-width: 860px) {
  .w3tarot-spread.is-celtic { flex-direction:column; }
  .w3tarot-staff { grid-template-columns: repeat(2, minmax(110px, 150px)); margin-left: 0; }
}


/* Extra spread layouts */
.w3tarot-spread.is-houses12{
  display:grid;
  grid-template-columns: repeat(4, minmax(110px, 160px));
  gap: 16px;
  align-items:start;
  justify-content:center;
}
@media (max-width: 860px){
  .w3tarot-spread.is-houses12{ grid-template-columns: repeat(2, minmax(110px, 160px)); }
}

.w3tarot-spread.is-cross5{
  display:grid;
  grid-template-columns: repeat(3, minmax(110px, 160px));
  grid-template-rows: repeat(3, auto);
  gap: 16px;
  align-items:center;
  justify-content:center;
}
.w3tarot-spread.is-cross5 .w3tarot-slot:nth-child(1){ grid-column:2; grid-row:2; }
.w3tarot-spread.is-cross5 .w3tarot-slot:nth-child(2){ grid-column:2; grid-row:1; }
.w3tarot-spread.is-cross5 .w3tarot-slot:nth-child(3){ grid-column:2; grid-row:3; }
.w3tarot-spread.is-cross5 .w3tarot-slot:nth-child(4){ grid-column:1; grid-row:2; }
.w3tarot-spread.is-cross5 .w3tarot-slot:nth-child(5){ grid-column:3; grid-row:2; }
@media (max-width: 860px){
  .w3tarot-spread.is-cross5{ display:flex; flex-wrap:wrap; justify-content:center; }
  .w3tarot-spread.is-cross5 .w3tarot-slot{ grid-column:auto; grid-row:auto; }
}

.w3tarot-spread.is-horseshoe7,
.w3tarot-spread.is-rel7,
.w3tarot-spread.is-career7{
  display:grid;
  grid-template-columns: repeat(4, minmax(110px, 160px));
  gap: 16px;
  align-items:start;
  justify-content:center;
}
.w3tarot-spread.is-horseshoe7 .w3tarot-slot:nth-child(n+5),
.w3tarot-spread.is-rel7 .w3tarot-slot:nth-child(n+5),
.w3tarot-spread.is-career7 .w3tarot-slot:nth-child(n+5){
  transform: translateY(6px);
}
@media (max-width: 860px){
  .w3tarot-spread.is-horseshoe7,
  .w3tarot-spread.is-rel7,
  .w3tarot-spread.is-career7{ grid-template-columns: repeat(2, minmax(110px, 160px)); }
}

.w3tarot-slot { width: 150px; }
.w3tarot-slot__label { text-align:center; font-size: 12px; opacity: .85; margin-top: 8px; line-height: 1.25; }

.w3tarot-cardflip { width: 150px; height: 210px; perspective: 1000px; cursor:pointer; }
.w3tarot-cardflip.is-disabled { cursor: default; }
.w3tarot-cardflip__inner { position: relative; width: 100%; height: 100%; transition: transform 900ms cubic-bezier(.2,.8,.2,1); transform-style: preserve-3d; }
.w3tarot-cardflip.is-flipped .w3tarot-cardflip__inner { transform: rotateY(180deg); }

.w3tarot-face { position:absolute; inset:0; border-radius: 16px; backface-visibility:hidden; overflow:hidden; border:1px solid rgba(215,181,109,.25); }
.w3tarot-face--back {
  background: radial-gradient(circle at 30% 20%, rgba(215,181,109,.18), rgba(0,0,0,.78) 62%),
              linear-gradient(135deg, rgba(0,0,0,.90), rgba(35,35,35,.95));
  display:flex; align-items:center; justify-content:center;
}
.w3tarot-backmark { font-size: 34px; opacity: .9; text-shadow: 0 8px 20px rgba(0,0,0,.45); }
.w3tarot-face--front { transform: rotateY(180deg); background: rgba(0,0,0,.75); }
.w3tarot-frontimg { width:100%; height: 100%; object-fit: cover; display:block; filter: saturate(1.04) contrast(1.02); }
.w3tarot-frontmeta { position:absolute; left: 10px; right: 10px; bottom: 10px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.65) 40%, rgba(0,0,0,.85));
  padding: 10px 10px 8px; border-radius: 12px;
}
.w3tarot-fronttitle { margin: 0; font-size: 13px; line-height: 1.2; }
.w3tarot-fronttag { margin: 4px 0 0; font-size: 11px; opacity: .85; }

@keyframes w3tarotDealIn {
  0% { transform: translate(-120px, -40px) rotate(-8deg); opacity: 0; filter: blur(2px); }
  60% { opacity: 1; filter: blur(0); }
  100% { transform: translate(0,0) rotate(0deg); opacity: 1; }
}
.w3tarot-slot.is-dealing { animation: w3tarotDealIn 900ms cubic-bezier(.2,.8,.2,1) both; }

.w3tarot-reveal-actions { display:flex; gap: 10px; justify-content:center; flex-wrap:wrap; margin: 12px 0 4px; }
.w3tarot-status { text-align:center; font-size: 13px; opacity: .85; min-height: 18px; }

.w3tarot-result { margin-top: 18px; border-top: 1px dashed rgba(215,181,109,.25); padding-top: 16px; }
.w3tarot-summary, .w3tarot-actions-steps, .w3tarot-caution { border: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.28); border-radius: 14px; padding: 12px 14px; margin: 12px 0; }
.w3tarot-bycard { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
@media (max-width: 860px) { .w3tarot-bycard { grid-template-columns: 1fr; } }
.w3tarot-bycard .w3tarot-bycard__item { border: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.22); border-radius: 14px; padding: 12px 14px; }
.w3tarot-bycard__item h3 { margin: 0 0 6px; font-size: 15px; }
.w3tarot-muted { opacity: .85; }