/* Gökyüzü Merdiveni ekranı: dikey ve yatay yayın; ölçüler ekran yüksekliğine (vh) bağlı. */
body { background: #bcdcf2; }
.box { position: absolute; top: 1.6vh; padding: 0.7vh 1.3vh; border-radius: 1.3vh; background: #ffffffe6; color: #1c2a4a; border: 0.2vh solid #f2c14e; box-shadow: 0 0.6vh 1.6vh #1c2a4a33; font-size: 1.3vh; font-weight: 800; }
.box.left { left: 1.4vh; }
.box.left b { display: block; font: 900 2.9vh/1.05 "Fraunces", Georgia, serif; }
.box.left span { display: block; font-size: 1.15vh; letter-spacing: 0.06em; color: #a06d12; }
.box.right { right: 1.4vh; text-align: right; }
.box.right small { display: block; font-size: 1.2vh; letter-spacing: 0.04em; }
.box.right b { font: 900 3.2vh/1 "Fraunces", Georgia, serif; }

.score { position: absolute; left: 50%; top: 2vh; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; text-align: center; }
.score small { font-size: 1.6vh; font-weight: 900; letter-spacing: 0.34em; color: #fff; text-shadow: 0 0.15vh 0.5vh #0b1c3acc; }
.score > b { font: 900 9.4vh/1 "Fraunces", Georgia, serif; background: linear-gradient(180deg, #fff3b0, #f2b02e 70%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0.25vh 0 #8a5a10) drop-shadow(0 0.6vh 1.2vh #1c2a4a55); }
.score.hurt > b { animation: hurt 0.5s; }
.score.heal > b { animation: heal 0.5s; }
@keyframes hurt { 20% { transform: translateX(-1vh) scale(0.9); filter: drop-shadow(0 0 1.6vh #ff3b3b); } 60% { transform: translateX(1vh); } }
@keyframes heal { 30% { transform: scale(1.2); filter: drop-shadow(0 0 1.6vh #4fe08a); } }
.pills { display: flex; gap: 0.7vh; margin-top: 0.3vh; }
.pills span { padding: 0.25vh 1vh; border-radius: 1.6vh; background: #ffffffe6; color: #1c2a4a; border: 0.15vh solid #f2c14e; font-size: 1.3vh; font-weight: 800; white-space: nowrap; }

.chips { position: absolute; left: 50%; top: 18.4vh; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.4vh; }
.chips span { padding: 0.25vh 1.1vh; border-radius: 1.4vh; background: #0b1c3ad0; border: 0.18vh solid; font-size: 1.4vh; font-weight: 800; white-space: nowrap; }

.guide.side { top: 24vh; gap: 0.8vh; }
.guide.side.l { left: 1vh; right: auto; }
.guide.side.r { right: 1vh; }
.guide.side div { width: 9vh; padding: 0.5vh 0.2vh; background: #ffffffe0; }
.guide.side.l div { border-color: #4fbf7a; }
.guide.side.r div { border-color: #e8606a; }
.guide.side img { width: 4vh; height: 4vh; }
.guide.side span { font-size: 1.18vh; color: #1c2a4a; text-align: center; }

.dmgs { position: absolute; left: 50%; top: 56%; }
.dmg { position: absolute; left: 0; top: 0; transform: translateX(-50%); font: 900 7vh/1 "Fraunces", Georgia, serif; -webkit-text-stroke: 0.3vh #fff; paint-order: stroke fill; animation: dmg 1.1s ease-out forwards; }
.dmg.bad { color: #e5304a; }
.dmg.good { color: #18a860; }
@keyframes dmg { from { opacity: 0; transform: translate(-50%, 2vh) scale(0.7); } 20% { opacity: 1; transform: translate(-50%, 0) scale(1.1); } to { opacity: 0; transform: translate(-50%, -9vh); } }

.streak { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; opacity: 0; }
.streak.on { animation: str 1.7s ease-out; }
.streak b { font: 900 4.2vh/1.1 "Fraunces", Georgia, serif; color: #f2a81e; -webkit-text-stroke: 0.2vh #fff; paint-order: stroke fill; white-space: nowrap; }
.streak span { padding: 0.2vh 1vh; border-radius: 1vh; background: #fffe; color: #1c2a4a; font-size: 1.7vh; font-weight: 800; }
@keyframes str { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }

.banner { position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; width: 96%; text-align: center; animation: bn 0.42s cubic-bezier(.2, 1.5, .4, 1); --c: #ffb020; }
.banner b { font: 900 6.2vh/1.05 "Fraunces", Georgia, serif; color: var(--c); -webkit-text-stroke: 0.35vh #fff; paint-order: stroke fill; text-shadow: 0 0.6vh 2.4vh #1c2a4a88; }
.banner span { margin-top: 0.6vh; padding: 0.25vh 1.4vh; border-radius: 1vh; background: #0b1c3ae6; font-size: 2vh; font-weight: 900; }
.banner span:empty { display: none; }
@keyframes bn { from { opacity: 0; transform: translate(-50%, -50%) scale(1.9); } }

.sta { position: absolute; left: 50%; bottom: 5.6vh; transform: translateX(-50%); width: min(36vh, 66%); display: flex; flex-direction: column; align-items: center; gap: 0.2vh; }
.sta small { font-size: 1.1vh; font-weight: 900; letter-spacing: 0.2em; color: #fff; text-shadow: 0 0.1vh 0.4vh #0b1c3acc; }
.sta i { display: block; width: 100%; height: 1vh; border-radius: 1vh; background: #1c2a4a55; overflow: hidden; }
.sta em { display: block; height: 100%; border-radius: 1vh; background: linear-gradient(90deg, #4fe0c0, #9ff0d0); }
.sta.low em { background: linear-gradient(90deg, #ff4f6d, #ffb02e); }
.prog { position: absolute; left: 4%; right: 4%; bottom: 2.4vh; height: 1.1vh; border-radius: 1vh; background: #1c2a4a44; overflow: hidden; }
.prog em { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #4f8cff, #ffd23f); transition: width 0.3s; }

.result { position: absolute; inset: 0; display: grid; place-items: center; background: #0b1c3a88; }
.result > div { min-width: 34vh; max-width: 90%; padding: 2.4vh 3vh; border-radius: 2vh; background: #fffffff2; color: #1c2a4a; border: 0.3vh solid #f2c14e; text-align: center; animation: bn 0.45s cubic-bezier(.2, 1.5, .4, 1); }
.result h3 { margin: 0 0 1vh; font: 900 4vh/1.1 "Fraunces", Georgia, serif; color: #c98a10; }
.result p { margin: 0.5vh 0; font-size: 1.9vh; font-weight: 700; }
.load { position: absolute; inset: 0; display: grid; place-items: center; background: #bcdcf2; transition: opacity 0.5s; }
.load i { width: 5vh; height: 5vh; border-radius: 50%; border: 0.6vh solid #ffffff88; border-top-color: #1c2a4a; 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; }

/* yayıncı modu ipucu ve takip/beğeni satırı */
.hint { position: absolute; left: 50%; bottom: 9vh; transform: translateX(-50%); padding: 0.5vh 1.4vh; border-radius: 1.4vh; background: #0b1c3ad0; color: #fff; font-size: 1.45vh; font-weight: 800; white-space: nowrap; }
.extra { position: absolute; left: 1vh; top: calc(24vh + 2 * 9.6vh); width: 9vh; padding: 0.5vh 0.3vh; border-radius: 1vh; background: #ffffffd8; border: 0.18vh solid #4fbf7a; color: #1c2a4a; font-size: 1.1vh; font-weight: 800; text-align: center; line-height: 1.35; }
/* tur sonu: kazanan rengi */
.result > div.win { border-color: #f2c14e; box-shadow: 0 0 6vh #ffd35c99; }
.result > div.win h3 { color: #d08a00; }
.result > div.lose { border-color: #e8606a; }
.result > div.lose h3 { color: #d63a5e; }
.result .nb { color: #18a860; }
.result .score2 { margin-top: 1.2vh; padding-top: 1vh; border-top: 0.15vh solid #1c2a4a22; font-size: 1.6vh; color: #5a6680; }
/* dikey ekran: büyük sayı ileride görünen kapıyı ve numaraları kapatmasın */
@media (max-aspect-ratio: 3/4) {
  .score > b { font-size: 7vh; }
  .chips { top: 15.4vh; }
}
/* sonuç kartı üstte: sevinen kahraman ve açılan kapı altta görünsün */
.result { place-items: start center; padding-top: 18vh; background: linear-gradient(#0b1c3a88, #0b1c3a22 60%, transparent); }