/* ============================================================
   ORACULUM — design tokens
   ============================================================ */
:root{
  --void:        #07050d;
  --void-deep:    #030209;
  --plum:        #150c25;
  --plum-2:       #211238;
  --violet:       #9a5be0;
  --violet-soft:  #6a3fb0;
  --violet-glow:  #c79bff;
  --gold:        #c9a04a;
  --gold-bright:  #f3dc9c;
  --gold-dim:     #7a6230;
  --ink:         #f4ecd8;
  --ink-dim:      #bcaecb;
  --ink-faint:    #8577a0;

  --font-display: 'Cinzel', serif;
  --font-head-ka: 'Noto Serif Georgian', serif;
  --font-body-ka: 'Noto Sans Georgian', sans-serif;

  --ease-oracle: cubic-bezier(.22,.7,.2,1);
}

*{ box-sizing: border-box; }
html,body{
  margin:0; padding:0; height:100%;
  background: var(--void);
  color: var(--ink);
  font-family: var(--font-body-ka);
  overflow-x:hidden;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

button{ font-family: inherit; cursor:pointer; }
:focus-visible{ outline: 2px solid var(--gold-bright); outline-offset: 3px; }

/* ============================================================
   STAGE — full-bleed video scene
   ============================================================ */
.stage{
  position: relative;
  height: 100svh;
  width: 100%;
  overflow:hidden;
  background: var(--void-deep);
}

.bg-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  z-index:0;
  background: var(--void-deep);
}

.vignette{
  position:absolute; inset:0;
  background:
    radial-gradient(60% 55% at 50% 40%, transparent 45%, rgba(3,2,9,.72) 100%),
    linear-gradient(180deg, rgba(3,2,9,.55) 0%, transparent 16%, transparent 78%, rgba(3,2,9,.75) 100%);
  pointer-events:none;
  z-index:5;
}

/* ============================================================
   BRAND
   ============================================================ */
.brand{
  position:absolute; top: 4vh; left:50%; transform: translateX(-50%);
  z-index: 20;
  display:flex; align-items:center; gap:.6em;
  color: var(--gold-bright);
  letter-spacing:.42em;
  font-family: var(--font-display);
  font-size: clamp(.8rem, 1.6vw, 1.05rem);
  text-transform:uppercase;
  text-shadow: 0 0 18px rgba(243,220,156,.45);
}
.brand__mark{ font-size:.9em; opacity:.85; }

/* ============================================================
   CTA — overlaid near the orb in the video, bottom-center
   ============================================================ */
.lectern{
  position:absolute;
  left:50%; bottom: 7svh;
  transform: translateX(-50%);
  z-index:15;
  display:flex; justify-content:center;
}
.lectern__glow{
  position:absolute; top:-16px; left:50%; translate:-50% 0;
  width: 220px; height: 34px;
  background: radial-gradient(50% 100% at 50% 0%, rgba(154,91,224,.5), transparent 75%);
  filter: blur(6px);
  pointer-events:none;
}

