/* ==========================================================================
   Groyt — Animasyonlu komut önizlemeleri, 4 Ekim Part 2 (js/previews-r6.js)
   Sahne kabı .r4s.r5s (previews-r4/r5.css): sabit yükseklik, en yeni mesaj altta.
   ========================================================================== */
.r4s.r5s.r6s { padding-bottom: 14px; } /* pencerenin alt soluklaştırma maskesi son satırı (düğmeler) karartmasın */
.r4s.r5s.r6-tall { height: 440px; }
.r6-img { margin: 4px 0 2px; }

/* 🧹 Müzik paneli: ilerleme çubuğu sahne boyunca hiç durmadan akar */
.r6-np { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.r6-np .r4-bar { margin: 0; }
.r6-np .r4-bar i { width: 32%; transition: none; background: linear-gradient(90deg, #ec4899, #f9a8d4); animation: r6Np 11s linear forwards; }
@keyframes r6Np { from { width: 32%; } to { width: 37%; } }
.r6-np small { font-size: 10px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.r6-q { margin-top: 6px; padding: 7px 9px; border-radius: 8px; background: rgba(0, 0, 0, .25); border: 1px solid rgba(255, 255, 255, .07); }
.r6-q-head { font-size: 11px; color: var(--text-secondary); }
.r6-q-head b { color: #fff; font-variant-numeric: tabular-nums; }
.r6-q ol { list-style: none; margin: 4px 0 0; padding: 0; }
.r6-q li {
  display: flex; gap: 6px; max-height: 22px; padding: 3px 4px; border-radius: 5px; overflow: hidden;
  font-size: 11px; color: var(--text-primary); white-space: nowrap; text-overflow: ellipsis;
  transition: max-height .35s ease .2s, padding .35s ease .2s, opacity .25s ease, transform .25s ease, background .2s ease;
}
.r6-q li em { font-style: normal; color: var(--text-tertiary); }
.r6-q li.is-out { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; transform: translateX(24px); background: rgba(239, 68, 68, .25); }

/* 🤖 Sahte Clyde görseli (Discord koyu teması) */
.r6-clyde {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; max-width: 320px; padding: 10px 12px;
  border-radius: 8px; background: #313338; box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .8);
}
.r6-clyde.is-in { animation: r4Up .5s cubic-bezier(.16, 1, .3, 1) both; }
.r6-clyde-av svg { display: block; width: 34px; height: 34px; }
.r6-clyde-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.r6-clyde-meta { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.r6-clyde-meta b { font-size: 12.5px; color: #fff; }
.r6-clyde-meta em { font: 700 8.5px/1 sans-serif; font-style: normal; padding: 2px 4px; border-radius: 3px; background: #5865f2; color: #fff; }
.r6-clyde-meta small { font-size: 9.5px; color: #949ba4; }
.r6-clyde-text { font-size: 12px; color: #dbdee1; overflow-wrap: anywhere; }
.r6-mention { padding: 0 2px; border-radius: 3px; font-weight: 600; color: #c9cdfb; background: rgba(88, 101, 242, .3); }
.r6-clyde-eph { font-size: 9.5px; color: #949ba4; }
.r6-clyde-eph span { color: #00a8fc; }

/* 🪧 Pankart: sade çizim karakter + eğilebilen pankart (yazı da eğik) */
.r6-sign {
  position: relative; height: 188px; max-width: 300px; overflow: hidden; border-radius: 8px; background: var(--bg);
  animation: r6SignIn .55s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes r6SignIn { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
.r6-char { position: absolute; left: 50%; bottom: 0; width: 150px; height: 160px; transform: translateX(-50%); }
.r6-board {
  position: absolute; left: 50%; bottom: 14px; width: 178px; min-height: 64px; padding: 8px 10px;
  display: grid; place-items: center; border-radius: 4px; background: #fff; border: 3px solid #e5e7eb;
  box-shadow: 0 6px 12px -4px rgba(0, 0, 0, .35); transform: translateX(-50%) rotate(var(--tilt, 0deg));
}
/* eller pankartın iki yanında */
.r6-board::before, .r6-board::after { content: ''; position: absolute; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: #ffe7d6; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.r6-board::before { left: -9px; }
.r6-board::after { right: -9px; }
.r6-board b { font: 900 17px/1.1 'Space Grotesk', sans-serif; color: #111; text-align: center; overflow-wrap: anywhere; }
.r6-sign-no { position: absolute; top: 6px; right: 7px; padding: 1px 6px; border-radius: 99px; font-size: 9px; font-weight: 700; color: #1f2937; background: rgba(255, 255, 255, .7); }

/* 🎁 Bedava oyun paneli */
.r6-free { transition: border-color .4s ease; }
.r6-free.is-off { filter: saturate(.55); }
.r6-free-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.r6-free-head b { font-size: 12px; color: #fff; }
.r6-stores { display: flex; gap: 3px; }
.r6-stores i { font-style: normal; font-size: 8.5px; font-weight: 700; padding: 1px 5px; border-radius: 4px; background: rgba(255, 255, 255, .1); color: var(--text-secondary); }
.r6-status { font-size: 10.5px; color: var(--text-secondary); padding: 4px 6px; border-radius: 6px; background: rgba(255, 255, 255, .05); }
.r6-status b { color: #fff; }
.r6-status [data-r6-role] { padding: 0 2px; border-radius: 3px; }
.r6-store { font-size: 11px; font-weight: 800; color: #fff; }
.r6-games { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.r6-game { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 5px; border-radius: 6px; background: rgba(0, 0, 0, .25); font-size: 9px; color: var(--text-secondary); }
.r6-game b { font-size: 10.5px; color: #fff; }
.r6-game small { font-size: 9px; color: var(--text-tertiary); }
.r6-game s { color: var(--text-primary); }
.r6-cover { display: grid; place-items: center; height: 38px; margin-bottom: 3px; border-radius: 4px; font-size: 18px; }
.r6-link { color: #00a8fc; }

/* 🧮 Hesap makinesi */
.r6-calc-screen {
  padding: 6px 10px; border-radius: 6px; text-align: right; background: rgba(0, 0, 0, .35);
  font: 800 18px ui-monospace, 'Cascadia Code', Consolas, monospace; color: #fff; font-variant-numeric: tabular-nums;
}
.r6-calc-screen.is-done { color: #86efac; }
.r6-calc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; max-width: 220px; margin-top: 6px; }
.r6-calc i {
  display: grid; place-items: center; height: 24px; border-radius: 4px; font-style: normal; font-size: 11.5px; font-weight: 700;
  color: #fff; background: #4e5058; transition: transform .15s ease, filter .15s ease;
}
.r6-calc i.is-op { background: #5865f2; }
.r6-calc i.is-eq { background: #248046; }
.r6-calc i.is-c { background: #da373c; }
.r6-calc i.is-press { animation: r4Press .45s ease; }
.r6-note { margin-top: 6px; font-size: 10px; color: var(--text-tertiary); }

@media (prefers-reduced-motion: reduce) {
  .r6-np .r4-bar i { width: 35%; }
  .r6-sign, .r6-clyde { opacity: 1; transform: none; }
}