/* Şehir Koşusu ekranı: koyu cam paneller; dikey ve yatay yayın, ölçüler ekran yüksekliğine (vh) bağlı. */
body { background: #0b2740; }

/* üstte ortada büyük metre, altında küçük hapçıklar; en altta ince hedef çubuğu */
.top { position: absolute; left: 0; right: 0; top: 1vh; display: flex; flex-direction: column; align-items: center; gap: 0.4vh; }
.metT { font: 700 1.3vh/1 Fredoka, Outfit, sans-serif; letter-spacing: 0.12em; text-shadow: 0 0.1vh 0.4vh #0009; }
.met { font: 700 7.4vh/0.95 Fredoka, Outfit, sans-serif; font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 0.35vh 0 #13294f, 0.2vh 0 0 #13294f, -0.2vh 0 0 #13294f, 0 -0.2vh 0 #13294f, 0 0.6vh 1.2vh #0006; }
.sub { display: flex; align-items: center; gap: 0.5vh; font-size: 1.3vh; font-weight: 800; white-space: nowrap; }
.sub > span { display: inline-flex; align-items: center; gap: 0.4vh; padding: 0.25vh 0.9vh; border-radius: 2vh; background: #ffffffeb; color: #13294f; box-shadow: 0 0.2vh 0.6vh #0004; }
.coin i { width: 1.4vh; height: 1.4vh; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffe88f, #e8a21a); box-shadow: 0 0 0 0.1vh #b87a00; }
.chase { width: 26vh; display: grid; grid-template-columns: 1fr auto; gap: 0.15vh 0.6vh; align-items: center; padding: 0.3vh 0.8vh 0.45vh; border-radius: 1.2vh; background: #0d1529c4; }
.chase small { font-size: 1.05vh; font-weight: 800; color: #c9d7e8; letter-spacing: 0.03em; }
.chase b { font-size: 1.2vh; font-weight: 800; grid-row: 1; grid-column: 2; }
.bar { grid-column: 1 / 3; height: 0.7vh; border-radius: 1vh; background: #ffffff22; overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 1vh; background: linear-gradient(90deg, #ff5a5f, #ffc63d 45%, #3fe08a); transition: width 0.2s linear; }
.chase.danger small, .chase.danger b { color: #ff6b6b; animation: blink 0.5s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.35; } }
.keys { padding: 0.2vh 0.8vh; border-radius: 1vh; background: #0d1529a8; color: #ffc63d; font-size: 1.05vh; font-weight: 800; white-space: nowrap; }
.goal { position: absolute; left: 1vh; right: 1vh; bottom: 0.9vh; height: 0.6vh; border-radius: 1vh; background: #ffffff3d; overflow: hidden; }
.goal i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #31e6ff, #3fe08a); }

.mvp { position: absolute; left: 1.2vh; top: 1.2vh; display: flex; flex-direction: column; gap: 0.3vh; max-width: 19vh; font-size: 1.3vh; font-weight: 800; text-shadow: 0 0.1vh 0.4vh #000c; }
.mvp .h { color: #3fe08a; }
.mvp .v { color: #ff8a8a; }
.mvp span:empty { display: none; }

.chips { position: absolute; left: 1.2vh; top: 7vh; display: flex; flex-direction: column; align-items: flex-start; gap: 0.4vh; }
.chips div { padding: 0.3vh 1vh; border-radius: 1.6vh; background: var(--c); font-size: 1.35vh; font-weight: 800; box-shadow: 0 0.3vh 0.8vh #0006; }

.guide { top: 1.2vh; }
.guide div { width: 7.4vh; padding: 0.35vh 0.2vh; background: #0d1529d9; border-color: #ff6b6b66; }
.guide div.good { border-color: #3fe08a88; }
.guide img { width: 3.3vh; height: 3.3vh; }
.guide span { font-size: 1.05vh; color: #e9f3ff; text-align: center; }

/* hediye bildirimi: üstte ortada, sırayla */
.gfeed { position: absolute; left: 0; right: 0; top: 19vh; display: flex; flex-direction: column; align-items: center; gap: 0.6vh; z-index: 3; pointer-events: none; }
.gf { display: flex; align-items: center; gap: 0.9vh; padding: 0.5vh 1.2vh 0.5vh 0.5vh; border-radius: 3vh; background: linear-gradient(90deg, #0d1529f5, #17233ff0); color: #fff; border: 0.2vh solid var(--c); box-shadow: 0 0 1.6vh color-mix(in srgb, var(--c) 55%, transparent), 0 0.5vh 1.2vh #0007; animation: fin 0.32s cubic-bezier(.3, 1.6, .5, 1); }
.gf .av { width: 4.2vh; height: 4.2vh; font-size: 1.9vh; flex: none; box-shadow: 0 0 0 0.2vh var(--c); }
.gf > div:not(.av) { min-width: 0; }
.gf b { display: block; font-size: 1.4vh; line-height: 1.15; font-weight: 800; color: #e9f3ff; white-space: nowrap; }
.gf small { display: block; font: 700 1.85vh/1.15 Fredoka, Outfit, sans-serif; color: var(--c); white-space: nowrap; }
.gf em { font: 700 2.1vh/1 Fredoka, Outfit, sans-serif; color: #ffc63d; font-style: normal; }
.gf em:empty { display: none; }
.gf img { width: 3.6vh; height: 3.6vh; flex: none; object-fit: contain; }
.gf.big small { font-size: 2.1vh; }
.gf.big .av { width: 5vh; height: 5vh; }
.gf.big img { width: 4.4vh; height: 4.4vh; }
@keyframes fin { from { opacity: 0; transform: translateY(-1.6vh) scale(0.8); } }

.tags { position: absolute; inset: 0; overflow: hidden; }
.tag { position: absolute; left: 0; top: 0; padding: 0.25vh 1vh; border-radius: 1.6vh; background: #d7263dd9; font-size: 1.5vh; font-weight: 800; white-space: nowrap; will-change: transform; }

.pop { position: absolute; left: 0; right: 0; top: 40%; text-align: center; font: 700 3.4vh/1 Fredoka, Outfit, sans-serif; color: #ffe14a; text-shadow: 0 0.25vh 0 #7a4b00, 0 0 1.4vh #000a; opacity: 0; }
.pop.on { animation: pop 1s ease-out; }
@keyframes pop { 0% { opacity: 0; transform: scale(0.6); } 15% { opacity: 1; transform: scale(1.1); } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-5vh); } }

.whiteout { position: absolute; inset: 0; background: #fff; opacity: 0; }
.whiteout.on { animation: fl 0.8s ease-out; }
@keyframes fl { 0% { opacity: 1; } 100% { opacity: 0; } }

.banner { position: absolute; left: 0; right: 0; top: 34%; display: flex; flex-direction: column; align-items: center; text-align: center; animation: bn 0.4s cubic-bezier(.3, 1.7, .5, 1); --c: #ff6b5e; }
.banner b { font: 700 5vh/1.1 Fredoka, Outfit, sans-serif; color: #fff; padding: 0.5vh 2.6vh; border-radius: 3vh; background: var(--c); box-shadow: 0 0.6vh 0 #00285040; transform: rotate(-3deg); }
.banner span { margin-top: 1vh; font-size: 2vh; font-weight: 800; text-shadow: 0 0.15vh 0.5vh #000; }
.banner span:empty { display: none; }
@keyframes bn { from { opacity: 0; transform: scale(0.5); } }

.load { position: absolute; inset: 0; display: grid; place-items: center; background: #0b2740; transition: opacity 0.5s; }
.load i { width: 5vh; height: 5vh; border-radius: 50%; border: 0.6vh solid #ffffff88; border-top-color: #31e6ff; animation: spin 0.9s linear infinite; }
.load.done { opacity: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
.credit { position: absolute; right: 1vh; bottom: 0.4vh; font-size: 1vh; font-weight: 600; color: #ffffffa0; }

/* dikey ekran: bildirimler hediye listesine binmesin */
@media (max-aspect-ratio: 3/4) {
  .gfeed { right: 9.4vh; }
}

/* taraftar çubuğu: beğeni ve yorumla dolar, dolunca mıknatıs */
.cheer { width: 26vh; display: grid; grid-template-columns: auto 1fr; gap: 0.6vh; align-items: center; padding: 0.25vh 0.8vh; border-radius: 1.2vh; background: #0d1529a8; }
.cheer small { font-size: 0.95vh; font-weight: 800; color: #ff9ab0; letter-spacing: 0.05em; }
.cheer .bar { grid-column: 2; height: 0.6vh; }
.cheer .bar i { background: linear-gradient(90deg, #ff5f8f, #ff9ab0); }

/* koşu özeti: yakalanınca ortada kart */
.sum { position: absolute; left: 50%; bottom: 9vh; transform: translateX(-50%); width: min(44vh, 92vw); padding: 2vh 2.2vh 1.8vh; border-radius: 2.4vh; background: linear-gradient(180deg, #13214aee, #0d1529f2); border: 0.3vh solid #ffc63d; box-shadow: 0 0 3vh #ffc63d55, 0 1vh 3vh #000a; display: flex; flex-direction: column; align-items: center; gap: 0.9vh; text-align: center; z-index: 4; }
.sum.on { animation: sumIn 0.45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes sumIn { from { opacity: 0; transform: translateX(-50%) translateY(4vh) scale(0.8); } }
.sum .st { font: 700 2.4vh/1 Fredoka, Outfit, sans-serif; letter-spacing: 0.1em; color: #ff8a8a; }
.sum .sm { font: 700 7vh/1 Fredoka, Outfit, sans-serif; color: #fff; text-shadow: 0 0.4vh 0 #13294f; }
.sum .srow { display: flex; gap: 0.8vh; }
.sum .srow > span { display: inline-flex; align-items: center; gap: 0.5vh; padding: 0.35vh 1.1vh; border-radius: 2vh; background: #ffffffeb; color: #13294f; font-size: 1.6vh; font-weight: 800; }
.sum .sr.rec { background: #b57bff; color: #fff; animation: blink 0.6s steps(2) infinite; }
.sum .sg { font-size: 1.7vh; font-weight: 800; color: #3fe08a; }
.sum .sg:empty, .sum .sw:empty { display: none; }
.sum .sp { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 0.8vh; }
.sum .sp > div { padding: 0.7vh; border-radius: 1.2vh; background: #ffffff12; display: flex; flex-direction: column; gap: 0.3vh; min-width: 0; }
.sum .sp small { font-size: 1.1vh; font-weight: 800; color: #c9d7e8; }
.sum .sp b { font-size: 1.55vh; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sum .h b { color: #3fe08a; }
.sum .v b { color: #ff8a8a; }
.sum .sw { font-size: 1.5vh; font-weight: 800; color: #ffc63d; }
.sum .sn { font-size: 1.3vh; font-weight: 700; color: #c9d7e8; }

/* yatay ekranda özet kartı sağda, sahne solda görünsün */
@media (min-aspect-ratio: 4/3) { .sum { left: auto; right: 12vh; bottom: auto; top: 24vh; transform: none; } @keyframes sumIn { from { opacity: 0; transform: translateY(4vh) scale(0.8); } } }