/* ============ BUTTONS ============ */
.btn{
  padding:14px 22px;border-radius:14px;
  font-size:15px;font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .15s,box-shadow .2s,background .2s,opacity .2s;
}
.btn-primary{
  background:var(--ink);color:var(--bg);
  box-shadow:0 4px 14px rgba(14,14,12,.15);
}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{
  background:transparent;color:var(--ink);
  border:1px solid var(--line);
}
.btn-ghost:hover{background:var(--surface-2)}
.btn-accent{
  background:var(--accent);color:#fff;
  box-shadow:0 4px 14px rgba(255,77,109,.3);
}
.btn-accent:hover{transform:translateY(-2px)}
.btn-block{width:100%}
.btn:disabled{opacity:.4;cursor:not-allowed}

.icon-btn{
  width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);
  background:var(--surface);
  display:grid;place-items:center;font-size:15px;
  transition:transform .2s,background .2s;
}
.icon-btn:hover{transform:scale(1.05);background:var(--surface-2)}

/* ============ FORM ============ */
.field{display:flex;flex-direction:column;gap:10px}
.field label{font-size:13px;font-weight:600;color:var(--ink-2)}
.text-input{
  width:100%;padding:16px 18px;border-radius:14px;
  background:var(--surface);border:1.5px solid var(--line);
  font-size:16px;outline:none;
  transition:border-color .2s,box-shadow .2s;
}
.text-input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 15%,transparent);
}
.text-input::placeholder{color:var(--ink-4)}

/* ============ CHIPS ============ */
.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  padding:12px 16px;border-radius:100px;
  border:1.5px solid var(--line);
  background:var(--surface);
  font-size:14px;font-weight:500;
  transition:all .15s;
}
.chip:hover{border-color:var(--ink-4)}
.chip.selected{
  background:var(--ink);color:var(--bg);border-color:var(--ink);
}

/* ============ CHOICE GRID ============ */
.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.choice{
  padding:20px 16px;border-radius:18px;
  background:var(--surface);border:1.5px solid var(--line);
  text-align:left;display:flex;flex-direction:column;gap:6px;
  transition:all .2s cubic-bezier(.2,.8,.2,1);
}
.choice:hover{border-color:var(--ink-4);transform:translateY(-1px)}
.choice.selected{
  background:var(--ink);color:var(--bg);
  border-color:var(--ink);transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(14,14,12,.15);
}
.choice-emoji{font-size:26px}
.choice-label{font-weight:600;font-size:14px}
.choice-desc{font-size:12px;color:var(--ink-3)}
.choice.selected .choice-desc{color:var(--ink-4)}

/* ============ PROGRESS ============ */
.progress-wrap{display:flex;align-items:center;gap:12px}
.progress-track{
  flex:1;height:6px;
  background:var(--surface-2);
  border-radius:100px;overflow:hidden;
  border:1px solid var(--line);
}
.progress-fill{
  height:100%;background:var(--accent);
  border-radius:100px;
  transition:width .4s cubic-bezier(.2,.8,.2,1);
}
.progress-label{
  font-size:12px;font-weight:600;
  color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}

/* ============ CARDS ============ */
.section-card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:24px;padding:24px;
  width:100%;text-align:left;
}
.section-card h3{
  font-family:var(--font-display);
  font-size:18px;letter-spacing:-.01em;
  margin-bottom:12px;
}
.section-card p{
  font-size:15px;line-height:1.6;
  color:var(--ink-2);
}
.section-card .muted{color:var(--ink-3);font-size:14px}

/* ============ LABEL CHIPS ============ */
.label-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.label-chip{
  padding:8px 14px;border-radius:100px;
  background:var(--surface-2);
  border:1px solid var(--line);
  font-size:13px;font-weight:600;
}

/* ============ BAR / RESULT DIMS ============ */
.result-dims{display:grid;gap:14px;width:100%;margin-top:8px}
.result-dim{display:flex;align-items:center;gap:12px;font-size:14px}
.result-dim .em{font-size:18px;width:24px;text-align:center}
.result-dim .nm{flex:1;text-align:left;color:var(--ink-2)}
.result-dim .bar{
  flex:1.2;height:8px;
  background:var(--surface-2);
  border-radius:100px;overflow:hidden;
  border:1px solid var(--line);
  position:relative;
}
.result-dim .bar-fill{
  display:block;
  height:100%;background:var(--accent);
  border-radius:100px;
  width:var(--w,0%);
  transition:width .9s cubic-bezier(.2,.8,.2,1);
  will-change:width;
}
.result-dim .val{
  font-weight:700;min-width:44px;
  text-align:right;
  font-variant-numeric:tabular-nums;
}

