/* ALTIN AT YARIŞI — iki görünümün ortak parçaları (ADIM 188): tam ekran "Yükleniyor" + marka, bağlantı şeridi. Koyu lacivert + altın (oyunun görünümü).
 * Emoji yok; simgeler SVG. 320 px genişlikten geniş ekrana ve yatay telefona sığar. */
.yukle { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(120% 90% at 50% 18%, #12285a 0%, #0a1838 42%, #050c1e 78%) #050c1e; transition: opacity .45s ease; }
.yukle.gizle { opacity: 0; pointer-events: none; }
.yk-ic { width: min(86vw, 420px); text-align: center; }
.yk-logo { width: 76px; height: 76px; display: block; margin: 0 auto 14px; filter: drop-shadow(0 8px 22px rgba(242, 201, 76, .28)); }
.yk-ad { font-weight: 700; font-size: clamp(20px, 6vw, 30px); line-height: 1.15; letter-spacing: .06em; text-transform: uppercase; color: #f2c94c;
  background: linear-gradient(180deg, #ffe9a6, #f2c94c 55%, #c99a2e); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; overflow-wrap: anywhere; }
.yk-cubuk { height: 12px; margin: 24px auto 10px; border-radius: 99px; background: rgba(0, 0, 0, .45); border: 1px solid rgba(242, 201, 76, .5); overflow: hidden; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6); }
.yk-cubuk i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #c99a2e, #ffe596); box-shadow: 0 0 12px rgba(242, 201, 76, .6); transition: width .25s ease; }
.yk-yazi { margin: 0; font-weight: 500; font-size: 14px; letter-spacing: .03em; color: #c9cfdd; }
.yk-yazi b { font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.yk-marka { margin: 26px 0 0; font-weight: 700; font-size: clamp(13px, 4vw, 17px); letter-spacing: .22em; text-transform: uppercase; color: #ffd772; overflow-wrap: anywhere; }
.yk-marka::before { content: ''; display: block; width: 56px; height: 1px; margin: 0 auto 12px; background: linear-gradient(90deg, transparent, rgba(242, 201, 76, .7), transparent); }
.yk-dugme { margin: 20px auto 0; padding: 11px 26px; border: 0; border-radius: 14px; font: inherit; font-weight: 700; font-size: 15px; color: #2a1c02; cursor: pointer; background: linear-gradient(#f4d77a, #d9a83a); box-shadow: 0 4px 0 #8a5a12; }
@media (max-height: 420px) { .yk-logo { width: 46px; height: 46px; margin-bottom: 6px; } .yk-cubuk { margin-top: 12px; } .yk-marka { margin-top: 12px; } .yk-marka::before { margin-bottom: 7px; } }

/* bağlantı şeridi: "Bağlantı koptu — yeniden bağlanılıyor…" (oyunu kapatmaz; üstte durur) · "Oyun başka pencerede açıldı" (düğmeli) */
.ay-bag { position: fixed; top: calc(8px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 85; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 16px);
  padding: 9px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.25; color: #fff; background: rgba(64, 12, 14, .96); border: 1px solid #ff8a80; box-shadow: 0 10px 30px rgba(0, 0, 0, .55); }
.ay-bag b { font-weight: 700; min-width: 0; }
.ay-bag .ay-don { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .3); border-top-color: #fff; animation: ayDon .8s linear infinite; }
.ay-bag.sabit { background: rgba(8, 20, 48, .97); border-color: rgba(242, 201, 76, .7); }
.ay-bag.sabit .ay-don { display: none; }
.ay-bag button { flex: none; height: 30px; padding: 0 12px; border: 0; border-radius: 9px; font: inherit; font-size: 12.5px; font-weight: 700; color: #2a1c02; cursor: pointer; background: linear-gradient(#f4d77a, #d9a83a); }
@keyframes ayDon { to { transform: rotate(360deg); } }
@media (max-width: 420px) { .ay-bag { font-size: 12.5px; padding: 8px 10px; gap: 8px; } }
.toast { z-index: 90; }