/* ── WP Tarot Plugin Styles ─────────────────────────────────────────────── */

:root {
  --tarot-bg:          #1a1035;
  --tarot-surface:     #251847;
  --tarot-surface2:    #2e1f5e;
  --tarot-gold:        #c8a84b;
  --tarot-gold-light:  #f0d080;
  --tarot-text:        #e8e0f0;
  --tarot-text-muted:  #9b8fc0;
  --tarot-accent:      #7c4ddb;
  --tarot-accent2:     #a67cf8;
  --tarot-border:      #3d2a7a;
  --tarot-card-w:      140px;
  --tarot-card-h:      210px;
  --tarot-radius:      12px;
}

/* ── Base container ────────────────────────────────────────────────────── */

.wptarot-app,
.wptarot-today {
  font-family: 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
  background: var(--tarot-bg);
  color: var(--tarot-text);
  border-radius: 16px;
  padding: 24px 16px;
  max-width: 720px;
  margin: 0 auto;
  min-height: 200px;
  position: relative;
}

.wptarot-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--tarot-text-muted);
  padding: 40px;
}

.wptarot-home {
  width: 100%;
  padding: 28px 0;
}

.wptarot-home-inner {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 16px;
}

.wptarot-home-copy {
  max-width: 720px;
  margin: 0 auto 18px;
  text-align: center;
  font-family: 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
}

.wptarot-home-kicker {
  margin: 0 0 6px;
  color: var(--tarot-gold);
  font-size: 0.78rem;
  font-weight: 700;
}

.wptarot-home-copy h2 {
  margin: 0 0 8px;
  color: #231b33;
  font-size: 1.5rem;
  line-height: 1.35;
}

.wptarot-home-copy p {
  margin: 0;
  color: #504866;
  font-size: 0.95rem;
  line-height: 1.7;
}

.wptarot-home .wptarot-app {
  --tarot-bg: #fbfaf7;
  --tarot-surface: #fff;
  --tarot-surface2: #f2eee4;
  --tarot-gold: #96712a;
  --tarot-gold-light: #6f5520;
  --tarot-text: #171d22;
  --tarot-text-muted: #5b6470;
  --tarot-accent: #a98535;
  --tarot-accent2: #96712a;
  --tarot-border: #d8d2c4;
  background: #fbfaf7;
  border: 1px solid #d8d2c4;
  border-radius: 8px;
  color: #171d22;
  max-width: none;
  padding: 18px;
}

.wptarot-home .wptarot-step-header {
  margin-bottom: 18px;
}

.wptarot-home .wptarot-step-header h2 {
  color: #171d22;
  font-size: 1.32rem;
  line-height: 1.35;
}

.wptarot-home .wptarot-step-header p,
.wptarot-home .wptarot-loading,
.wptarot-home .wptarot-flip-hint,
.wptarot-home .wptarot-flip-progress {
  color: #5b6470;
}

.wptarot-home .wptarot-step-number {
  color: #96712a;
  border-color: #d8d2c4;
  border-radius: 8px;
  font-weight: 800;
}

.wptarot-home .wptarot-progress-dot {
  background: #e4dece;
  border-color: #d8d2c4;
}

.wptarot-home .wptarot-progress-dot.active,
.wptarot-home .wptarot-progress-dot.done {
  background: #96712a;
  border-color: #96712a;
}

.wptarot-home .wptarot-theme-list {
  max-height: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  overflow: visible;
  padding-right: 0;
}

.wptarot-home .wptarot-theme-list::-webkit-scrollbar {
  display: none;
}

.wptarot-home .wptarot-theme-btn,
.wptarot-home .wptarot-choice-btn {
  background: #fff;
  border: 1px solid #d8d2c4;
  border-radius: 8px;
  color: #171d22;
  font-weight: 800;
}