.cta{
  position:relative;
  z-index:1;
  padding: .95rem 2.6rem;
  background: linear-gradient(180deg, #1c3a63, #0e2542);
  border: 1px solid rgba(201,160,74,.55);
  border-radius: 3px;
  color: var(--ink);
  font-family: var(--font-head-ka);
  font-weight:600;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  letter-spacing:.06em;
  box-shadow: 0 0 0 rgba(0,0,0,0), 0 10px 30px rgba(0,0,0,.5);
  transition: transform .35s var(--ease-oracle), box-shadow .35s var(--ease-oracle), background .35s, opacity .3s;
}
.cta:hover{
  transform: translateY(-2px);
  background: linear-gradient(180deg, #234a7c, #123058);
  box-shadow: 0 0 24px rgba(154,91,224,.55), 0 14px 34px rgba(0,0,0,.55);
}
.cta:active{ transform: translateY(0); }

/* hidden until the entry gate is dismissed */
.stage:not(.is-entered) .lectern{ opacity:0; pointer-events:none; }
.stage.is-entered .lectern{ opacity:1; transition: opacity .8s var(--ease-oracle) .3s; }

/* ============================================================
   SOUND-ENTRY GATE
   ============================================================ */
.gate{
  position:absolute; inset:0;
  z-index: 50;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(70% 70% at 50% 45%, rgba(21,12,37,.85), rgba(3,2,9,.96));
  backdrop-filter: blur(3px);
  transition: opacity .7s var(--ease-oracle), visibility 0s linear 0s;
}
.gate.is-hidden{
  opacity:0;
  visibility:hidden;
  transition: opacity .7s var(--ease-oracle), visibility 0s linear .7s;
}
.gate__inner{ text-align:center; }
.gate__mark{
  display:block;
  color: var(--violet-glow);
  font-size: 2rem;
  margin-bottom: .6rem;
  text-shadow: 0 0 24px rgba(154,91,224,.65);
  animation: orbPulse 3.2s var(--ease-oracle) infinite;
}
@keyframes orbPulse{
  0%,100%{ transform: scale(1); opacity:.85; }
  50%{ transform: scale(1.12); opacity:1; }
}
.gate__title{
  margin: 0 0 1.6rem;
  color: var(--gold-bright);
  font-family: var(--font-display);
  letter-spacing:.5em;
  font-size: clamp(1.2rem, 3vw, 1.7rem);
  text-shadow: 0 0 20px rgba(243,220,156,.4);
}
.gate__btn{
  padding: .9rem 3rem;
  background: transparent;
  border: 1px solid rgba(201,160,74,.6);
  border-radius: 2px;
  color: var(--ink);
  font-family: var(--font-head-ka);
  letter-spacing:.1em;
  font-size: 1rem;
  transition: background .3s, box-shadow .3s, transform .3s var(--ease-oracle);
}
.gate__btn:hover{
  background: rgba(201,160,74,.12);
  box-shadow: 0 0 26px rgba(154,91,224,.4);
  transform: translateY(-2px);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 720px){
  .brand{ top:3vh; letter-spacing:.3em; }
  .lectern{ bottom: 5svh; }
}

/* ============================================================
   REGISTRATION OVERLAY
   ============================================================ */
.overlay{
  position:fixed; inset:0;
  z-index: 100;
  display:flex; align-items:center; justify-content:center;
  padding: 4vh 4vw;
  visibility:hidden;
  opacity:0;
  transition: opacity .4s var(--ease-oracle), visibility 0s linear .4s;
}
.overlay.is-open{
  visibility:visible;
  opacity:1;
  transition: opacity .4s var(--ease-oracle);
}
.overlay__scrim{
  position:absolute; inset:0;
  background: radial-gradient(80% 80% at 50% 30%, rgba(21,12,37,.92), rgba(3,2,9,.97));
  backdrop-filter: blur(6px);
}

.reg{
  position:relative;
  width:min(420px, 100%);
  max-height: 92svh;
  overflow-y:auto;
  padding: 2.6rem 2.2rem 2.2rem;
  background: linear-gradient(180deg, rgba(21,12,37,.9), rgba(7,5,13,.96));
  border: 1px solid rgba(201,160,74,.45);
  border-radius: 6px;
  box-shadow: 0 0 0 6px rgba(3,2,9,.35) inset, 0 0 60px rgba(154,91,224,.25), 0 30px 60px rgba(0,0,0,.6);
  transform: translateY(14px) scale(.98);
  opacity:0;
  transition: transform .45s var(--ease-oracle), opacity .45s var(--ease-oracle);
}
.overlay.is-open .reg{ transform: translateY(0) scale(1); opacity:1; }

.reg__close{
  position:absolute; top:1rem; right:1rem;
  width: 30px; height:30px;
  border-radius:50%;
  background: transparent;
  border: 1px solid rgba(188,174,203,.35);
  color: var(--ink-dim);
  font-size: .85rem;
  display:flex; align-items:center; justify-content:center;
  transition: border-color .25s, color .25s;
}
.reg__close:hover{ border-color: var(--gold-bright); color: var(--gold-bright); }

.reg__eyebrow{
  margin:0 0 .3rem;
  color: var(--gold);
  font-size: .72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
}

.reg__tabs{
  display:flex;
  gap: 1.4rem;
  margin: 0 0 1.4rem;
  border-bottom: 1px solid rgba(201,160,74,.2);
}
.reg__tab{
  background:none;
  border:none;
  padding: 0 0 .7rem;
  color: var(--ink-faint);
  font-family: var(--font-head-ka);
  font-size: .96rem;
  cursor:pointer;
  position:relative;
  transition: color .25s;
}
.reg__tab.is-active{ color: var(--gold-bright); }
.reg__tab.is-active::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px;
  height:2px;
  background: var(--gold-bright);
  box-shadow: 0 0 10px rgba(243,220,156,.6);
}
.reg__tab:hover{ color: var(--ink); }

.reg__title{
  margin: 0 0 1.6rem;
  font-family: var(--font-head-ka);
  font-weight:600;
  font-size: clamp(1.5rem, 4vw, 1.9rem);
  color: var(--ink);
  text-shadow: 0 0 20px rgba(154,91,224,.35);
}

.reg__form{ display:flex; flex-direction:column; gap: 1.1rem; }
.reg__form[hidden]{ display: none; }
.field{ display:flex; flex-direction:column; gap:.45rem; }
.field__label{
  font-size: .85rem;
  color: var(--ink-dim);
}
.field__label em{
  font-style:normal;
  color: var(--ink-faint);
  font-size:.78em;
}
.field__input{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(188,174,203,.28);
  border-radius: 4px;
  padding: .75rem .9rem;
  color: var(--ink);
  font-family: var(--font-body-ka);
  font-size: .96rem;
  transition: border-color .25s, box-shadow .25s;
}
.field__input:focus{
  border-color: var(--violet-glow);
  box-shadow: 0 0 0 3px rgba(154,91,224,.18);
}
.field__input:invalid:not(:placeholder-shown){ border-color: rgba(214,110,110,.6); }

.field__error{
  min-height: 1.1em;
  margin:0;
  color:#e08a8a;
  font-size:.82rem;
}

.reg__submit{
  margin-top:.4rem;
  padding: .9rem 1rem;
  background: linear-gradient(180deg, #1c3a63, #0e2542);
  border: 1px solid rgba(201,160,74,.55);
  border-radius: 4px;
  color: var(--ink);
  font-family: var(--font-head-ka);
  font-weight:600;
  font-size: 1.02rem;
  letter-spacing:.04em;
  transition: transform .3s var(--ease-oracle), box-shadow .3s var(--ease-oracle);
}
.reg__submit:hover{ transform: translateY(-1px); box-shadow: 0 0 20px rgba(154,91,224,.45); }

.reg__success{
  text-align:center;
  padding: 1.4rem 0 .4rem;
  font-family: var(--font-head-ka);
  color: var(--gold-bright);
  font-size: 1.1rem;
  text-shadow: 0 0 18px rgba(243,220,156,.4);
}

/* ============================================================
   READING FLOW — context selection, card grid, story display
   ============================================================ */
.reading{
  position: fixed; inset:0;
  z-index: 200;
  display:flex; align-items:center; justify-content:center;
  padding: 4vh 4vw;
}
.reading[hidden]{
  display: none;
}
.reading__scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(80% 80% at 50% 30%, rgba(21,12,37,.94), rgba(3,2,9,.98));
  backdrop-filter: blur(6px);
}
.reading__panel{
  position:relative;
  width:min(880px, 100%);
  max-height: 90svh;
  overflow-y:auto;
  padding: 2.6rem clamp(1.2rem, 4vw, 3rem);
  background: linear-gradient(180deg, rgba(21,12,37,.85), rgba(7,5,13,.95));
  border: 1px solid rgba(201,160,74,.4);
  border-radius: 8px;
  box-shadow: 0 0 60px rgba(154,91,224,.2), 0 30px 70px rgba(0,0,0,.6);
}

.rscreen__eyebrow{
  margin:0 0 .3rem;
  color: var(--gold);
  font-size: .74rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  text-align:center;
}
.rscreen__title{
  margin: 0 0 .6rem;
  font-family: var(--font-head-ka);
  font-weight:600;
  font-size: clamp(1.4rem, 3.4vw, 1.8rem);
  color: var(--ink);
  text-align:center;
  text-shadow: 0 0 20px rgba(154,91,224,.35);
}
.rscreen__hint{
  margin: 0 0 1.6rem;
  text-align:center;
  color: var(--ink-dim);
  font-size: .92rem;
}

/* context grid */
.context-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .8rem;
  margin-top: 1.6rem;
}
.context-btn{
  padding: 1rem 1.1rem;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(201,160,74,.32);
  border-radius: 5px;
  color: var(--ink);
  font-family: var(--font-body-ka);
  font-size: .96rem;
  text-align:left;
  transition: border-color .25s, background .25s, transform .25s var(--ease-oracle);
}
.context-btn:hover{
  border-color: var(--violet-glow);
  background: rgba(154,91,224,.08);
  transform: translateY(-1px);
}

