:root {
  --bg:#0b0716;
  --bg2:#15102b;
  --gold:#e8c25a;
  --gold-soft:#f4e3a8;
  --purple:#7b4ddb;
  --purple-deep:#3a1d6e;
  --ink:#ece6ff;
  --muted:#a99fc9;
  --card-back:#241147;
  --danger:#ff8a8a;
}

* { box-sizing:border-box; }
html, body { margin:0; }
body {
  min-height:100vh;
  font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:radial-gradient(ellipse at 50% -10%, #2a1b5a 0%, var(--bg2) 45%, var(--bg) 100%);
}

/* Cielo estrellado sutil */
.stars::before, .stars::after {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 20% 30%, #fff8, transparent),
    radial-gradient(1px 1px at 70% 60%, #fff6, transparent),
    radial-gradient(1.5px 1.5px at 40% 80%, #ffe9a8aa, transparent),
    radial-gradient(1px 1px at 85% 20%, #fff7, transparent),
    radial-gradient(1px 1px at 10% 70%, #fff5, transparent),
    radial-gradient(1.5px 1.5px at 55% 15%, #cdb4ffaa, transparent);
  background-repeat:repeat; background-size:600px 600px;
  animation:twinkle 6s ease-in-out infinite alternate;
}
.stars::after { background-size:400px 400px; opacity:.5; animation-duration:9s; }
@keyframes twinkle { from { opacity:.35; } to { opacity:.8; } }

h1, h2 { font-family:"Iowan Old Style","Palatino Linotype",Palatino,serif; }

/* ---------- Login ---------- */
.login-box {
  max-width:360px; margin:14vh auto; padding:36px 30px; text-align:center;
  background:rgba(20,12,42,.78); border:1px solid #ffffff14; border-radius:18px;
  box-shadow:0 0 50px #0008, inset 0 0 30px #7b4ddb22; backdrop-filter:blur(4px);
}
.login-box .moon { font-size:46px; filter:drop-shadow(0 0 10px var(--gold)); }
.login-box h1 { color:var(--gold); margin:6px 0 2px; font-size:34px; letter-spacing:1px; }
.login-box .sub { color:var(--muted); margin:0 0 22px; }
.login-box form { display:flex; flex-direction:column; gap:12px; }
input, textarea {
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid #ffffff22;
  background:#0e0a1f; color:var(--ink); font-size:15px; font-family:inherit;
}
input:focus, textarea:focus { outline:none; border-color:var(--gold); }

button {
  cursor:pointer; border:none; border-radius:10px; font-size:15px; font-weight:600;
  padding:12px 16px; color:#1a1030;
  background:linear-gradient(135deg, var(--gold-soft), var(--gold));
  box-shadow:0 4px 18px #e8c25a33; transition:transform .12s, box-shadow .2s;
}
button:hover { transform:translateY(-1px); box-shadow:0 6px 24px #e8c25a55; }
button:active { transform:translateY(0); }
button.primary { font-size:16px; padding:13px 22px; }
.err { color:var(--danger); margin-top:14px; }

/* ---------- Cabecera ---------- */
header {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 26px; border-bottom:1px solid #ffffff10;
}
header h1 { margin:0; color:var(--gold); font-size:26px; letter-spacing:1px; }
.logout { color:var(--muted); text-decoration:none; font-size:14px; }
.logout:hover { color:var(--gold); }

.wrap { max-width:1000px; margin:0 auto; padding:26px 18px 60px; }
.muted { color:var(--muted); }
section > h2 { color:var(--gold-soft); }
.back {
  background:none; box-shadow:none; color:var(--muted); padding:6px 0;
  font-weight:500; margin-bottom:6px;
}
.back:hover { color:var(--gold); transform:none; box-shadow:none; }

/* ---------- Selector de tiradas ---------- */
.spreads { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }
.spread-card {
  cursor:pointer; padding:20px; border-radius:16px; text-align:left;
  background:linear-gradient(160deg, #211345, #160d31);
  border:1px solid #ffffff14; transition:transform .15s, border-color .2s, box-shadow .2s;
}
.spread-card:hover { transform:translateY(-3px); border-color:var(--gold); box-shadow:0 8px 30px #0006; }
.spread-card .ico { font-size:30px; }
.spread-card h3 { margin:8px 0 4px; color:var(--gold-soft); }
.spread-card p { margin:0; color:var(--muted); font-size:13px; line-height:1.45; }
.spread-card .count { display:inline-block; margin-top:10px; font-size:12px; color:var(--purple);
  background:#ffffff0f; padding:3px 9px; border-radius:20px; }

#step-question textarea { margin:8px 0 16px; }

/* ---------- Mesa y cartas ---------- */
.table { display:flex; flex-wrap:wrap; gap:18px; justify-content:center; margin:24px 0; }

.card-slot { width:130px; display:flex; flex-direction:column; align-items:center; gap:8px; }
.card-pos { font-size:12px; color:var(--muted); text-align:center; min-height:30px; line-height:1.3; }

.card {
  width:120px; height:200px; border-radius:12px; position:relative;
  transform-style:preserve-3d; transition:transform .7s cubic-bezier(.2,.7,.3,1);
  cursor:default;
}
.card.flipped { transform:rotateY(180deg); }
.card .face {
  position:absolute; inset:0; border-radius:12px; backface-visibility:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:10px; text-align:center; border:1px solid #ffffff1f;
}
/* Reverso */
.card .back {
  background:
    radial-gradient(circle at 50% 30%, #ffffff14 0 2px, transparent 3px),
    repeating-linear-gradient(45deg, #2c1858 0 8px, #241147 8px 16px);
  box-shadow:inset 0 0 24px #0007;
}
.card .back .seal { font-size:40px; color:var(--gold); filter:drop-shadow(0 0 8px #e8c25a88); }
/* Cara: imagen Rider-Waite-Smith con marco dorado uniforme */
.card .front {
  transform:rotateY(180deg);
  background:#1a1030; padding:0; overflow:hidden; box-sizing:border-box;
  border:4px solid var(--gold);
}
/* scale(1.06) recorta el borde blanco irregular del escaneo para que todas las
   cartas queden enmarcadas igual. */
.card .front .rws { width:100%; height:100%; object-fit:cover; object-position:center;
  display:block; transform:scale(1.06); }
.card .front .rws.rev { transform:scale(1.06) rotate(180deg); }
.card .front .revtag {
  position:absolute; bottom:0; left:0; right:0; text-align:center;
  font-size:10px; letter-spacing:.5px; text-transform:uppercase;
  background:#7a0d0dcc; color:#fff; padding:2px 0;
}
.card-pos strong { color:var(--gold-soft); }

/* Aparición escalonada */
.card-slot { animation:rise .5s both; }
@keyframes rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }

/* ---------- Lectura ---------- */
.loading { text-align:center; color:var(--gold-soft); margin:24px 0; font-size:17px; }
.spin { display:inline-block; animation:spin 1.4s linear infinite; color:var(--gold); }
@keyframes spin { to { transform:rotate(360deg); } }

.reading {
  margin-top:18px; padding:24px 26px; border-radius:16px; line-height:1.7;
  background:linear-gradient(160deg, #1c123c, #140c2c);
  border:1px solid #ffffff14; box-shadow:0 8px 30px #0006;
}
.reading h3 { color:var(--gold); margin:18px 0 6px; }
.reading strong { color:var(--gold-soft); }
.reading p { margin:0 0 12px; }
.reading em { color:var(--purple); font-style:italic; }

/* ---------- Navegación cabecera ---------- */
header nav { display:flex; align-items:center; gap:18px; }
header nav a { color:var(--muted); text-decoration:none; font-size:14px; }
header nav a:hover { color:var(--gold); }

/* ---------- Pregunta ---------- */
.qlabel { display:block; margin:6px 0 6px; color:var(--gold-soft); font-size:14px; }
.qlabel #q-opt { color:var(--muted); font-weight:400; }
#step-question textarea { margin-bottom:16px; }
#count-row { margin-bottom:6px; }
#count-input { width:90px; display:inline-block; margin-right:8px; }
.asked { color:var(--gold-soft); font-style:italic; font-size:18px; margin:2px 0 10px; }

/* ---------- Guardar ---------- */
.save-row { display:flex; align-items:center; gap:14px; margin-top:20px; flex-wrap:wrap; }
.save-ok { color:#9be29b; font-size:14px; }
.danger-btn {
  background:linear-gradient(135deg, #b85, #a33); color:#fff; box-shadow:0 4px 18px #00000033;
}
.danger-btn:hover { box-shadow:0 6px 24px #a3333355; }

/* ---------- Carta astral / Diseño humano ---------- */
#step-birth input { max-width:420px; }
.cz-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:12px; margin:18px 0 8px; }
.cz-tile { padding:14px 16px; border-radius:12px; border:1px solid #ffffff14;
  background:linear-gradient(160deg, #211345, #160d31); }
.cz-l { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.5px; }
.cz-v { color:var(--gold-soft); font-size:17px; font-weight:600; margin-top:4px; }

/* ---------- Generador aleatorio ---------- */
.phys-toggle {
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  margin:4px 0 16px; padding:8px 14px; border-radius:10px; font-size:14px;
  color:var(--gold-soft); background:#ffffff0c; border:1px solid #ffffff14;
}
.phys-toggle input { accent-color:var(--purple); width:16px; height:16px; cursor:pointer; }
.random-result {
  margin-top:26px; text-align:center; padding:30px 24px; border-radius:18px;
  background:linear-gradient(160deg, #1c123c, #140c2c); border:1px solid #ffffff14;
  box-shadow:0 8px 30px #0006;
}
.rr-label { color:var(--muted); font-size:15px; letter-spacing:.5px; }
.rr-value {
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,serif;
  font-size:54px; font-weight:700; color:var(--gold); margin:10px 0 22px;
  text-shadow:0 0 18px #e8c25a55; min-height:60px;
}
.rr-value.rolling { opacity:.6; }

/* ---------- Historial ---------- */
.history-list { display:flex; flex-direction:column; gap:12px; margin-top:18px; }
.hist-item {
  display:flex; align-items:center; gap:16px; cursor:pointer;
  padding:14px 18px; border-radius:14px; border:1px solid #ffffff14;
  background:linear-gradient(160deg, #211345, #160d31); transition:transform .14s, border-color .2s;
}
.hist-item:hover { transform:translateX(3px); border-color:var(--gold); }
.hist-item .hi-ico { font-size:26px; }
.hist-item .hi-body { flex:1; min-width:0; }
.hi-top { display:flex; justify-content:space-between; gap:10px; align-items:baseline; flex-wrap:wrap; }
.hi-top strong { color:var(--gold-soft); }
.hi-date { color:var(--muted); font-size:12px; white-space:nowrap; }
.hi-q { color:var(--ink); font-size:14px; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hi-q em { color:var(--muted); }
.hi-arrow { color:var(--purple); font-size:24px; }

@media (max-width:560px) {
  .card { width:96px; height:160px; }
  .card-slot { width:104px; }
  .card .front .sym, .card .back .seal { font-size:32px; }
  header nav { gap:12px; }
}