/* ══════════════════════════════════════════════════════════
   HİKAYE (STORY) — 2026-07-22
   Halka + izleyici + paylaşma penceresi. Oyunun "saha karargâhı"
   diline sadık: çentikli değil ama aynı --fac/accent renkleri,
   Chakra Petch başlıklar, mono sayılar.
   ══════════════════════════════════════════════════════════ */

/* ── Avatar halkası: hikayesi olan oyuncu ── */
.cm-av.has-story,
.pp-av.has-story {
  position: relative;
  cursor: pointer;
}
.cm-av.has-story::after,
.pp-av.has-story::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  padding: 2px;
  background: conic-gradient(from 210deg,
    var(--accent, #4f8cff), #f5a623, #f04a4a, #a24cf0, var(--accent, #4f8cff));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
  animation: stRing 6s linear infinite;
}
@keyframes stRing { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .cm-av.has-story::after, .pp-av.has-story::after { animation: none; }
}

/* ── İzleyici ── */
#story-modal {
  position: fixed; inset: 0; z-index: 99997;
  background: rgba(0,0,0,.82);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  animation: stFade .18s ease both;
}
@keyframes stFade { from { opacity: 0 } to { opacity: 1 } }

.st-wrap {
  width: min(420px, 94vw);
  max-height: 92vh;
  background: linear-gradient(160deg, rgba(var(--surf2-rgb),.98), rgba(var(--surf-rgb),.99));
  border: 1px solid var(--bdr2);
  border-radius: 16px;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
}

.st-bars { display: flex; gap: 3px; padding: 8px 10px 0; }
.st-bar {
  flex: 1; height: 3px; border-radius: 2px;
  background: rgba(255,255,255,.18); overflow: hidden;
}
.st-bar > i { display: block; height: 100%; width: 0; background: #fff; }

.st-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px 10px;
}
.st-who {
  font-family: var(--font-display, sans-serif);
  font-weight: 800; font-size: .9rem; color: #fff;
}
.st-age {
  font-family: var(--font-mono, monospace);
  font-size: .62rem; color: var(--muted); flex: 1;
}
.st-x {
  background: none; border: none; color: rgba(255,255,255,.55);
  font-size: 1rem; cursor: pointer; padding: 2px 4px; line-height: 1;
}
.st-x:hover { color: #fff; }

.st-body {
  flex: 1; min-height: 120px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 0 12px 14px; cursor: pointer;
}
.st-img {
  max-width: 100%; max-height: 62vh;
  border-radius: 10px; display: block;
}
.st-note {
  font-size: .86rem; line-height: 1.45; color: #fff;
  text-align: center; word-break: break-word;
}
.st-go {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(var(--accent-rgb),.15);
  border: 1px solid rgba(var(--accent-rgb),.45);
  color: var(--accent); border-radius: 999px;
  padding: 6px 14px; font-size: .74rem; font-weight: 700;
  cursor: pointer; font-family: var(--font-mono, monospace);
}
.st-go:hover { background: rgba(var(--accent-rgb),.28); }

/* ── Paylaşma penceresi ── */
#story-compose {
  position: fixed; inset: 0; z-index: 99998;
  background: rgba(0,0,0,.72);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  animation: stFade .18s ease both;
}
.sc-card {
  width: min(380px, 94vw);
  background: linear-gradient(160deg, rgba(var(--surf2-rgb),.99), rgba(var(--surf-rgb),1));
  border: 1px solid var(--bdr2);
  border-radius: 16px; padding: 1.1rem 1.2rem;
  display: flex; flex-direction: column; gap: .7rem;
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
}
.sc-title {
  font-family: var(--font-display, sans-serif);
  font-weight: 800; font-size: 1rem; color: var(--fg);
}
.sc-drop {
  display: flex; align-items: center; justify-content: center;
  min-height: 120px; border: 1px dashed var(--bdr2); border-radius: 12px;
  cursor: pointer; color: var(--muted); font-size: .78rem; text-align: center;
  padding: .6rem; overflow: hidden;
}
.sc-drop:hover { border-color: var(--accent); color: var(--fg); }
#sc-prev { max-width: 100%; max-height: 190px; border-radius: 8px; }
#sc-note {
  background: rgba(var(--surf-rgb),.9); border: 1px solid var(--bdr2);
  border-radius: 9px; padding: .6rem .75rem; color: var(--fg); font-size: .82rem;
}
#sc-note:focus { border-color: var(--accent); outline: none; }
.sc-loc {
  display: flex; align-items: center; gap: 7px;
  font-size: .74rem; color: var(--muted); cursor: pointer;
}
.sc-loc b { color: var(--accent); font-family: var(--font-mono, monospace); }
.sc-btns { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .2rem; }
.sc-btns button {
  border-radius: 9px; padding: .5rem 1rem; font-size: .8rem;
  font-weight: 700; cursor: pointer; border: 1px solid var(--bdr2);
  background: rgba(var(--surf-rgb),.9); color: var(--fg);
}
.sc-send { background: var(--accent) !important; color: #06121f !important; border-color: transparent !important; }
.sc-btns button:hover { filter: brightness(1.12); }
.sc-hint { font-size: .64rem; color: var(--muted); text-align: center; }

/* Hikaye butonu (profil kartında) */
.pp-story-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(var(--accent-rgb),.14);
  border: 1px solid rgba(var(--accent-rgb),.4);
  color: var(--accent); border-radius: 999px;
  padding: 5px 12px; font-size: .72rem; font-weight: 700; cursor: pointer;
}
.pp-story-btn:hover { background: rgba(var(--accent-rgb),.26); }

/* Kendi hikayeni silme butonu */
.st-del {
  background: none; border: none; color: rgba(255,255,255,.5);
  cursor: pointer; font-size: .95rem; padding: 2px 4px; line-height: 1;
}
.st-del:hover { color: #f04a4a; }