/* card grid */
.card-grid{
  display:grid;
  grid-template-columns: repeat(10, 1fr);
  gap: .5rem;
}
@media (max-width: 720px){
  .card-grid{ grid-template-columns: repeat(6, 1fr); }
}

.card-tile{
  position:relative;
  aspect-ratio: 2/3;
  background: none;
  border: none;
  perspective: 600px;
  transition: opacity .5s var(--ease-oracle), transform .5s var(--ease-oracle);
}
.card-tile__inner{
  position:absolute; inset:0;
  border-radius: 4px;
  transform-style: preserve-3d;
  transition: transform .6s var(--ease-oracle);
  box-shadow: 0 4px 10px rgba(0,0,0,.5);
}
.card-tile.is-selected .card-tile__inner{ transform: rotateY(180deg); }

.card-tile__face{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  border-radius: 4px;
  backface-visibility: hidden;
  padding: .3rem;
  text-align:center;
}
.card-tile__face--back{
  border: 1px solid rgba(201,160,74,.4);
  padding: 0;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(30,18,48,.95), rgba(7,5,13,.98));
}
.card-tile__face--front{
  border: 1px solid rgba(199,155,255,.5);
  transform: rotateY(180deg);
  padding: 0;
  overflow: hidden;
}
.card-tile__art{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  display:block;
}
.card-tile__caption{
  position:absolute; left:0; right:0; bottom:0;
  padding: .35rem .3rem .3rem;
  background: linear-gradient(0deg, rgba(3,2,9,.92), transparent);
  color: var(--ink);
  font-family: var(--font-head-ka);
  font-size: .62rem;
  line-height: 1.15;
  text-align:center;
}

.card-tile:not(.is-selected):hover .card-tile__inner{
  transform: translateY(-3px);
  box-shadow: 0 0 16px rgba(154,91,224,.4);
}

/* once 4 are picked, fade out the rest so the chosen 4 stand out
   (spec §45: remaining cards disappear, selected cards gather) */
.card-grid.is-resolved .card-tile:not(.is-selected){
  opacity: 0;
  transform: scale(.85);
  pointer-events:none;
}
.card-grid.is-resolved .card-tile.is-selected{
  box-shadow: 0 0 22px rgba(243,220,156,.5);
}

.field--checkbox{
  flex-direction: row;
  align-items: center;
  gap: .6rem;
  cursor: pointer;
  user-select: none;
}
.field--checkbox input[type="checkbox"]{
  width: 18px; height: 18px;
  accent-color: var(--gold-bright);
  cursor: pointer;
}
.field--checkbox span{
  font-size: .9rem;
  color: var(--ink-dim);
}

.logout-btn{
  position: absolute;
  top: 1rem; right: 1rem;
  z-index: 5;
  padding: .5rem 1rem;
  background: transparent;
  border: 1px solid rgba(188,174,203,.3);
  border-radius: 4px;
  color: var(--ink-faint);
  font-family: var(--font-body-ka);
  font-size: .8rem;
  transition: border-color .25s, color .25s;
}
.logout-btn:hover{
  border-color: var(--gold-bright);
  color: var(--gold-bright);
}

.back-btn{
  position: absolute;
  top: 1rem; left: 1rem;
  z-index: 5;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(188,174,203,.3);
  border-radius: 50%;
  color: var(--ink-faint);
  font-size: 1.1rem;
  line-height: 1;
  transition: border-color .25s, color .25s;
}
.back-btn:hover{
  border-color: var(--gold-bright);
  color: var(--gold-bright);
}

/* ============================================================
   COIN / TOKEN BADGE — small fixed indicator, top-right corner
   ============================================================ */
.coin-badge{
  position: fixed;
  top: 3.8rem; right: 1rem;
  z-index: 300;
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .7rem .3rem .3rem;
  background: rgba(7,5,13,.7);
  border: 1px solid rgba(201,160,74,.5);
  border-radius: 999px;
  box-shadow: 0 0 16px rgba(154,91,224,.25);
}
.coin-badge[hidden]{ display: none; }
.coin-badge__icon{
  width: 30px;
  height: 30px;
  display: block;
}
.coin-badge__count{
  color: var(--gold-bright);
  font-family: var(--font-head-ka);
  font-weight: 600;
  font-size: .95rem;
}

/* ============================================================
   ADMIN PANEL — only ever shown to allowlisted emails; sits to the
   left of the chat toggle in the same top-right cluster
   ============================================================ */
.admin-widget{
  position: fixed;
  top: 1rem; right: 14.5rem;
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.admin-widget[hidden]{ display: none; }

/* AUDIT (Phase 1 GE/EN i18n, real user request): sits in the one
   open slot on the top-right widget row (referral 21.5rem / admin
   14.5rem / chat 7.5rem are already taken — see those rules above/
   below) — same fixed-row pattern, same visual language as
   .admin-toggle, so it reads as part of the same button group. */
.lang-toggle{
  position: fixed;
  top: 1rem; right: 1rem;
  z-index: 300;
  padding: .5rem 1rem;
  background: rgba(30,20,42,.55);
  border: 1px solid rgba(201,160,74,.55);
  border-radius: 6px;
  color: var(--gold-bright);
  font-family: var(--font-display);
  letter-spacing: .18em;
  font-size: .72rem;
  text-shadow: 0 0 10px rgba(243,220,156,.4);
  box-shadow: 0 0 16px rgba(154,91,224,.25);
  cursor: pointer;
}
.lang-toggle:hover{
  background: rgba(30,20,42,.75);
  box-shadow: 0 0 22px rgba(154,91,224,.4);
}

.admin-toggle{
  padding: .5rem 1.2rem;
  background: rgba(110,30,30,.55);
  border: 1px solid rgba(201,160,74,.55);
  border-radius: 6px;
  color: var(--gold-bright);
  font-family: var(--font-display);
  letter-spacing: .18em;
  font-size: .72rem;
  text-shadow: 0 0 10px rgba(243,220,156,.4);
  box-shadow: 0 0 16px rgba(154,91,224,.25);
}

.admin-panel{
  width: min(300px, 75vw);
  max-height: 65svh;
  overflow-y: auto;
  margin-top: .5rem;
  padding: 1rem;
  background: rgba(3,2,9,.92);
  border: 1px solid rgba(201,160,74,.5);
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,.6);
}
.admin-panel[hidden]{ display: none; }