.wptarot-home .wptarot-theme-btn:hover,
.wptarot-home .wptarot-choice-btn:hover,
.wptarot-home .wptarot-theme-btn.selected,
.wptarot-home .wptarot-choice-btn.selected {
  background: #f2eee4;
  border-color: #a98535;
  color: #6f5520;
}

.wptarot-home .wptarot-choice-btn .choice-desc,
.wptarot-home .wptarot-choice-btn.selected .choice-desc {
  color: #5b6470;
}

.wptarot-home .wptarot-btn {
  min-height: 42px;
  border-radius: 8px;
  padding: 8px 18px;
  font-weight: 800;
}

.wptarot-home .wptarot-btn-primary,
.wptarot-home .wptarot-btn-gold {
  background: #151e26;
  color: #fff;
}

.wptarot-home .wptarot-btn-ghost {
  background: #fff;
  border: 1px solid #d8d2c4;
  color: #171d22;
}

.wptarot-home .wptarot-card-label,
.wptarot-home .wptarot-card-tap-hint {
  color: #96712a;
}

.wptarot-home .wptarot-card-name {
  color: #171d22;
}

.wptarot-home .wptarot-card-direction {
  color: #5b6470;
}

.wptarot-home .wptarot-card-face {
  background: #151e26;
  border-color: #d8bd74;
}

.wptarot-home .wptarot-card-face::before {
  color: #d8bd74;
}

.wptarot-home .wptarot-card-image {
  border-color: #d8bd74;
  background: #fff;
}

.wptarot-home .wptarot-reading-box,
.wptarot-home .wptarot-card-reading-item,
.wptarot-home .wptarot-share-box,
.wptarot-home .wptarot-bonus-section {
  background: #fff;
  border: 1px solid #e4dece;
  border-radius: 8px;
  color: #333b44;
}

.wptarot-home .wptarot-card-reading-item {
  border-left: 3px solid #96712a;
}

.wptarot-home .wptarot-card-reading-item .cri-position {
  background: #f2eee4;
  color: #96712a;
}

.wptarot-home .wptarot-card-reading-item .cri-name {
  color: #171d22;
}

.wptarot-home .wptarot-card-reading-item .cri-dir,
.wptarot-home .wptarot-card-reading-item .cri-meaning,
.wptarot-home .wptarot-share-box p {
  color: #5b6470;
}

.wptarot-home .wptarot-share-box h3 {
  color: #171d22;
}

@media (max-width: 720px) {
  .wptarot-home .wptarot-theme-list,
  .wptarot-home .wptarot-choices.cols-2,
  .wptarot-home .wptarot-choices.cols-3 {
    grid-template-columns: 1fr;
  }
}

.wptarot-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--tarot-border);
  border-top-color: var(--tarot-gold);
  border-radius: 50%;
  animation: wptarot-spin 0.8s linear infinite;
}

@keyframes wptarot-spin {
  to { transform: rotate(360deg); }
}

/* ── Step header ───────────────────────────────────────────────────────── */

.wptarot-step-header {
  text-align: center;
  margin-bottom: 24px;
}

.wptarot-step-header h2 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--tarot-gold-light);
  margin: 0 0 6px;
}

.wptarot-step-header p {
  font-size: 0.85rem;
  color: var(--tarot-text-muted);
  margin: 0;
}

.wptarot-step-number {
  display: inline-block;
  font-size: 0.7rem;
  color: var(--tarot-gold);
  border: 1px solid var(--tarot-gold);
  border-radius: 20px;
  padding: 2px 10px;
  margin-bottom: 8px;
  letter-spacing: 0.05em;
}

/* ── Choice grids ──────────────────────────────────────────────────────── */

.wptarot-choices {
  display: grid;
  gap: 10px;
  margin-bottom: 20px;
}

.wptarot-choices.cols-2 { grid-template-columns: 1fr 1fr; }
.wptarot-choices.cols-3 { grid-template-columns: 1fr 1fr 1fr; }

