/* ============================================================
   İSİM ŞEHİR HAYVAN — oyun sayfası stilleri
   ============================================================ */
#ns { max-width: 720px; }
#ns-view { width: 100%; margin-top: 14px; display: flex; flex-direction: column; align-items: center; }
#ns-room { position: relative; justify-self: end; min-width: max-content; display: flex; flex-direction: column; align-items: center; padding: 6px 14px 6px 12px; border-radius: 14px; background: var(--bg-soft); border: 1px solid rgba(255, 204, 51, 0.4); font-family: "Fredoka", sans-serif; line-height: 1.15; color: inherit; cursor: pointer; transition: border-color 0.15s, transform 0.15s; }
#ns-room:hover { transform: translateY(-1px); border-color: #ffcc33; }
#ns-room small { white-space: nowrap; font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }
#ns-room b { white-space: nowrap; font-size: 17px; letter-spacing: 0.1em; color: #ffcc33; }
#ns-room i { position: absolute; right: -7px; top: -8px; font-style: normal; font-size: 13px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--bg-soft); border: 1px solid var(--line); }
#ns-room.hid b { letter-spacing: 0.05em; color: var(--ink-faint); }
#ns-room[hidden] { display: none; }
#ns-net { position: fixed; left: 50%; top: 84px; transform: translateX(-50%); z-index: 60; padding: 8px 16px; border-radius: 999px; background: #e5484d; color: #fff; font-family: "Fredoka", sans-serif; font-size: 14px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4); }
#ns-net[hidden] { display: none; }

