/* LIVEXO oyun kiti: yeni oyunların ortak ekran parçaları. Dikey (9:16) yayına göre; ölçüler ekran yüksekliğine (vh) bağlı. */
:root {
  --gold: #ffc94a;
  --brand: linear-gradient(120deg, #a98bff 0%, #6c7dff 50%, #38d5f5 100%);
  --panel: #0b0d14cc;
}
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; font-family: "Outfit", system-ui, sans-serif; color: #fff; }
canvas#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hud { position: fixed; inset: 0; pointer-events: none; }

/* profil fotoğrafı; yoksa adın baş harfi */
.av { position: relative; flex: none; display: inline-grid; place-items: center; width: 3vh; height: 3vh; border-radius: 50%; overflow: hidden; background: var(--brand); font-size: 1.5vh; font-weight: 900; }
.av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* sağ: hangi hediye ne yapar */
.guide { position: absolute; right: 1.4vh; top: 24vh; display: flex; flex-direction: column; gap: 0.8vh; }
.guide div { display: flex; flex-direction: column; align-items: center; width: 8.4vh; padding: 0.6vh 0.4vh; border-radius: 1.6vh; background: var(--panel); border: 0.25vh solid #ffffff1f; text-align: center; }
.guide img { width: 4.4vh; height: 4.4vh; object-fit: contain; }
.guide i { font-style: normal; font-size: 3.2vh; line-height: 4.4vh; }
.guide span { font-size: 1.3vh; font-weight: 800; line-height: 1.15; }
.guide div.flash { animation: flash 0.6s ease-out; }
@keyframes flash { 40% { transform: scale(1.18); border-color: var(--gold); box-shadow: 0 0 3vh var(--gold); } }

/* son olaylar: AI sunucunun altyazısıyla çakışmasın diye ekranın alt çeyreğinin üstünde */
.feed { position: absolute; left: 1.6vh; bottom: 24vh; display: flex; flex-direction: column; gap: 0.6vh; }
.feed div { display: flex; align-items: center; gap: 0.8vh; padding: 0.5vh 1.4vh 0.5vh 0.5vh; border-radius: 2.4vh; background: var(--panel); font-size: 1.8vh; font-weight: 800; animation: feedin 0.3s ease-out; width: max-content; max-width: 44vh; }
.feed div b { color: var(--gold); white-space: nowrap; }
.feed div.old { opacity: 0.55; }
@keyframes feedin { from { opacity: 0; transform: translateX(-3vh); } }

.panel { padding: 0.9vh; border-radius: 1.8vh; background: var(--panel); border: 0.25vh solid #ffffff1f; }
.panel h4 { margin: 0 0 0.6vh; padding: 0 0.4vh; font-size: 1.45vh; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gold); }
.panel ol { margin: 0; padding: 0; list-style: none; }
.panel li { display: flex; align-items: center; gap: 0.7vh; padding: 0.35vh 0.4vh; font-size: 1.6vh; font-weight: 800; }
.panel li .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel li .amt { color: var(--gold); font-variant-numeric: tabular-nums; }
.panel li.empty { color: #ffffffb3; font-weight: 600; font-size: 1.4vh; }

.demo { position: fixed; left: 50%; bottom: 1.2vh; transform: translateX(-50%); z-index: 9; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; width: 96%; }
.demo button { padding: 7px 11px; border: 0; border-radius: 10px; background: #fff; color: #111; font: 800 13px "Outfit", system-ui, sans-serif; cursor: pointer; box-shadow: 0 2px 8px #0004; }

.credit { position: absolute; right: 1vh; bottom: 0.6vh; font-size: 1.1vh; font-weight: 600; color: #ffffff99; text-shadow: 0 0.1vh 0.3vh #0008; }