/* ===================== VARIABLES ===================== */
:root {
  --bg-dark:#050507;
  --bg-panel:#0a0c10;
  --panel-glass:rgba(255,255,255,0.05);

  --neon:#ff5ca8;
  --neon-soft:#ff8fc4;
  --accent:#d946ef;

  --text:#f2f2f7;
  --muted:#a0a0b3;
  --border:#1c1c26;
}

/* ===================== RESET ===================== */
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  font-family: Inter, sans-serif;
  background:
    radial-gradient(circle at top, rgba(217,70,239,0.12), transparent 40%),
    radial-gradient(circle at bottom, rgba(255,92,168,0.12), transparent 40%),
    var(--bg-dark);
  color: var(--text);
  overflow-x: hidden;
}

/* ===================== CHAT LAYOUT ===================== */
.chat-page {
  display:flex;
  justify-content:center;
  padding:40px 0;
}

.chat-container {
  position:relative;
  width:100%;
  max-width:900px;
  height:90vh;
  background:
    linear-gradient(180deg,rgba(255,255,255,0.04),transparent),
    var(--bg-panel);
  border-radius:20px;
  display:flex;
  flex-direction:column;
  box-shadow:0 40px 100px rgba(0,0,0,.7);
  backdrop-filter:blur(10px);

  overflow-y:auto;
  overflow-x:hidden;
}

/* hide scrollbar visuals */
.chat-container::-webkit-scrollbar { width:0; height:0; }
.chat-container { scrollbar-width:none; }

/* ===================== HEADER ===================== */
.chat-header {
  padding:18px 22px;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}

.npc-info {
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
}

.avatar {
  width:44px;
  height:44px;
  border-radius:50%;
  overflow:hidden;
  background:
    linear-gradient(var(--bg-panel),var(--bg-panel)) padding-box,
    linear-gradient(135deg,var(--neon),var(--accent)) border-box;
  border:2px solid transparent;
}

.avatar img {
  width:100%;
  height:100%;
  object-fit:fill;
}

.npc-text {
  display:flex;
  flex-direction:column;
}

.status {
  font-size:.75rem;
  color:var(--muted);
}

/* avg rizz pill */
.avg-rizz-top {
  margin-left:auto;
  font-size:.85rem;
  color:var(--neon-soft);
  background:rgba(255,92,168,0.12);
  padding:6px 14px;
  border-radius:999px;
  border:1px solid rgba(255,92,168,0.35);
  font-weight:600;
  white-space:nowrap;
}

.avg-rizz-top span {
  color:var(--neon);
  font-weight:800;
}

/* ===================== MESSAGES ===================== */
.chat-messages {
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.message {
  max-width:75%;
  padding:13px 17px;
  border-radius:16px;
  line-height:1.45;
  animation:slideIn .25s ease;
}

@keyframes slideIn {
  from { opacity:0; transform:translateY(6px); }
  to { opacity:1; transform:none; }
}

.message.npc {
  background:rgba(255,255,255,0.06);
  backdrop-filter:blur(6px);
  align-self:flex-start;
}

.message.user {
  background:linear-gradient(135deg,var(--neon),var(--accent));
  color:#000;
  align-self:flex-end;
}

/* ===================== CHOICES ===================== */
.choices {
  padding:18px;
  border-top:1px solid var(--border);
  display:flex;
  flex-direction:column;
  gap:12px;
}

.options-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}

.choice-btn {
  padding:15px;
  border-radius:14px;
  background:var(--panel-glass);
  color:var(--text);
  border:1px solid var(--border);
  cursor:pointer;
  transition:all .25s ease;
  position:relative;
  overflow:hidden;
}

.choice-btn::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.18),transparent);
  opacity:0;
  transition:opacity .25s;
}

.choice-btn:hover {
  transform:translateY(-2px);
  border-color:var(--neon-soft);
}

.choice-btn:hover::after { opacity:1; }

.choice-btn.fading { opacity:.55; }
.choice-btn.final { opacity:.3; }

.restart-btn {
  background:linear-gradient(135deg,var(--neon),var(--accent));
  color:#000;
  font-weight:800;
}

/* ===================== TIMER ===================== */
.timer-bar {
  height:4px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
  border-radius:999px;
}

.timer-fill {
  height:100%;
  background:linear-gradient(90deg,var(--neon),var(--accent));
  animation:timerDrain linear forwards;
}

@keyframes timerDrain {
  from { width:100%; }
  to { width:0%; }
}

/* ===================== MAIN RIZZ IMAGE ===================== */
.image-frame {
  width:300px;
  height:300px;
  margin:18px auto;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--border);
  flex-shrink:0;
}

.image-frame img {
  width:100%;
  height:100%;
  object-fit:fill;
}

/* ===================== FINAL CARD ===================== */
.final-card {
  max-width:460px;
  margin:22px auto;
  padding:24px;
  border-radius:22px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.06),transparent),
    var(--bg-panel);
  border:1px solid var(--border);
  text-align:center;
}

/* ===================== TIER GRID ===================== */
.tier-grid {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
  margin-top:16px;
}

.tier-item {
  width:56px;
  height:56px;
  border-radius:10px;
  overflow:hidden;
  opacity:.35;
  transition:all .25s ease;
}

.tier-item.active {
  opacity:1;
  outline:2px solid var(--neon);
}

.tier-item img {
  width:100%;
  height:100%;
  object-fit:fill;
}

/* ===================== SHARE ===================== */
.share-copy {
  margin-top:14px;
  font-size:.9rem;
  color:var(--muted);
}

.share-btn {
  margin-top:20px;
  background:linear-gradient(135deg,var(--neon),var(--accent));
  color:#000;
  font-weight:800;
  border:none;
  padding:16px;
  border-radius:18px;
  cursor:pointer;
  transition:all .3s ease;
}

.share-btn:hover {
  transform:translateY(-2px) scale(1.04);
}

/* ===================== SIDEBAR ===================== */
.rizz-stats {
  position:absolute;
  right:-170px;
  top:20px;
  width:150px;
  padding:14px;
  background:rgba(255,255,255,.06);
  border-radius:16px;
  border:1px solid var(--border);
}

.rizz-stats h4 {
  margin:0;
  font-size:.75rem;
  color:var(--neon-soft);
}

.rizz-stats .value {
  font-size:1.6rem;
  font-weight:800;
}