@media (max-width: 480px) {
  .wptarot-choices.cols-3 { grid-template-columns: 1fr; }
}

.wptarot-choice-btn {
  background: var(--tarot-surface);
  border: 1px solid var(--tarot-border);
  border-radius: var(--tarot-radius);
  padding: 14px 12px;
  color: var(--tarot-text);
  cursor: pointer;
  text-align: center;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
  font-size: 0.9rem;
  line-height: 1.4;
}

.wptarot-choice-btn:hover {
  background: var(--tarot-surface2);
  border-color: var(--tarot-accent);
  transform: translateY(-1px);
}

.wptarot-choice-btn.selected {
  background: var(--tarot-surface2);
  border-color: var(--tarot-gold);
  color: var(--tarot-gold-light);
}

.wptarot-choice-btn .choice-title {
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}

.wptarot-choice-btn .choice-desc {
  font-size: 0.75rem;
  color: var(--tarot-text-muted);
}

.wptarot-choice-btn.selected .choice-desc {
  color: var(--tarot-gold);
}

/* ── Theme select (scrollable list) ───────────────────────────────────── */

.wptarot-theme-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 4px;
  margin-bottom: 20px;
}

.wptarot-theme-list::-webkit-scrollbar { width: 4px; }
.wptarot-theme-list::-webkit-scrollbar-track { background: var(--tarot-bg); }
.wptarot-theme-list::-webkit-scrollbar-thumb { background: var(--tarot-border); border-radius: 4px; }

.wptarot-theme-btn {
  background: var(--tarot-surface);
  border: 1px solid var(--tarot-border);
  border-radius: 8px;
  padding: 12px 16px;
  color: var(--tarot-text);
  cursor: pointer;
  text-align: left;
  font-size: 0.95rem;
  transition: background 0.2s, border-color 0.2s;
}

.wptarot-theme-btn:hover { background: var(--tarot-surface2); border-color: var(--tarot-accent); }
.wptarot-theme-btn.selected { border-color: var(--tarot-gold); color: var(--tarot-gold-light); }

/* ── Primary / secondary buttons ──────────────────────────────────────── */

.wptarot-btn {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  transition: opacity 0.2s, transform 0.15s;
}

