/* Deniz Çarpışması ekranı: lunapark renkleri; dikey ve yatay yayın, ölçüler ekran yüksekliğine (vh) bağlı. */
body { background: #0b2740; }

.top { position: absolute; left: 0; right: 0; top: 1.4vh; display: flex; flex-direction: column; align-items: center; gap: 0.6vh; }
.round { display: flex; align-items: center; gap: 1vh; padding: 0.5vh 1.8vh; border-radius: 3vh; background: linear-gradient(#17233f, #0d1529); border: 0.22vh solid #31e6ff; box-shadow: 0 0 1.4vh #31e6ff66, 0 0.8vh 1.8vh #00285066; }
.round small { font: 700 1.7vh/1 Fredoka, Outfit, sans-serif; letter-spacing: 0.04em; color: #fff; }
.round em { font: 700 2vh/1 Fredoka, Outfit, sans-serif; color: #ffc63d; font-style: normal; }
.round b { font: 700 3vh/1 Fredoka, Outfit, sans-serif; color: #fff; min-width: 4.4vh; text-align: center; padding: 0.15vh 0.8vh; border-radius: 1.4vh; background: #ffffff18; }
.howto { padding: 0.35vh 1.4vh; border-radius: 2vh; background: #0d1529d9; color: #e9f3ff; font-size: 1.4vh; font-weight: 800; white-space: nowrap; box-shadow: 0 0.3vh 0 #00285030; }
.keys { padding: 0.3vh 1.3vh; border-radius: 2vh; background: #0d1529d9; color: #ffc63d; font-size: 1.4vh; font-weight: 800; white-space: nowrap; }

.roster { position: absolute; left: 1vh; top: 13vh; width: 21vh; padding: 0.6vh; background: #0d1529d9; color: #e9f3ff; border: 0.15vh solid #ffffff2e; box-shadow: 0 0.4vh 1.2vh #0006; }
.roster h4 { color: #31e6ff; font: 700 1.5vh/1.2 Fredoka, Outfit, sans-serif; }
.roster li { gap: 0.5vh; padding: 0.2vh 0.3vh; font-size: 1.32vh; border-left: 0.4vh solid var(--c, transparent); border-radius: 0.5vh; color: #e9f3ff; }
.roster li.me { background: #ffc63d33; }
.roster .av { width: 2.3vh; height: 2.3vh; font-size: 1vh; }
.roster .amt { color: #ffc63d; font-weight: 900; }

.guide { top: 13vh; }
.guide div { width: 7.4vh; padding: 0.35vh 0.2vh; background: #0d1529d9; border-color: #ffffff2e; }
.guide img { width: 3.3vh; height: 3.3vh; }
.guide span { font-size: 1.08vh; color: #e9f3ff; text-align: center; }

/* hediye bildirimi: üstte ortada, sırayla */
.gfeed { position: absolute; left: 0; right: 0; top: 11vh; 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.4vh; height: 4.4vh; 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.45vh; line-height: 1.15; font-weight: 800; color: #e9f3ff; white-space: nowrap; }
.gf small { display: block; font: 700 2vh/1.15 Fredoka, Outfit, sans-serif; color: var(--c); white-space: nowrap; }
.gf em { font: 700 2.2vh/1 Fredoka, Outfit, sans-serif; color: #ffc63d; font-style: normal; }
.gf em:empty { display: none; }
.gf img { width: 4vh; height: 4vh; flex: none; object-fit: contain; }
.gf.big { padding: 0.7vh 1.6vh 0.7vh 0.7vh; }
.gf.big .av { width: 5.6vh; height: 5.6vh; }
.gf.big small { font-size: 2.5vh; }
.gf.big img { width: 5vh; height: 5vh; }
@media (max-aspect-ratio: 3/4) { .gfeed { left: 22vh; right: 8.8vh; align-items: center; } }
@keyframes fin { from { opacity: 0; transform: translateY(-1.6vh) scale(0.8); } }

.ko { position: absolute; left: 1vh; top: 40vh; display: flex; flex-direction: column; align-items: flex-start; gap: 0.3vh; }
.ko div { padding: 0.15vh 1vh; border-radius: 1.6vh; background: #0d1529cc; font-size: 1.35vh; font-weight: 800; animation: fin2 0.3s ease; }
@keyframes fin2 { from { opacity: 0; transform: scale(0.8); } }

.tags { position: absolute; inset: 0; overflow: hidden; }
.tag { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; white-space: nowrap; will-change: transform; }
.tag .av { width: 4.2vh; height: 4.2vh; font-size: 1.9vh; box-shadow: 0 0 0 0.28vh #fff, 0 0 0 0.55vh var(--c); }
.tag span { margin-top: 0.5vh; font: 700 1.4vh/1 Fredoka, Outfit, sans-serif; color: #fff; text-shadow: 0.1vh 0.1vh 0 #1c3a5e, -0.1vh 0.1vh 0 #1c3a5e, 0.1vh -0.1vh 0 #1c3a5e, -0.1vh -0.1vh 0 #1c3a5e; }
.tag.host .av { width: 5.4vh; height: 5.4vh; }
.tag.host span { color: #ffe14a; font-size: 1.7vh; }
.tag.bot { opacity: 0.85; }
.tag.bot span { font-size: 1.15vh; }

.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); } }

.win { position: absolute; inset: 0; display: grid; place-items: center; background: repeating-conic-gradient(from 0deg at 50% 42%, #0d1529c0 0 10deg, #20113fc0 10deg 20deg); animation: wi 0.5s ease; --c: #ff4fd8; }
.win[hidden] { display: none; }
@keyframes wi { from { opacity: 0; } }
.win > div { display: flex; flex-direction: column; align-items: center; text-align: center; }
.win i { display: grid; place-items: center; width: 18vh; height: 18vh; margin-bottom: 1.6vh; border-radius: 50%; overflow: hidden; background: var(--c); box-shadow: 0 0 0 0.8vh #ffe14a, 0 0 4vh var(--c); font-style: normal; font-size: 9vh; }
.win i .av { width: 100%; height: 100%; font-size: 8vh; }
.win small { font: 700 2.6vh/1.1 Fredoka, Outfit, sans-serif; text-shadow: 0 0.2vh 0 #e8a21a; }
.win b { margin-top: 0.8vh; padding: 0.3vh 2vh; border-radius: 2.6vh; background: #fff; color: #1c3a5e; font: 700 4.2vh/1.1 Fredoka, Outfit, sans-serif; box-shadow: 0 0.4vh 0 var(--c); }
.win span { margin-top: 1.2vh; font-size: 1.9vh; font-weight: 800; text-shadow: 0 0.15vh 0.3vh #0008; }

.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; }

/* beğeni hedefi: dolunca piste plaj topları yağar */
.likes { position: relative; display: flex; align-items: center; gap: 0.6vh; padding: 0.25vh 1.2vh 0.25vh 0.8vh; border-radius: 2vh; background: #0d1529d9; color: #ffd6e4; font-size: 1.3vh; font-weight: 800; overflow: hidden; }
.likes::after { content: ""; position: absolute; left: 0; bottom: 0; height: 0.3vh; width: var(--p, 0%); background: #ff4f8b; transition: width 0.3s; }
.likes i { font-style: normal; color: #ff4f8b; font-size: 1.5vh; }
.likes i::before { content: "\2764"; }
.roster li.more { justify-content: center; border-left-color: transparent; color: #9fb4cf; font-size: 1.2vh; }
.gf i { display: block; font-style: normal; font-size: 1.2vh; font-weight: 800; color: #ffc63d; }
.gfeed { top: 13.4vh; }

/* kazanan ekranı: kart üstte, arabası ve tacı altta görünür */
.win { place-items: start center; padding-top: 14vh; background: radial-gradient(ellipse at 50% 30%, #20113f99, #0d152955 60%, #0000 80%); }
.win i { width: 13vh; height: 13vh; font-size: 6.5vh; margin-bottom: 1.2vh; }
.win .topT { margin-top: 1.6vh; font: 700 1.5vh/1 Fredoka, Outfit, sans-serif; color: #ffc63d; text-shadow: none; letter-spacing: 0.06em; }
.win .topT:empty { display: none; }
.win .top3 { margin: 0.6vh 0 0; padding: 0.5vh 1.4vh; list-style: none; border-radius: 1.4vh; background: #0d1529d9; }
.win .top3:empty { display: none; }
.win .top3 li { font-size: 1.5vh; font-weight: 800; line-height: 1.6; color: #e9f3ff; }

/* dikey (TikTok) ekran: paneller dar, pist ekranın ortasında */
@media (max-aspect-ratio: 3/4) {
  .howto { white-space: normal; max-width: 92vw; text-align: center; font-size: 1.25vh; }
  .roster { width: 17vh; top: 14.5vh; padding: 0.4vh; }
  .roster li { font-size: 1.15vh; padding: 0.1vh 0.3vh; }
  .roster .av { width: 1.9vh; height: 1.9vh; }
  .guide { top: 14.5vh; gap: 0.5vh; }
  .guide div { width: 6.2vh; padding: 0.25vh 0.15vh; }
  .guide img { width: 2.8vh; height: 2.8vh; }
  .guide span { font-size: 0.95vh; }
  .gfeed { top: 14.5vh; left: 18.5vh; right: 7.4vh; }
  .ko { top: auto; bottom: 14vh; }
  .win { padding-top: 16vh; }
}