/* ── Reset & Base ─────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;font-family:'Segoe UI',system-ui,sans-serif;
  background:#0d0820;color:#e8d8ff}

/* ── Screens ─────────────────────────────────────────── */
.screen{position:absolute;inset:0;overflow-y:auto;padding-bottom:24px;
  opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;
  transform:translateX(30px)}
.screen.active{opacity:1;pointer-events:all;transform:translateX(0)}

/* ── Home ─────────────────────────────────────────────── */
.home-header{text-align:center;padding:40px 20px 20px;position:relative;overflow:hidden}
.oracle-eye{font-size:64px;display:block;animation:float 3s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.home-header h1{font-size:28px;background:linear-gradient(135deg,#c9a227,#ffd700,#c9a227);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;margin:8px 0}
.subtitle{color:#a07ccc;font-size:14px}
.stars-bg{position:absolute;inset:0;background:
  radial-gradient(1px 1px at 20% 30%,#fff 0%,transparent 100%),
  radial-gradient(1px 1px at 80% 20%,#ffd700 0%,transparent 100%),
  radial-gradient(1px 1px at 50% 80%,#fff 0%,transparent 100%),
  radial-gradient(1px 1px at 10% 60%,#c9a227 0%,transparent 100%),
  radial-gradient(1px 1px at 90% 70%,#fff 0%,transparent 100%);
  opacity:.7;pointer-events:none}

/* ── Cards/Panels ─────────────────────────────────────── */
.card-panel{background:rgba(45,27,105,.5);border:1px solid rgba(201,162,39,.3);
  border-radius:16px;padding:16px;margin:12px 16px;backdrop-filter:blur(10px)}
.info-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;
  border-bottom:1px solid rgba(201,162,39,.1)}
.info-row:last-child{border-bottom:none}
.label{color:#a07ccc;font-size:14px}
.badge{background:rgba(201,162,39,.2);color:#ffd700;padding:4px 10px;
  border-radius:20px;font-size:13px;font-weight:600}
.support-info h3{color:#c9a227;margin-bottom:8px}
.support-info p{color:#a07ccc;font-size:13px;margin:4px 0}
.support-info a{color:#c9a227}

/* ── Buttons ──────────────────────────────────────────── */
.btn-group{display:flex;flex-direction:column;gap:10px;margin:0 16px}
.btn-primary{width:100%;padding:14px;background:linear-gradient(135deg,#7b2d8b,#5a1478);
  color:#ffd700;border:1px solid rgba(201,162,39,.4);border-radius:12px;font-size:16px;
  font-weight:600;cursor:pointer;transition:transform .1s,opacity .1s;letter-spacing:.5px}
.btn-primary:active{transform:scale(.97);opacity:.9}
.btn-secondary{width:100%;padding:12px;background:rgba(45,27,105,.4);color:#c9a227;
  border:1px solid rgba(201,162,39,.3);border-radius:12px;font-size:15px;cursor:pointer}
.btn-back{background:none;border:none;color:#c9a227;font-size:22px;cursor:pointer;
  padding:4px 12px 4px 0}
.hidden{display:none!important}

/* ── Screen header ───────────────────────────────────── */
.screen-header{display:flex;align-items:center;padding:16px;gap:8px;
  border-bottom:1px solid rgba(201,162,39,.2);position:sticky;top:0;
  background:rgba(13,8,32,.95);backdrop-filter:blur(10px);z-index:10}
.screen-header h2{font-size:18px;color:#ffd700;flex:1}

/* ── Spreads grid ────────────────────────────────────── */
.spreads-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px}
.spread-item{background:rgba(45,27,105,.5);border:1px solid rgba(201,162,39,.25);
  border-radius:14px;padding:16px 12px;cursor:pointer;transition:transform .15s,border-color .15s;
  text-align:center}
.spread-item:active{transform:scale(.95);border-color:#c9a227}
.spread-icon{font-size:28px;display:block;margin-bottom:6px}
.spread-name{font-size:13px;font-weight:600;color:#ffd700;margin-bottom:4px}
.spread-desc{font-size:11px;color:#a07ccc;line-height:1.4}
.spread-count{font-size:11px;color:#c9a227;margin-top:6px;
  background:rgba(201,162,39,.15);padding:2px 8px;border-radius:10px;display:inline-block}

/* ── Question ─────────────────────────────────────────── */
.question-panel{margin:20px 16px}
.spread-label{color:#c9a227;font-size:15px;font-weight:600;margin-bottom:12px;text-align:center}
textarea{width:100%;background:rgba(13,8,32,.7);border:1px solid rgba(201,162,39,.3);
  border-radius:10px;color:#e8d8ff;font-size:15px;padding:12px;resize:none;margin-bottom:14px;
  font-family:inherit}
textarea:focus{outline:none;border-color:#c9a227}

/* ── Shuffle ─────────────────────────────────────────── */
.shuffle-stage{display:flex;flex-direction:column;align-items:center;
  justify-content:center;height:100vh;gap:30px}
.deck-container{position:relative;width:100px;height:150px}
.deck-card{position:absolute;width:80px;height:120px;border-radius:10px;
  background:linear-gradient(135deg,#2d1b69,#1a0a3e);
  border:2px solid #c9a227;
  top:calc(var(--i)*-3px);left:calc(var(--i)*2px);
  animation:shuffle-anim 1.5s ease-in-out infinite;
  animation-delay:calc(var(--i)*0.1s)}
@keyframes shuffle-anim{
  0%{transform:translateX(0) rotate(0deg)}
  20%{transform:translateX(-25px) rotate(-8deg)}
  40%{transform:translateX(25px) rotate(8deg)}
  60%{transform:translateX(-15px) rotate(-4deg)}
  80%{transform:translateX(10px) rotate(3deg)}
  100%{transform:translateX(0) rotate(0deg)}}
.deck-card::after{content:'✦';position:absolute;inset:0;display:flex;
  align-items:center;justify-content:center;font-size:24px;color:rgba(201,162,39,.5)}
.shuffle-text{color:#c9a227;font-size:16px;font-weight:600;text-align:center}
.shuffle-progress{width:200px;height:4px;background:rgba(201,162,39,.2);border-radius:2px}
#shuffle-bar{height:100%;background:#c9a227;border-radius:2px;width:0%;
  transition:width .3s ease;animation:progress 3s linear forwards}
@keyframes progress{to{width:100%}}

/* ── Cards Table ─────────────────────────────────────── */
.cards-table{display:flex;flex-wrap:wrap;justify-content:center;
  gap:12px;padding:16px;min-height:300px;align-content:flex-start}
.counter{font-size:13px;color:#a07ccc;margin-left:auto}
.table-footer{padding:0 16px 16px;text-align:center}

/* ── Tarot Card ──────────────────────────────────────── */
.tarot-card-wrap{display:flex;flex-direction:column;align-items:center;gap:6px;
  cursor:pointer}
.tarot-card-wrap .pos-label{font-size:10px;color:#a07ccc;text-align:center;
  max-width:80px;line-height:1.3}
.tarot-card{width:80px;height:130px;perspective:600px;cursor:pointer}
.tarot-card-inner{width:100%;height:100%;position:relative;
  transform-style:preserve-3d;transition:transform .7s cubic-bezier(.4,0,.2,1)}
.tarot-card.flipped .tarot-card-inner{transform:rotateY(180deg)}
.card-face{position:absolute;inset:0;border-radius:10px;backface-visibility:hidden;
  overflow:hidden;border:2px solid}
.card-back{background:linear-gradient(135deg,#2d1b69 0%,#1a0a3e 50%,#2d1b69 100%);
  border-color:#c9a227;display:flex;align-items:center;justify-content:center;font-size:26px}
.card-back::before{content:'';position:absolute;inset:6px;
  border:1px solid rgba(201,162,39,.3);border-radius:7px}
.card-front{border-color:#c9a227;transform:rotateY(180deg);
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:6px 4px;text-align:center}
.card-front .card-number{font-size:9px;color:rgba(255,255,255,.5);align-self:flex-start}
.card-front .card-symbol{font-size:28px;flex:1;display:flex;align-items:center}
.card-front .card-name{font-size:8px;font-weight:700;color:#fff;line-height:1.2;max-width:72px}
.card-front .card-kw{font-size:7px;color:rgba(255,255,255,.6);max-width:72px}
.card-front.reversed{transform:rotateY(180deg) rotate(180deg)}

/* ── Interpretation ──────────────────────────────────── */
.interpretation-panel{line-height:1.7;font-size:15px;white-space:pre-line;
  color:#e8d8ff;max-width:600px;margin:16px auto}
.typewriter .cursor{animation:blink .8s step-end infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

/* ── Chat ────────────────────────────────────────────── */
.chat-messages{flex:1;overflow-y:auto;padding:16px;display:flex;
  flex-direction:column;gap:12px;height:calc(100vh - 130px)}
.chat-input-row{display:flex;gap:8px;padding:10px 16px;
  border-top:1px solid rgba(201,162,39,.2);background:rgba(13,8,32,.95)}
.chat-input-row input{flex:1;background:rgba(45,27,105,.5);border:1px solid rgba(201,162,39,.3);
  border-radius:20px;padding:10px 16px;color:#e8d8ff;font-size:15px}
.chat-input-row input:focus{outline:none;border-color:#c9a227}
.chat-input-row button{background:linear-gradient(135deg,#7b2d8b,#5a1478);
  border:none;color:#ffd700;font-size:18px;width:44px;height:44px;
  border-radius:22px;cursor:pointer}
.msg{max-width:85%;padding:10px 14px;border-radius:16px;font-size:14px;line-height:1.5}
.msg.user{align-self:flex-end;background:rgba(122,45,139,.6);
  border:1px solid rgba(201,162,39,.2);color:#ffd700;border-radius:16px 16px 4px 16px}
.msg.oracle{align-self:flex-start;background:rgba(45,27,105,.7);
  border:1px solid rgba(201,162,39,.3);white-space:pre-line;border-radius:16px 16px 16px 4px}

/* ── Feedback ────────────────────────────────────────── */
.type-toggle{display:flex;gap:8px;margin-bottom:14px}
.type-btn{flex:1;padding:10px;background:rgba(45,27,105,.4);
  border:1px solid rgba(201,162,39,.2);border-radius:10px;color:#a07ccc;
  font-size:14px;cursor:pointer;transition:all .2s}
.type-btn.active{background:rgba(122,45,139,.5);border-color:#c9a227;color:#ffd700}

/* ── Loading ─────────────────────────────────────────── */
.loading-overlay{position:fixed;inset:0;background:rgba(13,8,32,.85);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:20px;z-index:100;backdrop-filter:blur(4px)}
.loading-overlay.hidden{display:none!important}
.loading-spinner{width:50px;height:50px;border:3px solid rgba(201,162,39,.2);
  border-top-color:#c9a227;border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#loading-text{color:#c9a227;font-size:15px}

/* ── Доп. кнопка чата ────────────────────────────────── */
.chat-draw-row{padding:4px 16px 0;display:flex;justify-content:flex-end}
.btn-draw{background:rgba(201,162,39,.15);border:1px solid rgba(201,162,39,.4);
  color:#c9a227;border-radius:20px;padding:6px 14px;font-size:13px;cursor:pointer}
.btn-draw:active{background:rgba(201,162,39,.3)}