.admin-panel__section{
  margin-bottom: 1.1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid rgba(201,160,74,.2);
}
.admin-panel__section:last-child{
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.admin-panel__label{
  margin: 0 0 .5rem;
  color: var(--gold-bright);
  font-family: var(--font-head-ka);
  font-weight: 600;
  font-size: .82rem;
}
.admin-panel__online-list,
.admin-panel__admins-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.admin-panel__online-list li,
.admin-panel__admins-list li{
  color: var(--ink-dim);
  font-size: .8rem;
  line-height: 1.4;
  word-break: break-word;
}
.admin-panel__online-list li strong{
  color: var(--ink);
  font-weight: 600;
}
.admin-panel__add-form{
  display: flex;
  gap: .4rem;
  margin-bottom: .5rem;
}
.admin-panel__input{
  flex: 1;
  min-width: 0;
  padding: .4rem .6rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(188,174,203,.3);
  border-radius: 4px;
  color: var(--ink);
  font-size: .8rem;
}
.admin-panel__add-btn{
  padding: .4rem .7rem;
  background: rgba(14,37,66,.65);
  border: 1px solid rgba(201,160,74,.5);
  border-radius: 4px;
  color: var(--ink);
  font-size: .78rem;
  white-space: nowrap;
}
.admin-panel__add-btn:hover{ border-color: var(--gold-bright); }
.admin-panel__note{
  margin: .3rem 0 0;
  color: var(--gold);
  font-size: .78rem;
}

@media (max-width: 720px){
  .admin-widget{ right: 1rem; top: 7.2rem; }
  .referral-widget{ right: 1rem; top: 10.4rem; }
}

/* ============================================================
   REFERRAL PANEL — visible to every registered person, not just
   admins. Sits left of the admin toggle in the same top-right row.
   ============================================================ */
.referral-widget{
  position: fixed;
  top: 1rem; right: 21.5rem;
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.referral-widget[hidden]{ display: none; }

.referral-toggle{
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  background: rgba(30,60,30,.55);
  border: 1px solid rgba(201,160,74,.55);
  border-radius: 50%;
  font-size: 1.05rem;
  box-shadow: 0 0 16px rgba(154,91,224,.25);
}

.referral-panel{
  width: min(280px, 78vw);
  margin-top: .5rem;
  padding: 1.1rem;
  text-align: center;
  background: rgba(3,2,9,.92);
  border: 1px solid rgba(201,160,74,.5);
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,.6);
}
.referral-panel[hidden]{ display: none; }

.referral-panel__title{
  margin: 0 0 .8rem;
  color: var(--gold-bright);
  font-family: var(--font-head-ka);
  font-weight: 600;
  font-size: .95rem;
}
.referral-panel__label{
  margin: 0 0 .3rem;
  color: var(--ink-faint);
  font-size: .78rem;
}
.referral-panel__code{
  margin: 0 0 .8rem;
  padding: .5rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(201,160,74,.4);
  border-radius: 4px;
  color: var(--gold-bright);
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: .12em;
}
.referral-panel__copy-btn{
  width: 100%;
  padding: .55rem;
  margin-bottom: .5rem;
  background: rgba(14,37,66,.65);
  border: 1px solid rgba(201,160,74,.5);
  border-radius: 4px;
  color: var(--ink);
  font-family: var(--font-head-ka);
  font-size: .85rem;
}
.referral-panel__copy-btn:hover{ border-color: var(--gold-bright); }
.referral-panel__toast{
  margin: -.2rem 0 .5rem;
  color: var(--gold-bright);
  font-size: .78rem;
}
.referral-panel__hint{
  margin: 0;
  color: var(--ink-dim);
  font-size: .78rem;
  line-height: 1.5;
}
.referral-panel__count{
  margin: .6rem 0 0;
  padding-top: .6rem;
  border-top: 1px solid rgba(201,160,74,.2);
  color: var(--ink-faint);
  font-size: .78rem;
}

/* ============================================================
   SHARED CHAT — toggled open/closed by click, stays open until
   clicked again (not hover-based)
   ============================================================ */
.chat-widget{
  position: fixed;
  top: 1rem; right: 7.5rem;
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.chat-widget[hidden]{ display: none; }

.chat-toggle{
  position: relative;
  padding: .5rem 1.2rem;
  background: rgba(60,30,110,.55);
  border: 1px solid rgba(201,160,74,.55);
  border-radius: 6px 6px 0 0;
  color: var(--gold-bright);
  font-family: var(--font-display);
  letter-spacing: .18em;
  font-size: .72rem;
  line-height: 1.4;
  text-align: center;
  text-shadow: 0 0 10px rgba(243,220,156,.4);
  box-shadow: 0 0 16px rgba(154,91,224,.25);
}
.chat-toggle__line1,
.chat-toggle__line2{ display: block; }

/* AUDIT (real user request, this session — a persistent, always-
   visible unread signal, in addition to the existing auto-open
   behavior — see js/reading.js's fetchChatMessages(), which already
   opens the panel on a new message; this badge is deliberately
   ADDITIVE, not a replacement, so an unread message stays visible
   even if the panel gets closed again right after auto-opening). */
.chat-toggle__badge{
  position: absolute;
  top: -.35rem;
  right: -.35rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e0453f;
  box-shadow: 0 0 8px rgba(224,69,63,.8), 0 0 0 2px rgba(7,5,13,.9);
}

.chat-panel{
  width: min(260px, 70vw);
  max-height: 55svh;
  display: flex;
  flex-direction: column;
  background: rgba(3,2,9,.88);
  border: 1px solid rgba(201,160,74,.5);
  border-top: none;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,.6);
}
.chat-panel[hidden]{ display: none; }

.chat-panel__messages{
  flex: 1;
  overflow-y: auto;
  padding: .8rem .9rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  max-height: 40svh;
}
.chat-message__header{
  display: flex;
  align-items: center;
  gap: .4rem;
}
.chat-message__author{
  margin: 0;
  color: var(--gold-bright);
  font-family: var(--font-head-ka);
  font-weight: 600;
  font-size: .82rem;
}
.chat-message__body{
  margin: .15rem 0 0;
  color: var(--ink);
  font-size: .88rem;
  line-height: 1.4;
  word-break: break-word;
}
.chat-gift-btn{
  padding: .05rem .35rem;
  background: transparent;
  border: 1px solid rgba(201,160,74,.35);
  border-radius: 999px;
  font-size: .7rem;
  line-height: 1.4;
  color: var(--ink-faint);
  transition: border-color .2s, transform .2s;
}
.chat-gift-btn:hover:not(:disabled){
  border-color: var(--gold-bright);
  transform: scale(1.1);
}
.chat-gift-btn:disabled{
  opacity: .8;
  cursor: default;
}

.chat-panel__form{
  border-top: 1px solid rgba(201,160,74,.25);
  padding: .5rem;
}
.chat-panel__input{
  width: 100%;
  padding: .5rem .7rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(188,174,203,.3);
  border-radius: 4px;
  color: var(--ink);
  font-family: var(--font-body-ka);
  font-size: .85rem;
}
.chat-panel__input:focus{
  border-color: var(--violet-glow);
}

@media (max-width: 720px){
  .chat-widget{ right: 1rem; top: 4rem; }
}

/* ============================================================
   CHOICE SCREEN — shown right after auth, before entering any
   specific divination flow. Deliberately transparent: the entry
   video (with sound) keeps playing faintly visible behind it,
   rather than being covered by an opaque panel.
   ============================================================ */
.choice-overlay{
  position: fixed; inset: 0;
  z-index: 190;
  display: flex; align-items: center; justify-content: center;
  padding: 4vh 4vw;
  background: rgba(3,2,9,.5);
  backdrop-filter: blur(1.5px);
}
.choice-overlay[hidden]{ display: none; }

.choice-panel{
  position: relative;
  width: min(640px, 100%);
  padding: clamp(2.4rem, 5vw, 4rem) clamp(1.6rem, 4vw, 3rem);
  text-align: center;
  border: 1px solid rgba(201,160,74,.55);
  border-radius: 6px;
  background: rgba(7,5,13,.32);
  box-shadow: 0 0 60px rgba(154,91,224,.15), 0 30px 70px rgba(0,0,0,.4);
}

/* AUDIT (real user request, this session — admin page should be
   "solid, not see-through, matching the site's dark background"):
   every other .choice-overlay screen deliberately lets the
   atmospheric background video/candles show faintly through (part of
   this project's own established mystical look) — the admin page is
   the one deliberate exception, since it's a data/dashboard screen,
   not a divination one. Uses the same --void-deep the site's own
   base <body> background already uses, so it reads as "the site's
   real background", not a new color. */
#adminPageScreen{
  background: var(--void-deep);
  backdrop-filter: none;
}
#adminPageScreen .choice-panel{
  background: var(--void-deep);
}

