/* ═══════════════════════════════════════════
   ОРАКУЛ — расклад из трёх рун
   ═══════════════════════════════════════════ */

/* ── переключатель режимов ── */
.mode-tabs{
  display:flex;gap:8px;justify-content:center;
  margin:0 auto 18px;max-width:420px;
}
.mode-tab{
  flex:1;padding:12px 16px;cursor:pointer;
  font-family:'Cinzel',serif;font-size:12px;letter-spacing:1.6px;
  text-transform:uppercase;
  background:rgba(10,8,14,0.6);color:var(--text-dim);
  border:1px solid var(--border);border-radius:3px;
  transition:all .3s;backdrop-filter:blur(8px);
}
.mode-tab:hover{color:var(--gold-soft);border-color:rgba(212,175,55,0.4)}
.mode-tab.on{
  color:var(--gold-soft);
  border-color:rgba(160,100,220,0.6);
  background:linear-gradient(135deg,rgba(160,100,220,0.25),rgba(100,50,160,0.32));
  box-shadow:0 0 22px rgba(160,100,220,0.2);
}

.mode-hint{
  text-align:center;font-size:13.5px;color:var(--text-dim);
  margin-bottom:26px;min-height:20px;letter-spacing:.3px;
}

/* ── три позиции расклада ── */
.slots{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(10px,2vw,22px);margin-bottom:26px;
}
.slot{text-align:center}
.slot-pos{
  font-family:'Cinzel',serif;font-size:10.5px;letter-spacing:2px;
  text-transform:uppercase;color:var(--purple);margin-bottom:10px;
}
.slot-box{
  position:relative;width:100%;aspect-ratio:3/5;
  background:rgba(10,8,14,0.55);
  border:1px solid var(--border);border-radius:14px;
  overflow:hidden;cursor:pointer;backdrop-filter:blur(8px);
  transition:border-color .3s,box-shadow .3s;
}
.slot-box:hover{
  border-color:rgba(212,175,55,0.45);
  box-shadow:0 16px 44px -14px rgba(160,100,220,0.4);
}
.slot-box.filled{border-color:rgba(212,175,55,0.4)}
.slot-box.spinning{cursor:pointer;border-color:rgba(160,100,220,0.5)}

/* рамка центральной ячейки — указывает выбранную руну */
.slot-box::after{
  content:'';position:absolute;z-index:3;pointer-events:none;
  top:50%;left:6px;right:6px;height:calc(50% - 8px);
  transform:translateY(-50%);
  border:1px solid transparent;border-radius:10px;
}

/* пустое окно */
.slot-empty{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;transition:opacity .3s;pointer-events:none;
}
.slot-box.filled .slot-empty,
.slot-box.spinning .slot-empty{opacity:0}
.slot-plus{
  font-size:30px;color:rgba(212,175,55,0.5);line-height:1;font-weight:300;
}
.slot-hintword{
  font-size:11px;letter-spacing:1.2px;color:rgba(200,185,154,0.4);
  text-transform:uppercase;font-family:'Cinzel',serif;
}

/* барабан: ячейки и привязка — общие с руной дня (см. reel.js) */
.slot-box .reel{position:absolute;inset:0;z-index:1;will-change:transform}
.slot-box .reel-cell{display:flex;align-items:center;justify-content:center;width:100%}
.slot-box .reel-cell img{
  width:88%;max-height:96%;height:auto;display:block;object-fit:contain;
  filter:drop-shadow(0 0 24px rgba(160,100,220,0.55)) drop-shadow(0 6px 18px rgba(0,0,0,0.5));
}
.slot-box .reel-cell.rev img{transform:rotate(180deg)}
.slot-box.locked .reel-cell img{animation:cellFloat 7s ease-in-out infinite}
.slot-box.locked .reel-cell.rev img{animation:cellFloatRev 7s ease-in-out infinite}
.slot-box.locked .slot-empty{opacity:0}

.slot-name{
  margin-top:10px;min-height:34px;
  font-family:'Cinzel',serif;font-size:13px;letter-spacing:1.2px;
  color:var(--gold-soft);line-height:1.5;
}
.slot-name small{
  display:block;font-family:'EB Garamond',serif;
  font-size:11.5px;letter-spacing:.4px;color:var(--text-dim);
  text-transform:none;
}

/* ── кнопки ── */
.oracle-actions{
  display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
  margin-bottom:30px;
}