/* ============ CIRCLE LIST ============ */
.circle-list{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.circle-row{
  display:flex;align-items:center;gap:12px;
  padding:14px;border-radius:16px;
  background:var(--surface);border:1px solid var(--line);
  transition:transform .15s;
}
.circle-row:hover{transform:translateX(2px)}
.circle-avatar{
  width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;
  font-weight:700;color:#fff;font-size:15px;
  flex-shrink:0;
}
.circle-name{flex:1;text-align:left;font-weight:600;font-size:15px}
.circle-score{
  font-family:var(--font-display);
  font-weight:700;font-size:20px;
  color:var(--accent);
}

/* ============ SHARE CARD ============ */
.share-card{
  background:var(--ink);color:var(--bg);
  border-radius:28px;padding:32px 24px;
  text-align:center;position:relative;overflow:hidden;
}
.share-card::before{
  content:"";position:absolute;
  inset:auto auto -60% -30%;
  width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 40%,transparent),transparent 70%);
  pointer-events:none;
}
.share-card *{position:relative;z-index:1}
.share-title{
  font-family:var(--font-display);
  font-size:26px;letter-spacing:-.02em;
  margin-bottom:6px;font-weight:700;
}
.share-sub{font-size:14px;opacity:.7;margin-bottom:20px}
.share-link-box{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  padding:14px 16px;border-radius:14px;
  font-family:var(--font-display);
  font-size:15px;font-weight:600;
  margin-bottom:16px;
  word-break:break-all;
}
.share-buttons{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
.share-btn{
  padding:14px;border-radius:14px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.15);
  font-size:14px;font-weight:600;color:inherit;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:background .15s;
}
.share-btn:hover{background:rgba(255,255,255,.18)}
.share-btn.primary{
  background:var(--accent);border-color:var(--accent);
  grid-column:1/-1;
}



.result-dim .bar{
  flex:1.2;height:8px;
  background:var(--surface-2);
  border-radius:100px;overflow:hidden;
  border:1px solid var(--line);
  position:relative;
}
.result-dim .bar-fill{
  position:absolute;
  top:0;left:0;bottom:0;
  background:var(--accent);
  border-radius:100px;
  width:var(--w,0%);
  transition:width .9s cubic-bezier(.2,.8,.2,1);
}



/* ============ AVATAR WITH IMAGE ============ */
.avatar-img{
  width:100%;height:100%;
  border-radius:50%;
  object-fit:cover;
  display:block;
}
.avatar-upload{
  position:relative;
  width:96px;height:96px;
  border-radius:50%;
  background:var(--surface-2);
  border:2px dashed var(--line-2);
  display:grid;place-items:center;
  cursor:pointer;
  overflow:hidden;
  transition:border-color .2s;
  margin:0 auto;
}
.avatar-upload:hover{border-color:var(--accent)}
.avatar-upload img{width:100%;height:100%;object-fit:cover}
.avatar-upload .plus{font-size:32px;color:var(--ink-3)}
.avatar-upload input[type=file]{display:none}