.choice-panel--result{
  max-height: 88svh;
  overflow-y: auto;
  text-align: left;
}
.choice-panel--result .choice-panel__brand,
.choice-panel--result .choice-panel__title,
.choice-panel--result .result-range,
.choice-panel--result .result-score{
  text-align: center;
}

/* AUDIT FIX (real user request, this session): the psych-test topic
   list keeps growing (7 topics so far) and the base .choice-panel had
   no scroll mechanism at all, so entries past the viewport edge were
   simply unreachable. overflow-y:auto + a bounded max-height is all
   that's needed — mouse-wheel and touch/trackpad drag scrolling are
   both native browser behavior once a container scrolls, no JS
   required. The rest is just making the scrollbar itself look
   intentional instead of a raw OS default. */
.choice-panel--scrollable{
  max-height: 88svh;
  overflow-y: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-bright) rgba(255,255,255,.06);
}
.choice-panel--scrollable::-webkit-scrollbar{ width: 8px; }
.choice-panel--scrollable::-webkit-scrollbar-track{
  background: rgba(255,255,255,.06);
  border-radius: 4px;
}
.choice-panel--scrollable::-webkit-scrollbar-thumb{
  background: var(--gold-bright);
  opacity: .7;
  border-radius: 4px;
}
.choice-panel--scrollable::-webkit-scrollbar-thumb:hover{
  background: var(--gold-bright);
  opacity: 1;
}

.choice-panel__brand{
  margin: 0 0 1.6rem;
  color: var(--gold-bright);
  font-family: var(--font-display);
  letter-spacing: .4em;
  font-size: clamp(.95rem, 2vw, 1.15rem);
  text-shadow: 0 0 18px rgba(243,220,156,.4);
}
.choice-panel__title{
  margin: 0 0 2.2rem;
  font-family: var(--font-head-ka);
  font-weight: 600;
  font-size: clamp(1.4rem, 3.4vw, 1.8rem);
  color: var(--ink);
  text-shadow: 0 0 20px rgba(154,91,224,.35);
}

.choice-btn{
  display: block;
  width: 100%;
  max-width: 340px;
  margin: 0 auto 1rem;
  padding: 1.1rem 1.2rem;
  background: rgba(14,37,66,.55);
  border: 1px solid rgba(201,160,74,.5);
  border-radius: 4px;
  color: var(--ink);
  font-family: var(--font-head-ka);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .02em;
  transition: transform .3s var(--ease-oracle), box-shadow .3s var(--ease-oracle), background .3s;
}
.choice-btn:hover{
  transform: translateY(-2px);
  background: rgba(20,50,88,.65);
  box-shadow: 0 0 22px rgba(154,91,224,.4);
}

/* AUDIT FIX (real user request, this session — "გართობა" is
   admin-only): a locked choice-btn stays visible (so an admin can
   still see and use it once unlocked) but reads as clearly
   unavailable — dimmed, no hover lift, a lock icon instead of the
   usual purple glow. js/reading.js's checkAdminAccess() removes this
   class once the server confirms admin status. */
.choice-btn--locked{
  position: relative;
  opacity: .5;
  cursor: not-allowed;
  color: var(--gold);
}
.choice-btn--locked:hover{
  transform: none;
  background: rgba(14,37,66,.55);
  box-shadow: none;
}
.choice-btn__lock{
  display: none;
  margin-left: .5rem;
  font-size: .95em;
  vertical-align: middle;
  filter: drop-shadow(0 0 6px rgba(201,160,74,.6));
}
.choice-btn--locked .choice-btn__lock{
  display: inline-block;
}

/* wraps a choice/topic button together with its like control — the
   button keeps choosing that option; the like pill is a separate
   element so it never fires the option's own click handler */