/* ── вопрос ── */
.question-box{
  background:var(--panel);border:1px solid var(--border);
  border-radius:14px;padding:24px;backdrop-filter:blur(10px);
  opacity:.45;pointer-events:none;transition:opacity .4s;
}
.question-box.ready{opacity:1;pointer-events:auto}
.question-box label{
  display:block;font-family:'Cinzel',serif;font-size:11px;
  letter-spacing:2px;text-transform:uppercase;color:var(--gold);
  margin-bottom:10px;
}
.question-box textarea{
  width:100%;padding:12px 14px;resize:vertical;
  background:rgba(5,3,8,0.5);color:var(--text);
  border:1px solid var(--border);border-radius:8px;
  font-family:'EB Garamond',Georgia,serif;font-size:15.5px;line-height:1.6;
  transition:border-color .3s;
}
.question-box textarea:focus{
  outline:none;border-color:rgba(160,100,220,0.55);
}
.q-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;margin-top:14px;flex-wrap:wrap;
}
.q-count{font-size:12px;color:rgba(200,185,154,0.4)}
.q-note{
  margin:12px 0 0;font-size:12px;color:rgba(200,185,154,0.45);
  text-align:right;
}
.btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
.btn:disabled:hover{transform:none;box-shadow:none;border-color:rgba(160,100,220,0.55)}

/* ═══ ВЫБОР РУНЫ: ФУТАРК ПО АЭТТАМ ═══ */
.picker{
  position:fixed;inset:0;z-index:120;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  background:rgba(3,2,6,0.82);backdrop-filter:blur(6px);
  animation:pickerIn .25s ease;
}
.picker[hidden]{display:none}
@keyframes pickerIn{from{opacity:0}to{opacity:1}}

.picker-panel{
  width:100%;max-width:760px;max-height:88vh;overflow-y:auto;
  background:linear-gradient(180deg,rgba(16,12,22,0.97),rgba(9,7,13,0.98));
  border:1px solid rgba(212,175,55,0.22);border-radius:16px;
  box-shadow:0 30px 90px -20px rgba(0,0,0,0.9);
  animation:panelIn .3s cubic-bezier(.2,.8,.3,1);
}
@keyframes panelIn{from{transform:translateY(18px) scale(.98);opacity:0}to{transform:none;opacity:1}}

.picker-head{
  position:sticky;top:0;z-index:2;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px 14px;
  background:linear-gradient(180deg,rgba(16,12,22,0.99),rgba(16,12,22,0.86));
  border-bottom:1px solid rgba(212,175,55,0.12);
}
.picker-title{
  font-family:'Cinzel',serif;font-size:14px;letter-spacing:2.4px;
  text-transform:uppercase;color:var(--gold-soft);
}
.picker-close{
  width:32px;height:32px;cursor:pointer;
  background:none;border:1px solid var(--border);border-radius:50%;
  color:var(--text-dim);font-size:14px;line-height:1;
  transition:all .25s;
}
.picker-close:hover{
  border-color:rgba(212,175,55,0.5);color:var(--gold);
}

.picker-body{padding:8px 22px 24px}

.aett{margin-top:20px}
.aett:first-child{margin-top:6px}
.aett-title{
  font-family:'Cinzel',serif;font-size:10.5px;letter-spacing:2.2px;
  text-transform:uppercase;color:var(--purple);
  margin-bottom:12px;padding-bottom:8px;
  border-bottom:1px solid rgba(160,100,220,0.15);
}
.aett-title span{color:rgba(200,185,154,0.4);letter-spacing:1px}

.aett-row{
  display:grid;grid-template-columns:repeat(8,1fr);gap:8px;
}
.pick{
  position:relative;padding:6px 3px;cursor:pointer;
  background:rgba(10,8,14,0.5);
  border:1px solid rgba(212,175,55,0.12);border-radius:9px;
  transition:transform .22s,border-color .22s,box-shadow .22s,opacity .22s;
}
.pick img{width:100%;height:auto;display:block}
.pick:hover{
  transform:translateY(-3px);
  border-color:rgba(212,175,55,0.5);
  box-shadow:0 10px 26px -8px rgba(160,100,220,0.5);
}
.pick.used{
  opacity:.22;cursor:not-allowed;filter:grayscale(.7);
}
.pick.used:hover{transform:none;border-color:rgba(212,175,55,0.12);box-shadow:none}

@media(max-width:640px){
  .aett-row{grid-template-columns:repeat(4,1fr);gap:7px}
  .picker-body{padding:8px 14px 20px}
  .picker-head{padding:14px 16px 12px}
  .slot-hintword{display:none}
  .mode-tab{font-size:11px;letter-spacing:1px;padding:11px 8px}
}

/* Смаз во время вращения. Фотографические кристаллы на быстрой прокрутке
   рябят и «расползаются»; лёгкое размытие убирает рябь и заодно не даёт
   выцелить нужную руну — остановка должна быть случайной. */
.slot-box.spinning .reel-cell img{
  filter:blur(3px) drop-shadow(0 0 18px rgba(160,100,220,0.45));
  opacity:.92;
}
.slot-box.spinning .reel{will-change:transform}