/* ============ FLAG GAME ============ */
.flag-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:8px;
}
.flag-btn{
  padding:24px 16px;
  border-radius:20px;
  border:2px solid var(--line);
  background:var(--surface);
  display:flex;flex-direction:column;
  align-items:center;gap:8px;
  font-size:15px;font-weight:700;
  transition:all .15s cubic-bezier(.2,.8,.2,1);
}
.flag-btn:hover{transform:translateY(-2px)}
.flag-btn:active{transform:scale(.96)}
.flag-btn.flag-green:hover{border-color:#84CC16;background:color-mix(in srgb,#84CC16 10%,var(--surface))}
.flag-btn.flag-red:hover{border-color:#FF5677;background:color-mix(in srgb,#FF5677 10%,var(--surface))}
.flag-icon{font-size:32px}

/* ============ NOTIFICATIONS ============ */
.notif-list{display:flex;flex-direction:column;gap:10px}
.notif-row{
  display:flex;align-items:center;gap:14px;
  padding:16px;border-radius:18px;
  background:var(--surface);
  border:1px solid var(--line);
  transition:transform .15s,border-color .2s;
}
.notif-row:hover{transform:translateY(-1px);border-color:var(--line-2)}
.notif-avatar{
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;
  font-weight:700;color:#fff;font-size:16px;
  flex-shrink:0;
}
.notif-content{flex:1;text-align:left}
.notif-title{font-size:14px;color:var(--ink);margin-bottom:4px}
.notif-meta{font-size:13px;color:var(--ink-3)}
.notif-action{
  font-size:13px;font-weight:600;
  color:var(--accent);
  padding:8px 12px;
  border-radius:100px;
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  transition:background .2s;
}
.notif-action:hover{background:color-mix(in srgb,var(--accent) 20%,transparent)}

/* ============ REEL INPUT ============ */
.reel-input{font-size:14px}

/* ============ INTERNET VIBE ============ */
.internet-vibe-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:10px;margin-top:12px;
}
.iv-cell{
  padding:14px;border-radius:14px;
  background:var(--surface-2);
  border:1px solid var(--line);
  text-align:center;
}
.iv-cell .iv-em{font-size:22px;margin-bottom:6px}
.iv-cell .iv-label{font-size:11px;color:var(--ink-3);font-weight:600;letter-spacing:.05em;margin-bottom:4px}
.iv-cell .iv-pct{font-family:var(--font-display);font-weight:700;font-size:18px}


/* ============ AUTH ============ */
.username-input-wrap{
  position:relative;
  display:flex;
  align-items:center;
}
.username-prefix{
  position:absolute;
  left:16px;
  font-size:16px;
  font-weight:600;
  color:var(--ink-3);
  pointer-events:none;
  z-index:1;
}
.username-input{
  padding-left:34px !important;
  font-weight:500;
}
.field-hint{
  font-size:12px;
  color:var(--ink-4);
  line-height:1.5;
  margin-top:2px;
}
.auth-switch-btn{
  color:var(--accent);
  font-weight:600;
  font-size:14px;
  background:none;
  border:none;
  cursor:pointer;
  padding:12px;
}
.auth-switch-btn:hover{
  text-decoration:underline;
}
.auth-footer{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:12px;
  color:var(--ink-4);
  padding:16px;
  text-align:center;
  line-height:1.5;
  margin-top:8px;
}


/* ============ MESSAGE INBOX ============ */
.msg-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.msg-row{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 18px;
  border-radius:18px;
  background:var(--surface);
  border:1px solid var(--line);
  text-align:left;
  width:100%;
  transition:transform .15s, border-color .2s, background .2s;
  cursor:pointer;
}
.msg-row:hover{
  transform:translateY(-1px);
  border-color:var(--line-2);
}
.msg-unread{
  border-left:3px solid var(--accent);
}
.msg-icon{
  font-size:24px;
  flex-shrink:0;
  width:32px;
  text-align:center;
}
.msg-body{flex:1;min-width:0}
.msg-preview{
  font-size:15px;
  font-weight:500;
  color:var(--ink);
  margin-bottom:4px;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  line-height:1.4;
}
.msg-meta{
  font-size:12px;
  color:var(--ink-3);
}
.msg-arrow{
  font-size:16px;
  color:var(--ink-4);
  flex-shrink:0;
}
.msg-revealed{border-left:3px solid #22C55E}
.msg-anon{border-left:3px solid var(--ink-4)}

/* ============ SEND MESSAGE ============ */
.send-msg-avatar{
  width:72px;
  height:72px;
  border-radius:50%;
  margin:0 auto;
  display:grid;
  place-items:center;
  font-family:var(--font-display);
  font-weight:700;
  font-size:28px;
  color:#fff;
  overflow:hidden;
  box-shadow:0 12px 32px -8px rgba(255,77,109,.3);
}
.send-msg-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
}
.msg-textarea{
  resize:vertical;
  min-height:120px;
  font-family:var(--font-body);
  line-height:1.5;
  padding:16px 18px;
}

/* ============ REVEAL MESSAGE ============ */
.reveal-message-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:24px;
  padding:28px 24px;
  position:relative;
  overflow:hidden;
}
.reveal-message-card::before{
  content:'"';
  position:absolute;
  top:8px;
  right:20px;
  font-family:var(--font-serif);
  font-size:80px;
  line-height:1;
  color:var(--accent);
  opacity:.12;
  pointer-events:none;
}
.reveal-message-card.revealed{
  background:linear-gradient(160deg,#e8f5e9,var(--surface));
  border-color:#a7f3d0;
}
[data-theme="dark"] .reveal-message-card.revealed{
  background:linear-gradient(160deg,#0f1f14,var(--surface));
  border-color:#1f4a2c;
}
.reveal-message-card.anonymous{
  background:linear-gradient(160deg,var(--surface-2),var(--surface));
}
.reveal-message-label{
  font-size:12px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-bottom:14px;
}
.reveal-message-content{
  font-family:var(--font-display);
  font-size:20px;
  line-height:1.45;
  font-weight:500;
  color:var(--ink);
  letter-spacing:-.01em;
}

/* ============ GUESS INPUTS ============ */
.guess-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.guess-label{
  font-size:13px;
  font-weight:600;
  color:var(--ink-3);
  margin-bottom:2px;
}
.guess-input-wrap{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  border-radius:14px;
  background:var(--surface);
  border:1.5px solid var(--line);
  transition:all .2s;
}
.guess-input-wrap.active{
  border-color:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 15%,transparent);
}
.guess-input-wrap.past{
  opacity:.5;
}
.guess-num{
  width:24px;
  height:24px;
  border-radius:50%;
  background:var(--surface-2);
  display:grid;
  place-items:center;
  font-size:12px;
  font-weight:700;
  color:var(--ink-3);
  flex-shrink:0;
}
.guess-input-wrap.active .guess-num{
  background:var(--accent);
  color:#fff;
}
.guess-input{
  flex:1;
  border:none;
  outline:none;
  background:transparent;
  font-family:inherit;
  font-size:15px;
  font-weight:500;
  color:var(--ink);
}
.guess-input::placeholder{
  color:var(--ink-4);
}

/* ============ MSG SHARE INLINE ============ */
.msg-share-inline{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px 10px 16px;
  border-radius:14px;
  background:var(--surface-2);
  border:1px solid var(--line);
}
.msg-share-url{
  flex:1;
  font-family:var(--font-display);
  font-size:13px;
  font-weight:600;
  color:var(--ink-2);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.msg-share-inline .btn{
  padding:10px 16px;
  font-size:13px;
  border-radius:10px;
}



/* ============ MESSAGE SHARE CARD ============ */
.share-card-msg{
  background:linear-gradient(160deg,#1a1a2e,#16213e) !important;
  color:#f5f5f2 !important;
}
.share-card-msg .share-title,
.share-card-msg .share-sub,
.share-card-msg .share-link-box{
  color:#f5f5f2 !important;
}
.share-card-msg .share-link-box{
  background:rgba(255,255,255,.12) !important;
  border-color:rgba(255,255,255,.2) !important;
}
.share-card-msg .share-btn{
  color:#f5f5f2 !important;
}
[data-theme="light"] .share-card-msg{
  background:linear-gradient(160deg,#1a1a2e,#16213e) !important;
  color:#f5f5f2 !important;
}



/* ============ SHARE MODAL ============ */
.share-modal-overlay{
  position:fixed;
  inset:0;
  z-index:999;
  background:rgba(0,0,0,0.75);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  animation:fadeIn .25s ease;
}
@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}
.share-modal{
  background:var(--surface);
  border-radius:28px;
  padding:24px;
  max-width:420px;
  width:100%;
  max-height:92vh;
  overflow-y:auto;
  position:relative;
  box-shadow:0 32px 80px -20px rgba(0,0,0,.6);
  animation:modalIn .35s cubic-bezier(.2,.8,.2,1);
}
@keyframes modalIn{
  from{opacity:0;transform:scale(.9) translateY(20px)}
  to{opacity:1;transform:none}
}
.share-modal-close{
  position:absolute;
  top:16px;right:16px;
  width:36px;height:36px;
  border-radius:50%;
  background:var(--surface-2);
  border:1px solid var(--line);
  display:grid;place-items:center;
  font-size:16px;
  font-weight:600;
  color:var(--ink-2);
  transition:transform .15s, background .15s;
  z-index:2;
}
.share-modal-close:hover{
  background:var(--line);
  transform:scale(1.05);
}
.share-modal-preview{
  border-radius:20px;
  overflow:hidden;
  margin-bottom:20px;
  background:#000;
  box-shadow:0 12px 32px -8px rgba(0,0,0,.4);
  aspect-ratio:9/16;
  max-height:60vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
.share-modal-preview img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.share-modal-actions{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:8px;
  margin-bottom:12px;
}
.share-modal-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:12px 8px;
  border-radius:14px;
  background:var(--surface-2);
  border:1px solid var(--line);
  font-size:11px;
  font-weight:600;
  color:var(--ink-2);
  transition:all .15s;
  text-align:center;
  line-height:1.3;
}
.share-modal-btn:hover{
  background:var(--surface);
  transform:translateY(-2px);
  border-color:var(--line-2);
}
.share-modal-btn.primary{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}
.share-modal-btn.primary:hover{
  filter:brightness(1.05);
}
.share-modal-btn span:first-child{
  font-size:20px;
  line-height:1;
}
.share-modal-hint{
  font-size:12px;
  color:var(--ink-3);
  text-align:center;
  line-height:1.5;
  margin-top:4px;
}
.share-modal-hint b{
  color:var(--accent);
  font-weight:700;
}

@media (max-width:420px){
  .share-modal-actions{
    grid-template-columns:1fr 1fr;
  }
  .share-modal-btn{
    font-size:12px;
    padding:14px 10px;
  }
}