.option-wrap{
  max-width: 340px;
  margin: 0 auto 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .5rem;
}
.option-wrap--wide{ max-width: 460px; }
.option-wrap .choice-btn,
.option-wrap .topic-btn{
  margin: 0;
  max-width: none;
  width: 100%;
}

.like-btn{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .75rem;
  background: transparent;
  border: 1px solid rgba(201,160,74,.4);
  border-radius: 999px;
  color: var(--ink-faint);
  font-family: var(--font-body-ka);
  font-size: .8rem;
  line-height: 1;
  transition: border-color .25s, color .25s, transform .2s;
}
.like-btn:hover{
  border-color: var(--gold-bright);
  color: var(--gold-bright);
  transform: translateY(-1px);
}
.like-btn.is-liked{
  color: var(--gold-bright);
  border-color: var(--gold-bright);
}
.like-btn__icon{
  font-size: .95rem;
}
.like-btn:disabled{
  opacity: .6;
  cursor: default;
  transform: none;
}

.choice-panel__note{
  margin: .6rem 0 0;
  color: var(--ink-faint);
  font-size: .85rem;
}

.topic-btn{
  display: block;
  width: 100%;
  max-width: 460px;
  margin: 0 auto 1.4rem;
  padding: 1.2rem 1.4rem;
  background: rgba(14,10,20,.5);
  border: 1px solid rgba(201,160,74,.45);
  border-radius: 4px;
  color: var(--ink);
  font-family: var(--font-head-ka);
  font-weight: 500;
  font-size: .98rem;
  line-height: 1.5;
  text-align: center;
  transition: transform .3s var(--ease-oracle), box-shadow .3s var(--ease-oracle), background .3s;
}
.topic-btn:hover{
  transform: translateY(-2px);
  background: rgba(30,20,42,.65);
  box-shadow: 0 0 22px rgba(154,91,224,.4);
}

/* ============================================================
   ORACULUM "მომავლის გზა" — 16-step path engine
   ============================================================ */
.path-topic-grid{ display: flex; flex-direction: column; }
.path-topic-grid .topic-btn{ margin-bottom: 1rem; }

/* AUDIT (real user request, this session — spec: "კითხვა გამოჩნდეს
   ნელა, რბილი fade-in... ეფექტით" / "3-წამიანი მშვიდი დაყოვნება"):
   the question text and its answer buttons both start invisible and
   fade in once the JS-driven per-question delay elapses — pure CSS
   transition, toggled by adding/removing .is-visible in JS (no
   animation library needed for a simple opacity+lift fade). */