.wptarot-btn:hover { opacity: 0.88; transform: translateY(-1px); }
.wptarot-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.wptarot-btn-primary {
  background: linear-gradient(135deg, var(--tarot-accent), #5c33b0);
  color: #fff;
}

.wptarot-btn-gold {
  background: linear-gradient(135deg, var(--tarot-gold), #a07825);
  color: #1a1035;
}

.wptarot-btn-ghost {
  background: transparent;
  border: 1px solid var(--tarot-border);
  color: var(--tarot-text-muted);
}

.wptarot-btn-ghost:hover { border-color: var(--tarot-accent2); color: var(--tarot-text); }

.wptarot-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 20px;
}

/* ── Card 3D flip ──────────────────────────────────────────────────────── */

.wptarot-spread {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin: 24px 0;
}

.wptarot-card-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.wptarot-card-label {
  font-size: 0.72rem;
  color: var(--tarot-gold);
  text-align: center;
  letter-spacing: 0.04em;
}

.wptarot-card-wrap {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  display: block;
  font: inherit;
  padding: 0;
  width: var(--tarot-card-w);
  height: var(--tarot-card-h);
  perspective: 900px;
  cursor: pointer;
  position: relative;
}

.wptarot-card-wrap:focus-visible {
  outline: 3px solid var(--tarot-gold);
  outline-offset: 4px;
}

.wptarot-card-wrap:disabled {
  cursor: default;
  opacity: 1;
}

.wptarot-card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

.wptarot-card-wrap.flipped .wptarot-card-inner {
  transform: rotateY(180deg);
}

.wptarot-card-wrap.reversed .wptarot-card-inner.face-up {
  transform: rotateY(180deg) rotateZ(180deg);
}

.wptarot-card-face,
.wptarot-card-image {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}

/* Card back (decorative pattern — shown before flip) */
.wptarot-card-face {
  background:
    radial-gradient(circle at 50% 50%, #3a2070 0%, var(--tarot-surface) 60%, var(--tarot-bg) 100%);
  border: 1px solid var(--tarot-border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wptarot-card-face::before {
  content: '✦';
  font-size: 3rem;
  color: var(--tarot-gold);
  opacity: 0.35;
}

.wptarot-card-face::after {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(200,168,75,0.2);
  border-radius: 6px;
}

/* Hint pulse while waiting to be flipped */
.wptarot-card-wrap:not(.flipped) .wptarot-card-face {
  animation: wptarot-pulse 2.4s ease-in-out infinite;
}

@keyframes wptarot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124,77,219,0); }
  50%       { box-shadow: 0 0 12px 3px rgba(124,77,219,0.35); }
}

/* Card front (tarot image — shown after flip) */
.wptarot-card-image {
  transform: rotateY(180deg);
  border: 1px solid var(--tarot-gold);
  background: #111;
}

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

.wptarot-card-wrap.reversed .wptarot-card-image img {
  transform: rotate(180deg);
}

/* "tap to flip" hint */
.wptarot-card-tap-hint {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.62rem;
  color: var(--tarot-gold);
  padding: 4px;
  pointer-events: none;
}

.wptarot-card-wrap.flipped .wptarot-card-tap-hint { display: none; }

/* card name after flip */
.wptarot-card-name {
  font-size: 0.78rem;
  color: var(--tarot-text);
  text-align: center;
  min-height: 1.2em;
}

.wptarot-card-direction {
  font-size: 0.68rem;
  color: var(--tarot-text-muted);
  text-align: center;
}

/* ── Celtic Cross layout (desktop) ────────────────────────────────────── */

@media (min-width: 600px) {
  .wptarot-spread.celtic-cross {
    display: grid;
    grid-template-areas:
      ".   pos5 .    .    "
      "pos3 pos1 pos4 pos7 "
      ".   pos2 .    pos8 "
      ".   pos6 .    pos9 "
      ".   .    .    pos10";
    grid-template-columns: calc(var(--tarot-card-w) + 16px) calc(var(--tarot-card-w) + 16px) calc(var(--tarot-card-w) + 16px) calc(var(--tarot-card-w) + 16px);
    grid-template-rows: repeat(5, calc(var(--tarot-card-h) + 24px + 8px));
    gap: 0;
    justify-content: center;
  }

  .wptarot-spread.celtic-cross .wptarot-card-slot:nth-child(1)  { grid-area: pos1; }
  .wptarot-spread.celtic-cross .wptarot-card-slot:nth-child(2)  { grid-area: pos2; }
  .wptarot-spread.celtic-cross .wptarot-card-slot:nth-child(3)  { grid-area: pos3; }
  .wptarot-spread.celtic-cross .wptarot-card-slot:nth-child(4)  { grid-area: pos4; }
  .wptarot-spread.celtic-cross .wptarot-card-slot:nth-child(5)  { grid-area: pos5; }
  .wptarot-spread.celtic-cross .wptarot-card-slot:nth-child(6)  { grid-area: pos6; }
  .wptarot-spread.celtic-cross .wptarot-card-slot:nth-child(7)  { grid-area: pos7; }
  .wptarot-spread.celtic-cross .wptarot-card-slot:nth-child(8)  { grid-area: pos8; }
  .wptarot-spread.celtic-cross .wptarot-card-slot:nth-child(9)  { grid-area: pos9; }
  .wptarot-spread.celtic-cross .wptarot-card-slot:nth-child(10) { grid-area: pos10; }
}

/* ── Reading result ─────────────────────────────────────────────────────── */

.wptarot-reading-box {
  background: var(--tarot-surface);
  border: 1px solid var(--tarot-border);
  border-radius: var(--tarot-radius);
  padding: 20px;
  margin: 20px 0;
  line-height: 1.9;
  font-size: 0.9rem;
  white-space: pre-line;
}

.wptarot-reading-box.loading {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--tarot-text-muted);
}