.ns-msg { width: 100%; max-width: 560px; margin-bottom: 12px; padding: 10px 14px; border-radius: 14px; background: rgba(229, 72, 77, 0.14); border: 1px solid rgba(229, 72, 77, 0.45); color: var(--ink); text-align: center; font-size: 14px; }
.ns-wait { margin: 10px 0 0; text-align: center; color: var(--ink-dim); font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.ns-dots { display: inline-flex; gap: 3px; }
.ns-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--violet-bright, #a67bfb); animation: ns-dot 1s ease-in-out infinite; }
.ns-dots i:nth-child(2) { animation-delay: 0.15s; } .ns-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes ns-dot { 50% { transform: translateY(-5px); opacity: 0.5; } }
.ns-big { min-width: 220px; justify-content: center; font-size: 17px; padding: 13px 26px; }
.ns-actions { width: 100%; display: flex; flex-direction: column; align-items: center; margin-top: 16px; }
.ns-leave { margin-top: 16px; background: none; border: 0; color: var(--ink-faint); font-size: 13px; cursor: pointer; }
.ns-leave:hover { color: var(--ink); }

/* Avatar */
.ns-av { --s: 34px; flex: none; width: var(--s); height: var(--s); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: calc(var(--s) * 0.56); background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 55%, #fff), var(--c)); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15); }

/* ---------- giriş ---------- */
.ns-invite { width: 100%; max-width: 560px; display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 10px 14px; margin-bottom: 14px; border-radius: 18px; background: linear-gradient(90deg, rgba(255, 204, 51, 0.16), rgba(139, 92, 246, 0.12)); border: 1px solid rgba(255, 204, 51, 0.5); animation: ns-pop 0.5s cubic-bezier(.34,1.56,.64,1); }
.ns-invite img { grid-row: 1 / 3; width: 56px; height: 56px; object-fit: contain; }
.ns-invite b { font-family: "Fredoka", sans-serif; font-size: 17px; color: #ffe08a; }
.ns-invite small { color: var(--ink-dim); font-size: 12.5px; }
.ns-invite.bad { display: block; text-align: center; border-color: rgba(229, 72, 77, 0.5); background: rgba(229, 72, 77, 0.12); }
.ns-invite[hidden] { display: none; }
@keyframes ns-pop { from { transform: scale(0.9); opacity: 0; } }
.ns-name-row { width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
.ns-name-row > label { padding-left: 2px; }
.ns-name-row label { font-family: "Fredoka", sans-serif; font-size: 13px; color: var(--ink-dim); }
#ns input, #ns select {
  font: inherit; font-size: 16px; color: var(--ink);
  background: var(--bg-soft); border: 1.5px solid var(--line); border-radius: 14px;
  padding: 12px 14px; outline: none; transition: border-color 0.15s, box-shadow 0.15s;
}
#ns input:focus, #ns select:focus { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.25); }
.ns-home { width: 100%; max-width: 560px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.ns-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 20px 16px; border-radius: 20px; background: linear-gradient(180deg, rgba(139, 92, 246, 0.16), rgba(139, 92, 246, 0.04)); border: 1px solid rgba(166, 123, 251, 0.3); transition: opacity 0.2s; }
.ns-card.hot { border-color: rgba(255, 204, 51, 0.6); box-shadow: 0 0 26px rgba(255, 204, 51, 0.15); }
.ns-card.dim { opacity: 0.7; }
.ns-card-ic { font-size: 36px; line-height: 1; }
.ns-card h3 { margin: 4px 0 0; font-size: 19px; }
.ns-card p { margin: 0 0 8px; font-size: 13.5px; color: var(--ink-dim); flex: 1; }
.ns-card .btn { width: 100%; justify-content: center; }
.ns-join-row { width: 100%; display: flex; gap: 8px; }
.ns-join-row input { flex: 1; min-width: 0; width: 100%; text-transform: uppercase; letter-spacing: 0.14em; text-align: center; font-family: "Fredoka", sans-serif; }
.ns-join-row .btn { width: auto; padding-left: 16px; padding-right: 16px; }
.ns-join-row input::placeholder { letter-spacing: 0.04em; font-size: 14px; }
.ns-join-row input { padding-left: 8px !important; padding-right: 8px !important; }
@media (max-width: 560px) { .ns-home { grid-template-columns: 1fr; } }

/* ---------- lobi ---------- */
.ns-lobby { width: 100%; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.ns-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ns-invite-box { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 14px 16px 16px; border-radius: 22px; text-align: center;
  background: radial-gradient(circle at 50% 0%, rgba(255, 204, 51, 0.18), transparent 60%), linear-gradient(180deg, rgba(139, 92, 246, 0.2), rgba(139, 92, 246, 0.05));
  border: 1px solid rgba(255, 204, 51, 0.45); }
.ns-inv-top { width: 100%; display: flex; align-items: center; justify-content: space-between; }
.ns-inv-top small { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.ns-hide { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.05); color: var(--ink-dim); font: inherit; font-size: 12.5px; cursor: pointer; transition: all 0.15s; }
.ns-hide:hover { color: var(--ink); border-color: var(--violet); }
.ns-inv-hint { margin: -2px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--ink-faint); }
.ns-hidden-hint { margin: 0; max-width: 340px; font-size: 12.5px; line-height: 1.45; color: #ffe08a; }
.ns-hidden-hint[hidden] { display: none; }
.ns-code { display: flex; gap: 6px; }
.ns-code span { width: 42px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 12px; font-family: "Fredoka", sans-serif; font-size: 27px; font-weight: 600; color: #1d1442;
  background: linear-gradient(180deg, #fff6d6, #ffcc33); box-shadow: 0 4px 0 #b88a00, 0 10px 20px rgba(0, 0, 0, 0.3); animation: ns-drop 0.5s cubic-bezier(.34,1.56,.64,1) both; animation-delay: calc(var(--i) * 0.07s); }
.ns-code.hid span { background: linear-gradient(180deg, #4a3690, #2e2163); color: rgba(255, 255, 255, 0.55); box-shadow: 0 4px 0 #1a1238, 0 10px 20px rgba(0, 0, 0, 0.3); }
@keyframes ns-drop { from { transform: translateY(-16px); opacity: 0; } }
.ns-link { width: 100%; display: flex; gap: 6px; }
.ns-link input { flex: 1; min-width: 0; font-size: 12.5px !important; padding: 9px 10px !important; color: var(--ink-dim) !important; }
.ns-link .btn { flex: none; padding: 9px 14px; font-size: 14px; }
.ns-box { padding: 14px; border-radius: 20px; background: var(--bg-soft); border: 1px solid var(--line); min-width: 0; }
.ns-box h4 { margin: 0 0 10px; font-size: 15px; display: flex; align-items: center; gap: 6px; }
.ns-box h4 span { margin-left: auto; font-size: 12.5px; color: var(--ink-faint); font-weight: 500; }
.ns-pbox { max-height: 300px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--violet) transparent; }
.ns-players { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ns-p { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 5px 8px 5px 5px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); animation: ns-pop 0.4s ease both; }
.ns-p .ns-av { --s: 30px; }
.ns-p b { flex: 1; min-width: 0; font-family: "Fredoka", sans-serif; font-weight: 500; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ns-p .crown { position: absolute; left: 20px; top: -8px; font-style: normal; font-size: 14px; transform: rotate(18deg); }
.ns-p small { flex: none; font-size: 11px; color: var(--ink-faint); }
.ns-p.me { background: rgba(139, 92, 246, 0.2); }
.ns-p.gone { opacity: 0.45; }
.ns-settings label { display: block; margin: 12px 0 6px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }
.ns-settings label:first-of-type { margin-top: 0; }
.ns-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ns-chip { position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 7px 13px; border-radius: 999px; border: 1.5px solid var(--line); background: transparent; color: var(--ink-dim); font: inherit; font-size: 13.5px; cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.15s; }
.ns-chip:not(:disabled):hover { border-color: rgba(166, 123, 251, 0.6); }
.ns-chip.on { border-color: var(--violet); background: rgba(139, 92, 246, 0.32); color: #fff; }
.ns-chip.x.on::before { content: "✓"; font-size: 11px; font-weight: 700; color: #c9f3df; margin-right: -1px; }
.ns-chip:disabled { cursor: default; }
.ns-settings.ro .ns-chip:not(.on), .ns-settings.ro .ns-lang:not(.on) { opacity: 0.4; }
/* Tıklama animasyonu: zıplama + halka */
.pop { animation: ns-chip 0.3s ease-out; }
@keyframes ns-chip { 0% { transform: scale(1); } 40% { transform: scale(1.07); } 100% { transform: scale(1); } }
.ns-lang.pop { animation: ns-chip 0.35s cubic-bezier(.34,1.4,.64,1); }
@keyframes ns-ring { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(1.35); } }
/* Dil seçici: bayraklı kutular */
.ns-langs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ns-lang { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px 6px; border-radius: 14px; border: 1.5px solid var(--line); background: rgba(255, 255, 255, 0.03); color: var(--ink-dim); font: inherit; cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.15s; }
.ns-lang .flag-ic { width: 26px; height: 26px; transition: transform 0.25s cubic-bezier(.34,1.56,.64,1); }
.ns-lang b { font-weight: 500; font-size: 11.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ns-lang:not(:disabled):hover { transform: translateY(-2px); border-color: rgba(166, 123, 251, 0.6); }
.ns-lang:not(:disabled):hover .flag-ic { transform: rotate(-10deg) scale(1.1); }
.ns-lang.on { border-color: #ffcc33; background: linear-gradient(180deg, rgba(255, 204, 51, 0.2), rgba(255, 204, 51, 0.05)); color: #fff; box-shadow: 0 0 18px rgba(255, 204, 51, 0.2); }
.ns-lang.on .flag-ic { transform: scale(1.12); box-shadow: 0 0 0 2px #ffcc33; }
.ns-lang:disabled { cursor: default; }
.ns-cats-now { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.ns-cats-now > span { font-size: 12px; padding: 3px 8px; border-radius: 999px; background: rgba(255, 204, 51, 0.12); color: #ffe08a; animation: ns-pop 0.3s ease both; }
/* Alt eylem çubuğu: hep görünür */
.ns-actbar { position: sticky; bottom: 12px; z-index: 6; width: 100%; margin-top: 12px; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 8px; border-radius: 22px; background: rgba(15, 10, 32, 0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(166, 123, 251, 0.35); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); }
.ns-exit { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 48px; padding: 0 16px 0 12px; border-radius: 16px; border: 1.5px solid rgba(229, 72, 77, 0.35); background: rgba(229, 72, 77, 0.08); color: #ff8a8a; font: inherit; font-family: "Fredoka", sans-serif; font-size: 14.5px; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.ns-exit-ic { font-size: 18px; }
.ns-exit:hover { background: #e5484d; border-color: #e5484d; color: #fff; }
.ns-actinfo { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.ns-faces { display: flex; flex: none; }
.ns-faces .ns-av { box-shadow: 0 0 0 2px #140f2b; }
.ns-faces .ns-av + .ns-av { margin-left: -9px; }
.ns-actt { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.ns-actt b { font-family: "Fredoka", sans-serif; font-size: 15px; color: var(--ink); }
.ns-actt small { font-size: 12px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ns-actmain { flex: none; display: flex; align-items: center; }
.ns-actmain .ns-big { min-width: 0; height: 48px; padding: 0 24px; }
.ns-dots.big { padding: 0 16px; }
.ns-dots.big i { width: 8px; height: 8px; }
:root[data-theme="light"] .ns-faces .ns-av { box-shadow: 0 0 0 2px #fff; }
:root[data-theme="light"] .ns-exit { background: #fff2f2; color: #d6333a; }
:root[data-theme="light"] .ns-exit:hover { background: #e5484d; color: #fff; }
@media (max-width: 640px) {
  .ns-lobby { grid-template-columns: 1fr; }
  .ns-code span { width: 40px; height: 48px; font-size: 25px; }
  .ns-exit span:not(.ns-exit-ic) { display: none; }
  .ns-exit { padding: 0 12px; }
  .ns-faces .ns-av:nth-child(n+4) { display: none; }
  .ns-actmain .ns-big { padding: 0 18px; font-size: 15.5px; }
}
@media (max-width: 380px) { .ns-players { grid-template-columns: 1fr; } .ns-langs { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ns-lang b { font-size: 10px; } }

/* ---------- oyun içi üst bilgi ---------- */
.ns-top { width: 100%; max-width: 560px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.ns-round { font-family: "Fredoka", sans-serif; font-size: 14px; color: var(--ink-dim); }
.ns-letter-chip { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: "Fredoka", sans-serif; font-size: 30px; font-weight: 600; color: #3a2a00;
  background: radial-gradient(circle at 35% 30%, #fffbe8, #ffcc33 70%); box-shadow: 0 0 0 3px rgba(255, 204, 51, 0.35), 0 0 26px rgba(255, 204, 51, 0.45); }
.ns-timer { justify-self: end; font-family: "Fredoka", sans-serif; font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.ns-timer.low { color: #ff6b6b; animation: ns-beat 1s ease-in-out infinite; }
@keyframes ns-beat { 50% { transform: scale(1.12); } }
.ns-bar { width: 100%; max-width: 560px; height: 6px; margin: 10px 0 4px; border-radius: 99px; background: var(--bg-soft-2); overflow: hidden; }
.ns-bar i { display: block; height: 100%; width: 100%; border-radius: 99px; background: linear-gradient(90deg, #ff4d6d, #ffb627, #38b000); transition: width 0.25s linear; }
.ns-hint { margin: 8px 0 0; font-size: 13.5px; color: var(--ink-dim); text-align: center; max-width: 560px; }
.ns-h { margin: 14px 0 0; font-size: 20px; }
.ns-h.big { font-size: 28px; margin-top: 0; }

/* ---------- harf çarkı ---------- */
.ns-spin { display: flex; flex-direction: column; align-items: center; padding: 10px 0 20px; }
.ns-round-big { margin: 0 0 14px; font-family: "Fredoka", sans-serif; font-size: 18px; color: var(--ink-dim); }
.ns-moon { position: relative; width: 190px; height: 190px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, #fffbe8, #ffe08a 45%, #f2b632 100%); box-shadow: inset -18px -14px 0 rgba(200, 140, 20, 0.25), 0 0 60px rgba(255, 204, 51, 0.5); }
.ns-moon-glow { position: absolute; inset: -30px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 204, 51, 0.3), transparent 65%); animation: ns-glow 1.6s ease-in-out infinite; }
@keyframes ns-glow { 50% { transform: scale(1.1); opacity: 0.6; } }
.ns-moon b { position: relative; font-family: "Fredoka", sans-serif; font-size: 96px; font-weight: 600; color: #4b2f00; line-height: 1; }
.ns-moon.land { animation: ns-land 0.6s cubic-bezier(.34,1.56,.64,1); }
.ns-moon.land b { color: #2a1b5c; }
@keyframes ns-land { 0% { transform: scale(0.85); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.ns-spin-t { margin: 18px 0 0; font-family: "Fredoka", sans-serif; font-size: 18px; color: #ffe08a; }

/* ---------- yazma ---------- */
.ns-stopbar { width: 100%; max-width: 560px; margin-top: 10px; padding: 10px 14px; border-radius: 14px; text-align: center; font-family: "Fredoka", sans-serif; font-size: 16px; color: #fff;
  background: linear-gradient(90deg, #e5484d, #f29e33); box-shadow: 0 8px 22px rgba(229, 72, 77, 0.35); animation: ns-shake 0.5s; }
.ns-stopbar[hidden] { display: none; }
@keyframes ns-shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.hurry .ns-bar i { background: #ff4d6d; }
.ns-form { width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.ns-field { position: relative; display: grid; grid-template-columns: 40px 92px 1fr; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 16px; background: var(--bg-soft); border: 1.5px solid var(--line); transition: border-color 0.15s, background 0.15s; }
.ns-fic { font-size: 22px; text-align: center; }
.ns-fl { font-family: "Fredoka", sans-serif; font-size: 15px; color: var(--ink-dim); }
.ns-field input { width: 100%; min-width: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 9px 30px 9px 4px !important; font-size: 17px !important; font-family: "Fredoka", sans-serif; }
.ns-field input:disabled { opacity: 0.6; }
.ns-ok { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-style: normal; font-weight: 700; font-size: 16px; }
.ns-field:focus-within { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2); }
.ns-field.ok { border-color: rgba(74, 191, 140, 0.6); }
.ns-field.ok .ns-ok { color: #4abf8c; }
.ns-field.bad { border-color: rgba(229, 72, 77, 0.7); background: rgba(229, 72, 77, 0.08); }
.ns-field.bad .ns-ok { color: #ff6b6b; }
.ns-stop { margin-top: 14px; background: linear-gradient(180deg, #ffcc33, #f29e33) !important; color: #2a1b00 !important; box-shadow: 0 8px 22px rgba(242, 158, 51, 0.4); }
.ns-stop.off { filter: grayscale(0.7); opacity: 0.6; box-shadow: none; }
.ns-stop[hidden] { display: none; }
.ns-status { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 14px; max-width: 560px; }
.ns-st { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--line); font-size: 13px; }
.ns-st i { font-style: normal; color: var(--ink-faint); font-size: 12px; }
.ns-st.done { border-color: rgba(74, 191, 140, 0.6); }
@media (max-width: 480px) { .ns-field { grid-template-columns: 30px 70px 1fr; gap: 6px; } .ns-fl { font-size: 13.5px; } .ns-fic { font-size: 19px; } }

/* ---------- oylama ---------- */
.ns-vote { width: 100%; max-width: 620px; display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.ns-vcat { padding: 10px; border-radius: 18px; background: var(--bg-soft); border: 1px solid var(--line); }
.ns-vcat h4 { margin: 2px 4px 8px; font-size: 15px; }
.ns-vrow { display: grid; grid-template-columns: 24px minmax(0, 90px) 1fr auto auto; align-items: center; gap: 8px; padding: 6px 6px 6px 8px; border-radius: 12px; transition: background 0.15s, opacity 0.15s; }
.ns-vrow + .ns-vrow { margin-top: 3px; }
.ns-vrow.me { background: rgba(139, 92, 246, 0.14); }
.ns-vname { font-size: 12.5px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ns-vans { font-family: "Fredoka", sans-serif; font-size: 16px; color: var(--ink); overflow-wrap: anywhere; }
.ns-vans i { font-style: normal; color: var(--ink-faint); font-size: 13px; }
.ns-vflag { font-size: 11px; color: #ff6b6b; }
.ns-vrow.out .ns-vans { text-decoration: line-through; text-decoration-color: #ff6b6b; text-decoration-thickness: 2px; opacity: 0.6; }
.ns-down { display: inline-flex; align-items: center; gap: 3px; padding: 5px 9px; border-radius: 999px; border: 1.5px solid var(--line); background: transparent; color: var(--ink); font-size: 15px; cursor: pointer; filter: grayscale(1); opacity: 0.6; transition: all 0.15s; }
.ns-down b { font-size: 12px; min-width: 6px; }
.ns-down:hover { opacity: 1; filter: none; }
.ns-down.on { filter: none; opacity: 1; border-color: #e5484d; background: rgba(229, 72, 77, 0.2); }
.ns-down-ph { min-width: 46px; text-align: center; }
.ns-down-ph em { font-style: normal; font-size: 13px; padding: 3px 8px; border-radius: 999px; background: rgba(229, 72, 77, 0.2); }
.ns-down-ph em:empty { display: none; }
.ns-sticky { position: sticky; bottom: 12px; z-index: 5; margin-top: 14px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 22px; background: rgba(15, 10, 32, 0.85); backdrop-filter: blur(8px); border: 1px solid var(--line); }
.ns-sticky small { color: var(--ink-dim); font-size: 13px; }
.ns-sticky .btn:disabled { opacity: 0.7; }

/* ---------- tur sonucu ---------- */
.ns-res { width: 100%; max-width: 620px; display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.ns-rrow { padding: 10px 12px; border-radius: 18px; background: var(--bg-soft); border: 1px solid var(--line); animation: ns-pop 0.4s ease both; animation-delay: calc(var(--i) * 0.08s); }
.ns-rrow.me { border-color: rgba(139, 92, 246, 0.6); }
.ns-rhead { display: flex; align-items: center; gap: 10px; }
.ns-rhead b { font-family: "Fredoka", sans-serif; font-weight: 500; font-size: 16px; }
.ns-rt { margin-left: auto; font-family: "Fredoka", sans-serif; font-size: 20px; font-weight: 600; color: #ffcc33; }
.ns-rcats { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.ns-rcats > span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 4px 3px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); font-size: 13.5px; }
.ns-rcats > span.x { opacity: 0.55; text-decoration: line-through; }
.ns-pts { font-style: normal; font-family: "Fredoka", sans-serif; font-size: 11.5px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); color: var(--ink-faint); text-decoration: none; }
.ns-pts.p5 { background: rgba(74, 137, 237, 0.3); color: #cfe0ff; }
.ns-pts.p10 { background: rgba(74, 191, 140, 0.3); color: #c9f3df; }
.ns-pts.p20 { background: #ffcc33; color: #2a1b00; }
.ns-legend { margin: 10px 0 0; font-size: 12px; color: var(--ink-faint); text-align: center; }
.ns-board { width: 100%; max-width: 620px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 12px; }
.ns-board > span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 6px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--line); font-size: 14px; }
.ns-board > span.me { border-color: var(--violet); }
.ns-board > span > i { font-style: normal; font-family: "Fredoka", sans-serif; color: var(--ink-faint); font-size: 12px; min-width: 14px; text-align: right; }
.ns-board > span > b { font-family: "Fredoka", sans-serif; color: #ffcc33; }

/* ---------- final ---------- */
.ns-win { margin: 6px 0 0; font-family: "Fredoka", sans-serif; font-size: 20px; color: #ffe08a; }
.ns-podium { display: flex; align-items: flex-end; justify-content: center; gap: 10px; margin-top: 18px; width: 100%; max-width: 480px; }
.ns-pod { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; animation: ns-rise 0.7s cubic-bezier(.34,1.56,.64,1) both; }
.ns-pod.r1 { animation-delay: 0.5s; } .ns-pod.r2 { animation-delay: 0.25s; } .ns-pod.r3 { animation-delay: 0s; }
@keyframes ns-rise { from { transform: translateY(30px); opacity: 0; } }
.ns-pod b { font-family: "Fredoka", sans-serif; font-weight: 500; font-size: 15px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ns-pod > span { font-size: 13px; color: #ffcc33; }
.ns-step { width: 100%; display: flex; align-items: flex-start; justify-content: center; padding-top: 8px; border-radius: 14px 14px 4px 4px; font-family: "Fredoka", sans-serif; font-size: 28px; font-weight: 600; color: rgba(255, 255, 255, 0.85); }
.ns-pod.r1 .ns-step { height: 110px; background: linear-gradient(180deg, #ffcc33, #c98e00); color: #3a2a00; }
.ns-pod.r2 .ns-step { height: 80px; background: linear-gradient(180deg, #cfd3e0, #8b90a3); }
.ns-pod.r3 .ns-step { height: 60px; background: linear-gradient(180deg, #e7a46b, #a4612b); }
.ns-crown-img { width: 132px; height: 132px; margin-bottom: -6px; object-fit: contain; filter: drop-shadow(0 0 18px rgba(255, 204, 51, 0.6)); }
.ns-final-sub { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; justify-content: center; }

/* Tanıtım: örnek tur kartı */
.ns-demo { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 30px auto 10px; padding: 14px 16px; max-width: 340px; border-radius: 20px;
  background: radial-gradient(circle at 15% 50%, rgba(255, 204, 51, 0.16), transparent 55%), rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 204, 51, 0.3); }
.ns-demo-moon { position: relative; flex: none; width: 70px; height: 70px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, #fffbe8, #ffe08a 45%, #f2b632); box-shadow: inset -8px -6px 0 rgba(200, 140, 20, 0.25), 0 0 26px rgba(255, 204, 51, 0.5); animation: ns-float 3s ease-in-out infinite; }
.ns-demo-moon b { font-family: "Fredoka", sans-serif; font-size: 38px; font-weight: 600; color: #4b2f00; line-height: 1; }
@keyframes ns-float { 50% { transform: translateY(-4px) rotate(-4deg); } }
.ns-demo-rows { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ns-demo-r { display: grid; grid-template-columns: 20px 1fr auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 5px 8px; border-radius: 12px; background: rgba(139, 92, 246, 0.16); text-align: left;
  animation: ns-slide 0.45s cubic-bezier(.34,1.56,.64,1) both; animation-delay: calc(0.2s + var(--i) * 0.18s); }
.ns-demo-r span { grid-row: 1 / 3; font-size: 16px; }
.ns-demo-r small { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); line-height: 1.1; }
.ns-demo-r b { grid-column: 2; font-family: "Fredoka", sans-serif; font-weight: 500; font-size: 15px; color: var(--ink); line-height: 1.2; }
.ns-demo-r em { grid-column: 3; grid-row: 1 / 3; animation: ns-pop 0.4s cubic-bezier(.34,1.56,.64,1) both; animation-delay: calc(0.6s + var(--i) * 0.18s); }
@keyframes ns-slide { from { transform: translateX(14px); opacity: 0; } }
/* Takma ad + zar */
.ns-name-in { position: relative; }
.ns-name-in input { width: 100%; padding-right: 54px !important; min-height: 56px; }
.ns-dice { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 12px; border: 0; background: rgba(139, 92, 246, 0.25); font-size: 20px; cursor: pointer; transition: background 0.15s; }
.ns-dice:hover { background: rgba(139, 92, 246, 0.45); }
.ns-dice.roll { animation: ns-roll 0.5s ease; }
@keyframes ns-roll { 50% { transform: translateY(-50%) rotate(180deg) scale(1.15); } 100% { transform: translateY(-50%) rotate(360deg); } }
.ns-ask-ic { display: flex; justify-content: center; font-size: 44px; line-height: 1; margin-bottom: 12px; }
.g-card.ns-ask { padding: 30px 26px 26px; }
.ns-ask h3 { margin: 0 0 22px !important; }
.ns-ask .g-end-main { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) { .ns-code span, .pop, .pop::after, .ns-pod, .ns-rrow, .ns-moon-glow, .ns-timer.low, .ns-demo-moon, .ns-demo-r, .ns-demo-r em { animation: none; } }

/* ---------- defter kâğıdı (yazma formu + tur sonucu tablosu) ---------- */
.ns-paper {
  --ink: #2a2160; --ink-dim: #5b5296; --ink-faint: #8a83b5; --line: rgba(76, 120, 200, 0.28);
  position: relative; color: var(--ink);
  background: #fdf8ea;
  border-radius: 14px;
  box-shadow: 0 2px 0 #e6dcc0, 0 18px 40px rgba(0, 0, 0, 0.4);
}
/* Yazma formu */
.ns-form.ns-paper { gap: 0; padding: 18px 10px 10px 0; background:
  linear-gradient(90deg, transparent 58px, rgba(229, 72, 77, 0.55) 58px 60px, transparent 60px),
  #fdf8ea; }
.ns-paper .ns-field { grid-template-columns: 70px 92px 1fr; background: transparent; border: 0; border-bottom: 1.5px solid var(--line); border-radius: 0; padding: 4px 8px 4px 0; }
.ns-paper .ns-field:focus-within { box-shadow: none; background: rgba(139, 92, 246, 0.07); border-bottom-color: #8b5cf6; }
.ns-paper .ns-fic { text-align: right; padding-right: 14px; }
.ns-paper .ns-fl { color: var(--ink-dim); font-weight: 500; }
.ns-paper .ns-field input { color: #1d1650 !important; font-size: 19px !important; }
.ns-paper .ns-field input::placeholder { color: rgba(42, 33, 96, 0.3); }
.ns-paper .ns-field.ok { border-bottom-color: rgba(46, 160, 110, 0.7); }
.ns-paper .ns-field.ok .ns-ok { color: #1f9a63; }
.ns-paper .ns-field.bad { background: rgba(229, 72, 77, 0.08); border-bottom-color: #e5484d; }
.ns-paper .ns-field.bad .ns-ok { color: #d6333a; }
@media (max-width: 480px) {
  .ns-form.ns-paper { background: linear-gradient(90deg, transparent 44px, rgba(229, 72, 77, 0.55) 44px 46px, transparent 46px), #fdf8ea; }
  .ns-paper .ns-field { grid-template-columns: 50px 72px 1fr; gap: 4px; }
  .ns-paper .ns-fic { padding-right: 10px; }
}
/* Tur sonucu tablosu */
.ns-table-wrap { width: min(900px, calc(100vw - 32px)); max-width: none; flex: none; margin-top: 12px; overflow: hidden; }
.ns-table { width: 100%; border-collapse: collapse; font-family: "Fredoka", sans-serif; }
.ns-table th, .ns-table td { padding: 9px 8px; border-bottom: 1.5px solid var(--line); text-align: left; overflow-wrap: break-word; word-break: normal; hyphens: auto; vertical-align: middle; }
.ns-table td .w { display: block; margin: 0 0 3px !important; line-height: 1.25; }
.ns-table td .ns-pts { white-space: nowrap; }
.ns-table th.who b { overflow-wrap: break-word; }
.ns-table .pt { width: 62px; white-space: nowrap; }
.ns-table { table-layout: fixed; }
.ns-table thead th:not(.who):not(.pt) { font-size: 12.5px; }
.ns-table thead th:not(.who) { text-align: center; }
.ns-table thead th span { display: flex; justify-content: center; margin: 0 0 3px !important; }
.ns-table td:not(.pt) { text-align: center; }
.ns-table thead th span { display: inline-flex; vertical-align: middle; }
.ns-table th.who { width: 136px; }
.ns-table td .w { font-size: 14.5px; }
.ns-h { display: flex; align-items: center; justify-content: center; gap: 8px; }
.ns-h .ns-ic { margin-right: 0 !important; }
.ns-table thead th { font-size: 13px; font-weight: 600; color: #b3262c; border-bottom: 2px solid rgba(229, 72, 77, 0.5); }
.ns-table thead th span { margin-right: 4px; }
.ns-table th.who { position: sticky; left: 0; z-index: 1; background: #fdf8ea; border-right: 2px solid rgba(229, 72, 77, 0.5); }
.ns-table tbody th.who { display: table-cell; }
.ns-table tbody th.who .ns-av { vertical-align: middle; margin-right: 6px; }
.ns-table tbody th.who b { font-weight: 500; font-size: 15px; vertical-align: middle; }
.ns-table td .w { font-size: 15.5px; color: #1d1650; margin-right: 5px; }
.ns-table td.x .w { text-decoration: line-through; text-decoration-color: #e5484d; text-decoration-thickness: 2px; color: var(--ink-faint); }
.ns-table td .ns-pts { background: rgba(42, 33, 96, 0.1); color: #6a62a0; }
.ns-table td .ns-pts.p5 { background: #dbe7ff; color: #2b5bb8; }
.ns-table td .ns-pts.p10 { background: #d6f3e5; color: #1b7f52; }
.ns-table td .ns-pts.p20 { background: #ffcc33; color: #3a2a00; }
.ns-table .pt { text-align: center; font-size: 20px; font-weight: 600; color: #b3262c; border-left: 2px solid rgba(229, 72, 77, 0.5); }
.ns-table thead .pt { font-size: 13px; }
.ns-table tbody tr { animation: ns-pop 0.4s ease both; animation-delay: calc(var(--i) * 0.08s); }
.ns-table tbody tr.me th.who, .ns-table tbody tr.me td { background-color: rgba(139, 92, 246, 0.09); }
.ns-table tbody tr.me th.who { background: #efe7f7; }
.ns-table tbody tr:last-child th, .ns-table tbody tr:last-child td { border-bottom: 0; }

/* ---------- gündüz teması ---------- */
:root[data-theme="light"] #ns-room { background: #fff; border-color: rgba(232, 162, 58, 0.6); box-shadow: 0 4px 12px rgba(120, 80, 20, 0.1); }
:root[data-theme="light"] #ns-room b { color: #b86e00; }
:root[data-theme="light"] #ns-room i { background: #fff; }
:root[data-theme="light"] .ns-invite-box { background: radial-gradient(circle at 50% 0%, rgba(255, 204, 51, 0.35), transparent 60%), linear-gradient(180deg, #efe6ff, #fbf7ef); border-color: rgba(232, 162, 58, 0.55); box-shadow: 0 10px 26px rgba(76, 47, 140, 0.1); }
:root[data-theme="light"] .ns-code span { box-shadow: 0 4px 0 #d9a21a, 0 8px 16px rgba(120, 80, 20, 0.18); }
:root[data-theme="light"] .ns-code.hid span { background: linear-gradient(180deg, #8b6fd8, #6a4bc4); color: rgba(255, 255, 255, 0.8); box-shadow: 0 4px 0 #4c2f8c, 0 8px 16px rgba(76, 47, 140, 0.25); }
:root[data-theme="light"] .ns-hidden-hint, :root[data-theme="light"] .ns-spin-t, :root[data-theme="light"] .ns-win { color: #b86e00; }
:root[data-theme="light"] .ns-hide { background: #fff; }
:root[data-theme="light"] #ns input, :root[data-theme="light"] #ns select { background: #fff; }
:root[data-theme="light"] .ns-box, :root[data-theme="light"] .ns-card, :root[data-theme="light"] .ns-vcat, :root[data-theme="light"] .ns-rrow { background: #fff; border-color: rgba(76, 47, 140, 0.14); box-shadow: 0 8px 22px rgba(76, 47, 140, 0.08); }
:root[data-theme="light"] .ns-card { background: linear-gradient(180deg, #f1e9ff, #fff); }
:root[data-theme="light"] .ns-card.hot { border-color: rgba(232, 162, 58, 0.7); box-shadow: 0 0 0 3px rgba(255, 204, 51, 0.25), 0 10px 24px rgba(120, 80, 20, 0.12); }
:root[data-theme="light"] .ns-invite { background: linear-gradient(90deg, #fff4cf, #efe6ff); }
:root[data-theme="light"] .ns-invite b { color: #8a5200; }
:root[data-theme="light"] .ns-p { background: #f6f1ff; }
:root[data-theme="light"] .ns-p.me { background: #e7dcff; }
:root[data-theme="light"] .ns-chip { background: #fff; color: var(--ink-dim); border-color: rgba(76, 47, 140, 0.18); }
:root[data-theme="light"] .ns-chip.on { background: #7c4fe0; border-color: #7c4fe0; color: #fff; }
:root[data-theme="light"] .ns-chip.x.on::before { color: #d6f3e5; }
:root[data-theme="light"] .ns-lang { background: #fff; color: var(--ink-dim); border-color: rgba(76, 47, 140, 0.18); }
:root[data-theme="light"] .ns-lang.on { background: linear-gradient(180deg, #fff4cf, #fff); border-color: #e8a23a; color: var(--ink); box-shadow: 0 6px 16px rgba(232, 162, 58, 0.25); }
:root[data-theme="light"] .ns-lang.on .flag-ic { box-shadow: 0 0 0 2px #e8a23a; }
:root[data-theme="light"] .ns-cats-now > span { background: #fff4cf; color: #8a5200; }
:root[data-theme="light"] .ns-actbar, :root[data-theme="light"] .ns-sticky { background: rgba(255, 255, 255, 0.92); border-color: rgba(124, 79, 224, 0.25); box-shadow: 0 12px 30px rgba(76, 47, 140, 0.18); }
:root[data-theme="light"] .ns-st, :root[data-theme="light"] .ns-board > span { background: #fff; border-color: rgba(76, 47, 140, 0.14); }
:root[data-theme="light"] .ns-board > span > b, :root[data-theme="light"] .ns-rt, :root[data-theme="light"] .ns-pod > span { color: #b86e00; }
:root[data-theme="light"] .ns-vrow.me { background: #efe7ff; }
:root[data-theme="light"] .ns-down { background: #fff; }
:root[data-theme="light"] .ns-rcats > span { background: #f6f1ff; }
:root[data-theme="light"] .ns-pts { background: rgba(76, 47, 140, 0.1); color: var(--ink-faint); }
:root[data-theme="light"] .ns-pts.p5 { background: #dbe7ff; color: #2b5bb8; }
:root[data-theme="light"] .ns-pts.p10 { background: #d6f3e5; color: #1b7f52; }
:root[data-theme="light"] .ns-demo { background: radial-gradient(circle at 15% 50%, rgba(255, 204, 51, 0.3), transparent 55%), #faf6ff; border-color: rgba(232, 162, 58, 0.45); }
:root[data-theme="light"] .ns-demo-r { background: #efe7ff; }
:root[data-theme="light"] .ns-paper { box-shadow: 0 2px 0 #e6dcc0, 0 12px 28px rgba(120, 80, 20, 0.16); border: 1px solid #ece2c8; }
:root[data-theme="light"] .ns-msg { background: #ffe9e9; }
:root[data-theme="light"] #ns-room.hid b { color: var(--ink-faint); }

/* Karakterler */
.ns-av { overflow: hidden; }
.ns-av img { width: 88%; height: 88%; object-fit: contain; pointer-events: none; }
.ns-char { width: 100%; max-width: 560px; margin-bottom: 14px; }
.ns-char label, .ns-charm h3 { display: block; font-family: "Fredoka", sans-serif; font-size: 13px; color: var(--ink-dim); margin-bottom: 8px; }
.ns-charm h3 { font-size: 20px; color: var(--ink); text-align: center; margin: 0 0 14px; }
.ns-avs { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.ns-avb { position: relative; aspect-ratio: 1; padding: 0; border-radius: 16px; border: 2px solid transparent; cursor: pointer; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 45%, #fff), var(--c)); opacity: 0.6; filter: saturate(0.7); transition: transform 0.15s, opacity 0.15s, filter 0.15s, box-shadow 0.15s; animation: ns-pop 0.35s ease both; animation-delay: calc(var(--i) * 0.02s); }
.ns-avb img { width: 84%; height: 84%; object-fit: contain; pointer-events: none; transition: transform 0.25s cubic-bezier(.34,1.56,.64,1); }
.ns-avb:not(:disabled):hover { opacity: 1; filter: none; transform: translateY(-3px); }
.ns-avb:not(:disabled):hover img { transform: rotate(-8deg) scale(1.08); }
.ns-avb.on { opacity: 1; filter: none; border-color: #ffcc33; box-shadow: 0 0 0 3px rgba(255, 204, 51, 0.35), 0 8px 18px rgba(0, 0, 0, 0.3); transform: scale(1.06); }
.ns-avb.on::after { content: "✓"; position: absolute; right: -6px; top: -6px; width: 20px; height: 20px; border-radius: 50%; background: #4abf8c; color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.ns-avb.taken { opacity: 0.2; cursor: not-allowed; filter: grayscale(1); }
.g-card.ns-charm { width: min(460px, 100%); }
@media (max-width: 480px) { .ns-avs { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; } .ns-avb { border-radius: 11px; } .ns-charm .ns-avs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } }
.ns-p.me { cursor: pointer; }
.ns-p.me::after { content: "✏️"; position: absolute; left: 22px; bottom: -4px; font-size: 11px; }
.ns-kick { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(229, 72, 77, 0.18); color: #ff6b6b; font-size: 11px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0.55; transition: opacity 0.15s, background 0.15s; }
.ns-p:hover .ns-kick, .ns-kick:focus-visible { opacity: 1; }
.ns-kick:hover { background: #e5484d; color: #fff; }
:root[data-theme="light"] .ns-kick { background: #ffe1e1; color: #d6333a; }
.ns-home.one { grid-template-columns: minmax(0, 1fr); max-width: 420px; }
.ns-card[hidden] { display: none; }

/* Takma ad satırı: solda büyük karakter */
.ns-me-row { display: flex; align-items: center; gap: 14px; }
.ns-me-row .ns-name-in { flex: 1; min-width: 0; }
.ns-myav { position: relative; flex: none; width: 84px; height: 84px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: none; perspective: 400px; }
.ns-myav-in { position: absolute; inset: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c, #8b5cf6) 45%, #fff), var(--c, #8b5cf6));
  box-shadow: 0 0 0 3px #ffcc33, 0 0 0 7px rgba(255, 204, 51, 0.18), 0 10px 22px rgba(0, 0, 0, 0.35); transition: background 0.12s, box-shadow 0.2s; }
.ns-myav-in img { width: 86%; height: 86%; object-fit: contain; pointer-events: none; }
.ns-myav i { position: absolute; right: -4px; bottom: -2px; font-style: normal; font-size: 15px; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #a67bfb, #7c3aed); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35); transition: transform 0.2s; }
.ns-myav:hover .ns-myav-in { box-shadow: 0 0 0 3px #ffcc33, 0 0 0 9px rgba(255, 204, 51, 0.25), 0 12px 26px rgba(0, 0, 0, 0.4); }
.ns-myav:hover i { transform: rotate(-20deg) scale(1.1); }
/* Dönerken: hafif sallanma + bulanık; inerken: zıplayıp parlıyor */
.ns-myav.rolling .ns-myav-in { animation: ns-roll-shake 0.18s linear infinite; }
.ns-myav.rolling .ns-myav-in img { filter: blur(1px); transform: scale(0.92); }
.ns-myav.rolling i { animation: ns-dice-spin 0.4s linear infinite; }
@keyframes ns-roll-shake { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes ns-dice-spin { to { transform: rotate(360deg); } }
.ns-myav.land .ns-myav-in { animation: ns-land-pop 0.55s cubic-bezier(.34,1.56,.64,1); }
.ns-myav.land::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 3px solid #ffcc33; animation: ns-ring 0.6s ease-out forwards; pointer-events: none; }
.ns-myav.land::before { content: "✨"; position: absolute; left: -6px; top: -10px; font-size: 20px; animation: ns-spark 0.7s ease-out forwards; pointer-events: none; }
@keyframes ns-land-pop { 0% { transform: scale(0.8); } 55% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes ns-spark { 0% { opacity: 0; transform: scale(0.4); } 30% { opacity: 1; transform: scale(1.2); } 100% { opacity: 0; transform: translate(-6px, -10px) scale(0.8); } }
:root[data-theme="light"] .ns-myav-in { box-shadow: 0 0 0 3px #e8a23a, 0 0 0 7px rgba(232, 162, 58, 0.18), 0 10px 22px rgba(76, 47, 140, 0.18); }
@media (max-width: 480px) { .ns-myav { width: 72px; height: 72px; } .ns-me-row { gap: 12px; } }
@media (prefers-reduced-motion: reduce) { .ns-myav.rolling .ns-myav-in, .ns-myav.land .ns-myav-in, .ns-myav.land::after, .ns-myav.land::before { animation: none; } }

/* Sayfa hiçbir zaman yana kaymasın */
.page:has(#ns) { overflow-x: clip; }
.pop { position: relative; }

/* ---------- sohbet ---------- */
#ns-chat { position: fixed; right: 16px; bottom: 72px; z-index: 1600; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; font-family: "Fredoka", sans-serif; }
.ns-chat-fab { position: relative; width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer; font-size: 26px; background: linear-gradient(180deg, #a67bfb, #7c3aed); box-shadow: 0 10px 26px rgba(124, 58, 237, 0.45); transition: transform 0.15s; }
.ns-chat-fab:hover { transform: translateY(-2px); }
.ns-chat-fab b { position: absolute; right: -3px; top: -3px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: #e5484d; color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--bg); }
.ns-chat-fab b[hidden] { display: none; }
.ns-chat-fab.ping { animation: ns-ping 1.6s ease-in-out infinite; }
@keyframes ns-ping { 0%, 100% { box-shadow: 0 10px 26px rgba(124, 58, 237, 0.45), 0 0 0 0 rgba(166, 123, 251, 0.6); } 50% { box-shadow: 0 10px 26px rgba(124, 58, 237, 0.45), 0 0 0 10px rgba(166, 123, 251, 0); } }
#ns-chat.open .ns-chat-fab { display: none; }
.ns-chat-panel { order: -1; width: 340px; height: min(480px, calc(100dvh - 140px)); display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: var(--bg-soft); border: 1px solid rgba(166, 123, 251, 0.4); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5); animation: ns-pop 0.25s ease; }
.ns-chat-panel[hidden] { display: none; }
.ns-chat-panel header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.ns-chat-panel header b { font-size: 16px; }
.ns-chat-x { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink-dim); cursor: pointer; }
.ns-chat-list { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; scrollbar-width: thin; scrollbar-color: var(--violet) transparent; }
.ns-chat-empty { margin: auto; text-align: center; color: var(--ink-faint); font-size: 13.5px; }
.ns-msgc { display: flex; align-items: flex-end; gap: 8px; max-width: 88%; }
.ns-msgc small { display: block; font-size: 11px; color: var(--ink-faint); margin: 0 0 2px 4px; }
.ns-msgc p { margin: 0; padding: 7px 12px; border-radius: 16px 16px 16px 4px; background: var(--bg-soft-2); color: var(--ink); font-size: 14.5px; line-height: 1.35; overflow-wrap: anywhere; font-family: "Manrope", sans-serif; }
.ns-msgc.me { align-self: flex-end; }
.ns-msgc.me p { border-radius: 16px 16px 4px 16px; background: linear-gradient(180deg, #a67bfb, #7c3aed); color: #fff; }
.ns-msgc.emo p { background: none !important; font-size: 30px; padding: 0 4px; }
.ns-chat-emo { display: flex; justify-content: space-between; gap: 2px; padding: 6px 10px; border-top: 1px solid var(--line); }
.ns-chat-emo button { border: 0; background: none; font-size: 20px; cursor: pointer; padding: 2px; border-radius: 8px; transition: transform 0.12s; }
.ns-chat-emo button:hover { transform: scale(1.2); }
.ns-chat-emo.off { opacity: 0.35; pointer-events: none; }
.ns-chat-form { display: flex; gap: 6px; padding: 8px 10px 10px; }
.ns-chat-form input { flex: 1; min-width: 0; font: inherit !important; font-size: 14.5px !important; padding: 10px 12px !important; border-radius: 14px !important; border: 1.5px solid var(--line) !important; background: var(--bg) !important; color: var(--ink) !important; outline: none; }
.ns-chat-form input:focus { border-color: var(--violet) !important; }
.ns-chat-form .btn { width: 44px; padding: 0; justify-content: center; }
:root[data-theme="light"] .ns-chat-panel { background: #fff; box-shadow: 0 24px 50px rgba(76, 47, 140, 0.22); }
:root[data-theme="light"] .ns-msgc:not(.me) p { background: #f1ebff; color: #221a3d; }
:root[data-theme="light"] .ns-msgc.me p { background: linear-gradient(180deg, #8b5cf6, #6d3fd8); color: #fff; }
:root[data-theme="light"] .ns-chat-form input { background: #faf7ff !important; }
@media (max-width: 640px) {
  #ns-chat { right: 12px; bottom: 92px; }
  .ns-chat-fab { width: 52px; height: 52px; font-size: 23px; }
  #ns-chat.open { left: 8px; right: 8px; bottom: 8px; }
  .ns-chat-panel { width: 100%; height: min(70dvh, 520px); }
}

/* ---------- kendi simgelerimiz ---------- */
.ns-ic { width: 1.25em; height: 1.25em; object-fit: contain; vertical-align: -0.28em; flex: none; pointer-events: none; }
.ns-card-ic .ns-ic { width: 64px; height: 64px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.3)); transition: transform 0.25s cubic-bezier(.34,1.56,.64,1); }
.ns-card:hover .ns-card-ic .ns-ic { transform: translateY(-3px) rotate(-4deg); }
.ns-box h4 .ns-ic { width: 24px; height: 24px; }
.ns-settings label { display: flex !important; align-items: center; gap: 6px; }
.ns-settings label .ns-ic { width: 20px; height: 20px; }
.ns-fic .ns-ic { width: 28px; height: 28px; }
.ns-dice .ns-ic { width: 28px; height: 28px; }
.ns-myav i .ns-ic { width: 20px; height: 20px; }
.ns-exit-ic .ns-ic { width: 24px; height: 24px; }
.ns-ask-ic .ns-ic { width: 64px; height: 64px; }
.ns-hide .ns-ic { width: 18px; height: 18px; }
#ns-room i .ns-ic { width: 15px; height: 15px; }
#ns-copy .ns-ic { width: 20px; height: 20px; margin-right: 2px; }
.ns-p .crown .ns-ic { width: 18px; height: 18px; }
.ns-h .ns-ic { width: 30px; height: 30px; margin-right: 6px; vertical-align: -0.35em; }
.ns-stop .ns-ic { width: 30px; height: 30px; margin-right: 4px; }
.ns-sticky .ns-ic { width: 22px; height: 22px; margin-right: 4px; }
.ns-down .ns-ic { width: 20px; height: 20px; }
.ns-down { filter: none; opacity: 0.75; }
.ns-down .ns-ic { filter: grayscale(0.8); transition: filter 0.15s; }
.ns-down.on .ns-ic, .ns-down:hover .ns-ic { filter: none; }
.ns-vcat h4 .ns-ic, .ns-table thead .ns-ic { width: 20px; height: 20px; }
.ns-cats-now .ns-ic, .ns-rcats .ns-ic, .ns-demo-r span .ns-ic { width: 16px; height: 16px; }
.ns-chip.x .ns-ic { width: 18px; height: 18px; }
#ns-or-create .ns-ic { width: 20px; height: 20px; margin-right: 6px; }
.g-sub .ns-ic { width: 20px; height: 20px; }

/* ---------- kayan seçim göstergesi ---------- */
.ns-chips.slide, .ns-langs { position: relative; }
.ns-glider { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 999px; pointer-events: none; opacity: 0;
  background: rgba(139, 92, 246, 0.35); border: 1.5px solid var(--violet); box-sizing: border-box;
  transition: transform 0.32s cubic-bezier(.34,1.3,.64,1), width 0.32s cubic-bezier(.34,1.3,.64,1), height 0.32s, opacity 0.2s; }
.ns-glider.now { transition: none; }
.ns-chips.slide .ns-chip { z-index: 1; }
.ns-chips.slide .ns-chip.on { background: transparent; border-color: transparent; box-shadow: none; }
.ns-langs .ns-glider { border-radius: 14px; background: linear-gradient(180deg, rgba(255, 204, 51, 0.22), rgba(255, 204, 51, 0.06)); border-color: #ffcc33; box-shadow: 0 0 18px rgba(255, 204, 51, 0.2); }
.ns-lang { z-index: 1; }
.ns-lang.on { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
.ns-lang.on .flag-ic { transform: scale(1.12); }
:root[data-theme="light"] .ns-glider { background: #7c4fe0; border-color: #7c4fe0; }
:root[data-theme="light"] .ns-chips.slide .ns-chip.on { color: #fff; }
:root[data-theme="light"] .ns-langs .ns-glider { background: linear-gradient(180deg, #fff4cf, #fff); border-color: #e8a23a; box-shadow: 0 6px 16px rgba(232, 162, 58, 0.25); }

/* Ek kategoriler: açılırken simge zıplayıp döner, kapanırken hafifçe sallanır */
.ns-chip.x.flip .ns-ic { animation: ns-flip 0.45s cubic-bezier(.34,1.56,.64,1); }
.ns-chip.x.flop .ns-ic { animation: ns-flop 0.35s ease; }
@keyframes ns-flip { 0% { transform: scale(1) rotate(0); } 45% { transform: translateY(-5px) scale(1.25) rotate(-12deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes ns-flop { 25% { transform: rotate(-10deg); } 75% { transform: rotate(8deg); } }
.ns-chip.x.on::before { animation: ns-pop 0.3s ease both; }
@media (prefers-reduced-motion: reduce) { .ns-glider { transition: none; } .ns-chip.x.flip .ns-ic, .ns-chip.x.flop .ns-ic { animation: none; } }
.ns-cats-now > span { display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 480px) {
  #ns .g-titles h1 { font-size: 22px; }
  #ns-room { padding: 5px 10px; }
  #ns-room b { font-size: 14px; }
  #ns-room small { font-size: 8px; }
}

/* Telefonda tablo: her oyuncu bir kart, yana kaydırma yok */
@media (max-width: 640px) {
  .ns-table, .ns-table tbody { display: block; width: 100%; }
  .ns-table thead { display: none; }
  .ns-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 12px; padding: 12px 14px; border-bottom: 1.5px solid var(--line); }
  .ns-table tbody tr:last-child { border-bottom: 0; }
  .ns-table th.who { grid-column: 1 / -1; display: flex !important; align-items: center; gap: 6px; padding: 0 0 4px; border: 0 !important; background: none !important; position: static; }
  .ns-table td { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 0; border: 0; min-width: 0; }
  .ns-table td::before { content: attr(data-l); flex-basis: 100%; font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #b3262c; }
  .ns-table td.pt { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; align-items: baseline; gap: 8px; border: 0; padding-top: 4px; border-top: 1.5px dashed rgba(229, 72, 77, 0.35); }
  .ns-table td.pt::before { flex-basis: auto; }
  .ns-table tbody tr.me th.who { background: none !important; }
  .ns-table tbody tr { align-items: start; }
  .ns-table tbody tr.me { background: rgba(139, 92, 246, 0.08); }
  .ns-table tbody tr.me td { background: none !important; }
  .ns-table { table-layout: auto; }
  .ns-table-wrap { width: 100%; }
  .ns-table td:not(.pt) { text-align: left; }
  .ns-table td .w { display: inline; margin: 0 !important; }
  .ns-table th.who { width: auto; }
  .ns-table .pt { width: auto; }
}
.ns-ask-warn { margin: -10px 0 20px; font-size: 14px; color: #ff8a8a; }
.ns-ask h3 + .ns-ask-warn { margin-top: -12px; }
.ns-ask-ic { display: flex; justify-content: center; }
.ns-sys { align-self: center; margin: 2px 0; padding: 4px 12px; border-radius: 99px; font-size: 12px; color: var(--ink-dim); background: rgba(255, 255, 255, 0.05); text-align: center; }
.ns-sys.joined, .ns-sys.back, .ns-sys.created { color: #8fe0b8; background: rgba(74, 191, 140, 0.12); }
.ns-sys.left, .ns-sys.kicked { color: #ff9a9a; background: rgba(229, 72, 77, 0.1); }
:root[data-theme="light"] .ns-sys.joined, :root[data-theme="light"] .ns-sys.back, :root[data-theme="light"] .ns-sys.created { color: #1b7f52; background: #e3f6ec; }
:root[data-theme="light"] .ns-sys.left, :root[data-theme="light"] .ns-sys.kicked { color: #c42b31; background: #ffe9e9; }
/* Mor düğmelerde beyaz yazı */
#ns .btn-primary, #ns-chat .btn-primary, .g-card.ns-ask .btn-primary { color: #fff; text-shadow: 0 1px 2px rgba(40, 10, 90, 0.35); }
#ns .btn-primary:disabled { color: rgba(255, 255, 255, 0.75); }
#ns .ns-stop.btn-primary { color: #2a1b00 !important; text-shadow: none; }
/* Sohbet mesajları seçilemesin (yazı kutusu hariç) */
#ns-chat, #ns-chat * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#ns-chat input { -webkit-user-select: text; user-select: text; }

/* "Oyunu başlat": canlı, parlayan düğme */
.ns-go { position: relative; overflow: hidden; color: #fff !important; font-weight: 600; letter-spacing: 0.01em;
  background: linear-gradient(135deg, #b58bff 0%, #8b5cf6 45%, #6d28d9 100%) !important; border: 0;
  box-shadow: 0 8px 22px rgba(124, 58, 237, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35); transition: transform 0.15s, box-shadow 0.15s; }
.ns-go span { position: relative; z-index: 1; }
.ns-go:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(124, 58, 237, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.ns-go:active { transform: translateY(1px) scale(0.98); }
/* Hazırken: üstünden ışık süzülür, hafifçe nefes alır */
.ns-go.ready { animation: ns-breathe 2.4s ease-in-out infinite; }
.ns-go.ready::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent); animation: ns-shine 2.4s ease-in-out infinite; }
@keyframes ns-breathe { 0%, 100% { box-shadow: 0 8px 22px rgba(124, 58, 237, 0.45), 0 0 0 0 rgba(166, 123, 251, 0.5); } 50% { box-shadow: 0 8px 22px rgba(124, 58, 237, 0.45), 0 0 0 8px rgba(166, 123, 251, 0); } }
@keyframes ns-shine { 0% { left: -60%; } 60%, 100% { left: 130%; } }
/* Tek kişiyken: canlı ama sakin; basılırsa sallanır */
.ns-go.wait { filter: saturate(0.85); }
.ns-go.nope { animation: ns-shake 0.45s; }
@media (prefers-reduced-motion: reduce) { .ns-go.ready, .ns-go.ready::after { animation: none; } }

/* Oylama: başlık, itiraz edenler, hazır çubuğu */
.ns-vcat h4 { display: flex; align-items: center; gap: 8px; }
.ns-vrow { grid-template-columns: 24px minmax(0, 90px) 1fr auto auto auto; }
.ns-voters { display: inline-flex; }
.ns-voters .ns-av + .ns-av { margin-left: -6px; }
.ns-voters .ns-av { box-shadow: 0 0 0 2px #e5484d; }
.ns-vflag { white-space: nowrap; }
.ns-readybar { justify-content: space-between; }
.ns-rfaces { display: flex; gap: 4px; flex: none; }
.ns-rf { position: relative; opacity: 0.45; filter: grayscale(0.6); transition: opacity 0.25s, filter 0.25s, transform 0.25s; }
.ns-rf.ok { opacity: 1; filter: none; transform: translateY(-2px); }
.ns-rf.ok::after { content: "✓"; position: absolute; right: -3px; bottom: -3px; width: 15px; height: 15px; border-radius: 50%; background: #4abf8c; color: #fff; font-size: 9.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #140f2b; animation: ns-pop 0.3s ease; }
.ns-readybtn { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 26px; border: 0; border-radius: 16px; cursor: pointer;
  font-family: "Fredoka", sans-serif; font-size: 17px; font-weight: 600; color: #fff; text-shadow: 0 1px 2px rgba(0, 60, 30, 0.35);
  background: linear-gradient(135deg, #5fd69c, #2fae6f 55%, #1f8f58); box-shadow: 0 8px 20px rgba(47, 174, 111, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.15s, box-shadow 0.15s, filter 0.2s; }
.ns-readybtn .ns-ic { width: 24px; height: 24px; }
.ns-readybtn:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(47, 174, 111, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.ns-readybtn:not(:disabled):active { transform: translateY(1px) scale(0.98); }
.ns-readybtn.done { cursor: default; background: rgba(74, 191, 140, 0.15); color: #8fe0b8; text-shadow: none; box-shadow: inset 0 0 0 1.5px rgba(74, 191, 140, 0.5); }
.ns-readybtn.done .ns-ic { animation: ns-spinslow 2s linear infinite; }
@keyframes ns-spinslow { 50% { transform: rotate(180deg); } 100% { transform: rotate(180deg); } }
:root[data-theme="light"] .ns-rf.ok::after { box-shadow: 0 0 0 2px #fff; }
:root[data-theme="light"] .ns-readybtn.done { color: #1b7f52; background: #e3f6ec; }
@media (max-width: 640px) {
  .ns-vrow { grid-template-columns: 22px minmax(0, 64px) 1fr auto auto; }
  .ns-vflag { grid-column: 2 / -1; grid-row: 2; white-space: normal; font-size: 10.5px; }
  .ns-rfaces .ns-rf:nth-child(n+5) { display: none; }
  .ns-readybtn { padding: 0 16px; font-size: 15.5px; }
}

/* Bitiş ekranı: ortalı */
.ns-final { width: 100%; min-height: calc(100dvh - 300px); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 0 20px; }
.ns-final .ns-podium { margin-top: 22px; justify-content: center; }
.ns-final .ns-pod { flex: 0 1 190px; }
/* 4.–8. sıradakiler: hep görünür, küçük ve sakin */
.ns-rest { margin-top: 18px; width: 100%; max-width: 560px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ns-rest > small { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.ns-rest-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.ns-rest-list > span { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px 4px 5px; border-radius: 999px; font-size: 13.5px; background: var(--bg-soft); border: 1px solid var(--line); color: var(--ink-dim); animation: ns-rise 0.5s ease both; animation-delay: calc(0.8s + var(--i) * 0.08s); }
.ns-rest-list > span.me { border-color: var(--violet); color: var(--ink); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18); }
.ns-rest-list i { font-style: normal; min-width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: "Fredoka", sans-serif; font-size: 11.5px; background: rgba(255, 255, 255, 0.07); color: var(--ink-faint); }
.ns-rest-list b { font-weight: 500; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ns-rest-list em { font-style: normal; font-family: "Fredoka", sans-serif; color: var(--ink-faint); }
:root[data-theme="light"] .ns-rest-list > span { background: #fff; }

/* "ya da kendi odanı kur" */
.ns-orc { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px 9px 12px; border-radius: 999px; border: 1.5px dashed rgba(166, 123, 251, 0.45); background: rgba(139, 92, 246, 0.08); color: var(--ink-dim); font: inherit; font-family: "Fredoka", sans-serif; font-size: 14.5px; cursor: pointer; transition: all 0.15s; }
.ns-orc .ns-ic { width: 26px; height: 26px; }
.ns-orc:hover { color: var(--ink); border-style: solid; border-color: var(--violet); background: rgba(139, 92, 246, 0.18); }
:root[data-theme="light"] .ns-orc { background: #fff; }
/* Çıkarılanlar + Affet */
.ns-kicked:empty { display: none; }
.ns-kicked { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ns-kicked small { flex-basis: 100%; display: flex; align-items: center; gap: 5px; font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); }
.ns-kicked small .ns-ic { width: 16px; height: 16px; }
.ns-kk { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border-radius: 999px; background: rgba(229, 72, 77, 0.1); border: 1px solid rgba(229, 72, 77, 0.3); font-size: 13px; }
.ns-kk b { font-weight: 500; text-decoration: line-through; text-decoration-color: rgba(229, 72, 77, 0.6); }
.ns-kk button { border: 0; border-radius: 999px; padding: 4px 10px; background: #4abf8c; color: #fff; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: transform 0.12s; }
.ns-kk button:hover { transform: scale(1.06); }
/* Kürsü: kurt görselleri (altın ortada büyük) */
.ns-podium { align-items: flex-end; gap: 4px; max-width: 560px; }
.ns-pod-img { width: 100%; max-width: 150px; height: auto; object-fit: contain; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.35)); }
.ns-pod.r1 .ns-pod-img { max-width: 200px; filter: drop-shadow(0 0 22px rgba(255, 204, 51, 0.45)) drop-shadow(0 12px 18px rgba(0, 0, 0, 0.35)); }
.ns-pod.r3 .ns-pod-img { max-width: 135px; }
.ns-pod-name { display: flex; align-items: center; justify-content: center; gap: 6px; max-width: 100%; margin-top: 4px; }
.ns-pod-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ns-pod.r1 .ns-pod-name b { font-size: 17px; color: #ffe08a; }
.ns-pod.r1 > span { font-size: 15px; font-weight: 600; }
.ns-pod.r1 .ns-pod-img { animation: ns-float 3s ease-in-out infinite; }
:root[data-theme="light"] .ns-pod.r1 .ns-pod-name b { color: #b86e00; }
@media (max-width: 480px) { .ns-pod-img { max-width: 110px; } .ns-pod.r1 .ns-pod-img { max-width: 140px; } .ns-pod.r3 .ns-pod-img { max-width: 100px; } .ns-pod-name .ns-av { display: none; } }

/* Oylama: sözlükte olan / yarım puan */
.ns-vrow.ver .ns-vflag { color: #6fd9a6; }
.ns-vrow.ver .ns-vans::after { content: " ✓"; color: #4abf8c; font-size: 13px; }
.ns-vrow.half .ns-vflag { color: #ffb627; }
.ns-vrow.half .ns-vans { text-decoration: underline wavy rgba(255, 182, 39, 0.7); text-underline-offset: 4px; }
.ns-down.lock { opacity: 0.25; cursor: not-allowed; }
:root[data-theme="light"] .ns-vrow.ver .ns-vflag { color: #1b7f52; }
:root[data-theme="light"] .ns-vrow.half .ns-vflag { color: #b86e00; }

/* Sohbet düğmesi: yazılı, parlak hap; ay simgesi sola */
#ns-chat { right: 18px; bottom: 18px; }
.ns-chat-fab { width: auto; height: 54px; padding: 0 20px 0 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; font-size: 16px;
  color: #fff; font-family: "Fredoka", sans-serif; font-weight: 600;
  background: linear-gradient(135deg, #b58bff, #8b5cf6 50%, #6d28d9); box-shadow: 0 10px 26px rgba(124, 58, 237, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.ns-fab-ic { font-size: 24px; display: inline-block; animation: ns-wiggle 4s ease-in-out infinite; }
@keyframes ns-wiggle { 0%, 86%, 100% { transform: rotate(0); } 89% { transform: rotate(-14deg) scale(1.1); } 93% { transform: rotate(12deg) scale(1.1); } 96% { transform: rotate(-6deg); } }
.ns-chat-fab.ping .ns-fab-ic { animation: ns-wiggle 1.2s ease-in-out infinite; }
.ns-chat-fab:hover { transform: translateY(-3px) scale(1.03); }
@media (max-width: 640px) {
  #ns-chat { right: 12px; bottom: 96px; }
  .ns-chat-fab { height: 50px; padding: 0 16px 0 12px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .ns-fab-ic { animation: none !important; } }

/* ================= Sohbet: yeni yerleşim =================
   Geniş ekran: sağda sabit, hep açık panel (oyun sola kayar).
   Dar ekran / telefon: sağ kenarda dikey "Sohbet" sekmesi, alttan açılan panel. */
#ns-chat.dock { top: 92px; bottom: 16px; right: 16px; left: auto; width: 330px; align-items: stretch; }
#ns-chat.dock .ns-chat-panel { width: 100%; height: 100%; animation: none; border-color: rgba(166, 123, 251, 0.45); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); }
#ns-chat.dock .ns-chat-panel header { background: linear-gradient(90deg, rgba(139, 92, 246, 0.35), rgba(139, 92, 246, 0.08)); }
#ns-chat.dock .ns-chat-x::before { content: "–"; }
#ns-chat.dock .ns-chat-x { font-size: 0; }
#ns-chat.dock .ns-chat-x::before { font-size: 18px; }
/* Sohbet açılınca oyun ortada kalır; sadece sohbetle çakışacaksa çakışmayacağı kadar sola kayar */
#ns { position: relative; left: 0; transition: left 0.35s ease; }
body.ns-docked #ns { left: calc(-1 * max(0px, (var(--nsw, 720px) - 100vw) / 2 + 366px)); }
/* Kenar sekmesi (küçültülmüş ya da dar ekran) */
#ns-chat:not(.open) .ns-chat-fab, #ns-chat.dock:not(.open) .ns-chat-fab { display: inline-flex; }
#ns-chat:not(.dock) { right: 0; bottom: auto; top: 50%; transform: translateY(-50%); }
#ns-chat:not(.dock).open { top: auto; transform: none; }
#ns-chat.dock:not(.open) { top: 50%; bottom: auto; right: 0; width: auto; transform: translateY(-50%); }
#ns-chat .ns-chat-fab { flex-direction: column; justify-content: center; gap: 8px; width: 52px; height: auto; padding: 16px 0 14px; border-radius: 18px 0 0 18px;
  background: linear-gradient(180deg, #b58bff, #7c3aed); box-shadow: -6px 10px 26px rgba(124, 58, 237, 0.45); color: #fff; font-family: "Fredoka", sans-serif; font-weight: 600; }
#ns-chat .ns-chat-fab:hover { transform: translateX(-4px); }
#ns-chat .ns-fab-t { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 15px; letter-spacing: 0.06em; }
#ns-chat .ns-fab-ic { font-size: 24px; }
#ns-chat .ns-chat-fab b { right: auto; left: -8px; top: -8px; }
#ns-chat .ns-chat-fab.ping { animation: ns-tab-ping 1.4s ease-in-out infinite; }
@keyframes ns-tab-ping { 0%, 100% { box-shadow: -6px 10px 26px rgba(124, 58, 237, 0.45), 0 0 0 0 rgba(166, 123, 251, 0.6); } 50% { box-shadow: -6px 10px 26px rgba(124, 58, 237, 0.45), 0 0 0 10px rgba(166, 123, 251, 0); } }
/* Dar ekranda açık panel: alttan tabaka */
@media (max-width: 1239px) {
  #ns-chat.open { left: 0; right: 0; bottom: 0; top: auto; transform: none; padding: 0 8px 8px; background: none; }
  #ns-chat.open::before { content: ""; position: fixed; inset: 0; background: rgba(6, 4, 14, 0.55); z-index: -1; }
  #ns-chat.open .ns-chat-panel { width: min(520px, 100%); margin: 0 auto; height: min(72dvh, 560px); border-radius: 22px; }
}
@media (max-width: 640px) { #ns-chat .ns-chat-fab { width: 44px; padding: 12px 0 10px; } #ns-chat .ns-fab-t { font-size: 13px; } #ns-chat .ns-fab-ic { font-size: 20px; } }
/* Switch: sıkı sözlük */
.ns-switch { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 14px; border: 1.5px solid var(--line); background: transparent; color: var(--ink-dim); font: inherit; font-size: 13px; text-align: left; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.ns-switch i { flex: none; position: relative; width: 40px; height: 22px; border-radius: 99px; background: rgba(255, 255, 255, 0.12); transition: background 0.2s; }
.ns-switch i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 0.25s cubic-bezier(.34,1.56,.64,1); }
.ns-switch.on { border-color: rgba(74, 191, 140, 0.6); background: rgba(74, 191, 140, 0.1); color: var(--ink); }
.ns-switch.on i { background: #4abf8c; }
.ns-switch.on i::after { transform: translateX(18px); }
.ns-switch:disabled { cursor: default; }
:root[data-theme="light"] .ns-switch i { background: #ddd3f2; }
.ns-chat-form.muted input { border-color: #e5484d !important; color: #ff8a8a; }
@media (max-width: 640px) {
  #ns-chat:not(.open) { top: auto; bottom: 120px; transform: none; }
  #ns-chat .ns-chat-fab { width: 40px; padding: 10px 0 9px; gap: 6px; border-radius: 14px 0 0 14px; }
  #ns-chat .ns-fab-t { font-size: 12px; }
  #ns-chat .ns-fab-ic { font-size: 18px; }
}

/* Kodu kopyala */
.ns-inv-btns { display: inline-flex; gap: 6px; }
#ns-copycode span { margin-left: 2px; }
#ns-code-tiles { cursor: pointer; position: relative; }
#ns-code-tiles:hover span { transform: translateY(-3px); }
#ns-code-tiles span { transition: transform 0.15s; }
#ns-code-tiles.copied span { animation: ns-copied 0.5s ease both; animation-delay: calc(var(--i) * 0.05s); }
@keyframes ns-copied { 40% { transform: translateY(-8px) scale(1.08); background: linear-gradient(180deg, #d6ffe9, #4abf8c); } }
@media (max-width: 480px) { #ns-copycode span, #ns-hide span { display: none; } }
.ns-stopwho { transition: opacity 0.2s; }
.ns-stopwho.off { opacity: 0.35; pointer-events: none; }
.ns-set-note { margin: 8px 0 0; font-size: 11.5px; color: var(--ink-faint); }

/* ===== Kompakt lobi: sağda süre ayarları, solda kelime + dil ayarları ===== */
.ns-settings .ns-chips { gap: 5px; }
.ns-settings .ns-chip { padding: 6px 11px; font-size: 13px; }
.ns-settings label { margin: 10px 0 5px !important; }
.ns-settings > h4 + label { margin-top: 0 !important; }
.ns-switch { padding: 6px 10px 6px 6px; font-size: 12.5px; }
.ns-langs { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
.ns-lang { padding: 6px 2px 4px; gap: 3px; border-radius: 11px; }
.ns-lang .flag-ic { width: 24px; height: 24px; }
.ns-lang b { font-size: 10px; letter-spacing: 0.04em; }
.ns-langs .ns-glider { border-radius: 11px; }
.ns-cats-now { display: none; }
.ns-pbox { max-height: 190px; }

/* Oda kurarken kişi sayısı */
.ns-seatpick { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; margin: -2px 0 10px; }
.ns-seatpick small { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--ink-dim); font-family: "Fredoka", sans-serif; }
.ns-seatpick small .ns-ic { width: 20px; height: 20px; }
.ns-seats { display: grid !important; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; width: 100%; max-width: 290px; }
.ns-seats .ns-chip { padding: 6px 0; min-width: 0; justify-content: center; font-size: 14px; }

/* Lobide boş yerler */
.ns-p.ns-empty { font: inherit; color: var(--ink-faint); text-align: left; cursor: pointer; background: rgba(139, 92, 246, 0.06); border: 1.5px dashed rgba(166, 123, 251, 0.38); padding: 3.5px 8px 3.5px 3.5px; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.ns-p.ns-empty b { font-weight: 400; color: var(--ink-faint); }
.ns-empty-av { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1.5px dashed rgba(166, 123, 251, 0.45); background: rgba(139, 92, 246, 0.1); }
.ns-empty-av .ns-ic { width: 20px; height: 20px; opacity: 0.55; filter: grayscale(0.4); }
.ns-p.ns-empty small { opacity: 0; transition: opacity 0.15s; color: var(--violet-2, #a67bfb); }
.ns-p.ns-empty:hover, .ns-p.ns-empty:focus-visible { border-style: solid; border-color: var(--violet); background: rgba(139, 92, 246, 0.16); color: var(--ink); }
.ns-p.ns-empty:hover small, .ns-p.ns-empty:focus-visible small { opacity: 1; }
.ns-p.ns-empty:hover .ns-empty-av .ns-ic { opacity: 0.9; filter: none; }
:root[data-theme="light"] .ns-p.ns-empty { background: #fff; }
@media (hover: none) { .ns-p.ns-empty small { opacity: 0.8; } }

/* Oyuncu sayısı: oda sahibi için − / + */
.ns-cap { display: inline-flex; align-items: center; gap: 4px; }
.ns-cap b { min-width: 30px; text-align: center; font-weight: 600; color: var(--ink-dim); }
.ns-cap button { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(166, 123, 251, 0.4); background: rgba(139, 92, 246, 0.12); color: var(--ink); font: 600 14px/1 "Fredoka", sans-serif; cursor: pointer; display: grid; place-items: center; padding: 0; transition: background 0.15s, transform 0.1s; }
.ns-cap button:hover:not(:disabled) { background: var(--violet); color: #fff; }
.ns-cap button:active:not(:disabled) { transform: scale(0.9); }
.ns-cap button:disabled { opacity: 0.3; cursor: default; }
.ns-chips[data-set="max"] { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ns-chips[data-set="max"] .ns-chip { padding-left: 0; padding-right: 0; justify-content: center; }
.ns-chip.low { opacity: 0.35; }
/* Kısa ayarlar tek satırda: solda başlık, sağda seçenekler */
.ns-settings .ns-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.ns-settings .ns-row label { flex: none; width: 92px; margin: 0 !important; line-height: 1.2; }
.ns-settings .ns-row .ns-chips { flex: 1; min-width: 0; }
.ns-settings .ns-row:first-of-type { margin-top: 0; }
.ns-chips[data-set="max"] { gap: 3px; }
.ns-chips[data-set="max"] .ns-chip { padding-top: 6px; padding-bottom: 6px; }
.ns-settings .ns-row + label { margin-top: 12px !important; }
.ns-link input { font-variant-numeric: tabular-nums; }
/* Boş yer: yazı kısalmasın; üstüne gelince "Davet et" yazısı onun yerine geçer */
.ns-p.ns-empty small { display: none; }
.ns-p.ns-empty:hover b, .ns-p.ns-empty:focus-visible b { display: none; }
.ns-p.ns-empty:hover small, .ns-p.ns-empty:focus-visible small { display: block; flex: 1; font-size: 14px; font-family: "Fredoka", sans-serif; }
@media (hover: none) { .ns-p.ns-empty small { display: none; } }
/* Tanıtım kartı: ay sallanırken yandaki yazılar/puanlar titremesin (ay kendi katmanında döner) */
.ns-demo-moon { will-change: transform; backface-visibility: hidden; }
.ns-demo-rows { transform: translateZ(0); backface-visibility: hidden; isolation: isolate; }
.ns-demo-r, .ns-demo-r em { backface-visibility: hidden; }
@keyframes ns-float { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(0, -4px, 0) rotate(-4deg); } }

/* ================= Lobi ayarları: renkli kartlar ================= */
.ns-settings { position: relative; overflow: hidden; }
.ns-settings::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 70px; pointer-events: none;
  background: radial-gradient(120% 100% at 0% 0%, rgba(139, 92, 246, 0.22), transparent 70%); }
.ns-words::before { background: radial-gradient(120% 100% at 0% 0%, rgba(255, 204, 51, 0.16), transparent 70%); }
.ns-box h4.ns-boxh { position: relative; margin: 0 0 10px; font-size: 16.5px; gap: 8px; font-family: "Fredoka", sans-serif; font-weight: 600; }
.ns-boxh-ic { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(139, 92, 246, 0.55), rgba(139, 92, 246, 0.15)); box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3); }
.ns-words .ns-boxh-ic { background: linear-gradient(135deg, rgba(255, 204, 51, 0.5), rgba(255, 204, 51, 0.12)); box-shadow: 0 4px 12px rgba(255, 204, 51, 0.22); }
.ns-boxh-ic .ns-ic { width: 22px !important; height: 22px !important; }
.ns-settings > h4.ns-boxh .ns-boxh-ic { animation: ns-wig 4s ease-in-out infinite; }
@keyframes ns-wig { 0%, 86%, 100% { transform: rotate(0); } 90% { transform: rotate(-12deg) scale(1.08); } 95% { transform: rotate(10deg); } }

.ns-set { position: relative; margin-top: 6px; padding: 7px 8px; border-radius: 14px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--a) 11%, transparent), color-mix(in srgb, var(--a) 3%, transparent));
  border: 1px solid color-mix(in srgb, var(--a) 22%, transparent); transition: border-color 0.2s, background 0.2s, opacity 0.2s; }
.ns-set:hover { border-color: color-mix(in srgb, var(--a) 45%, transparent); }
.ns-set-h { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; min-width: 0; }
.ns-set-ic { flex: none; width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--a) 26%, transparent); }
.ns-set-ic .ns-ic { width: 19px !important; height: 19px !important; }
.ns-set:hover .ns-set-ic .ns-ic { animation: ns-flip 0.45s cubic-bezier(.34,1.56,.64,1); }
.ns-set-t { min-width: 0; font-family: "Fredoka", sans-serif; font-weight: 500; font-size: 13.5px; line-height: 1.1; color: var(--ink); display: flex; flex-direction: column; }
.ns-set-t small { font-family: inherit; font-size: 10.5px; font-weight: 400; color: var(--ink-faint); }
.ns-set.in { display: flex; align-items: center; gap: 6px; }
.ns-set.in .ns-set-h { flex: none; width: 112px; margin: 0; }
.ns-set.in .ns-chips { flex: 1; min-width: 0; }
.ns-set .ns-chips { gap: 4px; }
.ns-set .ns-chip { padding: 5px 10px; font-size: 13px; border-color: color-mix(in srgb, var(--a) 22%, var(--line)); }
.ns-set .ns-chip:not(:disabled):hover { border-color: var(--a); color: var(--ink); transform: translateY(-1px); }
.ns-set .ns-chips[data-set="max"], .ns-set .ns-chips[data-set="rounds"], .ns-set .ns-chips[data-set="time"], .ns-set .ns-chips[data-set="stopSecs"] { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.ns-set .ns-chips[data-set] .ns-chip { justify-content: center; padding-left: 0; padding-right: 0; }
.ns-set .ns-chips[data-set="stopWho"] { display: grid; grid-template-columns: 1fr 1fr; }
.ns-set .ns-chips[data-set="extra"] .ns-chip { padding: 5px 10px; }
.ns-set .ns-chips[data-set="extra"] { display: flex; }
/* seçili: o ayarın renginde parlak hap */
.ns-set .ns-glider { background: linear-gradient(135deg, var(--a), color-mix(in srgb, var(--a) 55%, #8b5cf6)); border-color: transparent; box-shadow: 0 4px 14px color-mix(in srgb, var(--a) 45%, transparent); }
.ns-set .ns-chips.slide .ns-chip.on { color: #1a1033; font-weight: 600; }
.ns-set .ns-chip.x.on { background: linear-gradient(135deg, var(--a), color-mix(in srgb, var(--a) 60%, #ff8f3a)); border-color: transparent; color: #2a1a00; font-weight: 600; box-shadow: 0 4px 14px color-mix(in srgb, var(--a) 40%, transparent); }
.ns-set .ns-chip.x.on::before { color: #2a1a00; }
.ns-set .ns-langs { margin-top: 0; }
.ns-set.ns-stopwho.off { opacity: 0.4; }
.ns-settings.ro .ns-set .ns-chip:not(.on) { opacity: 0.45; }

/* Açık/kapalı kartları (sıkı sözlük, itirazlar) */
.ns-togs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.ns-tog { position: relative; display: flex; align-items: center; gap: 7px; min-width: 0; padding: 7px 8px; border-radius: 14px; font: inherit; text-align: left; color: var(--ink-dim); cursor: pointer;
  background: rgba(255, 255, 255, 0.03); border: 1.5px solid var(--line); transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.15s; }
.ns-tog:not(:disabled):hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--a) 50%, transparent); }
.ns-tog-ic { flex: none; width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.07); filter: grayscale(0.8); transition: filter 0.2s, background 0.2s; }
.ns-tog-ic .ns-ic { width: 19px !important; height: 19px !important; }
.ns-tog-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.ns-tog-t b { font-family: "Fredoka", sans-serif; font-weight: 500; font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ns-tog-t small { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint); }
.ns-tog i { flex: none; position: relative; width: 34px; height: 20px; border-radius: 99px; background: rgba(255, 255, 255, 0.14); transition: background 0.2s; }
.ns-tog i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.28s cubic-bezier(.34,1.56,.64,1); }
.ns-tog.on { background: linear-gradient(135deg, color-mix(in srgb, var(--a) 20%, transparent), color-mix(in srgb, var(--a) 5%, transparent)); border-color: color-mix(in srgb, var(--a) 60%, transparent); box-shadow: 0 0 16px color-mix(in srgb, var(--a) 18%, transparent); }
.ns-tog.on .ns-tog-ic { filter: none; background: color-mix(in srgb, var(--a) 28%, transparent); }
.ns-tog.on .ns-tog-t small { color: var(--a); }
.ns-tog.on i { background: var(--a); }
.ns-tog.on i::after { transform: translateX(14px); }
.ns-tog:disabled { cursor: default; }
.ns-tog .ns-tip { position: absolute; top: -6px; right: -5px; }

/* "?" bilgi düğmesi ve balonu */
.ns-tip { flex: none; margin-left: auto; width: 17px; height: 17px; border-radius: 50%; display: inline-grid; place-items: center; font: 700 10.5px/1 "Fredoka", sans-serif; cursor: help; user-select: none;
  color: var(--ink-dim); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); transition: background 0.15s, color 0.15s, transform 0.15s; }
.ns-tip:hover, .ns-tip:focus-visible { background: var(--a, var(--violet)); color: #1a1033; border-color: transparent; transform: scale(1.15); outline: none; }
.ns-set.in .ns-tip { margin-left: auto; }
.ns-tipbox { position: fixed; z-index: 10050; max-width: 260px; padding: 10px 12px; border-radius: 12px; font-size: 12.5px; line-height: 1.45; color: var(--ink);
  background: #241a3f; border: 1px solid color-mix(in srgb, var(--a) 55%, transparent); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), 0 0 0 3px color-mix(in srgb, var(--a) 12%, transparent);
  pointer-events: none; opacity: 0; transform: translateY(4px) scale(0.97); transition: opacity 0.15s, transform 0.15s; }
.ns-tipbox.on { opacity: 1; transform: none; }
.ns-tipbox::after { content: ""; position: absolute; left: calc(var(--ax) - 6px); bottom: -6px; width: 10px; height: 10px; background: inherit; border: inherit; border-top: 0; border-left: 0; transform: rotate(45deg); }
.ns-tipbox.below::after { bottom: auto; top: -6px; transform: rotate(225deg); }
:root[data-theme="light"] .ns-tipbox { background: #fff; color: #2a1d4f; }
:root[data-theme="light"] .ns-tog { background: #fff; }
:root[data-theme="light"] .ns-tip { background: #efe7ff; color: #5b3fb0; border-color: #d9cbff; }
:root[data-theme="light"] .ns-set .ns-chips.slide .ns-chip.on { color: #fff; }
:root[data-theme="light"] .ns-set .ns-glider { background: linear-gradient(135deg, color-mix(in srgb, var(--a) 80%, #000), color-mix(in srgb, var(--a) 50%, #6b3fd6)); }

/* Oyuncular kutusu: soldaki kutuyla aynı hizada biter (liste içinde kayar) */
.ns-lobby { align-items: stretch; }
.ns-lobby > .ns-col:last-child .ns-pbox { flex: 1 1 0; min-height: 150px; max-height: none; display: flex; flex-direction: column; overflow: hidden; }
.ns-pbox > #ns-plist { flex: 1 1 0; min-height: 0; overflow-y: auto; contain: size; scrollbar-width: thin; scrollbar-color: var(--violet) transparent; padding-right: 2px; }
@media (max-width: 640px) { .ns-lobby > .ns-col:last-child .ns-pbox { flex: none; } .ns-pbox > #ns-plist { contain: none; flex: none; } }
.ns-box h4.ns-boxh > span.ns-boxh-ic { margin-left: 0; }
.ns-box h4.ns-boxh { justify-content: flex-start; }
.ns-set.in .ns-set-h { width: 100px; gap: 6px; }
.ns-set-t { flex: 1; }
.ns-set.in .ns-set-t { font-size: 13px; }
.ns-set .ns-tip { margin-left: 0; }
.ns-set:not(.in) .ns-set-t { flex: 0 1 auto; }
.ns-set .ns-chips[data-set="stopSecs"] { grid-auto-flow: row; grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); }
.ns-set .ns-chips[data-set="stopWho"] .ns-chip { font-size: 12.5px; white-space: nowrap; padding-left: 4px; padding-right: 4px; }
.ns-set .ns-chip { line-height: 1.25; white-space: nowrap; }

/* Uzun dillerde taşma olmasın: "?" kartın köşesine, başlıklar iki satıra sığar */
.ns-set { padding-right: 14px; }
.ns-set .ns-set-h .ns-tip { position: absolute; top: -6px; right: -5px; z-index: 2; width: 18px; height: 18px; background: #2a1f45; border-color: color-mix(in srgb, var(--a) 45%, transparent); color: color-mix(in srgb, var(--a) 70%, #fff); }
:root[data-theme="light"] .ns-set .ns-set-h .ns-tip { background: #fff; color: #5b3fb0; }
.ns-set-t { overflow-wrap: anywhere; hyphens: auto; }
.ns-set.in .ns-set-h { width: 104px; }
.ns-set.in .ns-set-t { font-size: 12.5px; line-height: 1.12; }
.ns-tog-t b { white-space: normal; overflow: visible; text-overflow: clip; font-size: 12.5px; line-height: 1.1; overflow-wrap: anywhere; hyphens: auto; }
.ns-tog { padding-right: 10px; }
.ns-inv-top { flex-wrap: wrap; gap: 6px; }
.ns-inv-btns { flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.ns-hide { white-space: nowrap; }
.ns-p.ns-empty b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ================= Karakter seçimi: eğlenceli sahne ================= */
.g-card.ns-charm2 { width: min(520px, 100%); overflow: hidden; }
.ns-charm2 h3 { margin-bottom: 6px !important; }
.ns-stage { --c: #8b5cf6; position: relative; width: 150px; height: 150px; margin: 4px auto 14px; display: grid; place-items: center; }
.ns-rays { position: absolute; inset: -30px; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--c) 35%, transparent) 0 10deg, transparent 10deg 30deg);
  -webkit-mask: radial-gradient(circle, #000 25%, transparent 70%); mask: radial-gradient(circle, #000 25%, transparent 70%);
  animation: ns-spin 14s linear infinite; transition: background 0.3s; }
@keyframes ns-spin { to { transform: rotate(360deg); } }
.ns-stage-ring { position: absolute; width: 124px; height: 124px; border-radius: 50%; border: 3px dashed color-mix(in srgb, var(--c) 70%, #fff); opacity: 0.6; animation: ns-spin 9s linear infinite reverse; }
.ns-stage-av { position: relative; width: 108px; height: 108px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 40%, #fff), var(--c)); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12), 0 0 34px color-mix(in srgb, var(--c) 70%, transparent), 0 14px 26px rgba(0, 0, 0, 0.35);
  animation: ns-idle 2.4s ease-in-out infinite; transition: background 0.25s, box-shadow 0.25s; }
.ns-stage-av img { width: 86%; height: 86%; object-fit: contain; pointer-events: none; }
@keyframes ns-idle { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-6px) rotate(2deg); } }
.ns-stage.bump .ns-stage-av img { animation: ns-bump 0.45s cubic-bezier(.34,1.56,.64,1); }
@keyframes ns-bump { 0% { transform: scale(0.6) rotate(-15deg); opacity: 0.4; } 100% { transform: none; opacity: 1; } }
.ns-stage-name { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 4px 14px; border-radius: 999px; font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 15px; color: #1a1033;
  background: linear-gradient(135deg, #fff, color-mix(in srgb, var(--c) 35%, #fff)); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3); }
.ns-stage.taken .ns-stage-av { filter: grayscale(1); opacity: 0.6; }
.ns-stage.taken .ns-stage-name { background: #3a2f55; color: var(--ink-dim); }
.ns-stage.chosen .ns-stage-av { animation: ns-chosen 0.45s cubic-bezier(.34,1.56,.64,1); }
@keyframes ns-chosen { 40% { transform: scale(1.18) rotate(-6deg); } 100% { transform: scale(1); } }

.ns-avs-fun { gap: 8px; padding: 4px 2px 2px; }
.ns-avs-fun .ns-avb { opacity: 0.85; filter: none; border-radius: 18px; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.18); animation: ns-tilein 0.45s cubic-bezier(.34,1.56,.64,1) both; animation-delay: calc(var(--i) * 0.03s); }
@keyframes ns-tilein { from { opacity: 0; transform: translateY(14px) scale(0.6) rotate(-10deg); } }
.ns-avs-fun .ns-avb:not(.taken):hover { opacity: 1; transform: translateY(-5px) rotate(-4deg) scale(1.08); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.18), 0 10px 18px color-mix(in srgb, var(--c) 45%, transparent); z-index: 2; }
.ns-avs-fun .ns-avb:not(.taken):hover img { animation: ns-wiggle 0.5s ease; }
@keyframes ns-wiggle { 25% { transform: rotate(-10deg) scale(1.1); } 50% { transform: rotate(8deg) scale(1.1); } 75% { transform: rotate(-4deg) scale(1.05); } }
.ns-avs-fun .ns-avb.on { opacity: 1; border-color: #ffcc33; transform: scale(1.1); box-shadow: 0 0 0 3px rgba(255, 204, 51, 0.35), 0 0 22px rgba(255, 204, 51, 0.45); z-index: 1; }
.ns-avs-fun .ns-avb.on::after { animation: ns-pop 0.35s cubic-bezier(.34,1.56,.64,1) both; }
.ns-avs-fun .ns-avb.taken { opacity: 0.32; filter: grayscale(1); cursor: not-allowed; }
.ns-lock { position: absolute; right: -4px; bottom: -4px; font-style: normal; font-size: 13px; filter: none; }
.ns-avb.jump { animation: ns-jump 0.45s cubic-bezier(.34,1.56,.64,1) !important; }
@keyframes ns-jump { 30% { transform: translateY(-10px) scale(1.15) rotate(6deg); } 100% { transform: scale(1.1); } }
.ns-avb.nope { animation: ns-nope 0.35s ease !important; }
@keyframes ns-nope { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.ns-charbar { display: grid; grid-template-columns: auto 1fr; gap: 8px; margin-top: 16px; }
.ns-charbar .btn { justify-content: center; }
.ns-charrand { display: inline-flex; align-items: center; gap: 6px; }
.ns-charrand .ns-ic { width: 22px; height: 22px; }
.ns-charrand.roll .ns-ic { animation: ns-dice 0.7s ease; }
@keyframes ns-dice { 50% { transform: rotate(200deg) scale(1.25); } 100% { transform: rotate(360deg); } }
.ns-confetti { position: fixed; z-index: 10060; font-style: normal; font-size: 18px; pointer-events: none; transform: translate(-50%, -50%); animation: ns-conf 0.85s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes ns-conf { to { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(220deg) scale(0.6); opacity: 0; } }
:root[data-theme="light"] .ns-stage.taken .ns-stage-name { background: #e8e1f5; }
@media (max-width: 480px) { .ns-stage { width: 120px; height: 120px; } .ns-stage-av { width: 90px; height: 90px; } .ns-stage-ring { width: 104px; height: 104px; } .ns-avs-fun { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
@media (prefers-reduced-motion: reduce) { .ns-rays, .ns-stage-ring, .ns-stage-av, .ns-avs-fun .ns-avb { animation: none !important; } }
/* Aç/kapa kartı: başlık tam satır, altında durum + anahtar (uzun dillerde kırılmasın) */
.ns-tog { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; grid-template-areas: "ic t t" "ic s sw"; column-gap: 7px; row-gap: 2px; align-items: center; }
.ns-tog-ic { grid-area: ic; }
.ns-tog-t { display: contents; }
.ns-tog-t b { grid-area: t; overflow-wrap: normal; word-break: normal; hyphens: manual; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.ns-tog-t small { grid-area: s; }
.ns-tog i { grid-area: sw; width: 30px; height: 18px; }
.ns-tog i::after { width: 12px; height: 12px; }
.ns-tog.on i::after { transform: translateX(12px); }
.ns-set-t { overflow-wrap: break-word; }
.ns-tog-t b { white-space: normal; text-overflow: clip; line-height: 1.1; }
/* Oyuncu kartı: taç kesilmesin, düzenleme rozeti derli toplu */
.ns-pbox > #ns-plist { padding-top: 10px; margin-top: -6px; }
.ns-p .crown { left: 9px; top: -11px; transform: rotate(-12deg); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45)); z-index: 2; }
.ns-p .crown .ns-ic { width: 20px; height: 20px; }
.ns-p.me::after { display: none; content: ""; left: 24px; bottom: 1px; width: 16px; height: 16px; border-radius: 50%; z-index: 2;
  background: #fff url(/assets/ns/pencil.webp) center / 12px no-repeat; box-shadow: 0 0 0 2px var(--bg-soft, #1c1530), 0 2px 4px rgba(0, 0, 0, 0.35); transition: transform 0.2s cubic-bezier(.34,1.56,.64,1); }
.ns-p.me:hover::after { transform: scale(1.2) rotate(-10deg); }
.ns-p.me { transition: background 0.15s; }
.ns-p.me:hover { background: rgba(139, 92, 246, 0.3); }

/* ================= Lobi: solda ayarlar, ortada oda, sağda oyuncular ================= */
#ns { --nsw: 720px; }
.ns-lobby { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "set mid" "set pl"; gap: 12px; align-items: stretch; }
.ns-a-set { grid-area: set; align-self: start; }
.ns-a-mid { grid-area: mid; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ns-a-pl { grid-area: pl; min-width: 0; min-height: 170px; max-height: none !important; display: flex; flex-direction: column; overflow: hidden; }
.ns-a-pl > #ns-plist { flex: 1 1 0; min-height: 0; overflow-y: auto; contain: size; }
.ns-a-pl h4.ns-boxh { margin-bottom: 6px; }
.ns-sep { display: flex; align-items: center; gap: 8px; margin: 12px 0 2px; font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 14px; color: var(--ink); }
.ns-sep span { display: inline-flex; align-items: center; gap: 6px; }
.ns-sep .ns-ic { width: 22px; height: 22px; }
.ns-sep::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255, 204, 51, 0.45), transparent); }
.ns-sum { display: none; flex: 1; flex-direction: column; overflow: hidden; position: relative; }
.ns-sum::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(90% 60% at 50% 0%, rgba(255, 204, 51, 0.12), transparent 70%); }
.ns-sum-cats { position: relative; flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; align-content: center; }
.ns-sc { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; animation: ns-tilein 0.45s cubic-bezier(.34,1.56,.64,1) both; animation-delay: calc(var(--i) * 0.05s); }
.ns-sc i { width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(160deg, rgba(139, 92, 246, 0.35), rgba(139, 92, 246, 0.1)); border: 1px solid rgba(166, 123, 251, 0.35); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18); transition: transform 0.2s cubic-bezier(.34,1.56,.64,1); }
.ns-sc i .ns-ic { width: 34px; height: 34px; }
.ns-sc:hover i { transform: translateY(-4px) rotate(-6deg); }
.ns-sc b { max-width: 100%; font-family: "Fredoka", sans-serif; font-weight: 500; font-size: 12.5px; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ns-sum-stats { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.ns-sum-stats span { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 6px; align-items: center; padding: 6px 8px; border-radius: 12px; min-width: 0;
  background: color-mix(in srgb, var(--a) 12%, transparent); border: 1px solid color-mix(in srgb, var(--a) 30%, transparent); }
.ns-sum-stats .ns-ic, .ns-sum-stats .flag-ic { grid-row: 1 / 3; width: 24px; height: 24px; display: block; }
.ns-sum-stats b { font-family: "Fredoka", sans-serif; font-size: 16px; line-height: 1; color: var(--ink); }
.ns-sum-stats small { font-size: 10.5px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* kendi kartımda: kalem düğmesi sağda, avatarın üstünde değil */
.ns-edit { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.1); transition: background 0.15s, transform 0.2s cubic-bezier(.34,1.56,.64,1); }
.ns-edit .ns-ic { width: 15px; height: 15px; }
.ns-p.me:hover .ns-edit { background: #ffcc33; transform: rotate(-12deg) scale(1.12); }
@media (min-width: 1000px) {
  body:not(.ns-docked) #ns.ns-wide .ns-lobby { grid-template-columns: 340px minmax(0, 1fr) 250px; grid-template-areas: "set mid pl"; }
  body:not(.ns-docked) #ns.ns-wide .ns-sum { display: flex; }
  body:not(.ns-docked) #ns.ns-wide .ns-a-pl .ns-players { grid-template-columns: 1fr; gap: 6px; }
  body:not(.ns-docked) #ns.ns-wide .ns-a-pl .ns-p { padding: 6px 8px 6px 6px; border-radius: 16px; }
  body:not(.ns-docked) #ns.ns-wide .ns-a-pl .ns-p .ns-av { --s: 38px; }
  body:not(.ns-docked) #ns.ns-wide .ns-a-pl .ns-p b { font-size: 15.5px; }
  body:not(.ns-docked) #ns.ns-wide .ns-a-pl .ns-p .crown { left: 12px; top: -12px; }
  body:not(.ns-docked) #ns.ns-wide .ns-a-pl .ns-empty-av { width: 38px; height: 38px; }
  body:not(.ns-docked) #ns.ns-wide { max-width: 1000px; --nsw: 1000px; }
}
@media (min-width: 1400px) {
  body.ns-docked #ns.ns-wide .ns-lobby { grid-template-columns: 340px minmax(0, 1fr) 250px; grid-template-areas: "set mid pl"; }
  body.ns-docked #ns.ns-wide .ns-sum { display: flex; }
  body.ns-docked #ns.ns-wide .ns-a-pl .ns-players { grid-template-columns: 1fr; gap: 6px; }
  body.ns-docked #ns.ns-wide .ns-a-pl .ns-p { padding: 6px 8px 6px 6px; border-radius: 16px; }
  body.ns-docked #ns.ns-wide .ns-a-pl .ns-p .ns-av { --s: 38px; }
  body.ns-docked #ns.ns-wide .ns-a-pl .ns-p b { font-size: 15.5px; }
  body.ns-docked #ns.ns-wide .ns-a-pl .ns-p .crown { left: 12px; top: -12px; }
  body.ns-docked #ns.ns-wide .ns-a-pl .ns-empty-av { width: 38px; height: 38px; }
  body.ns-docked #ns.ns-wide { max-width: 1000px; --nsw: 1000px; }
}
@media (max-width: 640px) {
  .ns-lobby { grid-template-columns: 1fr; grid-template-areas: "mid" "pl" "set"; }
  .ns-a-pl { min-height: 0; }
  .ns-a-pl > #ns-plist { flex: none; contain: none; }
}
/* Oda kodu kutusu: başlık ortada, altta düzenli düğmeler */
.ns-invite-box { gap: 12px; }
.ns-inv-title { width: 100%; display: flex; align-items: center; gap: 10px; }
.ns-inv-title::before, .ns-inv-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 204, 51, 0.5)); }
.ns-inv-title::after { background: linear-gradient(90deg, rgba(255, 204, 51, 0.5), transparent); }
.ns-inv-title span { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 12.5px; letter-spacing: 0.18em; text-transform: uppercase; color: #ffd966; }
:root[data-theme="light"] .ns-inv-title span { color: #b9781a; }
.ns-link input { text-align: center; border-radius: 14px !important; }
.ns-link .btn { border-radius: 14px; }
.ns-inv-btns2 { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: -4px; }
.ns-inv-btns2 .ns-hide { justify-content: center; padding: 8px 10px; border-radius: 14px; font-size: 13px; min-width: 0; }
.ns-inv-btns2 .ns-hide span { overflow: hidden; text-overflow: ellipsis; }
.ns-inv-btns2 .ns-hide .ns-ic { width: 18px; height: 18px; }
.ns-inv-btns2 .ns-hide:hover { transform: translateY(-1px); }
@media (max-width: 480px) { .ns-inv-btns2 .ns-hide span { display: inline !important; } }
/* Ayarlar paneli: 768px yükseklikteki ekranlara sığsın diye sıkı */
.ns-a-set { padding: 12px 12px 12px; }
.ns-a-set h4.ns-boxh { margin-bottom: 6px; }
.ns-a-set .ns-set { margin-top: 5px; padding-top: 5px; padding-bottom: 5px; }
.ns-a-set .ns-set-h { margin-bottom: 4px; }
.ns-a-set .ns-set.in .ns-set-h { margin-bottom: 0; }
.ns-a-set .ns-set .ns-chip { padding-top: 4px; padding-bottom: 4px; }
.ns-a-set .ns-set-ic { width: 24px; height: 24px; }
.ns-a-set .ns-sep { margin: 8px 0 0; }
.ns-a-set .ns-togs { margin-top: 5px; }
.ns-a-set .ns-tog { padding-top: 5px; padding-bottom: 5px; }
.ns-a-set .ns-lang { padding: 4px 2px 3px; }
.ns-a-set .ns-lang .flag-ic { width: 22px; height: 22px; }
.ns-sum-cats { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 10px 8px; }
.ns-sc { width: calc(25% - 6px); }
.ns-lobby { grid-template-rows: auto 1fr; }
.ns-a-mid { align-self: start; }
#ns-chat.dock .ns-chat-x { display: none; }

/* Karakter seçimi: karakterler ortadaki sahnenin etrafında daire şeklinde */
.g-card.ns-charm2 { width: min(500px, 100%); }
.ns-orbit { --R: 172px; --t: 54px; position: relative; width: calc(var(--R) * 2 + var(--t) + 12px); aspect-ratio: 1; max-width: 100%; margin: 4px auto 0; }
.ns-orbit-ring { position: absolute; inset: calc(var(--t) / 2 + 6px); border-radius: 50%; border: 2px dashed rgba(166, 123, 251, 0.25); animation: ns-spin 60s linear infinite; pointer-events: none; }
.ns-orbit .ns-stage { position: absolute; left: 50%; top: 50%; margin: 0; translate: -50% -50%; }
.ns-orbit .ns-avs-fun { position: absolute; inset: 0; display: block; padding: 0; }
.ns-orbit .ns-avb { position: absolute; width: var(--t); height: var(--t); aspect-ratio: auto; left: calc(50% + var(--cx) * var(--R)); top: calc(50% + var(--cy) * var(--R)); translate: -50% -50%; }
.ns-orbit .ns-avb.on { transform: scale(1.18); }
.ns-orbit .ns-avb:not(.taken):hover { transform: translateY(-4px) rotate(-6deg) scale(1.15); }
@keyframes ns-tilein { from { opacity: 0; transform: scale(0.3) rotate(-30deg); } }
.ns-charbar { margin-top: 10px; }
@media (max-width: 520px) {
  .ns-orbit { --R: min(132px, calc(50vw - 62px)); --t: 42px; }
  .ns-orbit .ns-stage { width: 120px; height: 120px; }
  .ns-orbit .ns-stage-av { width: 84px; height: 84px; }
  .ns-orbit .ns-stage-ring { width: 100px; height: 100px; }
  .ns-orbit .ns-avb { border-radius: 13px; }
}
/* Ek kategoriler hep tek satır: üç eşit sütun, seçilince genişlemesin (✓ köşede rozet) */
.ns-set .ns-chips[data-set="extra"] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.ns-set .ns-chips[data-set="extra"] .ns-chip { justify-content: center; padding: 5px 6px; gap: 4px; min-width: 0; font-weight: 500; white-space: nowrap; overflow: visible; }
.ns-set .ns-chips[data-set="extra"] .ns-chip.on { font-weight: 600; }
.ns-set .ns-chip.x.on::before { position: absolute; top: -5px; right: -3px; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; margin: 0;
  background: #4abf8c; color: #fff !important; font-size: 10px; box-shadow: 0 0 0 2px var(--bg-soft, #1c1530); }
.ns-set .ns-chips[data-set="extra"] .ns-chip > span { flex: none; }
.ns-set .ns-chips[data-set="extra"] .ns-chip { font-size: 12.5px; padding: 5px 4px; } .ns-set .ns-chips[data-set="extra"] .ns-chip .ns-ic { width: 17px; height: 17px; }

/* "Bu oyunda": kategoriler alanı dolduran renkli kartlar (5 tek satır, 6 → 3+3, 7 → 4+3, 8 → 4+4) */
.ns-sum-cats { display: flex !important; flex-wrap: wrap; align-content: stretch; justify-content: stretch; gap: 8px; }
.ns-sc { flex: 1 1 calc(20% - 8px); width: auto; min-width: 0; min-height: 84px; justify-content: center; gap: 6px; padding: 8px 4px; border-radius: 16px;
  background: linear-gradient(170deg, color-mix(in srgb, var(--a) 26%, transparent), color-mix(in srgb, var(--a) 6%, transparent));
  border: 1px solid color-mix(in srgb, var(--a) 40%, transparent); box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--a) 18%, transparent); transition: transform 0.2s cubic-bezier(.34,1.56,.64,1), box-shadow 0.2s; }
.ns-sum-cats[data-n="6"] .ns-sc { flex-basis: calc(33.33% - 8px); }
.ns-sum-cats[data-n="7"] .ns-sc, .ns-sum-cats[data-n="8"] .ns-sc { flex-basis: calc(25% - 8px); }
.ns-sc i { width: 48px; height: 48px; border-radius: 50%; background: color-mix(in srgb, var(--a) 22%, rgba(0, 0, 0, 0.15)); border: 0; box-shadow: none; }
.ns-sc i .ns-ic { width: 36px; height: 36px; }
.ns-sc b { color: var(--ink); font-size: 13px; }
.ns-sc:hover { transform: translateY(-3px); box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--a) 18%, transparent), 0 8px 18px color-mix(in srgb, var(--a) 25%, transparent); }
.ns-sc:hover i { transform: rotate(-8deg) scale(1.08); }
.ns-sc:nth-child(odd) i { animation: ns-bobble 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * 0.3s); }
.ns-sc:nth-child(even) i { animation: ns-bobble 3.2s ease-in-out infinite reverse; animation-delay: calc(var(--i) * 0.3s); }
@keyframes ns-bobble { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
.ns-sum-cats[data-n="5"] .ns-sc i { width: 44px; height: 44px; }
.ns-sum-cats[data-n="5"] .ns-sc i .ns-ic { width: 32px; height: 32px; }
.ns-sum-cats[data-n="5"] .ns-sc b { font-size: 12px; }
:root[data-theme="light"] .ns-sc { background: linear-gradient(170deg, color-mix(in srgb, var(--a) 30%, #fff), #fff); }
@media (prefers-reduced-motion: reduce) { .ns-sc i { animation: none !important; } }

/* Lobide sayfa kaymasın: alt boşluklar ve alt bilgi daha ince */
body.ns-inlobby main.g-page { padding-bottom: 12px; }
body.ns-inlobby footer { padding: 14px 0; }
@media (max-height: 900px) and (min-width: 641px) { body.ns-inlobby .g-titles p { display: none; } }

/* 3 sütun: üçü de aynı yerde biter; ortadaki ve sağdaki içerik sütunu uzatmaz, içinde sığar */
@media (min-width: 1000px) {
  body:not(.ns-docked) #ns.ns-wide .ns-lobby { grid-template-rows: auto; }
  body:not(.ns-docked) #ns.ns-wide .ns-a-set { align-self: stretch; }
  body:not(.ns-docked) #ns.ns-wide .ns-a-mid { align-self: stretch; min-height: 0; }
  body:not(.ns-docked) #ns.ns-wide .ns-sum { flex: 1 1 0; min-height: 0; }
  body:not(.ns-docked) #ns.ns-wide .ns-sum-cats { flex: 1 1 0; min-height: 0; contain: size; overflow: hidden; }
  body:not(.ns-docked) #ns.ns-wide .ns-sc { min-height: 0; padding: 4px; gap: 3px; }
  body:not(.ns-docked) #ns.ns-wide .ns-sum-cats[data-n="6"] .ns-sc i, body:not(.ns-docked) #ns.ns-wide .ns-sum-cats[data-n="7"] .ns-sc i, body:not(.ns-docked) #ns.ns-wide .ns-sum-cats[data-n="8"] .ns-sc i { width: 38px; height: 38px; }
  body:not(.ns-docked) #ns.ns-wide .ns-sum-cats[data-n="6"] .ns-sc i .ns-ic, body:not(.ns-docked) #ns.ns-wide .ns-sum-cats[data-n="7"] .ns-sc i .ns-ic, body:not(.ns-docked) #ns.ns-wide .ns-sum-cats[data-n="8"] .ns-sc i .ns-ic { width: 28px; height: 28px; }
  body:not(.ns-docked) #ns.ns-wide .ns-sum-stats { margin-top: 10px; }
}
@media (min-width: 1400px) {
  body.ns-docked #ns.ns-wide .ns-lobby { grid-template-rows: auto; }
  body.ns-docked #ns.ns-wide .ns-a-set { align-self: stretch; }
  body.ns-docked #ns.ns-wide .ns-a-mid { align-self: stretch; min-height: 0; }
  body.ns-docked #ns.ns-wide .ns-sum { flex: 1 1 0; min-height: 0; }
  body.ns-docked #ns.ns-wide .ns-sum-cats { flex: 1 1 0; min-height: 0; contain: size; overflow: hidden; }
  body.ns-docked #ns.ns-wide .ns-sc { min-height: 0; padding: 4px; gap: 3px; }
  body.ns-docked #ns.ns-wide .ns-sum-cats[data-n="6"] .ns-sc i, body.ns-docked #ns.ns-wide .ns-sum-cats[data-n="7"] .ns-sc i, body.ns-docked #ns.ns-wide .ns-sum-cats[data-n="8"] .ns-sc i { width: 38px; height: 38px; }
  body.ns-docked #ns.ns-wide .ns-sum-cats[data-n="6"] .ns-sc i .ns-ic, body.ns-docked #ns.ns-wide .ns-sum-cats[data-n="7"] .ns-sc i .ns-ic, body.ns-docked #ns.ns-wide .ns-sum-cats[data-n="8"] .ns-sc i .ns-ic { width: 28px; height: 28px; }
  body.ns-docked #ns.ns-wide .ns-sum-stats { margin-top: 10px; }
}
#ns.ns-wide .ns-sum-cats[data-n="7"], #ns.ns-wide .ns-sum-cats[data-n="8"], #ns.ns-wide .ns-sum-cats[data-n="6"] { gap: 6px; }
#ns.ns-wide .ns-sum-cats[data-n] .ns-sc { overflow: hidden; }
#ns.ns-wide .ns-sum-cats[data-n="7"] .ns-sc i, #ns.ns-wide .ns-sum-cats[data-n="8"] .ns-sc i, #ns.ns-wide .ns-sum-cats[data-n="6"] .ns-sc i { width: 32px !important; height: 32px !important; }
#ns.ns-wide .ns-sum-cats[data-n="7"] .ns-sc i .ns-ic, #ns.ns-wide .ns-sum-cats[data-n="8"] .ns-sc i .ns-ic, #ns.ns-wide .ns-sum-cats[data-n="6"] .ns-sc i .ns-ic { width: 25px !important; height: 25px !important; }
#ns.ns-wide .ns-sum-cats[data-n="7"] .ns-sc b, #ns.ns-wide .ns-sum-cats[data-n="8"] .ns-sc b { font-size: 12px; line-height: 1.1; }
/* Oyuncular: 8 kişi de kaydırmadan sığsın — satırlar gerekirse birazcık küçülür */
#ns.ns-wide .ns-a-pl > #ns-plist { overflow: hidden; padding-bottom: 2px; }
#ns.ns-wide .ns-a-pl .ns-players { display: flex; flex-direction: column; gap: 6px; height: 100%; }
#ns.ns-wide .ns-a-pl .ns-players > * { flex: 0 1 52px; min-height: 34px; }
#ns.ns-wide .ns-a-pl .ns-p .ns-av { --s: min(38px, 100%); }
body.ns-inlobby main.g-page { padding-top: 8px; }

/* Lobi: başlık + paneller boş alanın tam ortasında (dikeyde ve sohbet açıkken kalan alanın yatayda ortasında) */
body.ns-inlobby .page { display: flex; flex-direction: column; }
body.ns-inlobby main.g-page { flex: 1 0 auto; align-items: center; }
body.ns-docked #ns { left: -183px; }
body.ns-docked #ns { left: -175px; }

/* Sohbet balonları: isim balonun içinde, oyuncunun renginde; art arda mesajlar gruplanır */
.ns-msgc { gap: 7px; margin-top: 2px; }
.ns-msgc.first { margin-top: 8px; }
.ns-msgc .ns-av-ph { flex: none; width: 30px; }
.ns-msgc .ns-av { box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 70%, #fff); }
.ns-bub { min-width: 0; display: flex; flex-direction: column; }
.ns-msgc:not(.me) .ns-bub { padding: 6px 12px 7px; border-radius: 6px 16px 16px 6px; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 22%, var(--bg-soft-2)), var(--bg-soft-2));
  border-left: 3px solid var(--c); animation: ns-bubin 0.3s cubic-bezier(.34,1.56,.64,1) both; }
.ns-msgc:not(.me).first .ns-bub { border-top-left-radius: 16px; }
.ns-msgc:not(.me).last .ns-bub { border-bottom-left-radius: 4px; }
.ns-msgc:not(.me) .ns-bub p { padding: 0; background: none; border-radius: 0; }
.ns-who { display: inline-flex; align-items: center; gap: 3px; margin-bottom: 1px; font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 12.5px; letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--c) 65%, #fff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.ns-who i { font-style: normal; font-size: 11px; }
.ns-msgc.me .ns-bub p { animation: ns-bubin 0.3s cubic-bezier(.34,1.56,.64,1) both; }
.ns-msgc.me.cont p { border-top-right-radius: 6px; }
.ns-msgc.me:not(.last) p { border-bottom-right-radius: 6px; }
@keyframes ns-bubin { from { opacity: 0; transform: translateY(6px) scale(0.92); } }
.ns-msgc.emo:not(.me) .ns-bub { background: none; border-left: 0; padding: 0 4px; }
:root[data-theme="light"] .ns-msgc:not(.me) .ns-bub { background: linear-gradient(135deg, color-mix(in srgb, var(--c) 18%, #fff), #f6f1ff); }
:root[data-theme="light"] .ns-who { color: color-mix(in srgb, var(--c) 80%, #000); }
@media (prefers-reduced-motion: reduce) { .ns-bub, .ns-msgc.me .ns-bub p { animation: none !important; } }

/* ================= Lobi: sağ sütun = oyuncular + sohbet (oyun tam ortada) ================= */
.ns-a-right { grid-area: pl; display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; }
.ns-a-right > .ns-a-pl { flex: 1 1 auto; }
.ns-chat-slot:empty { display: none; }
.ns-chat-slot { flex: 1 1 0; min-height: 230px; contain: size; position: relative; }
#ns-chat.inlay { position: absolute; inset: 0; top: 0; right: 0; bottom: 0; left: 0; width: auto; transform: none; z-index: 1; align-items: stretch; font-family: inherit; }
#ns-chat.inlay .ns-chat-fab, #ns-chat.inlay .ns-chat-x { display: none !important; }
#ns-chat.inlay .ns-chat-panel { width: 100%; height: 100%; animation: none; border-radius: 20px; border-color: rgba(166, 123, 251, 0.35); box-shadow: none; }
#ns-chat.inlay .ns-chat-panel header { background: linear-gradient(90deg, rgba(139, 92, 246, 0.35), rgba(139, 92, 246, 0.08)); padding-top: 10px; padding-bottom: 10px; }
#ns-chat.inlay .ns-chat-emo button { font-size: 18px; }

@media (min-width: 1120px) {
  body:not(.ns-docked) #ns.ns-wide { max-width: 1100px; --nsw: 1100px; }
  body:not(.ns-docked) #ns.ns-wide .ns-lobby { grid-template-columns: 330px minmax(0, 1fr) 330px; grid-template-areas: "set mid pl"; }
  body:not(.ns-docked) #ns.ns-wide .ns-a-right > .ns-a-pl { flex: none; min-height: 0; }
  body:not(.ns-docked) #ns.ns-wide .ns-a-pl > #ns-plist { flex: none; contain: none; overflow: visible; padding-top: 10px; }
  /* oyuncular: 4'lü küçük kartlar */
  body:not(.ns-docked) #ns.ns-wide .ns-a-pl .ns-players { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; height: auto; }
  body:not(.ns-docked) #ns.ns-wide .ns-a-pl .ns-players > * { flex: none; min-height: 0; }
  body:not(.ns-docked) #ns.ns-wide .ns-a-pl .ns-p { flex-direction: column; justify-content: center; gap: 3px; padding: 8px 3px 6px; border-radius: 14px; text-align: center; }
  body:not(.ns-docked) #ns.ns-wide .ns-a-pl .ns-p .ns-av { --s: 40px; }
  body:not(.ns-docked) #ns.ns-wide .ns-a-pl .ns-p b { flex: none; max-width: 100%; font-size: 12.5px; }
  body:not(.ns-docked) #ns.ns-wide .ns-a-pl .ns-p small { display: none; }
  body:not(.ns-docked) #ns.ns-wide .ns-a-pl .ns-p .crown { left: calc(50% - 28px); top: -9px; }
  body:not(.ns-docked) #ns.ns-wide .ns-a-pl .ns-edit { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; }
  body:not(.ns-docked) #ns.ns-wide .ns-a-pl .ns-edit .ns-ic { width: 13px; height: 13px; }
  body:not(.ns-docked) #ns.ns-wide .ns-a-pl .ns-kick { position: absolute; top: 3px; right: 3px; margin: 0; }
  body:not(.ns-docked) #ns.ns-wide .ns-a-pl .ns-empty-av { width: 40px; height: 40px; }
  body:not(.ns-docked) #ns.ns-wide .ns-a-pl .ns-p.ns-empty { padding: 7px 3px 5px; }
  body:not(.ns-docked) #ns.ns-wide .ns-a-pl .ns-p.ns-empty b { font-size: 11.5px; }
  body:not(.ns-docked) #ns.ns-wide .ns-a-pl .ns-p.ns-empty:hover small { display: block; font-size: 11.5px; flex: none; }
}
#ns-chat.inlay { top: 0 !important; bottom: 0 !important; left: 0 !important; right: 0 !important; transform: none !important; width: auto !important; }
@media (min-width: 1120px) {
  body:not(.ns-docked) #ns.ns-wide .ns-a-pl .ns-edit, body:not(.ns-docked) #ns.ns-wide .ns-a-pl .ns-kick { top: 2px; right: 2px; width: 17px; height: 17px; font-size: 9px; }
  body:not(.ns-docked) #ns.ns-wide .ns-a-pl .ns-edit .ns-ic { width: 11px; height: 11px; }
}
/* Sadece emoji: diğerlerinde balon + isim korunur, emoji büyük; kendi emojim balonsuz */
.ns-msgc.emo:not(.me) .ns-bub { background: linear-gradient(135deg, color-mix(in srgb, var(--c) 22%, var(--bg-soft-2)), var(--bg-soft-2)) !important; border-left: 3px solid var(--c) !important; padding: 5px 12px 6px !important; }
.ns-msgc.emo p { font-size: 28px !important; line-height: 1.15 !important; padding: 0 !important; }
.ns-msgc.emo.me p { padding: 0 2px !important; }

/* Emoji: gönder düğmesinin solunda; basınca kutu açılır, seçilen yazı alanına eklenir */
.ns-chat-form { position: relative; align-items: center; }
.ns-emo-btn { flex: none; width: 40px; height: 40px; border-radius: 12px; border: 1.5px solid var(--line); background: transparent; font-size: 20px; cursor: pointer; display: grid; place-items: center; padding: 0; transition: transform 0.15s, background 0.15s, border-color 0.15s; }
.ns-emo-btn:hover:not(:disabled), .ns-emo-btn.on { background: rgba(255, 204, 51, 0.15); border-color: rgba(255, 204, 51, 0.6); transform: rotate(-10deg) scale(1.06); }
.ns-emo-btn:disabled { opacity: 0.35; cursor: default; }
.ns-chat-form .ns-chat-emo { position: absolute; left: 10px; right: 10px; bottom: calc(100% + 4px); z-index: 5; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px; padding: 8px;
  border: 1px solid rgba(166, 123, 251, 0.45); border-radius: 16px; background: #221a3a; box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.45); animation: ns-emoin 0.22s cubic-bezier(.34,1.56,.64,1); transform-origin: 85% 100%; }
.ns-chat-form .ns-chat-emo[hidden] { display: none; }
@keyframes ns-emoin { from { opacity: 0; transform: translateY(8px) scale(0.9); } }
.ns-chat-form .ns-chat-emo button { font-size: 21px; aspect-ratio: 1; display: grid; place-items: center; padding: 0; border-radius: 10px; }
.ns-chat-form .ns-chat-emo button:hover { background: rgba(255, 255, 255, 0.08); transform: scale(1.18); }
.ns-chat-form .ns-chat-emo button.pop { animation: ns-chip 0.3s ease-out; }
:root[data-theme="light"] .ns-chat-form .ns-chat-emo { background: #fff; }
.ns-chat-form .btn { height: 42px; width: 42px; border-radius: 50%; flex: none; } .ns-chat-form .ns-emo-btn { height: 42px; width: 42px; } .ns-chat-form input { height: 42px; box-sizing: border-box; }
/* Herkesin her mesajı balonda: sadece emoji olanlarda emoji büyük ama balon yine var */
.ns-msgc.emo.me p { background: linear-gradient(180deg, #a67bfb, #7c3aed) !important; padding: 4px 12px !important; border-radius: 16px 16px 4px 16px; }
:root[data-theme="light"] .ns-msgc.emo.me p { background: linear-gradient(180deg, #8b5cf6, #6d3fd8) !important; }

/* Sohbet: kişi başına tek balon (art arda mesajlar alt alta satır), isim + avatar üstte ve kaydırırken yapışık */
.ns-grp { display: flex; align-items: flex-start; gap: 7px; max-width: 90%; margin-top: 8px; }
.ns-grp.me { align-self: flex-end; }
.ns-grp-av { position: sticky; top: 2px; flex: none; }
.ns-grp-av .ns-av { box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 70%, #fff); }
.ns-grp-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 6px 12px 7px; border-radius: 6px 16px 16px 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 22%, var(--bg-soft-2)), var(--bg-soft-2)); border-left: 3px solid var(--c); animation: ns-bubin 0.3s cubic-bezier(.34,1.56,.64,1) both; }
.ns-grp.me .ns-grp-body { border-left: 0; border-radius: 16px 16px 6px 16px; background: linear-gradient(180deg, #a67bfb, #7c3aed); color: #fff; }
.ns-grp-body p { margin: 0; font-size: 14.5px; line-height: 1.35; overflow-wrap: anywhere; font-family: "Manrope", sans-serif; color: inherit; }
.ns-grp:not(.me) .ns-grp-body p { color: var(--ink); }
.ns-grp-body p + p { padding-top: 3px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.ns-grp.me .ns-grp-body p + p { border-top-color: rgba(255, 255, 255, 0.18); }
.ns-grp-body p.emo { font-size: 26px; line-height: 1.15; }
.ns-grp .ns-who { position: sticky; top: 0; z-index: 1; align-self: flex-start; margin: -2px 0 1px -4px; padding: 1px 6px; border-radius: 8px;
  background: color-mix(in srgb, var(--c) 18%, #1d1633); color: color-mix(in srgb, var(--c) 65%, #fff); max-width: 100%; }
:root[data-theme="light"] .ns-grp:not(.me) .ns-grp-body { background: linear-gradient(135deg, color-mix(in srgb, var(--c) 18%, #fff), #f6f1ff); }
:root[data-theme="light"] .ns-grp:not(.me) .ns-grp-body p { color: #221a3d; }
:root[data-theme="light"] .ns-grp .ns-who { background: color-mix(in srgb, var(--c) 20%, #fff); color: color-mix(in srgb, var(--c) 80%, #000); }
:root[data-theme="light"] .ns-grp.me .ns-grp-body { background: linear-gradient(180deg, #8b5cf6, #6d3fd8); }
@media (prefers-reduced-motion: reduce) { .ns-grp-body { animation: none; } }
.ns-grp .ns-who { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); }

/* Çıkarılanlar: oyuncular başlığında düğme + panel */
.ns-kicked { display: none !important; }
.ns-a-pl h4.ns-boxh #ns-pn { margin-left: 8px; }
.ns-banbtn { position: relative; margin-left: auto; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; padding: 0; cursor: pointer;
  border: 1px solid rgba(229, 72, 77, 0.35); background: rgba(229, 72, 77, 0.1); transition: transform 0.15s, background 0.15s; }
.ns-banbtn[hidden] { display: none; }
.ns-banbtn .ns-ic { width: 20px !important; height: 20px !important; filter: grayscale(0.5); opacity: 0.8; }
.ns-banbtn:hover { transform: rotate(-8deg) scale(1.08); background: rgba(229, 72, 77, 0.25); }
.ns-banbtn.has .ns-ic { filter: none; opacity: 1; }
.ns-banbtn b { position: absolute; top: -6px; right: -6px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; background: #e5484d; color: #fff; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--bg-soft, #1c1530); animation: ns-pop 0.3s ease both; }
.ns-banbtn b[hidden] { display: none; }
.g-card.ns-banm { width: min(400px, 100%); text-align: center; }
.ns-banlist { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 8px; max-height: 300px; overflow-y: auto; }
.ns-banrow { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; border-radius: 14px; background: rgba(229, 72, 77, 0.1); border: 1px solid rgba(229, 72, 77, 0.3); text-align: left; animation: ns-tilein 0.35s cubic-bezier(.34,1.56,.64,1) both; animation-delay: calc(var(--i) * 0.05s); transition: opacity 0.3s, transform 0.3s; }
.ns-banrow.gone { opacity: 0; transform: translateX(30px) scale(0.9); }
.ns-banav { font-size: 20px; }
.ns-banrow b { flex: 1; min-width: 0; font-family: "Fredoka", sans-serif; font-weight: 500; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ns-banrow button { flex: none; padding: 7px 12px; border-radius: 999px; border: 0; background: #4abf8c; color: #fff; font: 600 13px "Fredoka", sans-serif; cursor: pointer; transition: transform 0.15s; }
.ns-banrow button:hover { transform: scale(1.06); }
.ns-banempty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 14px; border-radius: 16px; background: linear-gradient(180deg, rgba(74, 191, 140, 0.16), rgba(74, 191, 140, 0.04)); border: 1px dashed rgba(74, 191, 140, 0.5); }
.ns-banempty span { font-size: 40px; animation: ns-idle 2.4s ease-in-out infinite; }
.ns-banempty b { font-family: "Fredoka", sans-serif; font-size: 16px; color: var(--ink); }
.ns-banempty small { font-size: 13px; line-height: 1.45; color: var(--ink-dim); }
.ns-banhint { margin: 0 0 12px; font-size: 12px; color: var(--ink-faint); }
.ns-banclose { width: 100%; justify-content: center; }

/* Sohbet (son hali): isim + avatar başlık satırında, mesajlar altında ayrı balonlar */
.ns-grp2 { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; max-width: 88%; margin-top: 6px; }
.ns-grp2.me { align-self: flex-end; align-items: flex-end; }
.ns-grp2-h { display: flex; align-items: center; gap: 7px; margin-bottom: 1px; min-width: 0; max-width: 100%; }
.ns-grp2-h .ns-av { box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 70%, #fff); }
.ns-grp2-h b { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 13.5px; color: color-mix(in srgb, var(--c) 65%, #fff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ns-grp2-h b i { font-style: normal; font-size: 12px; margin-right: 3px; }
.ns-b { margin: 0 0 0 33px; padding: 6px 12px; max-width: calc(100% - 33px); border-radius: 4px 14px 14px 4px; font-size: 14.5px; line-height: 1.35; overflow-wrap: anywhere; font-family: "Manrope", sans-serif; color: var(--ink);
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 20%, var(--bg-soft-2)), var(--bg-soft-2)); border-left: 3px solid var(--c); animation: ns-bubin 0.3s cubic-bezier(.34,1.56,.64,1) both; }
.ns-grp2-h + .ns-b { border-top-right-radius: 14px; }
.ns-grp2 .ns-b:last-child { border-bottom-left-radius: 14px; }
.ns-grp2.me .ns-b { margin: 0; max-width: 100%; border-left: 0; border-radius: 14px 14px 4px 14px; background: linear-gradient(180deg, #a67bfb, #7c3aed); color: #fff; }
.ns-grp2.me .ns-b:not(:last-child) { border-radius: 14px 4px 4px 14px; }
.ns-grp2.me .ns-b + .ns-b:not(:last-child) { border-radius: 14px 4px 4px 14px; }
.ns-b.emo { font-size: 26px; line-height: 1.15; padding: 3px 10px; }
:root[data-theme="light"] .ns-grp2:not(.me) .ns-b { background: linear-gradient(135deg, color-mix(in srgb, var(--c) 18%, #fff), #f6f1ff); color: #221a3d; }
:root[data-theme="light"] .ns-grp2-h b { color: color-mix(in srgb, var(--c) 80%, #000); }
:root[data-theme="light"] .ns-grp2.me .ns-b { background: linear-gradient(180deg, #8b5cf6, #6d3fd8); }
@media (prefers-reduced-motion: reduce) { .ns-b { animation: none; } }

/* Oda kodu kutusu: tek büyük "Linki kopyala" + iki küçük yuvarlak düğme */
.ns-inv-btns2, .ns-link { display: none !important; }
.ns-invite-box { position: relative; }
.ns-inv-acts { width: 100%; display: flex; gap: 8px; align-items: center; }
.ns-copylink { flex: 1; justify-content: center; height: 46px; border-radius: 16px; font-size: 15px; gap: 8px; box-shadow: 0 8px 20px rgba(139, 92, 246, 0.35); }
.ns-copylink .ns-ic { width: 22px; height: 22px; transition: transform 0.3s cubic-bezier(.34,1.56,.64,1); }
.ns-copylink:hover .ns-ic { transform: rotate(-20deg) scale(1.15); }
.ns-icb { flex: none; width: 46px; height: 46px; border-radius: 16px; display: grid; place-items: center; padding: 0; cursor: pointer; font-size: 20px;
  border: 1.5px solid rgba(255, 204, 51, 0.35); background: rgba(255, 204, 51, 0.08); transition: transform 0.2s cubic-bezier(.34,1.56,.64,1), background 0.15s, border-color 0.15s; }
.ns-icb .ns-ic { width: 24px; height: 24px; }
.ns-icb:hover { transform: translateY(-2px) rotate(-6deg); background: rgba(255, 204, 51, 0.2); border-color: #ffcc33; }
.ns-icb.on { background: rgba(139, 92, 246, 0.3); border-color: var(--violet); }
:root[data-theme="light"] .ns-icb { background: #fff; }

/* Kopyalama animasyonu */
#ns-code-tiles { cursor: pointer; perspective: 400px; }
#ns-code-tiles.copied span { animation: ns-cflip 0.7s cubic-bezier(.34,1.4,.64,1) both !important; animation-delay: calc(var(--i) * 0.07s) !important; }
@keyframes ns-cflip {
  0% { transform: translateY(0) rotateX(0); }
  35% { transform: translateY(-18px) rotateX(180deg) scale(1.1); background: linear-gradient(180deg, #d6ffe9, #4abf8c); box-shadow: 0 4px 0 #2a8a5f, 0 0 24px rgba(74, 191, 140, 0.7); }
  70% { transform: translateY(2px) rotateX(360deg); background: linear-gradient(180deg, #d6ffe9, #4abf8c); box-shadow: 0 4px 0 #2a8a5f, 0 0 24px rgba(74, 191, 140, 0.7); }
  100% { transform: none; }
}
.ns-copied-pop { position: absolute; left: 50%; top: 34px; z-index: 5; padding: 6px 14px; border-radius: 999px; white-space: nowrap; pointer-events: none;
  background: linear-gradient(135deg, #4ade80, #22c55e); color: #052e16; font: 700 14px "Fredoka", sans-serif; box-shadow: 0 8px 20px rgba(34, 197, 94, 0.45);
  animation: ns-cpop 1.5s cubic-bezier(.34,1.56,.64,1) forwards; }
@keyframes ns-cpop { 0% { transform: translate(-50%, 20px) scale(0.4); opacity: 0; } 18% { transform: translate(-50%, -6px) scale(1.12); opacity: 1; } 30% { transform: translate(-50%, 0) scale(1); } 80% { opacity: 1; } 100% { transform: translate(-50%, -22px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #ns-code-tiles.copied span, .ns-copied-pop { animation-duration: 0.01s !important; } }
.ns-copied-pop { top: 4px; }
/* Çıkarılanlar: açılırken kaydırma çubukları görünmesin */
.ns-banlist { overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; padding: 2px; }
.ns-banrow { animation: ns-banin 0.3s ease both; }
@keyframes ns-banin { from { opacity: 0; transform: translateY(6px); } }
.ns-banrow.gone { transform: translateX(16px); }

/* Oda kodu düğmeleri: üç eşit, sakin düğme (link biraz vurgulu) */
.ns-inv-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ns-seg { min-width: 0; height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 8px; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.05); color: var(--ink-dim); font: 500 13px "Fredoka", sans-serif; transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s; }
.ns-seg i { flex: none; font-style: normal; font-size: 15px; display: grid; place-items: center; }
.ns-seg i .ns-ic { width: 18px; height: 18px; }
.ns-seg span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ns-seg:hover { background: rgba(255, 255, 255, 0.1); color: var(--ink); transform: translateY(-1px); }
.ns-seg.main { background: rgba(139, 92, 246, 0.28); border-color: rgba(166, 123, 251, 0.55); color: #fff; }
.ns-seg.main:hover { background: rgba(139, 92, 246, 0.42); }
.ns-seg.on { border-color: rgba(166, 123, 251, 0.55); color: var(--ink); }
.ns-seg.done { background: rgba(74, 191, 140, 0.22) !important; border-color: rgba(74, 191, 140, 0.6) !important; color: #b9f3d6 !important; }
.ns-seg.done i { color: #4ade80; font-weight: 700; animation: ns-chip 0.3s ease-out; }
:root[data-theme="light"] .ns-seg { background: #fff; border-color: rgba(76, 47, 140, 0.18); }
:root[data-theme="light"] .ns-seg.main { background: #7c4fe0; color: #fff; }
:root[data-theme="light"] .ns-seg.done { color: #1f7a52 !important; }
/* sakin kopyalama: harfler sırayla hafif zıplar */
#ns-code-tiles.copied span { animation: ns-cwave 0.45s ease both !important; animation-delay: calc(var(--i) * 0.05s) !important; }
@keyframes ns-cwave { 40% { transform: translateY(-7px); filter: brightness(1.12); } 100% { transform: none; } }
.ns-copied-pop { display: none !important; }
/* çıkarılanlar listesi: çubuk sadece uzun listede */
.ns-banlist { overflow: hidden !important; }
.ns-banlist.many { overflow-y: auto !important; max-height: 280px; }
/* "Bu oyunda" kartları: üstüne gelince yerinden kalkmasın (kesiliyordu), sadece parlasın */
.ns-sc:hover { transform: none !important; border-color: var(--a); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a) 50%, transparent), inset 0 -3px 0 color-mix(in srgb, var(--a) 18%, transparent); }

/* Sohbet (klasik): solda avatar, yanında isim; mesajlar ismin altında hizalı */
.ns-grp3 { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 9px; max-width: 92%; margin-top: 8px; animation: ns-bubin 0.3s cubic-bezier(.34,1.56,.64,1) both; }
.ns-grp3.me { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; align-self: flex-end; max-width: 85%; }
.ns-grp3-av { align-self: start; padding-top: 1px; }
.ns-grp3-av .ns-av { box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 75%, #fff), 0 3px 8px rgba(0, 0, 0, 0.35); }
.ns-grp3-col { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.ns-grp3-n { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; margin: 1px 0 1px 2px; font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 14px; line-height: 1.1;
  color: color-mix(in srgb, var(--c) 60%, #fff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ns-grp3-n i { font-style: normal; font-size: 12px; }
.ns-grp3 .ns-b { margin: 0; max-width: 100%; animation: none; }
.ns-grp3:not(.me) .ns-b { border-radius: 4px 14px 14px 4px; }
.ns-grp3:not(.me) .ns-grp3-n + .ns-b { border-top-left-radius: 4px; }
.ns-grp3:not(.me) .ns-b:last-child { border-bottom-left-radius: 14px; }
.ns-grp3.me .ns-b { border-left: 0; border-radius: 14px 4px 4px 14px; background: linear-gradient(180deg, #a67bfb, #7c3aed); color: #fff; }
.ns-grp3.me .ns-b:first-child { border-top-right-radius: 14px; }
.ns-grp3.me .ns-b:last-child { border-bottom-right-radius: 14px; }
:root[data-theme="light"] .ns-grp3:not(.me) .ns-b { background: linear-gradient(135deg, color-mix(in srgb, var(--c) 18%, #fff), #f6f1ff); color: #221a3d; }
:root[data-theme="light"] .ns-grp3-n { color: color-mix(in srgb, var(--c) 80%, #000); }
:root[data-theme="light"] .ns-grp3.me .ns-b { background: linear-gradient(180deg, #8b5cf6, #6d3fd8); }

/* ===== Sohbet: oyun sohbeti tarzı satırlar ===== */
.ns-chat-list { gap: 4px; }
.ns-line { display: flex; align-items: flex-start; gap: 8px; padding: 6px 10px 6px 6px; border-radius: 12px; background: color-mix(in srgb, var(--c) 9%, transparent); border: 1px solid color-mix(in srgb, var(--c) 18%, transparent); animation: ns-linein 0.28s cubic-bezier(.34,1.56,.64,1) both; transition: background 0.15s; }
.ns-line:hover { background: color-mix(in srgb, var(--c) 16%, transparent); }
@keyframes ns-linein { from { opacity: 0; transform: translateX(-10px); } }
.ns-line .ns-av { flex: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 70%, #fff); }
.ns-line-t { min-width: 0; flex: 1; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; padding-top: 3px; }
.ns-line-t b { font-family: "Fredoka", sans-serif; font-weight: 600; color: color-mix(in srgb, var(--c) 60%, #fff); margin-right: 6px; }
.ns-line-t b::after { content: ":"; color: var(--ink-faint); margin-left: 1px; }
.ns-line-t span { color: var(--ink); font-family: "Manrope", sans-serif; }
.ns-line.me { background: rgba(139, 92, 246, 0.2); border-color: rgba(166, 123, 251, 0.45); }
.ns-line.me .ns-line-t b { color: #c4a6ff; }
.ns-line.emo .ns-line-t span { font-size: 24px; line-height: 1.1; vertical-align: middle; }
.ns-line.emo .ns-line-t { padding-top: 0; }
:root[data-theme="light"] .ns-line-t b { color: color-mix(in srgb, var(--c) 80%, #000); }
:root[data-theme="light"] .ns-line-t span { color: #221a3d; }
:root[data-theme="light"] .ns-line.me .ns-line-t b { color: #6d3fd8; }
@media (prefers-reduced-motion: reduce) { .ns-line { animation: none; } }
.ns-emo-btn { transition: transform 0.2s cubic-bezier(.34,1.56,.64,1), background 0.15s, border-color 0.15s; }

/* ===== Oda kodu kutusu: köşede göz, altta iki düğme ===== */
.ns-inv-acts, .ns-inv-acts2 + .ns-inv-acts { display: none !important; }
.ns-inv-acts2 { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ns-cbtn { min-width: 0; height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 10px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid rgba(255, 204, 51, 0.55); background: rgba(255, 204, 51, 0.06); color: #ffe7a3; font: 600 14px "Fredoka", sans-serif; transition: transform 0.18s cubic-bezier(.34,1.56,.64,1), background 0.15s, box-shadow 0.15s; }
.ns-cbtn i { flex: none; font-style: normal; font-size: 16px; display: grid; place-items: center; }
.ns-cbtn i .ns-ic { width: 20px; height: 20px; }
.ns-cbtn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ns-cbtn:hover { transform: translateY(-2px); background: rgba(255, 204, 51, 0.14); }
.ns-cbtn:active { transform: translateY(1px) scale(0.98); }
.ns-cbtn.gold { border-color: transparent; background: linear-gradient(180deg, #ffe08a, #ffbf1f); color: #3a2400; box-shadow: 0 4px 0 #b88a00, 0 8px 18px rgba(255, 191, 31, 0.25); }
.ns-cbtn.gold:hover { background: linear-gradient(180deg, #ffe9a8, #ffc93d); }
.ns-cbtn.gold:active { box-shadow: 0 1px 0 #b88a00; }
.ns-cbtn.done { background: linear-gradient(180deg, #8ff0bd, #3fbf7f) !important; border-color: transparent !important; color: #06311c !important; box-shadow: 0 4px 0 #23794e, 0 0 18px rgba(74, 222, 128, 0.45) !important; }
.ns-cbtn.done i { animation: ns-chip 0.35s ease-out; }
.ns-eye { position: absolute; top: 10px; right: 10px; z-index: 2; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; padding: 0; cursor: pointer;
  border: 1px solid rgba(255, 204, 51, 0.35); background: rgba(0, 0, 0, 0.2); transition: transform 0.2s cubic-bezier(.34,1.56,.64,1), background 0.15s; }
.ns-eye .ns-ic { width: 20px; height: 20px; }
.ns-eye:hover { transform: scale(1.12) rotate(-8deg); background: rgba(255, 204, 51, 0.15); }
.ns-eye.on { background: rgba(139, 92, 246, 0.4); border-color: var(--violet); }
.ns-inv-title { padding: 0 34px; box-sizing: border-box; }
:root[data-theme="light"] .ns-cbtn:not(.gold) { background: #fff; color: #8a5a00; }
/* kopyalama: harfler dalga gibi zıplayıp hafif döner, kısa yeşil parıltı, üstlerinden yıldızlar yükselir */
#ns-code-tiles.copied span { animation: ns-cjump 0.6s cubic-bezier(.34,1.56,.64,1) both !important; animation-delay: calc(var(--i) * 0.06s) !important; }
@keyframes ns-cjump {
  0% { transform: none; }
  35% { transform: translateY(-14px) rotate(-8deg) scale(1.08); background: linear-gradient(180deg, #e3ffef, #6ee7a8); box-shadow: 0 4px 0 #2a8a5f, 0 0 18px rgba(74, 222, 128, 0.6); }
  65% { transform: translateY(2px) rotate(3deg); background: linear-gradient(180deg, #e3ffef, #6ee7a8); box-shadow: 0 4px 0 #2a8a5f; }
  100% { transform: none; }
}
.ns-spark { position: fixed; z-index: 10060; font-style: normal; font-size: 15px; pointer-events: none; transform: translate(-50%, 0); animation: ns-sparkup 0.9s ease-out both; }
@keyframes ns-sparkup { 0% { opacity: 0; transform: translate(-50%, 6px) scale(0.4); } 25% { opacity: 1; transform: translate(-50%, -10px) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -40px) scale(0.7) rotate(40deg); } }

/* Sohbet bildirimleri (katıldı/ayrıldı): kutusuz, iki yanında ince çizgi olan sade bir satır */
.ns-chat-list .ns-sys { align-self: stretch; display: flex; align-items: center; gap: 8px; margin: 4px 2px; padding: 0; border-radius: 0; background: none !important; font-size: 11.5px; font-weight: 500; letter-spacing: 0.01em; opacity: 0.85; }
.ns-chat-list .ns-sys::before, .ns-chat-list .ns-sys::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: 0.22; }
.ns-chat-list .ns-sys.joined, .ns-chat-list .ns-sys.back, .ns-chat-list .ns-sys.created, .ns-chat-list .ns-sys.pardoned { color: #7dd3a8; }
.ns-chat-list .ns-sys.left, .ns-chat-list .ns-sys.kicked { color: #f08c8c; }

/* Oda kodu: giriş animasyonu bir kez; kopyalamadan sonra harfler tekrar düşmesin */
#ns-code-tiles.ready span { animation: none; }

/* Oda kodu kutusu: daha ferah */
.ns-invite-box { gap: 16px !important; padding: 18px 20px 18px !important; }
.ns-code { gap: 9px !important; }
.ns-inv-acts2 { gap: 12px; margin-top: 2px; }
.ns-inv-hint { margin-top: -4px !important; }
.ns-hidden-hint { margin: -4px 0 0 !important; }
.ns-eye { top: 12px; right: 12px; }
/* Kendi mesajlarım da kendi karakter rengimde (biraz daha belirgin) */
.ns-line.me { background: color-mix(in srgb, var(--c) 16%, transparent); border-color: color-mix(in srgb, var(--c) 45%, transparent); }
.ns-line.me .ns-line-t b { color: color-mix(in srgb, var(--c) 60%, #fff); }
:root[data-theme="light"] .ns-line.me .ns-line-t b { color: color-mix(in srgb, var(--c) 80%, #000); }
/* Tüm sistem mesajları aynı: uzun isimde de iki yandaki çizgiler kaybolmasın */
.ns-chat-list .ns-sys { text-align: center; overflow-wrap: anywhere; }
.ns-chat-list .ns-sys::before, .ns-chat-list .ns-sys::after { flex: 1 0 18px; min-width: 18px; }
/* Sohbet: sadece yeni gelen satır animasyonla girsin (eskiler her seferinde tekrar oynamasın) */
.ns-line { animation: none; }
.ns-line.new { animation: ns-linein 0.28s cubic-bezier(.34,1.56,.64,1) both; }
.ns-chat-list .ns-sys.new { animation: ns-banin 0.3s ease both; }

/* ================= Tur sonucu tablosu: koyu tema, kutunun içinde kalır ================= */
.ns-table-wrap.ns-paper { --ink: #f3eeff; --ink-dim: #c9bdf0; --ink-faint: #8f84b8; --line: rgba(166, 123, 251, 0.18);
  width: 100% !important; max-width: 100%; overflow-x: auto; background: linear-gradient(180deg, rgba(139, 92, 246, 0.14), rgba(139, 92, 246, 0.04)), var(--bg-soft, #1c1530) !important;
  border: 1px solid rgba(166, 123, 251, 0.35); border-radius: 20px; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35); }
.ns-table-wrap.ns-paper::before, .ns-table-wrap.ns-paper::after { display: none !important; }
.ns-table-wrap .ns-table thead th { color: #ffd966; font-family: "Fredoka", sans-serif; font-size: 12.5px; border-bottom: 1px solid rgba(255, 204, 51, 0.3); background: rgba(255, 204, 51, 0.05); padding: 10px 6px; }
.ns-table-wrap .ns-table thead th span .ns-ic { width: 22px; height: 22px; }
.ns-table-wrap .ns-table th.who { width: 120px; background: #221a3a; border-right: 1px solid rgba(166, 123, 251, 0.25); }
.ns-table-wrap .ns-table thead th.who { background: #2a2042; }
.ns-table-wrap .ns-table tbody th.who b { color: var(--ink); font-size: 14px; }
.ns-table-wrap .ns-table td .w { color: #fff; font-size: 14.5px; font-weight: 500; }
.ns-table-wrap .ns-table td.x .w { color: #8f84b8; text-decoration-color: #ff6b6b; }
.ns-table-wrap .ns-table td .ns-pts { background: rgba(255, 255, 255, 0.08); color: #a99fd0; }
.ns-table-wrap .ns-table td .ns-pts.p5 { background: rgba(94, 200, 255, 0.18); color: #8fd8ff; }
.ns-table-wrap .ns-table td .ns-pts.p10 { background: rgba(74, 222, 128, 0.18); color: #86efac; }
.ns-table-wrap .ns-table td .ns-pts.p20 { background: linear-gradient(135deg, #ffe08a, #ffbf1f); color: #3a2400; box-shadow: 0 0 10px rgba(255, 191, 31, 0.4); }
.ns-table-wrap .ns-table .pt { color: #ffcc33; border-left: 1px solid rgba(255, 204, 51, 0.3); font-size: 20px; width: 56px; }
.ns-table-wrap .ns-table thead .pt { font-size: 12px; }
.ns-table-wrap .ns-table tbody tr.me th.who { background: color-mix(in srgb, #8b5cf6 30%, #221a3a); }
.ns-table-wrap .ns-table tbody tr.me td { background: rgba(139, 92, 246, 0.12); }
.ns-table-wrap .ns-table tbody tr:hover td { background: rgba(255, 255, 255, 0.03); }
.ns-table-wrap .ns-table th, .ns-table-wrap .ns-table td { border-bottom: 1px solid rgba(166, 123, 251, 0.14); }
:root[data-theme="light"] .ns-table-wrap.ns-paper { --ink: #2a2160; --ink-dim: #5b5296; --ink-faint: #8a83b5; background: #fff !important; }
:root[data-theme="light"] .ns-table-wrap .ns-table th.who { background: #f6f1ff; }
:root[data-theme="light"] .ns-table-wrap .ns-table td .w { color: #1d1650; }
:root[data-theme="light"] .ns-table-wrap .ns-table thead th { color: #b86e00; }
.ns-table-wrap .ns-table thead th:not(.who):not(.pt) span { display: flex !important; justify-content: center; margin: 0 auto 3px !important; }
.ns-final-btn { background: linear-gradient(180deg, #ffe08a, #ffbf1f) !important; color: #3a2400 !important; box-shadow: 0 5px 0 #b88a00, 0 10px 24px rgba(255, 191, 31, 0.35) !important; }
/* Üç aç/kapa kartı yan yana (sıkı sözlük, itirazlar, yabancı şehirler) */
.ns-togs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.ns-tog { grid-template-columns: 22px minmax(0, 1fr); grid-template-areas: "ic t" "s sw"; column-gap: 6px; padding: 6px 7px; }
.ns-tog .ns-tog-ic { width: 22px; height: 22px; border-radius: 7px; }
.ns-tog .ns-tog-ic .ns-ic { width: 16px !important; height: 16px !important; }
.ns-tog-t b { font-size: 12px; line-height: 1.1; }
.ns-tog-t small { font-size: 10px; }
.ns-tog i { justify-self: end; width: 28px; height: 16px; }
.ns-tog i::after { width: 10px; height: 10px; }
.ns-tog.on i::after { transform: translateX(12px); }
.ns-credits { margin: 12px 0 0; font-size: 10.5px; line-height: 1.5; color: var(--ink-faint); text-align: center; } .ns-credits a { color: inherit; text-decoration: underline; text-decoration-color: rgba(166, 123, 251, 0.4); } .ns-credits a:hover { color: var(--ink-dim); }
/* Sözlük kaynakları: başta kapalı küçük bağlantı, açılınca düzgün kartlar */
details.ns-credits { margin: 14px auto 0; text-align: center; font-size: 12px; color: var(--ink-faint); }
details.ns-credits summary { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 999px; cursor: pointer; list-style: none; user-select: none; transition: background 0.15s, color 0.15s; }
details.ns-credits summary::-webkit-details-marker { display: none; }
details.ns-credits summary::after { content: "▾"; font-size: 10px; transition: transform 0.2s; }
details.ns-credits[open] summary::after { transform: rotate(180deg); }
details.ns-credits summary:hover { background: rgba(255, 255, 255, 0.06); color: var(--ink-dim); }
.ns-cred-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 10px auto 0; max-width: 360px; }
.ns-cred-list a { --h: 265; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 5px; border-radius: 999px; text-decoration: none; line-height: 1.2;
  background: hsla(var(--h), 85%, 65%, 0.13); border: 1px solid hsla(var(--h), 85%, 70%, 0.35); color: hsl(var(--h), 90%, 82%);
  animation: ns-cred-pop 0.42s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(var(--i) * 35ms); transition: transform 0.18s, background 0.18s, box-shadow 0.18s; }
.ns-cred-list a:nth-child(odd) { --tilt: -2deg; } .ns-cred-list a:nth-child(even) { --tilt: 2deg; }
.ns-cred-list a:hover, .ns-cred-list a:focus-visible { transform: translateY(-2px) rotate(var(--tilt)); background: hsla(var(--h), 85%, 65%, 0.24); box-shadow: 0 4px 14px hsla(var(--h), 85%, 60%, 0.25); }
.ns-cred-list i { font-style: normal; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; background: hsla(var(--h), 85%, 70%, 0.2); }
.ns-cred-list b { font-family: "Fredoka", sans-serif; font-weight: 500; font-size: 12px; white-space: nowrap; }
.ns-cred-list small { font-size: 9.5px; opacity: 0.7; white-space: nowrap; }
.ns-cred-list small::before { content: "·"; margin-right: 4px; }
@keyframes ns-cred-pop { from { opacity: 0; transform: translateY(6px) scale(0.85); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ns-cred-list a { animation: none; } }
:root[data-theme="light"] .ns-cred-list a { background: hsla(var(--h), 85%, 60%, 0.1); border-color: hsla(var(--h), 70%, 55%, 0.35); color: hsl(var(--h), 60%, 35%); }
/* Bitirince cevaplar kilitli; "Değiştir" ile açılır */
.ns-form.locked .ns-field input { cursor: default; pointer-events: none; }
.ns-form.locked { box-shadow: 0 0 0 3px rgba(74, 191, 140, 0.55), 0 18px 40px rgba(0, 0, 0, 0.4); }
.ns-form.locked .ns-field:focus-within { background: transparent; }
.ns-editbtn { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 10px 22px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid rgba(255, 204, 51, 0.55); background: rgba(255, 204, 51, 0.08); color: #ffe7a3; font: 600 15px "Fredoka", sans-serif; transition: transform 0.18s cubic-bezier(.34,1.56,.64,1), background 0.15s; }
.ns-editbtn:hover { transform: translateY(-2px); background: rgba(255, 204, 51, 0.18); }
.ns-editbtn[hidden] { display: none; }
:root[data-theme="light"] .ns-editbtn { background: #fff; color: #8a5a00; }
.ns-chat-rule { margin: 0; padding: 4px 10px; font-size: 10.5px; text-align: center; color: var(--ink-faint); border-top: 1px solid var(--line); background: rgba(229, 72, 77, 0.06); }
.ns-chat-form.badmute input { border-color: #e5484d !important; background: rgba(229, 72, 77, 0.08) !important; }
/* 4 aç/kapa kartı: 2x2 */
.ns-togs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ns-tog { grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: "ic t sw" "ic s sw"; }
/* susturulmuş oyuncu rozeti */
.ns-unmute { position: absolute; left: 2px; top: 2px; z-index: 3; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; padding: 0; font-size: 11px; border: 0; background: rgba(229, 72, 77, 0.85); cursor: pointer; transition: transform 0.15s; }
.ns-unmute:hover:not(.ro) { transform: scale(1.15); background: #4abf8c; }
.ns-unmute.ro { cursor: default; }
.ns-18tag { grid-column: 1 / -1; justify-self: start; margin-top: 4px; padding: 2px 9px; border-radius: 999px; font-style: normal; font-size: 11.5px; font-weight: 600; color: #fff; background: #e5484d; }
.ns-ask-ic.ns-18 { font-size: 46px; line-height: 1; }
.ns-adult-p { margin: 4px 0 14px; font-size: 14px; line-height: 1.5; color: var(--ink-dim); text-align: center; }
.ns-chat-list .ns-sys.unmuted, .ns-chat-list .ns-sys.filterOn { color: #7dd3a8; } .ns-chat-list .ns-sys.filterOff, .ns-chat-list .ns-sys.banned { color: #f0a35c; }

/* Oda önizleme kartı */
.ns-invite { grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto; row-gap: 10px; padding: 14px 16px; text-align: left; }
.ns-invite > img { grid-row: 1; width: 64px; height: 64px; }
.ns-inv-head { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ns-inv-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.ns-inv-meta > span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 12px; color: var(--ink-dim); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); }
.ns-inv-meta .ns-ic { width: 16px !important; height: 16px !important; }
.ns-inv-meta .flag-ic { display: inline-flex; width: 16px; height: 16px; }
.ns-inv-meta .flag-ic svg { width: 100%; height: 100%; }
.ns-inv-cats { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.ns-inv-cats > span { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px 4px 6px; border-radius: 12px; background: rgba(139, 92, 246, 0.16); border: 1px solid rgba(166, 123, 251, 0.3); }
.ns-inv-cats .ns-ic { width: 20px; height: 20px; }
.ns-inv-cats small { font: 500 12.5px "Fredoka", sans-serif; color: var(--ink); }
.ns-inv-tags { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ns-rt-tag { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 6px 10px; border-radius: 12px; font: 500 12.5px "Fredoka", sans-serif; color: var(--ink-dim); border: 1px solid; }
.ns-rt-tag i { font-style: normal; }
.ns-rt-tag b { margin-left: auto; font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; }
.ns-rt-tag.on { background: rgba(74, 191, 140, 0.1); border-color: rgba(74, 191, 140, 0.35); }
.ns-rt-tag.on b { background: #4abf8c; color: #fff; }
.ns-rt-tag.off { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.1); opacity: 0.85; }
.ns-rt-tag.off b { background: rgba(255, 255, 255, 0.12); color: var(--ink-dim); }
.ns-rt-tag.adult { background: rgba(229, 72, 77, 0.14); border-color: rgba(229, 72, 77, 0.5); opacity: 1; color: #ffb3b5; }
.ns-rt-tag.adult b { background: #e5484d; color: #fff; }
.ns-inv-18 { grid-column: 1 / -1; margin: 0; padding: 7px 12px; border-radius: 12px; font: 600 13px "Fredoka", sans-serif; color: #fff; background: linear-gradient(90deg, #e5484d, #b3262c); text-align: center; }
.ns-18tag { display: none; }
@media (max-width: 480px) { .ns-inv-tags { grid-template-columns: 1fr; } }

/* Önerilen ayarlar düğmesi */
.ns-boxh .ns-reco { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 4px 11px; border-radius: 999px; cursor: pointer; font: 600 12px "Fredoka", sans-serif;
  color: #ffe7a3; background: rgba(255, 204, 51, 0.1); border: 1px solid rgba(255, 204, 51, 0.45); transition: transform 0.18s cubic-bezier(.34,1.56,.64,1), background 0.15s; }
.ns-boxh .ns-reco:hover { transform: translateY(-1px) rotate(-2deg); background: rgba(255, 204, 51, 0.22); }
:root[data-theme="light"] .ns-boxh .ns-reco { color: #8a5a00; background: #fff8e1; }
/* Lobide hazır olanlar: yeşil çerçeve + ✓ */
.ns-a-pl .ns-p.lr { box-shadow: inset 0 0 0 2px #4abf8c, 0 0 14px rgba(74, 191, 140, 0.35); background: rgba(74, 191, 140, 0.14); }
.ns-a-pl .ns-p.lr::before { content: "✓"; position: absolute; left: 3px; bottom: 3px; z-index: 2; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 700; color: #fff; background: #4abf8c; }
.ns-faces .ns-rf { display: inline-flex; border-radius: 50%; }
.ns-faces .ns-rf.ok .ns-av { box-shadow: 0 0 0 2px #4abf8c; }
/* Hazırım düğmesi (Oyunu başlat ile aynı yerde) */
.ns-lready { display: inline-flex; align-items: center; gap: 8px; padding: 0 26px; height: 52px; border-radius: 999px; cursor: pointer; font: 600 17px "Fredoka", sans-serif; color: #fff;
  border: 0; background: linear-gradient(180deg, #5fd39d, #2fa36d); box-shadow: 0 5px 0 #1f7a4f, 0 10px 24px rgba(74, 191, 140, 0.35); transition: transform 0.15s, filter 0.15s; animation: ns-breath 2.2s ease-in-out infinite; }
.ns-lready .ns-ic { width: 24px; height: 24px; }
.ns-lready:hover { filter: brightness(1.08); transform: translateY(-2px); }
.ns-lready:active { transform: translateY(2px); box-shadow: 0 2px 0 #1f7a4f; }
.ns-lready.on { animation: none; background: rgba(74, 191, 140, 0.15); color: #b9f3d6; box-shadow: inset 0 0 0 2px #4abf8c; }
@keyframes ns-breath { 50% { transform: scale(1.04); } }
.ns-go.wait { filter: grayscale(0.6) brightness(0.8); }
/* Oyuncu kartı rozetleri: avatarın alt köşelerinde, isme dokunmaz */
.ns-a-pl .ns-p.lr::before { left: calc(50% + 9px); bottom: auto; top: 33px; width: 18px; height: 18px; font-size: 10.5px; box-shadow: 0 0 0 2px var(--bg-soft, #1c1530); }
.ns-a-pl .ns-unmute { left: calc(50% - 27px); top: 33px; width: 18px; height: 18px; font-size: 9.5px; box-shadow: 0 0 0 2px var(--bg-soft, #1c1530); }
.ns-a-pl .ns-p { padding-bottom: 7px; }
.ns-a-pl .ns-p b { position: relative; z-index: 3; }
@media (max-width: 1119px) {
  .ns-a-pl .ns-p.lr::before { left: 26px; top: auto; bottom: 2px; }
  .ns-a-pl .ns-unmute { left: 2px; top: auto; bottom: 2px; }
}

/* ===== Oyuncu kartları (lobi): sade ve eğlenceli ===== */
.ns-a-pl .ns-p.lr::before, .ns-a-pl .ns-unmute, .ns-a-pl .ns-edit, .ns-a-pl .ns-kick { display: none !important; }
.ns-a-pl .ns-p.ns-pc { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; padding: 10px 4px 8px !important; border-radius: 16px; text-align: center;
  background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.08); transition: transform 0.2s cubic-bezier(.34,1.56,.64,1), box-shadow 0.2s, background 0.2s; }
.ns-a-pl .ns-pc.can { cursor: pointer; }
.ns-a-pl .ns-pc.can:hover { transform: translateY(-3px); }
.ns-a-pl .ns-pc.lr { background: rgba(74, 191, 140, 0.12); box-shadow: inset 0 0 0 2px #4abf8c, 0 0 16px rgba(74, 191, 140, 0.28); }
.ns-a-pl .ns-pc.muted { background: rgba(229, 72, 77, 0.1); box-shadow: inset 0 0 0 2px rgba(229, 72, 77, 0.7); }
.ns-a-pl .ns-pc.me:not(.lr):not(.muted) { box-shadow: inset 0 0 0 1.5px rgba(166, 123, 251, 0.6); }
.ns-pc-av { position: relative; display: inline-flex; }
.ns-a-pl .ns-pc .ns-av { --s: 42px !important; }
.ns-pc.lr .ns-pc-av .ns-av { animation: ns-hop 2.6s ease-in-out infinite; }
@keyframes ns-hop { 0%, 80%, 100% { transform: none; } 88% { transform: translateY(-4px) rotate(-4deg); } }
.ns-pc.muted .ns-pc-av .ns-av { filter: grayscale(0.7); }
.ns-pc-crown { position: absolute; left: 50%; top: -14px; translate: -50% 0; font-style: normal; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5)); animation: ns-crown 3s ease-in-out infinite; }
.ns-pc-crown .ns-ic { width: 20px !important; height: 20px !important; }
@keyframes ns-crown { 50% { transform: translateY(-2px) rotate(-6deg); } }
.ns-pc-more { position: absolute; right: -8px; bottom: -4px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 10px; color: var(--ink);
  background: #2a2045; box-shadow: 0 0 0 2px var(--bg-soft, #1c1530); opacity: 0; transform: scale(0.6); transition: opacity 0.15s, transform 0.2s cubic-bezier(.34,1.56,.64,1); }
.ns-pc.can:hover .ns-pc-more, .ns-pc.can:focus-visible .ns-pc-more { opacity: 1; transform: none; }
.ns-a-pl .ns-pc > b { max-width: 100%; font-size: 12.5px !important; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; }
.ns-pill { font-style: normal; font: 600 10px "Fredoka", sans-serif; letter-spacing: 0.02em; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.ns-pill.ok { color: #06311c; background: linear-gradient(180deg, #8ff0bd, #4abf8c); }
.ns-pill.wait { color: var(--ink-dim); background: rgba(255, 255, 255, 0.08); }
.ns-pill.mute { color: #fff; background: #e5484d; }
.ns-pill.gone { color: var(--ink-faint); background: rgba(255, 255, 255, 0.05); }
.ns-a-pl .ns-pc small { display: none; }
/* Oyuncu menüsü balonu */
.ns-pmenu { position: fixed; z-index: 10040; min-width: 190px; padding: 6px; border-radius: 16px; background: #241a3f; border: 1px solid rgba(166, 123, 251, 0.45);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.5); animation: ns-emoin 0.2s cubic-bezier(.34,1.56,.64,1); transform-origin: var(--ax) 0; }
.ns-pmenu::before { content: ""; position: absolute; top: -6px; left: calc(var(--ax) - 6px); width: 10px; height: 10px; background: inherit; border: inherit; border-right: 0; border-bottom: 0; transform: rotate(45deg); }
.ns-pmenu-h { display: flex; align-items: center; gap: 7px; padding: 4px 8px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); margin-bottom: 4px; }
.ns-pmenu-h b { font: 600 13.5px "Fredoka", sans-serif; color: var(--ink); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ns-pmenu button { width: 100%; display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 0; border-radius: 10px; background: none; color: var(--ink); font: 500 14px "Fredoka", sans-serif; text-align: left; cursor: pointer; transition: background 0.12s, transform 0.12s; }
.ns-pmenu button i { font-style: normal; width: 22px; text-align: center; }
.ns-pmenu button:hover { background: rgba(139, 92, 246, 0.2); transform: translateX(2px); }
.ns-pmenu button.danger { color: #ff8a8a; }
.ns-pmenu button.danger:hover { background: rgba(229, 72, 77, 0.18); }
:root[data-theme="light"] .ns-pmenu { background: #fff; }
.ns-pill { max-width: calc(100% - 6px); overflow: hidden; text-overflow: ellipsis; }
/* Hazır + susturuldu birlikte: çerçeve hazır rengine göre, susturma küçük etiket */
.ns-pills { display: inline-flex; align-items: center; gap: 3px; max-width: 100%; }
.ns-pill.mini { padding: 2px 5px; font-size: 9px; }
.ns-a-pl .ns-pc.lr.muted { background: rgba(74, 191, 140, 0.12); box-shadow: inset 0 0 0 2px #4abf8c, 0 0 16px rgba(74, 191, 140, 0.28); }
.ns-a-pl .ns-pc { animation: none !important; }
/* ===== Kart durumu (son hal): çerçeve = hazır (yeşil) / bekliyor (sarı); etiket kart genişliğinde, sadece yazı ===== */
.ns-a-pl .ns-pc.nr, .ns-a-pl .ns-pc.nr.muted { background: rgba(255, 204, 51, 0.07); box-shadow: inset 0 0 0 2px rgba(255, 204, 51, 0.65); }
.ns-a-pl .ns-pc.lr, .ns-a-pl .ns-pc.lr.muted { background: rgba(74, 191, 140, 0.12); box-shadow: inset 0 0 0 2px #4abf8c, 0 0 16px rgba(74, 191, 140, 0.28); }
.ns-a-pl .ns-pc .ns-pill { display: block; width: calc(100% - 8px); max-width: none; box-sizing: border-box; padding: 3px 2px; text-align: center; font: 700 10px/1.1 "Fredoka", sans-serif; letter-spacing: 0.02em; text-transform: uppercase; overflow: visible; white-space: nowrap; }
.ns-a-pl .ns-pc .ns-pill.ok { color: #06311c; background: linear-gradient(180deg, #8ff0bd, #4abf8c); }
.ns-a-pl .ns-pc .ns-pill.wait { color: #3a2400; background: linear-gradient(180deg, #ffe08a, #f5b81f); animation: ns-waitp 1.6s ease-in-out infinite; }
@keyframes ns-waitp { 50% { opacity: 0.65; } }
/* susturulmuş: avatarın ağzında fermuar 🤐 ve gri avatar */
.ns-pc-zip { position: absolute; right: -6px; bottom: -4px; z-index: 2; font-style: normal; font-size: 17px; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5)); animation: ns-zip 2.4s ease-in-out infinite; }
@keyframes ns-zip { 0%, 85%, 100% { transform: none; } 90% { transform: rotate(-12deg) scale(1.15); } 95% { transform: rotate(10deg); } }
.ns-pc.muted .ns-pc-av .ns-av { filter: grayscale(0.85) brightness(0.85); }
.ns-pc-more { right: auto; left: -8px; }
:root[data-theme="light"] .ns-a-pl .ns-pc.nr { background: #fff8e1; }
.ns-a-pl .ns-pc .ns-pill { text-transform: none; letter-spacing: 0; font-size: 11px; padding: 3px 3px; overflow: hidden; }

/* Avatar istek balonu */
.ns-avbub { position: fixed; z-index: 1500; max-width: 230px; padding: 9px 12px 10px; border-radius: 16px; background: #fff; color: #2a1d4f; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  animation: ns-bubpop 0.4s cubic-bezier(.34,1.56,.64,1) both, ns-bubfloat 2.4s 0.4s ease-in-out infinite; transform-origin: var(--ax) 100%; }
.ns-avbub::after { content: ""; position: absolute; bottom: -7px; left: calc(var(--ax) - 8px); border: 8px solid transparent; border-bottom: 0; border-top-color: #fff; }
@keyframes ns-bubpop { from { opacity: 0; transform: scale(0.4) translateY(10px); } }
@keyframes ns-bubfloat { 50% { translate: 0 -3px; } }
.ns-avbub > span { display: flex; align-items: center; gap: 6px; }
.ns-avbub > span b { font: 700 13px "Fredoka", sans-serif; color: #6d3fd8; }
.ns-avbub p { margin: 4px 0 0; font: 500 13.5px/1.35 "Fredoka", sans-serif; }
.ns-avbub.mine { background: linear-gradient(180deg, #fff8e1, #ffe9a8); box-shadow: 0 0 0 3px #ffcc33, 0 14px 30px rgba(0, 0, 0, 0.5); }
.ns-avbub.mine::after { border-top-color: #ffe9a8; }
.ns-avbub-b { display: flex; gap: 6px; margin-top: 8px; }
.ns-avbub-b button { flex: 1; padding: 6px 10px; border-radius: 999px; border: 0; cursor: pointer; font: 700 13px "Fredoka", sans-serif; background: rgba(42, 29, 79, 0.1); color: #2a1d4f; transition: transform 0.15s; }
.ns-avbub-b button.y { background: linear-gradient(180deg, #8ff0bd, #3fbf7f); color: #06311c; box-shadow: 0 3px 0 #23794e; }
.ns-avbub-b button:hover { transform: translateY(-1px) scale(1.04); }
.ns-pc-req { position: absolute; right: 4px; top: 4px; font-style: normal; font-size: 13px; animation: ns-zip 1.6s ease-in-out infinite; }
.ns-pc-lm { position: absolute; left: -8px; bottom: -4px; font-style: normal; font-size: 15px; z-index: 2; }
.ns-chat-list .ns-sys.avswap { color: #ffd966; }
/* İstek balonu sayacı (sağ üst) */
.ns-avbub { padding-right: 40px; }
.ns-avbub-t { position: absolute; right: 8px; top: 8px; width: 26px; height: 26px; font-style: normal; display: grid; place-items: center; }
.ns-avbub-t svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ns-avbub-t circle { fill: rgba(109, 63, 216, 0.1); stroke: #8b5cf6; stroke-width: 3; stroke-dasharray: 62.8; stroke-dashoffset: calc(62.8 * (1 - var(--p, 1))); stroke-linecap: round; transition: stroke-dashoffset 0.1s linear; }
.ns-avbub.mine .ns-avbub-t circle { stroke: #e08a00; fill: rgba(224, 138, 0, 0.12); }
.ns-avbub-t b { position: relative; font: 700 11px "Fredoka", sans-serif; color: #2a1d4f; }
.ns-avbub.bye { transition: opacity 0.3s, transform 0.3s; opacity: 0; transform: scale(0.7) translateY(8px); }

/* ---------- Emoji kutusu: sekmeler + hareketli emojiler ---------- */
.ns-chat-form .ns-chat-emo { display: block; }
.ns-chat-form .ns-chat-emo[hidden] { display: none; }
.ns-emo-pane { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px; }
.ns-emo-pane[hidden] { display: none; }
.ns-emo-pane.anim { max-height: 176px; overflow-y: auto; scrollbar-width: thin; padding-right: 2px; animation: ns-emoin 0.22s ease both; }
.ns-emo-tabs { display: flex; gap: 4px; margin: 0 0 6px; padding: 3px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); }
.ns-chat-form .ns-chat-emo .ns-emo-tab { flex: 1; aspect-ratio: auto; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 5px 8px; border-radius: 9px;
  font: 600 12px/1 "Fredoka", sans-serif; color: var(--ink-faint); transition: background 0.18s, color 0.18s; }
.ns-chat-form .ns-chat-emo .ns-emo-tab:hover { transform: none; color: var(--ink-dim); background: rgba(255, 255, 255, 0.06); }
.ns-chat-form .ns-chat-emo .ns-emo-tab.on { color: #2b1700; background: linear-gradient(180deg, #ffe08a, #f5b81f); box-shadow: 0 2px 10px rgba(245, 184, 31, 0.35); }
.ns-emo-a img { width: 28px; height: 28px; object-fit: contain; pointer-events: none; }
.ns-chat-form .ns-chat-emo .ns-emo-a:hover { transform: scale(1.25) rotate(-6deg); background: rgba(255, 204, 51, 0.12); }
.ns-emo-a img:not([src]) { visibility: hidden; }
/* Sohbette hareketli emoji: çıkartma gibi büyük */
.ns-line.anim .ns-line-t span { display: inline-flex; gap: 2px; line-height: 0; }
.ns-anim { width: 40px; height: 40px; object-fit: contain; animation: ns-emoin 0.35s cubic-bezier(.34, 1.56, .64, 1) both; }
.ns-line.anim .ns-anim:only-child { width: 48px; height: 48px; }
:root[data-theme="light"] .ns-emo-tabs { background: #f1ebff; }

/* ---------- Sohbet başlığı: avatar bildirimleri aç/kapa ---------- */
.ns-chat-hr { display: inline-flex; align-items: center; gap: 6px; }
.ns-avnote { position: relative; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255, 217, 102, 0.45); background: rgba(255, 217, 102, 0.12);
  display: grid; place-items: center; padding: 0; cursor: pointer; font-size: 14px; line-height: 1; transition: transform 0.2s cubic-bezier(.34,1.56,.64,1), background 0.18s, border-color 0.18s, filter 0.18s; }
.ns-avnote i, .ns-avnote em { font-style: normal; grid-area: 1 / 1; transition: opacity 0.18s, transform 0.25s; }
.ns-avnote em { opacity: 0; transform: scale(0.4); font-size: 11px; position: relative; left: 8px; top: 7px; }
.ns-avnote:hover { transform: rotate(-12deg) scale(1.08); }
.ns-avnote.off { border-color: var(--line); background: rgba(255, 255, 255, 0.04); }
.ns-avnote.off i { opacity: 0.35; filter: grayscale(1); }
.ns-avnote.off em { opacity: 1; transform: none; }
.ns-avnote.pop { animation: ns-chip 0.3s ease-out; }
.ns-chat-hr .ns-tip { flex: none; }
/* Susturma bildirimi */
.ns-chat-list .ns-sys.mute { color: #ff8f8f; }
:root[data-theme="light"] .ns-chat-list .ns-sys.mute { color: #c42b31; }
.ns-chat-hr .ns-tip { margin-left: 0; }

/* ---------- Hareketli emojiler: performans + mor kaydırma çubuğu ---------- */
.ns-emo-pane.anim, .ns-emo-pane.stk { scrollbar-width: thin; scrollbar-color: var(--violet) transparent; }
.ns-emo-pane.anim::-webkit-scrollbar, .ns-emo-pane.stk::-webkit-scrollbar { width: 6px; }
.ns-emo-pane.anim::-webkit-scrollbar-thumb, .ns-emo-pane.stk::-webkit-scrollbar-thumb { background: var(--violet); border-radius: 99px; }
.ns-emo-pane.anim::-webkit-scrollbar-track, .ns-emo-pane.stk::-webkit-scrollbar-track { background: transparent; }
/* Kutuda emojiler sabit durur; üzerine gelinen hareketli olur */
.ns-chat-form .ns-chat-emo .ns-emo-a { position: relative; }
.ns-emo-a span { font-size: 21px; line-height: 1; transition: opacity 0.12s; }
.ns-emo-a img { position: absolute; inset: 0; margin: auto; width: 30px; height: 30px; opacity: 0; transition: opacity 0.12s; }
.ns-emo-a.live img { opacity: 1; }
.ns-emo-a.live span { opacity: 0; }
/* Eski hareketli mesajlar: büyük ama sabit emoji */
.ns-anim-s { font-style: normal; font-size: 34px; line-height: 1.1; }
/* ---------- Morlup kurt çıkartmaları ---------- */
.ns-chat-form .ns-chat-emo .ns-emo-tab.wolf { flex: 0 0 44px; font-size: 15px; }
.ns-emo-pane.stk { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; max-height: 176px; overflow-y: auto; animation: ns-emoin 0.22s ease both; }
.ns-chat-form .ns-chat-emo .ns-emo-k { aspect-ratio: 1; padding: 4px; border-radius: 14px; background: rgba(139, 92, 246, 0.1); }
.ns-chat-form .ns-chat-emo .ns-emo-k:hover { transform: scale(1.08) rotate(-4deg); background: rgba(139, 92, 246, 0.22); }
.ns-emo-k img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.ns-emo-k:hover img { animation: var(--stk-anim, ns-stk-laugh) 0.9s ease-in-out infinite; }
.ns-line.stk .ns-line-t span { display: block; line-height: 0; }
.ns-stk { width: 84px; height: 84px; object-fit: contain; transform-origin: 50% 85%; animation: ns-emoin 0.35s cubic-bezier(.34, 1.56, .64, 1) both; }
.ns-stk.live.stk-laugh { animation: ns-emoin 0.35s cubic-bezier(.34, 1.56, .64, 1) both, ns-stk-laugh 0.9s 0.35s ease-in-out infinite; }
.ns-stk.live.stk-bounce { animation: ns-emoin 0.35s both, ns-stk-bounce 1s 0.35s ease-in-out infinite; }
.ns-stk.live.stk-wiggle { animation: ns-emoin 0.35s both, ns-stk-wiggle 1.2s 0.35s ease-in-out infinite; }
.ns-stk.live.stk-pulse { animation: ns-emoin 0.35s both, ns-stk-pulse 1.4s 0.35s ease-in-out infinite; }
.ns-stk.live.stk-float { animation: ns-emoin 0.35s both, ns-stk-float 2.4s 0.35s ease-in-out infinite; }
.stk-bounce { --stk-anim: ns-stk-bounce; } .stk-wiggle { --stk-anim: ns-stk-wiggle; } .stk-pulse { --stk-anim: ns-stk-pulse; } .stk-float { --stk-anim: ns-stk-float; }
@keyframes ns-stk-laugh { 0%, 100% { transform: rotate(0) translateY(0); } 15% { transform: rotate(-7deg) translateY(-3px); } 30% { transform: rotate(6deg) translateY(0); } 45% { transform: rotate(-5deg) translateY(-2px); } 60% { transform: rotate(4deg); } 75% { transform: rotate(-2deg) translateY(-1px); } }
@keyframes ns-stk-bounce { 0%, 100% { transform: translateY(0) scale(1, 1); } 30% { transform: translateY(-10px) scale(0.96, 1.04); } 55% { transform: translateY(0) scale(1.06, 0.94); } 70% { transform: translateY(-3px); } }
@keyframes ns-stk-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-9deg); } 75% { transform: rotate(9deg); } }
@keyframes ns-stk-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@keyframes ns-stk-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-6px) rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { .ns-stk.live, .ns-emo-k:hover img { animation: none !important; } }

/* ================= Davet kartı: bölümlere ayrılmış, hareketli ================= */
.ns-invite { position: relative; isolation: isolate; overflow: hidden; display: flex !important; flex-direction: column; gap: 12px; padding: 16px 16px 14px !important; border-radius: 22px;
  border: 0 !important; background: radial-gradient(120% 90% at 0% 0%, rgba(255, 204, 51, 0.22), transparent 55%), radial-gradient(90% 80% at 100% 100%, rgba(139, 92, 246, 0.35), transparent 60%), #1d1533 !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35), 0 0 30px rgba(255, 204, 51, 0.12); animation: ns-inv-in 0.55s cubic-bezier(.34, 1.56, .64, 1) both; }
.ns-invite[hidden] { display: none !important; }
.ns-invite.bad { display: block !important; }
/* dönen altın-mor çerçeve */
.ns-invite::before { content: ""; position: absolute; inset: -60%; z-index: -2; background: conic-gradient(from 0deg, #ffcc33, #ff8fc4, #a67bfb, #5ec8ff, #4abf8c, #ffcc33); animation: ns-inv-spin 6s linear infinite; opacity: 0.85; }
.ns-invite::after { content: ""; position: absolute; inset: 2px; z-index: -1; border-radius: 20px; background: inherit; background: radial-gradient(120% 90% at 0% 0%, rgba(255, 204, 51, 0.16), transparent 55%), radial-gradient(90% 80% at 100% 100%, rgba(139, 92, 246, 0.3), transparent 60%), #1b1430; }
@keyframes ns-inv-spin { to { transform: rotate(360deg); } }
@keyframes ns-inv-in { from { opacity: 0; transform: translateY(14px) scale(0.94); } }
.ns-inv-badge { position: absolute; top: 12px; right: -34px; z-index: 2; transform: rotate(35deg); padding: 4px 40px; font: 700 11px/1.2 "Fredoka", sans-serif; letter-spacing: 0.12em; text-transform: uppercase;
  color: #3a2400; background: linear-gradient(90deg, #ffe08a, #f5b81f); box-shadow: 0 3px 10px rgba(245, 184, 31, 0.45); }
.ns-inv-spark { position: absolute; z-index: 0; font-style: normal; color: #ffe08a; pointer-events: none; animation: ns-inv-tw 2.4s ease-in-out infinite; }
.ns-inv-spark.s1 { top: 10px; left: 46%; font-size: 12px; }
.ns-inv-spark.s2 { top: 54px; right: 26%; font-size: 10px; color: #ff8fc4; animation-delay: 0.8s; }
.ns-inv-spark.s3 { bottom: 12px; right: 14px; font-size: 11px; color: #a67bfb; animation-delay: 1.5s; }
@keyframes ns-inv-tw { 0%, 100% { opacity: 0.15; transform: scale(0.6) rotate(0); } 50% { opacity: 1; transform: scale(1.15) rotate(25deg); } }
.ns-inv-hero { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; padding-right: 54px; }
.ns-inv-wolf { flex: none; position: relative; width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, rgba(255, 224, 138, 0.45), rgba(139, 92, 246, 0.25) 70%); box-shadow: 0 0 0 3px rgba(255, 224, 138, 0.35), 0 6px 18px rgba(0, 0, 0, 0.35); }
.ns-invite .ns-inv-wolf img { grid-row: auto; width: 62px; height: 62px; object-fit: contain; transform-origin: 50% 90%; animation: ns-inv-wave 2.2s ease-in-out infinite; }
@keyframes ns-inv-wave { 0%, 100% { transform: rotate(0) translateY(0); } 15% { transform: rotate(-8deg) translateY(-3px); } 30% { transform: rotate(6deg) translateY(-1px); } 45% { transform: rotate(-4deg) translateY(-3px); } 60% { transform: rotate(0) translateY(0); } }
.ns-invite .ns-inv-head b { font-size: 19px; line-height: 1.2; background: linear-gradient(90deg, #ffe08a, #fff4cf, #ffcc33, #ffe08a); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: ns-inv-shine 3.5s linear infinite; }
@keyframes ns-inv-shine { to { background-position: -250% 0; } }
.ns-inv-meta > span { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.12) !important; color: var(--ink) !important; }
/* bölümler: kategoriler ve kurallar ayrı kutularda */
.ns-inv-sec { position: relative; z-index: 1; padding: 10px 10px 11px; border-radius: 16px; background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 255, 255, 0.07); }
.ns-inv-sec h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 600 11.5px/1 "Fredoka", sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.ns-inv-sec h4::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.14), transparent); }
.ns-inv-sec h4 em { order: 2; font-style: normal; font-size: 10.5px; padding: 2px 7px; border-radius: 999px; background: rgba(166, 123, 251, 0.3); color: #e2d5ff; letter-spacing: 0; }
.ns-inv-sec.cats h4 span { color: #c9b2ff; } .ns-inv-sec.rules h4 span { color: #8fe3bd; }
.ns-inv-sec .ns-inv-cats > span { animation: ns-cred-pop 0.4s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(0.25s + var(--i) * 45ms); transition: transform 0.18s; }
.ns-inv-sec .ns-inv-cats > span:hover { transform: translateY(-2px) rotate(-3deg); }
.ns-inv-sec .ns-inv-cats > span.x { background: rgba(255, 204, 51, 0.14); border-color: rgba(255, 204, 51, 0.4); }
.ns-inv-sec .ns-inv-cats > span.x small::after { content: " ✚"; font-size: 9px; color: #ffd966; }
.ns-inv-sec .ns-rt-tag { background-clip: padding-box; }
@media (max-width: 480px) { .ns-inv-hero { padding-right: 34px; } .ns-inv-wolf { width: 58px; height: 58px; } .ns-invite .ns-inv-wolf img { width: 50px; height: 50px; } .ns-invite .ns-inv-head b { font-size: 17px; } }
@media (prefers-reduced-motion: reduce) { .ns-invite::before, .ns-inv-spark, .ns-invite .ns-inv-wolf img, .ns-invite .ns-inv-head b { animation: none; } }
:root[data-theme="light"] .ns-invite::after { background: linear-gradient(135deg, #fff6d8, #f1e9ff); }
:root[data-theme="light"] .ns-invite .ns-inv-head b { background-image: linear-gradient(90deg, #b9781a, #e8a23a, #8a5200, #b9781a); }
:root[data-theme="light"] .ns-inv-sec { background: rgba(255, 255, 255, 0.7); border-color: rgba(76, 47, 140, 0.12); }
:root[data-theme="light"] .ns-inv-meta > span { color: #3b2a63 !important; background: #fff !important; }

/* ================= Giriş: hepsi aynı genişlikte; "kendi odanı kur" ince uzun kart ================= */
.ns-home.one { max-width: 560px; }
.ns-mk { width: 100%; max-width: 560px; margin-top: 14px; display: flex; align-items: center; gap: 14px; padding: 14px 14px 14px 16px; border-radius: 20px; cursor: pointer; text-align: left; font: inherit; color: var(--ink);
  border: 1px solid rgba(166, 123, 251, 0.45); background: radial-gradient(circle at 15% 0%, rgba(166, 123, 251, 0.35), transparent 60%), linear-gradient(180deg, #2a1e4a, #1d1533);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3); transition: transform 0.2s cubic-bezier(.34, 1.56, .64, 1), border-color 0.2s, box-shadow 0.2s; animation: ns-inv-in 0.5s 0.1s cubic-bezier(.34, 1.56, .64, 1) both; }
.ns-mk:hover { transform: translateY(-3px); border-color: var(--violet); box-shadow: 0 14px 32px rgba(139, 92, 246, 0.3); }
.ns-mk-ic { flex: none; width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.06); }
.ns-mk-ic .ns-ic { width: 44px !important; height: 44px !important; transition: transform 0.25s cubic-bezier(.34, 1.56, .64, 1); }
.ns-mk:hover .ns-mk-ic .ns-ic { transform: rotate(-8deg) scale(1.08); }
.ns-mk-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ns-mk-t b { font: 600 17px/1.2 "Fredoka", sans-serif; }
.ns-mk-t small { font-size: 12.5px; color: var(--ink-dim); }
.ns-mk-t .ns-mk-or { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.ns-mk-go { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; color: #fff;
  background: linear-gradient(180deg, #b58cff, #8b5cf6); box-shadow: 0 6px 16px rgba(139, 92, 246, 0.45); transition: transform 0.2s; }
.ns-mk:hover .ns-mk-go { transform: translateX(3px) scale(1.06); }
:root[data-theme="light"] .ns-mk { background: linear-gradient(180deg, #f1e9ff, #fff); color: #2b1d4f; }

/* Davet kartındaki bölümler tam genişlikte */
.ns-invite { align-items: stretch !important; }
.ns-invite .ns-inv-sec { width: 100%; box-sizing: border-box; }
/* "Oda kur" onayı */
.ns-ask-sub { margin: -2px 0 16px; font-size: 14px; line-height: 1.45; color: var(--ink-dim); text-align: center; }

/* Davet kartındaki bölümler tam genişlikte */
.ns-invite { align-items: stretch !important; }
.ns-invite .ns-inv-sec { width: 100%; box-sizing: border-box; }
/* "Oda kur" onayı */
.ns-ask-sub { margin: -2px 0 16px; font-size: 14px; line-height: 1.45; color: var(--ink-dim); text-align: center; }

/* ================= Giriş ekranı yerleşimi ================= */
.ns-entry { width: 100%; display: flex; flex-direction: column; align-items: center; }
.ns-entry-l, .ns-entry-r { width: 100%; display: flex; flex-direction: column; align-items: center; }
.ns-entry-l:empty { display: none; }
@media (min-width: 1000px) {
  body:not(.ns-docked) #ns.ns-invhome, #ns.ns-invhome { max-width: 1120px; --nsw: 1120px; }
  .ns-entry.inv { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 24px; align-items: start; }
  .ns-entry.inv .ns-entry-l { position: sticky; top: 84px; }
  .ns-entry.inv .ns-invite { margin: 0; max-width: none; width: 100%; }
  .ns-entry.inv .ns-name-row, .ns-entry.inv .ns-home, .ns-entry.inv .ns-mk { max-width: none; }
  .ns-entry.inv .ns-name-row { margin-bottom: 14px; }
  .ns-entry.inv .ns-home.one .ns-card { padding: 16px 16px 18px; }
  .ns-entry.inv .ns-card-ic .ns-ic { width: 52px; height: 52px; }
  .ns-entry.inv .ns-mk { margin-top: 12px; }
}

/* ================= Giriş ekranı v2: düzgün hizalı kutular ================= */
.ns-entry { margin-top: 18px; }
/* Takma ad + avatar da bir kutu */
.ns-name-row { box-sizing: border-box; padding: 14px 16px 16px; border-radius: 20px; gap: 10px !important;
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.16), rgba(139, 92, 246, 0.04)); border: 1px solid rgba(166, 123, 251, 0.3); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.25); }
.ns-name-row > label { display: flex; align-items: center; gap: 6px; padding-left: 0 !important; font-size: 12px !important; letter-spacing: 0.1em; text-transform: uppercase; color: #c9b2ff !important; }
.ns-name-row > label::before { content: "🐾"; letter-spacing: 0; }
.ns-name-row .ns-me-row { align-items: center; }
:root[data-theme="light"] .ns-name-row { background: linear-gradient(180deg, #f1e9ff, #fff); border-color: rgba(76, 47, 140, 0.14); }
/* Ek kategoriler ayrı satırda */
.ns-inv-ext { margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(255, 204, 51, 0.3); display: flex; flex-direction: column; gap: 7px; }
.ns-inv-ext > b { font: 600 11px/1 "Fredoka", sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: #ffd966; }
.ns-inv-sec .ns-inv-cats > span.x small::after { content: none; }
/* Geniş ekran: iki eşit sütun, iki taraf aynı yükseklikte */
@media (min-width: 1000px) {
  .ns-entry.inv { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 20px !important; align-items: stretch !important; }
  .ns-entry.inv .ns-entry-l { position: static !important; display: flex; }
  .ns-entry.inv .ns-invite { flex: 1; justify-content: flex-start; }
  .ns-entry.inv .ns-inv-sec.rules { margin-top: auto; }
  .ns-entry.inv .ns-entry-r { display: flex; flex-direction: column; gap: 14px; justify-content: space-between; }
  .ns-entry.inv .ns-name-row, .ns-entry.inv .ns-home, .ns-entry.inv .ns-mk { margin: 0 !important; width: 100%; }
  .ns-entry.inv .ns-home.one .ns-card { flex-direction: row; flex-wrap: wrap; text-align: left; align-items: center; column-gap: 14px; row-gap: 10px; padding: 16px; }
  .ns-entry.inv .ns-home.one .ns-card-ic { flex: none; width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.06); }
  .ns-entry.inv .ns-home.one .ns-card-ic .ns-ic { width: 44px; height: 44px; }
  .ns-entry.inv .ns-home.one .ns-card h3 { margin: 0; flex: 1; font-size: 18px; }
  .ns-entry.inv .ns-home.one .ns-card p { flex: 1 1 100%; margin: -4px 0 0; }
  .ns-entry.inv .ns-home.one .ns-join-row { flex: 1 1 100%; }
}

/* ================= Davetle gelince "Katıl" düğmesi göze batsın ================= */
.ns-card.hot .ns-join-row { align-items: stretch; }
.ns-card.hot #ns-join { position: relative; overflow: hidden; isolation: isolate; min-width: 116px; padding: 0 22px; border: 0; border-radius: 16px;
  font: 700 17px/1 "Fredoka", sans-serif; letter-spacing: 0.02em; color: #2b1700;
  background: linear-gradient(180deg, #ffe08a 0%, #ffc53d 55%, #f0a516 100%);
  box-shadow: 0 6px 0 #b8760c, 0 10px 22px rgba(245, 184, 31, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.6);
  animation: ns-join-pulse 1.6s ease-in-out infinite; transition: transform 0.12s, box-shadow 0.12s; }
.ns-card.hot #ns-join::after { content: "▶"; margin-left: 8px; font-size: 13px; display: inline-block; animation: ns-join-nudge 1.6s ease-in-out infinite; }
/* parlak ışık şeridi */
.ns-card.hot #ns-join::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -60%; width: 40%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent); animation: ns-join-shine 2.4s ease-in-out infinite; }
.ns-card.hot #ns-join:hover { transform: translateY(-2px) scale(1.03); animation-play-state: paused; }
.ns-card.hot #ns-join:active { transform: translateY(4px); box-shadow: 0 2px 0 #b8760c, 0 4px 10px rgba(245, 184, 31, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.6); }
@keyframes ns-join-pulse { 0%, 100% { box-shadow: 0 6px 0 #b8760c, 0 10px 22px rgba(245, 184, 31, 0.45), 0 0 0 0 rgba(255, 204, 51, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.6); }
  50% { box-shadow: 0 6px 0 #b8760c, 0 10px 22px rgba(245, 184, 31, 0.45), 0 0 0 10px rgba(255, 204, 51, 0), inset 0 2px 0 rgba(255, 255, 255, 0.6); } }
@keyframes ns-join-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
@keyframes ns-join-shine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
/* kod kutusu da davetle uyumlu: altın kenarlı, büyük harfler */
.ns-card.hot #ns-code { border-color: rgba(255, 204, 51, 0.55); font-size: 20px; font-weight: 700; letter-spacing: 0.3em; text-align: center; color: #ffe08a; background: rgba(255, 204, 51, 0.06); }
@media (prefers-reduced-motion: reduce) { .ns-card.hot #ns-join, .ns-card.hot #ns-join::after, .ns-card.hot #ns-join::before { animation: none; } }
:root[data-theme="light"] .ns-card.hot #ns-code { color: #8a5200; background: #fff8e1; }

/* ================= Karakter seçici: akıcı çalışsın ================= */
/* Dönen halkalar ayrı katmanda: her karede yeniden boyanmasın, ekran kartı döndürsün */
.ns-rays, .ns-stage-ring, .ns-orbit-ring { will-change: transform; backface-visibility: hidden; }
.ns-stage-av { will-change: transform; transition: background 0.2s !important; }
.ns-orbit { contain: layout paint; }
/* Önizleme değişince büyük ışık gölgesi yumuşak geçiş yapmasın (pahalı) */
.ns-stage-av, .ns-avs-fun .ns-avb { transition-property: transform, opacity, background !important; }
/* Pencere açıkken arkadaki oyun ve yıldız animasyonları dursun: işlemci sadece pencereyle uğraşsın */
body:has(.g-modal) #ns-view *, body:has(.g-modal) #ns-chat *, body:has(.g-modal) .global-starfield * { animation-play-state: paused !important; }
@media (max-width: 600px) { .ns-rays { display: none; } }

/* ================= Oda önizlemesi: yazıyor / bulunamadı ================= */
.ns-invite.swap > * { animation: ns-pk-in 0.35s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes ns-pk-in { from { opacity: 0; transform: translateY(8px) scale(0.97); } }
.ns-invite.pk { justify-content: center !important; min-height: 260px; }
.ns-pk { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 10px 6px; }
.ns-pk > b { font: 600 20px/1.2 "Fredoka", sans-serif; color: #ffe08a; }
.ns-pk > small { max-width: 300px; font-size: 13.5px; line-height: 1.4; color: var(--ink-dim); }
.ns-invite .ns-pk-wolf { width: 104px; height: 104px; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.4)); }
.ns-pk-wolf.think { animation: ns-pk-think 2.6s ease-in-out infinite; transform-origin: 50% 90%; }
.ns-pk-wolf.sad { animation: ns-pk-sad 3s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes ns-pk-think { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg) translateY(-3px); } }
@keyframes ns-pk-sad { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-6deg); } 40% { transform: rotate(5deg); } 60% { transform: rotate(-3deg); } 80% { transform: rotate(0); } }
.ns-pk-slots { display: flex; gap: 6px; }
.ns-pk-slots span { width: 38px; height: 46px; border-radius: 11px; display: grid; place-items: center; font: 700 22px/1 "Fredoka", sans-serif; color: #3a2400;
  background: rgba(255, 255, 255, 0.06); border: 2px dashed rgba(255, 224, 138, 0.35); transition: background 0.2s, border-color 0.2s; }
.ns-pk-slots span.on { background: linear-gradient(180deg, #ffe08a, #f5b81f); border: 2px solid #ffcc33; box-shadow: 0 4px 0 #b8760c; }
.ns-pk-slots span.pop { animation: ns-pk-pop 0.3s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes ns-pk-pop { from { transform: translateY(-8px) scale(0.6); } }
.ns-pk-slots.bad span.on { color: #fff; background: linear-gradient(180deg, #ff8f8f, #e5484d); border-color: #ff6b6b; box-shadow: 0 4px 0 #9c2328; animation: ns-pk-shake 0.5s ease both; }
.ns-pk-slots.bad span:nth-child(2) { animation-delay: 0.04s; } .ns-pk-slots.bad span:nth-child(3) { animation-delay: 0.08s; } .ns-pk-slots.bad span:nth-child(4) { animation-delay: 0.12s; } .ns-pk-slots.bad span:nth-child(5) { animation-delay: 0.16s; }
@keyframes ns-pk-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-4px) rotate(-4deg); } 75% { transform: translateX(4px) rotate(4deg); } }
.ns-pk-q { position: absolute; font: 700 26px "Fredoka", sans-serif; color: #c9b2ff; opacity: 0.7; animation: ns-pk-float 3s ease-in-out infinite; }
.ns-pk-q.q1 { top: 6%; left: 18%; } .ns-pk-q.q2 { top: 14%; right: 16%; font-size: 20px; animation-delay: 0.9s; color: #ffd966; } .ns-pk-q.q3 { top: 34%; left: 10%; font-size: 16px; animation-delay: 1.7s; color: #ff8fc4; }
@keyframes ns-pk-float { 0%, 100% { transform: translateY(0) rotate(-8deg); opacity: 0.35; } 50% { transform: translateY(-8px) rotate(8deg); opacity: 0.9; } }
.ns-pk-tag { font-style: normal; font-size: 11.5px; padding: 3px 10px; border-radius: 999px; color: var(--ink-faint); background: rgba(255, 255, 255, 0.05); }
/* bulunamadı: çerçeve kırmızı-mora döner */
.ns-invite.nf::before { background: conic-gradient(from 0deg, #e5484d, #ff8fc4, #a67bfb, #e5484d); }
.ns-invite.nf .ns-pk > b { color: #ffb3b5; }
:root[data-theme="light"] .ns-pk > b { color: #8a5200; }
@media (prefers-reduced-motion: reduce) { .ns-pk-wolf, .ns-pk-q, .ns-pk-slots span { animation: none !important; } }

/* ================= Normal giriş ekranı: Oda kur + Odaya katıl ================= */
#ns:not(.ns-invhome) .ns-entry:not(.inv) .ns-name-row, #ns:not(.ns-invhome) .ns-entry:not(.inv) .ns-home:not(.one) { max-width: 640px; }
.ns-home:not(.one) { align-items: stretch; gap: 16px; }
.ns-home:not(.one) .ns-card { position: relative; overflow: hidden; isolation: isolate; justify-content: flex-start; padding: 22px 18px 18px; border-radius: 22px; }
.ns-home:not(.one) .ns-card > p { flex: 0 0 auto; margin-bottom: 4px; }
/* kartın arka plan ışığı */
.ns-home .ns-card::before { content: ""; position: absolute; z-index: -1; width: 220px; height: 220px; top: -90px; left: 50%; translate: -50% 0; border-radius: 50%; filter: blur(30px); opacity: 0.55; pointer-events: none; }
.ns-home .ns-cc::before { background: radial-gradient(circle, rgba(255, 150, 60, 0.55), rgba(139, 92, 246, 0.25) 60%, transparent 70%); }
.ns-home .ns-jc::before { background: radial-gradient(circle, rgba(255, 204, 51, 0.5), rgba(139, 92, 246, 0.2) 60%, transparent 70%); }
.ns-home .ns-cc { border-color: rgba(181, 140, 255, 0.5); }
.ns-home .ns-jc { border-color: rgba(255, 204, 51, 0.45); }
.ns-home:not(.one) .ns-card-ic .ns-ic { width: 72px; height: 72px; animation: ns-card-bob 3s ease-in-out infinite; }
.ns-home:not(.one) .ns-jc .ns-card-ic .ns-ic { animation-delay: -1.5s; }
@keyframes ns-card-bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-5px) rotate(3deg); } }
.ns-home:not(.one) .ns-card h3 { font-size: 21px; }
/* kontroller kartın altına yaslanır: iki kartın düğmeleri aynı hizada */
.ns-home:not(.one) .ns-seatpick { margin-top: auto; }
.ns-home:not(.one) .ns-jc .ns-join-row { margin-top: auto; }
.ns-home:not(.one) .ns-cc #ns-create { margin-top: 10px; }
/* Oda kur düğmesi: mor, basılabilir */
.ns-cc #ns-create { height: 50px; border-radius: 16px; font: 700 17px/1 "Fredoka", sans-serif; color: #fff; border: 0;
  background: linear-gradient(180deg, #b58cff, #8b5cf6 60%, #7444e6); box-shadow: 0 6px 0 #5530b5, 0 10px 22px rgba(139, 92, 246, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.35); transition: transform 0.12s, box-shadow 0.12s; }
.ns-cc #ns-create:hover { transform: translateY(-2px); }
.ns-cc #ns-create:active { transform: translateY(4px); box-shadow: 0 2px 0 #5530b5, 0 4px 10px rgba(139, 92, 246, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.35); }
/* Odaya katıl: kod kutusu ve altın düğme (davetteki gibi) */
.ns-jc .ns-join-row { align-items: stretch; }
.ns-jc #ns-code { height: 50px; box-sizing: border-box; border-radius: 16px; font: 700 20px/1 "Fredoka", sans-serif; letter-spacing: 0.3em; text-align: center; text-transform: uppercase; color: #ffe08a;
  background: rgba(255, 204, 51, 0.06); border: 2px solid rgba(255, 204, 51, 0.35); }
.ns-jc #ns-code::placeholder { font-size: 13px; letter-spacing: 0.15em; color: var(--ink-faint); font-weight: 600; }
.ns-jc #ns-code:focus { outline: none; border-color: #ffcc33; box-shadow: 0 0 0 4px rgba(255, 204, 51, 0.18); }
.ns-jc #ns-join { position: relative; overflow: hidden; isolation: isolate; height: 50px; min-width: 92px; padding: 0 18px; border: 0; border-radius: 16px; font: 700 17px/1 "Fredoka", sans-serif; color: #2b1700;
  background: linear-gradient(180deg, #ffe08a 0%, #ffc53d 55%, #f0a516 100%); box-shadow: 0 6px 0 #b8760c, 0 10px 22px rgba(245, 184, 31, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.6); transition: transform 0.12s, box-shadow 0.12s, filter 0.2s; }
.ns-jc:not(.ready):not(.hot) #ns-join { filter: saturate(0.55) brightness(0.85); }
.ns-jc.ready #ns-join { animation: ns-join-pulse 1.6s ease-in-out infinite; }
.ns-jc.ready #ns-join::after { content: "▶"; margin-left: 7px; font-size: 12px; display: inline-block; animation: ns-join-nudge 1.6s ease-in-out infinite; }
.ns-jc #ns-join:hover { transform: translateY(-2px); }
.ns-jc #ns-join:active { transform: translateY(4px); box-shadow: 0 2px 0 #b8760c, inset 0 2px 0 rgba(255, 255, 255, 0.6); }
/* durum şeridi (kodun altında) */
.ns-joinst { width: 100%; box-sizing: border-box; min-height: 0; display: flex; align-items: center; gap: 10px; text-align: left; border-radius: 14px; font-size: 13px; color: var(--ink-dim); transition: background 0.2s; }
.ns-joinst:empty { display: none; }
.ns-joinst.typing, .ns-joinst.nf, .ns-joinst.room { margin-top: 10px; padding: 8px 12px; background: rgba(255, 255, 255, 0.05); animation: ns-pk-in 0.3s cubic-bezier(.34, 1.56, .64, 1) both; }
.ns-joinst img { width: 40px; height: 40px; object-fit: contain; flex: none; }
.ns-joinst span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ns-joinst b { font: 600 14px/1.2 "Fredoka", sans-serif; color: var(--ink); }
.ns-joinst small { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: 12px; color: var(--ink-dim); }
.ns-joinst .flag-ic { display: inline-flex; width: 15px; height: 15px; } .ns-joinst .flag-ic svg { width: 100%; height: 100%; }
.ns-joinst.typing { gap: 8px; }
.ns-joinst .ns-js-ic { font-size: 18px; }
.ns-js-bar { flex: 1; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.ns-js-bar > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #ffe08a, #f5b81f); transition: width 0.25s cubic-bezier(.34, 1.56, .64, 1); }
.ns-joinst.room { background: rgba(74, 191, 140, 0.12); box-shadow: inset 0 0 0 1.5px rgba(74, 191, 140, 0.5); }
.ns-joinst.room b { color: #8fe3bd; }
.ns-joinst.room img { animation: ns-inv-wave 2.2s ease-in-out infinite; transform-origin: 50% 90%; }
.ns-joinst.nf { background: rgba(229, 72, 77, 0.12); box-shadow: inset 0 0 0 1.5px rgba(229, 72, 77, 0.5); }
.ns-joinst.nf b { color: #ffb3b5; }
.ns-joinst.nf img { animation: ns-pk-sad 3s ease-in-out infinite; transform-origin: 50% 90%; }
/* koltuk seçimi biraz daha renkli */
.ns-cc .ns-seats .ns-chip { font-weight: 700; }
:root[data-theme="light"] .ns-jc #ns-code { color: #8a5200; background: #fff8e1; }
:root[data-theme="light"] .ns-joinst b { color: #2b1d4f; }
@media (max-width: 560px) { .ns-home:not(.one) .ns-card { padding: 18px 14px 16px; } }
@media (prefers-reduced-motion: reduce) { .ns-home .ns-card-ic .ns-ic, .ns-joinst img, .ns-jc #ns-join, .ns-jc #ns-join::after { animation: none !important; } }

/* ================= Normal giriş: davet sayfası gibi iki sütun + hoş geldin kartı ================= */
.ns-entry.home2 .ns-entry-l:has(.ns-invite[hidden]) { display: none; }
@media (max-width: 999.98px) {
  .ns-entry.home2 .ns-invite.hero { display: none !important; }   /* telefonda yer kaplamasın; kod yazınca durum kartı yine çıkar */
  .ns-entry.home2 .ns-entry-l { order: 2; margin-top: 14px; }
}
@media (min-width: 1000px) {
  .ns-entry.home2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 20px; align-items: stretch; }
  .ns-entry.home2 .ns-entry-l { display: flex; }
  .ns-entry.home2 .ns-invite { flex: 1; margin: 0; max-width: none; width: 100%; }
  .ns-entry.home2 .ns-entry-r { display: flex; flex-direction: column; gap: 16px; }
  .ns-entry.home2 .ns-name-row, .ns-entry.home2 .ns-home { max-width: none !important; width: 100%; margin: 0 !important; }
  .ns-entry.home2 .ns-home { flex: 1; gap: 14px; }
  .ns-entry.home2 .ns-home .ns-card { padding: 18px 14px 16px; }
  .ns-entry.home2 .ns-seats { gap: 4px; }
  .ns-entry.home2 .ns-seats .ns-chip { min-width: 0; padding: 0; width: 30px; height: 30px; font-size: 13px; }
}
/* Hoş geldin kartı */
.ns-invite.hero { justify-content: stretch !important; }
.ns-hero { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; gap: 14px; }
.ns-hero-top { display: flex; align-items: center; gap: 14px; padding-right: 60px; }
.ns-hero-wolf { flex: none; width: 82px; height: 82px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, rgba(255, 224, 138, 0.5), rgba(139, 92, 246, 0.25) 70%); box-shadow: 0 0 0 3px rgba(255, 224, 138, 0.4), 0 0 26px rgba(255, 204, 51, 0.3); }
.ns-invite .ns-hero-wolf img { width: 74px; height: 74px; object-fit: contain; transform-origin: 50% 90%; animation: ns-inv-wave 2.6s ease-in-out infinite; }
.ns-hero-top b { display: block; font: 600 21px/1.2 "Fredoka", sans-serif; background: linear-gradient(90deg, #ffe08a, #fff4cf, #ffcc33, #ffe08a); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: ns-inv-shine 3.5s linear infinite; }
.ns-hero-top small { display: block; margin-top: 4px; font-size: 13.5px; color: var(--ink-dim); }
/* örnek tur: dönen ay + üç cevap */
.ns-hero-demo { display: flex; align-items: center; gap: 16px; padding: 14px; border-radius: 18px; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 224, 138, 0.18); transition: opacity 0.25s, transform 0.25s; }
.ns-hero-demo.flip { opacity: 0; transform: translateY(6px) scale(0.98); }
.ns-hero-moon { flex: none; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #fff4cf, #ffd34d 55%, #e6a817);
  box-shadow: 0 0 0 4px rgba(255, 224, 138, 0.25), 0 0 30px rgba(255, 204, 51, 0.45), inset -6px -8px 0 rgba(180, 120, 10, 0.25); animation: ns-hero-spin 3.4s cubic-bezier(.34, 1.56, .64, 1) infinite; }
.ns-hero-moon b { font: 700 40px/1 "Fredoka", sans-serif; color: #4b2f00; }
@keyframes ns-hero-spin { 0% { transform: rotate(-200deg) scale(0.6); } 18%, 100% { transform: rotate(0) scale(1); } }
.ns-hero-rows { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ns-hero-r { display: grid; grid-template-columns: 22px 1fr auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 5px 9px; border-radius: 12px; background: rgba(139, 92, 246, 0.2);
  animation: ns-cred-pop 0.45s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(0.35s + var(--i) * 0.15s); }
.ns-hero-r span { grid-row: 1 / 3; } .ns-hero-r span .ns-ic { width: 20px; height: 20px; }
.ns-hero-r small { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); line-height: 1.1; }
.ns-hero-r b { grid-column: 2; font: 600 15px/1.2 "Fredoka", sans-serif; color: var(--ink); }
.ns-hero-r em { grid-row: 1 / 3; grid-column: 3; }
/* üç adım */
.ns-hero-steps { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.ns-hero-steps > span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 6px; border-radius: 999px; font: 600 12.5px/1 "Fredoka", sans-serif; color: var(--ink); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1);
  animation: ns-cred-pop 0.4s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(0.2s + var(--i) * 0.1s); }
.ns-hero-steps > span > i { font-style: normal; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; color: #2b1700; background: linear-gradient(180deg, #ffe08a, #f5b81f); }
.ns-hero-steps > em { font-style: normal; color: #ffd966; opacity: 0.7; animation: ns-join-nudge 1.6s ease-in-out infinite; }
/* bilgi rozetleri */
.ns-hero-stats { margin-top: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ns-hero-stats span { padding: 8px 4px; border-radius: 12px; text-align: center; font: 600 12px/1.2 "Fredoka", sans-serif; color: var(--ink-dim); background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 255, 255, 0.07); }
@media (prefers-reduced-motion: reduce) { .ns-hero-moon, .ns-invite .ns-hero-wolf img, .ns-hero-top b, .ns-hero-steps > em { animation: none !important; } }
:root[data-theme="light"] .ns-hero-demo, :root[data-theme="light"] .ns-hero-stats span { background: rgba(255, 255, 255, 0.7); }

/* Davet sayfasında da: kod eksikken Katıl sönük, tamamlanınca parlar */
.ns-card.hot:not(.ready) #ns-join { animation: none; filter: saturate(0.55) brightness(0.85); }
.ns-card.hot:not(.ready) #ns-join::after, .ns-card.hot:not(.ready) #ns-join::before { animation: none; opacity: 0; }

/* Lobi: sohbet okunabilir boyutta kalsın; çok boş yer tek kutuda toplanır */
.ns-empty-av { position: relative; }
.ns-empty-n { position: absolute; right: -8px; bottom: -6px; min-width: 22px; height: 18px; padding: 0 5px; border-radius: 99px; display: grid; place-items: center;
  font: 700 11px/1 "Fredoka", sans-serif; font-style: normal; color: #fff; background: linear-gradient(180deg, #a78bfa, #7c3aed); box-shadow: 0 2px 6px rgba(124, 58, 237, 0.45); }

/* Lobi her oyuncu sayısında aynı boyda: 2 kişide de 8 kişide de kutular kıpırdamaz, sadece oyuncular/sohbet payı değişir */
@media (min-width: 1120px) {
  body:not(.ns-docked) #ns.ns-wide .ns-lobby { min-height: 590px; }
}
body.ns-docked #ns.ns-wide .ns-lobby { min-height: 590px; }

/* ---------- Davet kartı: sorular renkli kartlar, kurallar üç eşit kutu ---------- */
.ns-invite .kk-isec.cats { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.kk-iq { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-content: stretch; gap: 7px; }
.kk-iqc { position: relative; flex: 1 1 calc(25% - 7px); min-width: 0; min-height: 74px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 8px 4px 7px; border-radius: 14px; text-align: center;
  background: linear-gradient(170deg, color-mix(in srgb, var(--a) 30%, transparent), color-mix(in srgb, var(--a) 7%, transparent));
  border: 1px solid color-mix(in srgb, var(--a) 45%, transparent); box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--a) 20%, transparent);
  animation: ns-cred-pop 0.4s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(0.2s + var(--i) * 0.05s); transition: transform 0.2s cubic-bezier(.34, 1.56, .64, 1); }
.kk-iqc:hover { transform: translateY(-3px) rotate(-1.5deg); }
.kk-iqc i { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 20px; line-height: 1; background: color-mix(in srgb, var(--a) 24%, rgba(0, 0, 0, 0.18)); }
.kk-iqc:nth-child(odd) i { animation: ns-bobble 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * 0.3s); }
.kk-iqc:nth-child(even) i { animation: ns-bobble 3.2s ease-in-out infinite reverse; animation-delay: calc(var(--i) * 0.3s); }
.kk-iqc b { font: 600 13px/1.1 "Fredoka", sans-serif; color: var(--ink); max-width: 100%; padding: 0 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kk-iqc em { position: absolute; top: 5px; left: 6px; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; font: 700 10px/1 "Fredoka", sans-serif; font-style: normal; color: #1a1033; background: color-mix(in srgb, var(--a) 85%, #fff); }
.kk-ir { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.kk-irt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; padding: 9px 6px 8px; border-radius: 14px; text-align: center;
  background: color-mix(in srgb, var(--a) 12%, rgba(0, 0, 0, 0.15)); border: 1px solid color-mix(in srgb, var(--a) 38%, transparent);
  animation: ns-cred-pop 0.4s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(0.45s + var(--i) * 0.08s); }
.kk-irt i { font-style: normal; font-size: 22px; line-height: 1; transition: transform 0.2s; }
.kk-irt:hover i { transform: scale(1.15) rotate(-8deg); }
.kk-irt small { max-width: 100%; font: 500 11px/1.15 "Fredoka", sans-serif; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kk-irt b { max-width: 100%; padding: 3px 9px; border-radius: 999px; font: 600 11.5px/1.1 "Fredoka", sans-serif; color: #1a1033; background: color-mix(in srgb, var(--a) 85%, #fff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kk-irt.off { opacity: 0.8; } .kk-irt.off b { background: rgba(255, 255, 255, 0.14); color: var(--ink-dim); }
:root[data-theme="light"] .kk-iqc { background: linear-gradient(170deg, color-mix(in srgb, var(--a) 30%, #fff), #fff); }
:root[data-theme="light"] .kk-irt { background: color-mix(in srgb, var(--a) 14%, #fff); }
@media (max-width: 420px) { .kk-iqc { flex-basis: calc(33.33% - 7px); } }
@media (prefers-reduced-motion: reduce) { .kk-iqc i { animation: none !important; } }

/* İsim Şehir Hayvan davet kartı: kategori simgeleri, ek kategori rozeti, 4 kural kutusu */
.kk-iqc i .ns-ic { width: 26px !important; height: 26px !important; }
.kk-iqc.x em { left: auto; right: 6px; font-size: 10px; color: #2a1a00; background: linear-gradient(180deg, #ffe08a, #f5b81f); }
.kk-iq[data-n="5"] .kk-iqc { flex-basis: calc(20% - 7px); }
.kk-iq[data-n="6"] .kk-iqc { flex-basis: calc(33.33% - 7px); }
.kk-ir.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kk-ir.n4 .kk-irt small { white-space: normal; line-height: 1.1; min-height: 2.2em; display: flex; align-items: center; justify-content: center; }
.kk-irt.adult { opacity: 1; background: rgba(229, 72, 77, 0.14); border-color: rgba(229, 72, 77, 0.5); }
.kk-irt.adult b { background: #e5484d; color: #fff; }
@media (max-width: 420px) { .kk-ir.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kk-iq[data-n="5"] .kk-iqc { flex-basis: calc(33.33% - 7px); } }

/* sohbet açıkken dil menüsü sohbetin üstünde açılsın */
body:has(.lang-menu.open) .nav, body:has(.nav-links.open) .nav { z-index: 1700; }

/* ===== Oyuncu kartları: dar ekranda (telefon/tablet) yatay satır — isim ve durum okunur ===== */
@media (max-width: 1119px) {
  #ns .ns-a-pl .ns-p.ns-pc { flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; min-height: 52px; padding: 5px 10px 5px 8px !important; text-align: left; }
  #ns .ns-a-pl .ns-pc .ns-av { --s: 38px !important; }
  #ns .ns-a-pl .ns-pc > b { flex: 1 1 auto; min-width: 0; padding: 0; font-size: 15.5px !important; text-align: left; }
  #ns .ns-a-pl .ns-pc .ns-pill, #ns .ns-a-pl .ns-pc .ns-pills { flex: none; width: auto; padding: 4px 10px; }
  #ns .ns-a-pl .ns-pc .ns-pills .ns-pill { padding: 4px 8px; }
  #ns .ns-a-pl .ns-pc-crown { left: 50%; top: -12px; }
  #ns .ns-a-pl .ns-pc-crown .ns-ic { width: 18px !important; height: 18px !important; }
}