.path-question,
#pathAnswerOptions,
#hfAnswerOptions,
#identityQuestionText,
#identityAnswerOptions,
#oneYearQuestionText,
#oneYearAnswerOptions,
#selfTalentQuestionText,
#selfTalentAnswerOptions{
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .6s var(--ease-oracle), transform .6s var(--ease-oracle);
}
.path-question.is-visible,
#pathAnswerOptions.is-visible,
#hfAnswerOptions.is-visible,
#identityQuestionText.is-visible,
#identityAnswerOptions.is-visible,
#oneYearQuestionText.is-visible,
#oneYearAnswerOptions.is-visible,
#selfTalentQuestionText.is-visible,
#selfTalentAnswerOptions.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* intro-screen concentration message: same fade-in principle as the
   question text above, just its own selector since it lives on a
   different screen (identityIntroScreen, shown once at 3s per the
   spec's own pacing — see js/oraculum-identity-transformation.js). */
.identity-intro__message{
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .6s var(--ease-oracle), transform .6s var(--ease-oracle);
  text-align: center;
  color: var(--gold-bright);
  line-height: 1.6;
  margin: 1.4rem 0;
}
.identity-intro__message.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* 4-answer layout (კი/ნაწილობრივ/არა/არ ვიცი) needs a touch less
   vertical spacing per button than the 2/3-answer engines so all 4
   comfortably fit without excess scrolling on mobile. */
.identity-answers .test-answer-btn{
  margin-bottom: .6rem;
}

.identity-report-item{
  text-align: left;
}

.path-result-verdict{
  font-family: var(--font-head-ka);
  font-weight: 600;
  font-size: 1.05rem;
}
.path-result-footnote{
  margin: 1.6rem 0 0;
  color: var(--gold);
  font-size: .82rem;
  font-style: italic;
  opacity: .85;
}

/* AUDIT (real gap in the source Excel — Verdicts sheet's Title/Text
   columns corrupted to 1 character each): a dimmed, italic style for
   the "ვერდიქტის ტექსტი მალე დაემატება" placeholder, so it visually
   reads as a pending-content notice rather than a real verdict. */
.path-result-verdict.is-pending{
  font-style: italic;
  opacity: .7;
  font-weight: 400;
}

/* ============================================================
   PSYCH TEST — one question at a time + result
   ============================================================ */
.test-progress{
  margin: 0 0 1.4rem;
  color: var(--gold);
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.test-question{
  margin: 0 0 2.4rem;
  font-family: var(--font-head-ka);
  font-weight: 500;
  font-size: clamp(1.15rem, 2.6vw, 1.4rem);
  line-height: 1.5;
  color: var(--ink);
}
.test-answers{
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.test-answer-btn{
  min-width: 140px;
  padding: 1rem 2rem;
  background: rgba(14,37,66,.55);
  border: 1px solid rgba(201,160,74,.5);
  border-radius: 4px;
  color: var(--ink);
  font-family: var(--font-head-ka);
  font-weight: 600;
  font-size: 1rem;
  transition: transform .3s var(--ease-oracle), box-shadow .3s var(--ease-oracle), background .3s;
}
.test-answer-btn:hover{
  transform: translateY(-2px);
  background: rgba(20,50,88,.65);
  box-shadow: 0 0 22px rgba(154,91,224,.4);
}

.result-range{
  margin: 0 0 .4rem;
  color: var(--gold);
  font-size: .8rem;
  letter-spacing: .1em;
}
.result-score{
  margin: 0 0 1.8rem;
  color: var(--ink-dim);
  font-size: .95rem;
  text-align: center;
}
.result-text{
  margin: 0 0 1rem;
  color: var(--ink);
  font-size: .96rem;
  line-height: 1.7;
}
.result-points{
  margin: 0 0 1.2rem;
  padding-left: 1.4rem;
  color: var(--ink);
  font-size: .96rem;
  line-height: 1.8;
}
.result-points li{ margin-bottom: .2rem; }
.result-section{
  margin: 0 0 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(201,160,74,.2);
}
.result-section__label{
  margin: 0 0 .4rem;
  color: var(--gold-bright);
  font-family: var(--font-head-ka);
  font-weight: 600;
  font-size: .92rem;
}

.result-blocks{
  margin-top: .4rem;
}
.result-list-label{
  margin: 0 0 .5rem;
  color: var(--gold-bright);
  font-family: var(--font-head-ka);
  font-weight: 600;
  font-size: .9rem;
}

.selection-counter{
  margin: 1.2rem 0 0;
  text-align:center;
  color: var(--ink-dim);
  font-size: .88rem;
  letter-spacing:.08em;
}

/* loading */
.loading-orb{
  width: 70px; height:70px;
  margin: 2rem auto 0;
  border-radius:50%;
  background: radial-gradient(circle at 40% 35%, #fff4d6, var(--gold-bright) 30%, var(--violet) 75%, #3a1a68 100%);
  box-shadow: 0 0 40px 10px rgba(243,220,156,.5), 0 0 80px 20px rgba(154,91,224,.45);
  animation: orbPulse 1.6s var(--ease-oracle) infinite;
}

/* story display */
.selected-row{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem;
  margin: 1.2rem 0 1.6rem;
}
.selected-chip{
  display:flex; align-items:center; gap:.5rem;
  padding: .3rem .9rem .3rem .3rem;
  border: 1px solid rgba(201,160,74,.45);
  border-radius: 999px;
  color: var(--gold-bright);
  font-size: .82rem;
  font-family: var(--font-head-ka);
}
.selected-chip__thumb{
  width: 28px; height: 40px;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid rgba(201,160,74,.5);
}
.story-text{
  font-family: var(--font-body-ka);
  font-size: 1.02rem;
  line-height: 1.85;
  color: var(--ink);
  white-space: pre-wrap;
}
.main-message{
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(201,160,74,.25);
  font-family: var(--font-head-ka);
  font-size: 1rem;
  color: var(--gold-bright);
  line-height: 1.7;
}

.cta--ghost{
  display:block;
  margin: 1.8rem auto 0;
  background: transparent;
}
.cta--ghost:hover{ background: rgba(154,91,224,.1); }

/* ============================================================
   TAROT READING FLOW — setup / draw / result
   ============================================================ */
.choice-panel--wide{
  width: min(880px, 100%);
  max-height: 88svh;
  overflow-y: auto;
}

.tarot-question-input{
  resize: vertical;
  font-family: inherit;
  min-height: 3.2rem;
}

.tarot-mode__label{
  margin: 1rem 0 .5rem;
  color: var(--ink-dim);
  font-size: .85rem;
  text-align: left;
}
.tarot-mode__options{
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.tarot-mode__option{
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1rem;
  border: 1px solid rgba(188,174,203,.28);
  border-radius: 4px;
  cursor: pointer;
  font-size: .9rem;
  color: var(--ink);
}
.tarot-mode__option input{ accent-color: var(--gold-bright); }
.tarot-mode__option:has(input:checked){
  border-color: var(--gold-bright);
  background: rgba(243,220,156,.06);
}

.tarot-draw__counter{
  margin: 0 0 1.2rem;
  color: var(--gold-bright);
  font-family: var(--font-head-ka);
  font-size: 1.1rem;
}

/* face-down manual-selection grid */
.tarot-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: .5rem;
  max-height: 46svh;
  overflow-y: auto;
  padding: .3rem;
}
.tarot-grid[hidden]{ display: none; }
.tarot-card{
  position: relative;
  aspect-ratio: 420/714;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(201,160,74,.35);
  background: transparent;
  padding: 0;
  transition: transform .15s ease, border-color .15s ease;
}
.tarot-card:hover:not(.tarot-card--disabled){
  transform: translateY(-3px);
  border-color: var(--gold-bright);
}
.tarot-card--disabled{
  cursor: default;
  opacity: .35;
}
.tarot-card__back-svg,
.tarot-card img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tarot-card--selected{
  border-color: var(--gold-bright);
  box-shadow: 0 0 14px rgba(243,220,156,.5);
}
.tarot-card__order-badge{
  position: absolute;
  top: 4px; right: 4px;
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  background: var(--gold-bright);
  color: #1a1226;
  font-size: .72rem;
  font-weight: 700;
  border-radius: 50%;
}

.tarot-auto__wrap{
  display: flex;
  justify-content: center;
  padding: 2rem 0;
}
.tarot-auto__wrap[hidden]{ display: none; }
.tarot-shuffle-btn{
  animation: tarotPulse 2.4s ease-in-out infinite;
}
@keyframes tarotPulse{
  0%, 100%{ box-shadow: 0 0 0 rgba(243,220,156,.0); }
  50%{ box-shadow: 0 0 26px rgba(243,220,156,.35); }
}
.tarot-shuffle-btn.is-shuffling{
  animation: tarotShuffleSpin .9s ease-in-out;
}
@keyframes tarotShuffleSpin{
  0%{ transform: scale(1) rotate(0deg); }
  50%{ transform: scale(1.05) rotate(-3deg); }
  100%{ transform: scale(1) rotate(0deg); }
}

/* revealed cards, after selection (either mode) */
.tarot-revealed{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: .8rem;
  margin: 1rem 0;
}
.tarot-revealed[hidden]{ display: none; }
.tarot-revealed__card{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
}
.tarot-revealed__card img{
  width: 100%;
  border-radius: 6px;
  border: 1px solid rgba(201,160,74,.5);
  box-shadow: 0 6px 18px rgba(0,0,0,.4);
  animation: tarotReveal .4s ease-out;
}
@keyframes tarotReveal{
  from{ opacity:0; transform: scale(.85) rotateY(90deg); }
  to{ opacity:1; transform: scale(1) rotateY(0); }
}
.tarot-revealed__label{
  font-size: .72rem;
  color: var(--ink-faint);
  text-align: center;
}
.tarot-revealed__name{
  font-size: .78rem;
  color: var(--gold-bright);
  text-align: center;
}

/* result screen */
.tarot-result{ text-align: left; }
.tarot-result__question{
  margin: 0 0 1.2rem;
  color: var(--violet-glow);
  font-style: italic;
  text-align: center;
}
.tarot-result__cardstrip{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
  gap: .5rem;
  margin-bottom: 1.6rem;
}
.tarot-result__cardstrip img{
  width: 100%;
  border-radius: 4px;
  border: 1px solid rgba(201,160,74,.4);
}
.tarot-result__section{
  margin-bottom: 1.4rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid rgba(201,160,74,.18);
}
.tarot-result__section:last-of-type{ border-bottom: none; }
.tarot-result__main-picture{
  padding: 1rem 1.2rem;
  background: rgba(243,220,156,.06);
  border: 1px solid rgba(201,160,74,.4);
  border-radius: 6px;
  border-bottom: 1px solid rgba(201,160,74,.4) !important;
}
.tarot-result__main-picture .tarot-result__label{ margin-bottom: .3rem; }
.tarot-result__main-picture .result-text{ font-size: 1.02rem; }
.tarot-result__label{
  margin: 0 0 .5rem;
  color: var(--gold-bright);
  font-family: var(--font-head-ka);
  font-weight: 600;
  font-size: .95rem;
}
.tarot-result__verdict .result-text{
  font-size: 1.05rem;
  color: var(--ink-bright, var(--ink));
}

/* sequential reading — rendered markdown body (spec §XIII) */
.tarot-result__body h3{
  margin: 1.6rem 0 .6rem;
  color: var(--gold-bright);
  font-family: var(--font-head-ka);
  font-weight: 600;
  font-size: 1.05rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid rgba(201,160,74,.3);
}
.tarot-result__body h3:first-child{ margin-top: 0; }
.tarot-result__body p{
  margin: 0 0 .9rem;
  line-height: 1.55;
}
.tarot-result__body p.tarot-result__sub-label{
  margin: 0 0 .3rem;
  color: var(--violet-glow);
  font-weight: 600;
}
.tarot-result__body strong{
  color: var(--gold-bright);
}
.tarot-result__body p:last-child{ margin-bottom: 0; }
.tarot-result__body hr{
  border: none;
  border-top: 1px solid rgba(201,160,74,.3);
  margin: 1.4rem 0;
}
.tarot-result__body p.tarot-result__direct-answer{
  margin-top: .4rem;
  padding: .9rem 1.1rem;
  background: rgba(243,220,156,.06);
  border: 1px solid rgba(201,160,74,.4);
  border-radius: 6px;
}
.tarot-result__body p.tarot-result__direct-answer strong{
  color: var(--ink-bright, var(--ink));
  font-weight: 600;
}

@media (max-width: 720px){
  .tarot-grid{ grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); }
}

/* ============================================================
   ORACULUM ANALYTICS — post-game rating widget (js/oraculum-
   analytics.js). Deliberately minimal, reuses this project's own
   existing tokens/spacing rather than introducing a new visual
   language — per the real user request this session, "don't
   radically change the existing design style."
   ============================================================ */
.rating-widget{
  margin: 1.6rem 0 0.4rem;
  text-align: center;
}
.rating-widget__prompt{
  font-family: var(--font-head-ka);
  font-size: 1rem;
  color: var(--gold-bright);
  margin-bottom: .6rem;
}
.rating-widget__stars{
  display: flex;
  justify-content: center;
  gap: .3rem;
  margin-bottom: .4rem;
}
.rating-widget__star{
  background: none;
  border: none;
  font-size: 2rem;
  line-height: 1;
  color: var(--gold);
  cursor: pointer;
  padding: .1rem .2rem;
  transition: transform .15s var(--ease-oracle), color .15s var(--ease-oracle);
}
.rating-widget__star:hover{
  transform: scale(1.15);
  color: var(--gold-bright);
}
.rating-widget__stars.is-locked .rating-widget__star{
  cursor: default;
}
.rating-widget__stars.is-locked .rating-widget__star:hover{
  transform: none;
}
.rating-widget__feedback-slot{
  margin-top: .8rem;
}
.rating-widget__feedback-question{
  font-size: .88rem;
  color: var(--ink);
  opacity: .85;
  margin-bottom: .5rem;
}
.rating-widget__feedback-options{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin-bottom: .5rem;
}
.rating-widget__feedback-btn{
  padding: .4rem .9rem;
  background: rgba(14,37,66,.55);
  border: 1px solid rgba(201,160,74,.4);
  border-radius: 999px;
  color: var(--ink);
  font-size: .82rem;
  cursor: pointer;
  transition: background .15s var(--ease-oracle);
}
.rating-widget__feedback-btn:hover{
  background: rgba(20,50,88,.65);
}
.rating-widget__feedback-skip{
  display: block;
  margin: 0 auto;
  background: none;
  border: none;
  color: var(--ink);
  opacity: .55;
  font-size: .78rem;
  text-decoration: underline;
  cursor: pointer;
}
.rating-widget__thanks{
  font-family: var(--font-head-ka);
  font-size: 1.05rem;
  color: var(--gold-bright);
  margin-bottom: .8rem;
}
.rating-widget__actions{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .7rem;
}
.rating-widget__actions .choice-btn{
  width: auto;
  min-width: 160px;
}

.rating-widget__share-btn{
  display: block;
  margin: .9rem auto 0;
  padding: .5rem 1.4rem;
  background: rgba(14,37,66,.55);
  border: 1px solid rgba(201,160,74,.5);
  border-radius: 999px;
  color: var(--gold-bright);
  font-family: var(--font-display, inherit);
  letter-spacing: .06em;
  font-size: .85rem;
  cursor: pointer;
  transition: background .15s var(--ease-oracle), transform .15s var(--ease-oracle);
}
.rating-widget__share-btn:hover{
  background: rgba(20,50,88,.65);
  transform: translateY(-1px);
}
.rating-widget__share-toast{
  text-align: center;
  margin: .4rem 0 0;
  font-size: .78rem;
  color: var(--gold-bright);
  opacity: .9;
}

/* AUDIT (real user request, this session — full admin page, "ანალიზი
   ვინ რომელს და რამდენჯერ იყენებს"): a plain, readable table for the
   per-game usage stats — matches the app's existing gold/dark palette,
   no new visual language introduced. */
.admin-usage-table{
  width: 100%;
  border-collapse: collapse;
  margin-top: .6rem;
  font-size: .85rem;
}
.admin-usage-table th,
.admin-usage-table td{
  padding: .5rem .6rem;
  text-align: left;
  border-bottom: 1px solid rgba(201,160,74,.25);
  color: var(--ink);
}
.admin-usage-table th{
  color: var(--gold-bright);
  font-family: var(--font-display, inherit);
  letter-spacing: .04em;
  font-size: .78rem;
  text-transform: uppercase;
}