/* ── Individual card reading ───────────────────────────────────────────── */

.wptarot-card-readings {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0;
}

.wptarot-card-reading-item {
  background: var(--tarot-surface);
  border-left: 3px solid var(--tarot-gold);
  border-radius: 0 8px 8px 0;
  padding: 12px 16px;
}

.wptarot-card-reading-item .cri-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.wptarot-card-reading-item .cri-position {
  font-size: 0.7rem;
  color: var(--tarot-gold);
  background: rgba(200,168,75,0.12);
  padding: 2px 8px;
  border-radius: 10px;
}

.wptarot-card-reading-item .cri-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--tarot-text);
}

.wptarot-card-reading-item .cri-dir {
  font-size: 0.72rem;
  color: var(--tarot-text-muted);
}

.wptarot-card-reading-item .cri-meaning {
  font-size: 0.85rem;
  color: var(--tarot-text-muted);
  line-height: 1.7;
}

/* ── Share section ─────────────────────────────────────────────────────── */

.wptarot-share-box {
  background: var(--tarot-surface);
  border: 1px solid var(--tarot-border);
  border-radius: var(--tarot-radius);
  padding: 20px;
  text-align: center;
  margin: 20px 0;
}

.wptarot-share-box h3 {
  font-size: 1rem;
  color: var(--tarot-gold-light);
  margin: 0 0 6px;
}

.wptarot-share-box p {
  font-size: 0.82rem;
  color: var(--tarot-text-muted);
  margin: 0 0 16px;
}

.wptarot-share-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.wptarot-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 24px;
  border: none;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  transition: opacity 0.2s;
  text-decoration: none;
}

.wptarot-share-btn:hover { opacity: 0.85; }

.wptarot-share-btn.x-btn {
  background: #000;
  color: #fff;
}

.wptarot-share-btn.line-btn {
  background: #06c755;
  color: #fff;
}

/* bonus card reveal */
.wptarot-bonus-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--tarot-border);
}

.wptarot-bonus-section h4 {
  font-size: 0.9rem;
  color: var(--tarot-gold-light);
  text-align: center;
  margin: 0 0 12px;
}

.wptarot-bonus-card {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

.wptarot-bonus-meaning {
  font-size: 0.85rem;
  color: var(--tarot-text-muted);
  text-align: center;
  line-height: 1.7;
  padding: 0 16px;
}

/* ── Today's Tarot widget ──────────────────────────────────────────────── */

.wptarot-today {
  text-align: center;
}

.wptarot-today-date {
  font-size: 0.78rem;
  color: var(--tarot-text-muted);
  margin-bottom: 8px;
}

.wptarot-today-title {
  font-size: 1.1rem;
  color: var(--tarot-gold-light);
  font-weight: 600;
  margin-bottom: 20px;
}

.wptarot-today-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.wptarot-today-card .wptarot-card-wrap {
  cursor: default;
  --tarot-card-w: 120px;
  --tarot-card-h: 180px;
}

.wptarot-today-card .wptarot-card-wrap.flipped { cursor: default; }
.wptarot-today-card .wptarot-card-wrap:not(.flipped) .wptarot-card-face {
  animation: none;
}

.wptarot-today-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--tarot-text);
}

.wptarot-today-meaning {
  font-size: 0.85rem;
  color: var(--tarot-text-muted);
  max-width: 340px;
  line-height: 1.7;
}

.wptarot-today-cta {
  margin-top: 16px;
}

/* ── Progress dots ─────────────────────────────────────────────────────── */

.wptarot-progress {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 20px;
}

.wptarot-progress-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tarot-border);
  transition: background 0.3s;
}

