/* Kart Basımevi: loş, sıcak bir çalışma odası; masa lambasının ışığı makinenin üstüne düşer. */
body { background: radial-gradient(90% 55% at 50% 38%, #4a3324 0%, #22160f 55%, #0d0806 100%); }

/* arka planda bulanık ışıklar */
.bokeh { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.bokeh i { position: absolute; border-radius: 50%; filter: blur(2.4vh); opacity: 0.35; animation: drift 14s ease-in-out infinite alternate; }
.bokeh i:nth-child(1) { left: 6%; top: 8%; width: 12vh; height: 12vh; background: #ffb46b; }
.bokeh i:nth-child(2) { left: 70%; top: 4%; width: 16vh; height: 16vh; background: #ff8a5c; animation-delay: -3s; }
.bokeh i:nth-child(3) { left: 40%; top: 14%; width: 7vh; height: 7vh; background: #ffe0a3; animation-delay: -6s; }
.bokeh i:nth-child(4) { left: 82%; top: 22%; width: 9vh; height: 9vh; background: #ffd27a; animation-delay: -1s; }
.bokeh i:nth-child(5) { left: 18%; top: 26%; width: 6vh; height: 6vh; background: #ff9f6b; animation-delay: -8s; }
.bokeh i:nth-child(6) { left: 55%; top: 2%; width: 10vh; height: 10vh; background: #c58bff; opacity: 0.2; animation-delay: -4s; }
.bokeh i:nth-child(7) { left: 28%; top: 6%; width: 14vh; height: 14vh; background: #ffcf8a; opacity: 0.22; animation-delay: -10s; }
@keyframes drift { to { transform: translate(3vh, 2vh) scale(1.15); } }

.top { position: absolute; left: 0; right: 0; top: 1.6vh; display: flex; flex-direction: column; align-items: center; gap: 0.8vh; }
.now { display: flex; align-items: center; gap: 1.2vh; padding: 0.7vh 1.8vh 0.7vh 0.7vh; border-radius: 4vh; background: #0b0d14d9; border: 0.25vh solid #ffffff22; box-shadow: 0 1vh 3vh #0007; animation: nowin 0.35s ease-out; max-width: 92%; }
.now .pic .av { width: 6vh; height: 6vh; font-size: 2.8vh; border: 0.3vh solid #fff; }
.now .txt { display: flex; flex-direction: column; min-width: 0; }
.now small { font-size: 1.3vh; font-weight: 900; letter-spacing: 0.12em; color: #ffffffa0; }
.now b { font-size: 2.6vh; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 28vh; }
.now .tier { flex: none; padding: 0.5vh 1.2vh; border-radius: 2vh; font-size: 1.6vh; font-weight: 900; background: #6c7dff; }
.now .tier.orta { background: linear-gradient(120deg, #f7d77a, #c8902a); color: #3a2605; }
.now .tier.vip { background: linear-gradient(120deg, #ff4d5a, #a3101e); }
.now .tier.super { background: linear-gradient(120deg, #ffe08a, #d62839); color: #3a0209; }
.now .tier.mega { background: linear-gradient(90deg, #ff4d6d, #ffb703, #7cf29a, #38d5f5, #a98bff); color: #120a2e; }
@keyframes nowin { from { opacity: 0; transform: translateY(-1.5vh) scale(0.95); } }
.queue { padding: 0.4vh 1.4vh; border-radius: 2vh; background: #0b0d14b0; font-size: 1.6vh; font-weight: 800; color: #ffffffcc; }
.queue b { color: var(--gold); }

.flashbang { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, #fff 0%, #ffffff00 70%); animation: fb 0.7s ease-out forwards; }
@keyframes fb { from { opacity: 0.9; } to { opacity: 0; } }

/* olay akışı: vitrindeki kartın ve yandaki VIP kartlarının üstüne binmesin diye sol üstte, makinenin üstündeki boşlukta */
.feed { top: 13vh; bottom: auto; }
.feed div { font-size: 1.6vh; }

/* "En çok kart" listesi: sol üstte, olay akışı onun altında */
.board { position: absolute; left: 1.4vh; top: 9vh; min-width: 22vh; padding: 0.9vh 1.1vh; border-radius: 1.8vh; background: #0b0d14d0; border: 0.25vh solid #ffd16655; box-shadow: 0 1vh 3vh #0006; }
.board small { display: block; font-size: 1.25vh; font-weight: 900; letter-spacing: 0.12em; color: var(--gold, #ffd166); margin-bottom: 0.5vh; }
.board ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5vh; }
.board li { display: flex; align-items: center; gap: 0.8vh; font-size: 1.6vh; font-weight: 800; }
.board li em { font-style: normal; width: 1.6vh; text-align: center; color: #ffd166; font-weight: 900; }
.board li:nth-child(2) em { color: #d9dde6; }
.board li:nth-child(3) em { color: #e0a070; }
.board li .av { width: 3vh; height: 3vh; font-size: 1.4vh; flex: none; }
.board li b { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board li span { color: #ffd166; font-weight: 900; }
.board:not([hidden]) ~ .feed { top: 24vh; }
.feed { top: 9vh; }

/* bağlantı koptu yazısı */
.lost { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 1.6vh 2.6vh; border-radius: 2vh; background: #0b0d14ee; color: #fff; font-weight: 800; font-size: 2.2vh; z-index: 20; }

/* Dikey ekran (TikTok): rehber sağ üstte ve küçük; önce ortada duruyordu, sağdaki Mega kartın üstüne biniyordu */
@media (max-aspect-ratio: 3/4) {
  .guide { top: 9vh; gap: 0.6vh; }
  .guide div { width: 7.2vh; padding: 0.45vh 0.3vh; }
  .guide img { width: 3.6vh; height: 3.6vh; }
  .guide span { font-size: 1.15vh; }
  /* olay listesi makinenin ekranına binmesin: 3 satır, küçük */
  .board:not([hidden]) ~ .feed { top: 23vh; }
  .feed div { font-size: 1.4vh; }
  .feed div:nth-child(n + 4) { display: none; }
}