.wptarot-progress-dot.active { background: var(--tarot-gold); }
.wptarot-progress-dot.done   { background: var(--tarot-accent2); }

/* ── Divider ───────────────────────────────────────────────────────────── */

.wptarot-divider {
  border: none;
  border-top: 1px solid var(--tarot-border);
  margin: 20px 0;
}

/* ── Fade-in animation for step transitions ────────────────────────────── */

.wptarot-step {
  animation: wptarot-fadein 0.35s ease;
}

@keyframes wptarot-fadein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Flip all instruction ──────────────────────────────────────────────── */

.wptarot-flip-hint {
  text-align: center;
  font-size: 0.8rem;
  color: var(--tarot-gold);
  margin-bottom: 8px;
}

.wptarot-flip-progress {
  text-align: center;
  font-size: 0.78rem;
  color: var(--tarot-text-muted);
  margin-bottom: 16px;
}

/* ── fortune.limanabi.com top shortcode: [limanabi_tarot] ─────────────── */

.limanabi-tarot-wrap {
  --limanabi-tarot-main: #221733;
  --limanabi-tarot-accent: #a985c8;
  --limanabi-tarot-accent-light: #d8b7f0;
  --limanabi-tarot-bg: #f3eef7;
  --limanabi-tarot-bg-light: #f8f4fb;
  --limanabi-tarot-text: #221733;
  --limanabi-tarot-muted: #6f6678;
  --limanabi-tarot-border: #e4d8ec;
  background: linear-gradient(180deg, #fff 0%, var(--limanabi-tarot-bg-light) 100%);
  border: 1px solid var(--limanabi-tarot-border);
  border-radius: 8px;
  color: var(--limanabi-tarot-text);
  margin-top: 22px;
  padding: 28px;
}

.limanabi-tarot-wrap *,
.limanabi-tarot-wrap *::before,
.limanabi-tarot-wrap *::after {
  box-sizing: border-box;
}

.limanabi-tarot-intro {
  border-bottom: 1px solid var(--limanabi-tarot-border);
  margin-bottom: 22px;
  padding-bottom: 18px;
}

.limanabi-tarot-kicker,
.limanabi-tarot-card__label {
  color: var(--limanabi-tarot-accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  margin: 0 0 8px;
  text-transform: uppercase;
}

.limanabi-tarot-heading {
  color: var(--limanabi-tarot-main);
  font-size: 24px;
  line-height: 1.5;
  margin: 0 0 10px;
}

.limanabi-tarot-lead,
.limanabi-tarot-disclaimer,
.limanabi-tarot-retry-note {
  color: var(--limanabi-tarot-muted);
  font-size: 13px;
  line-height: 1.8;
  margin: 0;
}

.limanabi-tarot-form {
  display: grid;
  gap: 16px;
}

.limanabi-tarot-field {
  display: grid;
  gap: 7px;
}

.limanabi-tarot-label {
  color: var(--limanabi-tarot-main);
  font-size: 13px;
  font-weight: 700;
}

.limanabi-tarot-input,
.limanabi-tarot-select,
.limanabi-tarot-textarea {
  background: #fff;
  border: 1px solid var(--limanabi-tarot-border);
  border-radius: 6px;
  color: var(--limanabi-tarot-text);
  font: inherit;
  font-size: 16px;
  line-height: 1.6;
  min-height: 46px;
  padding: 11px 13px;
  width: 100%;
}

.limanabi-tarot-textarea {
  min-height: 130px;
  resize: vertical;
}

.limanabi-tarot-input:focus,
.limanabi-tarot-select:focus,
.limanabi-tarot-textarea:focus {
  border-color: var(--limanabi-tarot-accent);
  box-shadow: 0 0 0 3px rgba(169, 133, 200, 0.22);
  outline: none;
}

.limanabi-tarot-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

.limanabi-tarot-profile {
  background: var(--limanabi-tarot-bg-light);
  border: 1px solid var(--limanabi-tarot-border);
  border-radius: 6px;
  display: grid;
  gap: 8px;
  padding: 12px;
}

.limanabi-tarot-profile__check {
  align-items: flex-start;
  color: var(--limanabi-tarot-muted);
  display: flex;
  font-size: 12px;
  gap: 8px;
  line-height: 1.7;
}

.limanabi-tarot-profile__check input {
  flex: 0 0 auto;
  margin-top: 4px;
}

.limanabi-tarot-profile__note {
  color: var(--limanabi-tarot-muted);
  font-size: 11px;
  line-height: 1.7;
  margin: 0;
}

.limanabi-tarot-profile__clear {
  background: transparent;
  border: 0;
  color: var(--limanabi-tarot-accent);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  justify-self: start;
  line-height: 1.5;
  padding: 0;
  text-decoration: underline;
  text-align: left;
}

.limanabi-tarot-button {
  align-items: center;
  background: var(--limanabi-tarot-main);
  border: 1px solid var(--limanabi-tarot-main);
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-size: 14px;
  font-weight: 700;
  justify-content: center;
  line-height: 1.4;
  min-height: 44px;
  padding: 11px 18px;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.limanabi-tarot-button:hover {
  background: var(--limanabi-tarot-accent);
  border-color: var(--limanabi-tarot-accent);
  transform: translateY(-1px);
}

.limanabi-tarot-button:disabled {
  cursor: wait;
  opacity: 0.62;
  transform: none;
}

.limanabi-tarot-button--ghost {
  background: #fff;
  border-color: var(--limanabi-tarot-border);
  color: var(--limanabi-tarot-main);
}

.limanabi-tarot-result {
  background: #fff;
  border: 1px solid var(--limanabi-tarot-border);
  border-radius: 8px;
  margin-top: 24px;
  padding: 22px;
}

.limanabi-tarot-card {
  background: var(--limanabi-tarot-main);
  border-radius: 8px;
  color: #fff;
  padding: 18px;
}

.limanabi-tarot-card__name {
  color: #fff;
  font-size: 22px;
  line-height: 1.45;
  margin: 0 0 4px;
}

.limanabi-tarot-card__en {
  color: var(--limanabi-tarot-accent-light);
  font-size: 13px;
  margin: 0;
}

.limanabi-tarot-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
}

.limanabi-tarot-keyword {
  background: var(--limanabi-tarot-bg);
  border: 1px solid var(--limanabi-tarot-border);
  border-radius: 999px;
  color: var(--limanabi-tarot-main);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  padding: 6px 10px;
}

.limanabi-tarot-message {
  border-top: 1px solid var(--limanabi-tarot-border);
  padding: 16px 0 0;
}

.limanabi-tarot-message + .limanabi-tarot-message {
  margin-top: 16px;
}

.limanabi-tarot-message__title {
  color: var(--limanabi-tarot-accent);
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 7px;
}

.limanabi-tarot-message__body,
.limanabi-tarot-loading,
.limanabi-tarot-error {
  color: var(--limanabi-tarot-text);
  font-size: 15px;
  line-height: 1.9;
  margin: 0;
}

.limanabi-tarot-retry-note {
  background: var(--limanabi-tarot-bg-light);
  border: 1px solid var(--limanabi-tarot-border);
  border-radius: 6px;
  margin-top: 18px;
  padding: 12px;
}

.limanabi-tarot-result .limanabi-tarot-disclaimer {
  border-top: 1px solid var(--limanabi-tarot-border);
  font-size: 12px;
  margin-top: 16px;
  padding-top: 12px;
}

@media (max-width: 600px) {
  .limanabi-tarot-wrap {
    padding: 20px 16px;
  }

  .limanabi-tarot-heading {
    font-size: 20px;
  }

  .limanabi-tarot-actions,
  .limanabi-tarot-button {
    width: 100%;
  }
}