/* Ubuntu yazı tipi (Ubuntu Font Licence 1.0, fonts/UBUNTU-FONT-LICENCE.txt). [agarvi ölçümü] agarvi yalnız Ubuntu Bold yüklüyor;
   "30px Ubuntu" gibi normal istekler de bu dosyayla (kalın) çiziliyor — aynısı: her kalınlık Bold dosyası */
@font-face { font-family: 'Ubuntu'; src: url('../fonts/Ubuntu-Bold.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #111; }
body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; color: #333; -webkit-tap-highlight-color: transparent; }
body:not(.dark) { background: #f2fbff; }
canvas#canvas { position: fixed; inset: 0; display: block; cursor: default; }
.hidden { display: none !important; }
.invisible { visibility: hidden !important; }
a { color: #337ab7; text-decoration: none; cursor: pointer; }
a:hover { text-decoration: underline; color: #23527c; }
.red { color: #e00 !important; }

/* ─── HUD ─── */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; color: #fff; font-weight: 400; font-family: 'Ubuntu', Arial, sans-serif; }   /* [agarvi] ekrandaki tüm yazılar Ubuntu, normal */
#hud a, #hud button, #hud input, #hud label, #hud img, #chatBar, #emojiPop, #touchBtns, #replayBar, #minimap { pointer-events: auto; }
/* [ölçüm] agarz göstergelerinde gölge yok; yalnızca açık temada/izleme kutusunda */
.txt-sh, #specInfo, #owner { text-shadow: 0 0 3px #000, 1px 1px 2px #000; }
body:not(.dark) #leftHud, body:not(.dark) #leaderboard, body:not(.dark) #stats { color: #222; text-shadow: none; }

/* [ölçüm] agarz FFA-42: başlık mavi (#00f) gri kutuda (#626262), altında son haykırış sarı, sonra yeşil (#0f0) duyurular */
#topCenter { position: absolute; top: 0; left: 50%; transform: translateX(-50%); text-align: center; width: 96vw; }
/* [agarvi ölçümü, 983 px ekran] üst orta: başlık 30px mavi (#0000ff), altında son haykırış 30px sarı; ikisi de #dddddd %40 kutuda,
   kutu = yazı + 4 px, 34 px yüksek; KAZANAN (baseline 90) ve REKOR (baseline 120) 25px #00ff00 kutusuz, ortalı */
#roomTitle, #shoutLine { display: inline-block; font: 400 30px 'Ubuntu', Arial, sans-serif; background: rgba(221, 221, 221, .4); padding: 2px 2px 0; line-height: 32px; height: 34px; }
#roomTitle { color: #0000ff; }
#shoutLine { color: #ffff00; margin-top: 0; max-width: 70vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#topCenter > div:not(#announce) { margin-left: auto; margin-right: auto; }
#shoutLine:not(.hidden) { display: table; }
#announce { position: absolute; top: 66px; left: 0; right: 0; font: 400 25px/30px 'Ubuntu', Arial, sans-serif; color: #00ff00; }
#announce div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#announce .win { color: #00ff00; }
#announce .record { color: #00ff00; }
#announce .rec { color: #00ff00; }
#announce .kill { color: #ff0; }
#announce .kill .kn { color: #fff; }
#announce .admin { color: #0f0; font-size: 25px; line-height: 34px; margin-top: 16px; }
#announce .shout { color: #ff0; }

/* [ölçüm] sol üst: #cfcfcf 17 px Ubuntu kalın, 100×100 gri minimap, "x , y paylaş" #aaa, Hesap No beyaz,
   Gold (#ff0) / Ödül (#fff000) 30 px — Gold kutusu hep aynı yükseklikte (misafirde Gold satırı boş kalır) */
#leftHud { position: absolute; top: 4px; left: 10px; font-size: 18px; line-height: 18px; color: rgba(255, 255, 255, .8); font-weight: 400; }   /* [agarvi] Skor/Maks./Parçalar 18px Ubuntu normal, beyaz %80 */
#leftHud b { font-weight: 400; }
/* [agarvi] minimap: (10,60) 100×100 #dddddd %40; "x , y paylaş" 16px #aaaaaa baseline 175; Hesap No 20px baseline 200; Gold/Ödül 30px baseline 270/300 */
#minimap { display: block; width: 100px; height: 100px; margin: 2px 0 1px; background: transparent; opacity: 0; cursor: pointer; }   /* kare oyun tuvaline çizilir */
#sector { color: #aaaaaa; font-size: 16px; line-height: 16px; }
#shareBtn { color: #aaa; }
#shareBtn:hover { color: #fff; }
#hAcc { font-size: 20px; color: #fff; margin-top: 6px; line-height: 20px; }
#goldBox { position: absolute; top: 240px; left: 0; white-space: nowrap; }
#hGold, #hReward { font-size: 30px; color: #ffff00; line-height: 30px; font-weight: 400; }   /* [agarvi] 30px Ubuntu normal; Gold #ffff00, Ödül #fff000 */
#hReward { color: #fff000; }
#hReward { color: #fff000; }

/* [G] MEKAN SAHİBİ: taç + büyük isim, sol üstte minimapin üzerinde (FFA-12 görüntüsü) */
#owner { position: absolute; top: 20px; left: 8px; text-align: left; z-index: 1; }
#owner .crown { display: flex; align-items: center; gap: 2px; font-size: 10px; color: #ffcc33; letter-spacing: .5px; }
#owner .crown span { background: #7a1f1f; color: #ffd54f; padding: 1px 4px; border-radius: 2px; text-shadow: none; }
#ownerName { font-family: Georgia, 'Times New Roman', serif; font-size: 52px; line-height: 56px; color: #d6d6ff; text-shadow: 0 0 6px #5a5aff, 0 0 2px #000; margin-top: -4px; white-space: nowrap; }

/* [ölçüm] skor tablosu: koyu kutu (rgba 0,0,0,.3), ortalı 17 px kalın; üstte önceki kazanan sarı, kendi adın pembe (#faa) */
/* [agarvi ölçümü] skor tablosu: sağ üst 208 px, siyah %30, yükseklik 64 + 19,2·n; başlık (son kazanan) 16px #ffff00 baseline 32,
   satırlar 16px beyaz, ilki baseline 64, aralık 19,2 px, ortalı */
#leaderboard { position: absolute; top: 0; right: 0; width: 208px; padding: 16.5px 4px 15.5px; background: rgba(0, 0, 0, .3); font-size: 16px; line-height: 19.2px; text-align: center; color: #fff; }
#lbTitle { text-align: center; font-size: 16px; color: #ffff00; margin-bottom: 12.8px; min-height: 19.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#lbList div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; }
#lbList .me { color: #ff0000; }
#lbList .clan { color: #33ff33; }
#lbList .team { color: #ffff00; }
#lbList .prem { color: #ffd700; }
body:not(.dark) #lbTitle { color: #111; }

#stats { position: absolute; right: 10px; bottom: 44px; text-align: right; font-size: 16px; line-height: 16px; color: rgba(255, 255, 255, .8); }   /* [agarvi] sağ alt 16px beyaz %80, sağa 10 px */

#macroBadge { position: absolute; left: 8px; bottom: 54px; background: rgba(0, 0, 0, .6); color: #ff0; font: 700 12px monospace; padding: 4px 8px; border-radius: 4px; pointer-events: none; z-index: 5; }
#specInfo { position: absolute; bottom: 52px; left: 50%; transform: translateX(-50%); font-size: 14px; background: rgba(0, 0, 0, .35); padding: 3px 10px; border-radius: 4px; }
#voiceInfo { position: absolute; bottom: 52px; left: 300px; font-size: 12px; color: #0f0; }

/* ─── SOHBET ─── */
/* [ölçüm] sohbet: Arial 16 px, 20 px satır, her satır siyah zemin üzerinde; isim sarı, mesaj beyaz; kalın camgöbeği satırlar */
#chatCanvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
#chatBox { display: none !important; position: absolute; left: 10px; bottom: 50px; width: 900px; max-width: 70vw; max-height: 320px; overflow: hidden; font: 400 18px/20px Arial, Helvetica, sans-serif; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; }
/* [agarvi ölçümü] sohbet: 18px Arial, 20px satır, zeminsiz; [SİSTEM] ve oda adı kırmızı (oda adı kalın); hesap no italik 12px #ddd;
   normal mesaj beyaz; haykırış: isim kalın sarı, mesaj kalın #2ad4ff */
#chatBox .ln { padding: 0 1px; text-shadow: none; background: #000; }   /* [agarvi] her yazının arkası siyah */
#chatBox .ln.sh .nm { color: #ffff00; font-weight: 700; }
#chatBox .ln.sh .msg { color: #2ad4ff; font-weight: 700; }
#chatBox .nm { color: #ff0; }
#chatBox .room { color: #f00; font-weight: 700; }
#chatBox .acc { font-style: italic; font-size: 12px; color: #dddddd; }
#chatBox .systag { color: #ff0000; }
#chatBox .msg, #chatBox .sys { color: #fff; }
#chatBox .ln.pr { font-weight: 700; }
#chatBox .ln.pr .msg { color: #18d8eb; font-weight: 700; }
#chatBox.open { overflow-y: auto; background: rgba(0, 0, 0, .3); pointer-events: auto; }
#chatBox .ln { word-wrap: break-word; transition: opacity 1s; }
#chatBox .ln.old { opacity: 0; }
#chatBox.open .ln.old { opacity: 1; }
#chatBox .nm { cursor: pointer; }
#chatBox .tag { font-size: 11px; padding: 0 3px; border-radius: 2px; margin-right: 2px; }
#chatBox .t-team { background: #00838f; }
#chatBox .t-clan { background: #2e7d32; }
#chatBox .t-shout { background: #c62828; }
#chatBox .t-adm { background: #b71c1c; }
#chatBox .sys { color: #fff; }
#chatBox .systag { color: #f00; font-weight: 400; }
#chatBox .acc { color: #ddd; font-size: 12px; font-style: italic; font-weight: 400; margin-left: 1px; }
#chatBox .star { color: #ffd700; }
#chatBox .msg { color: #3ad3f2; }
body:not(.dark) #chatBox .msg { color: #3ad3f2; }

/* [agarvi ölçümü] sohbet çubuğu: solda ve altta 8 px, 32 px yükseklik, zeminsiz. Sil 32×32, yazı kutusu 8 px sonra 300×30
   (rgba(0,0,0,.2), beyaz 14px, 0 6px boşluk), ❓ ve 😊 30×30, aç/kapa 48×48 (4 px sonra), seçenekler 13px beyaz (6 px sonra),
   Şikayet Et 8 px sonra: tarayıcının kendi düğmesi, kalın 14px kırmızı, 0 4px boşluk, 24 px */
#chatBar { position: fixed; left: 8px; bottom: 8px; height: 32px; display: flex; align-items: center; gap: 0; padding: 0; font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif; flex-wrap: nowrap; background: transparent; }
#chatClear { width: 32px; height: 32px; cursor: pointer; display: block; }
#chatInput { margin-left: 8px; width: 300px; flex: 0 0 300px; height: 30px; background: rgba(0, 0, 0, .2); border: none; border-radius: 0; color: #fff; font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif; outline: none; padding: 0 6px; }
#chatInput::placeholder { color: #757575; }
body:not(.dark) #chatInput { color: #000; }
#chatHelp, #chatEmoji { display: inline-block; width: 30px; height: 30px; font-size: 18px; line-height: 30px; text-align: center; color: #333; text-decoration: none !important; cursor: pointer; }
.toggle { display: inline-block; width: 48px; height: 48px; margin: -8px 0 -8px 4px; cursor: pointer; flex-shrink: 0; }
.toggle svg { display: block; }
.toggle .tg-bg { fill: #9e9e9e; stroke: #616161; stroke-width: 1.5; }
.toggle .tg-knob { fill: #fff; stroke: #757575; stroke-width: 1; transition: transform .15s; }
.toggle.on .tg-bg { fill: #4caf50; stroke: #2e7d32; }
.toggle.on .tg-knob { transform: translateX(18px); }
#chatMenu { margin-left: 6px; font: 13px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #fff; }
#chatBar .cb { display: inline-flex; align-items: center; white-space: nowrap; cursor: pointer; color: #fff; font-weight: 400; }
body:not(.dark) #chatBar .cb { color: #222; }
#chatBar .cb input { margin: 0 3px 0 0; }
#micBtn { height: 24px; padding: 0 5px; font: 700 13px "Helvetica Neue", Helvetica, Arial, sans-serif; cursor: pointer; white-space: nowrap; }
#reportBtn { margin-left: 8px; height: 24px; padding: 0 4px; font: 700 14px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #ff0000; cursor: pointer; white-space: nowrap; }
/* [agarvi ölçümü] açılır kutular: çubuğun 38 px üstünde, rgba(0,0,0,.85), 8px 10px, 13px beyaz; emoji 20px */
#emojiPop { position: fixed; bottom: 46px; left: 48px; width: 300px; background: rgba(0, 0, 0, .85); color: #fff; padding: 8px 10px; display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; font: 13px "Helvetica Neue", Helvetica, Arial, sans-serif; }
#emojiPop span { font-size: 20px; line-height: 26px; cursor: pointer; text-align: center; }
#emojiPop span:hover { background: rgba(255, 255, 255, .15); }

/* [ugarz] düğme konumları (x, y): dikey ekranda menü/yakınlaş/uzaklaş y=210, gold y=360, yem/böl y=420;
   yatay ekranda 110 / 160 / 210; x = 0, 50, 100 */
#touchBtns { position: absolute; left: 0; top: 0; width: 0; height: 0; }
#touchBtns button { position: absolute; width: 44px; height: 44px; border-radius: 8px; border: 2px solid rgba(255, 255, 255, .55); background: rgba(0, 0, 0, .35); color: #fff; font: 700 13px Ubuntu, Arial; padding: 0; touch-action: none; }
#touchBtns button:active, #touchBtns button.on { background: rgba(255, 255, 255, .3); }
#touchBtns #tGold, #touchBtns #tGoldBig { color: #ffd700; border-color: rgba(255, 215, 0, .7); }
#tMenu { left: 0; top: 210px; } #tZoomIn { left: 50px; top: 210px; } #tZoomOut { left: 100px; top: 210px; }
#tGold { left: 0; top: 360px; } #tGoldBig { left: 50px; top: 360px; }
#tEject { left: 0; top: 420px; } #tSplit { left: 50px; top: 420px; }
#touchBtns #tZoomIn, #touchBtns #tZoomOut, #touchBtns #tMenu { font-size: 22px; }
@media (orientation: landscape) {
  #tMenu, #tZoomIn, #tZoomOut { top: 110px; }
  #tGold, #tGoldBig { top: 160px; }
  #tEject, #tSplit { top: 210px; }
}
/* telefon (dokunmatik): kalabalık göstergeleri gizle */
@media (pointer: coarse) and (max-height: 600px), (pointer: coarse) and (max-width: 760px) {
  #stats, #chatBar .cb, #micBtn, #chatHelp, #reportBtn { display: none; }
  #owner { display: none !important; }
  #leaderboard { width: 125px; font-size: 10px; line-height: 13px; }
  #lbList div:nth-child(n+11) { display: none; }
}
/* yatay telefon: düğmeler alt sağda yan yana */
@media (orientation: landscape) and (max-height: 500px) {
}

#replayBar { position: absolute; left: 50%; bottom: 90px; transform: translateX(-50%); background: rgba(0, 0, 0, .7); padding: 8px 12px; border-radius: 8px; display: flex; align-items: center; gap: 8px; }
#replayBar button { background: #f0ad4e; border: 0; border-radius: 4px; color: #fff; font: 700 13px Ubuntu, Arial; padding: 5px 10px; cursor: pointer; }
#replayBar input { width: 300px; }
#replayBar span { font-size: 13px; min-width: 44px; }

/* ─── MENÜ ─── */
/* [ölçüm] menü açıkken oyun ve göstergeler yarı yarıya karartılır (agarz menü görüntüsü: tüm renkler × 0,5) */
/* [agarvi ölçümü 983/1249 px pencerede] kart 380 px, beyaz, 15 px köşe, 5px 15px boşluk, ekranın ortasında (671 px yükseklik);
   sol bağlantılar kartın 265 px solunda (üstten 20 px, 260 px), hesap kutusu üstten 340 px; sağ sütun 385 px sağda (380 px) */
#menu { position: fixed; inset: 0; z-index: 10; overflow-y: auto; overflow-x: hidden; background: rgba(0, 0, 0, .5); font: 14px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #333; }
/* [agarz ölçümü 25.10.2026, 1366×768] #helloDialog: üst %50 − yükseklik/2 (332 px) + 10 px kenar boşluğu → 62 px */
#mainPanel { position: absolute; left: 50%; top: max(10px, calc(50% - 322.13px)); width: 380px; margin-left: -190px; background: #fff; border-radius: 15px; padding: 5px 15px; }
#leftCol { position: absolute; top: 20px; left: -265px; width: 260px; }
#rightCol { position: absolute; top: 20px; left: 385px; width: 380px; }
.wbox { background: #fff; padding: 5px; margin-bottom: 5px; }
.links { line-height: 20px; font-size: 14px; }
.loginTable { border-collapse: collapse; } .loginTable td { padding: 0; vertical-align: top; line-height: 34px; } .loginTable .fc { width: 196px; } .loginTable .btn { width: 196px; height: 35px; }
.account { position: absolute; top: 320px; left: 0; width: 260px; font-size: 14px; line-height: 20px; }
#loginErr:empty { display: none; }
.account .sp { height: 22px; }
.frow { display: flex; align-items: center; margin-top: 4px; }
.frow label { width: 52px; }
.frow .fc { flex: 1; }
.frow button { flex: 1; }
#accBox { line-height: 20px; }
.accrow b { color: #222; }
.goldc { color: #b8860b !important; }
.badge { background: #d32f2f; color: #fff; font-size: 10px; padding: 1px 4px; border-radius: 3px; }
.accbtns { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.side { font-size: 14px; padding: 5px; text-align: center; }
#supportBox { margin-top: 5px; }
#waBtn { display: inline-flex; align-items: center; gap: 8px; background: #25d366; color: #fff; font-weight: 700; font-size: 16px; padding: 8px 16px; border-radius: 25px; margin: 8px 6px; text-decoration: none; }

/* [agarz] logo alanı 64 px (h2: 20 px üst, 10 px alt + form-group 15 px) → İsim satırı kartın 114 px altında */
#logo { font-family: 'Lilita One', 'Arial Black', Impact, sans-serif; width: 330px; height: 64px; font-size: 56px; line-height: 64px; text-align: center; letter-spacing: 1px; margin: 20px 10px 25px; user-select: none; white-space: nowrap; overflow: hidden; }
#logo .l1 { color: #fff; -webkit-text-stroke: 3px #3a3a3a; paint-order: stroke fill; text-shadow: 0 4px 0 #3a3a3a, 0 6px 8px rgba(0, 0, 0, .25); }
#logo .l2 { color: #8fd321; -webkit-text-stroke: 3px #2f5e06; paint-order: stroke fill; text-shadow: 0 4px 0 #2f5e06, 0 6px 8px rgba(0, 0, 0, .25); }
#menuInfo { background: #fff8e1; border: 1px solid #ffe082; color: #6d4c00; border-radius: 6px; padding: 8px 10px; font-size: 13px; margin: -6px 0 10px; text-align: center; }
#menuInfo.dead { background: #ffebee; border-color: #ef9a9a; color: #7f1d1d; }
#menuInfo.won { background: #e8f5e9; border-color: #a5d6a7; color: #1b5e20; }
#menuInfo .dtitle { font-size: 20px; font-weight: 700; }
#menuInfo .dsub { margin: 2px 0 6px; font-size: 14px; }
#menuInfo .dsub.win { font-weight: 700; }
#menuInfo .dstat { margin: 0 auto; border-collapse: collapse; font-size: 13px; }
#menuInfo .dstat td { padding: 1px 10px; text-align: left; }
#menuInfo .dstat td:first-child { color: #777; text-align: right; }

.fc { display: block; height: 34px; padding: 6px 12px; font-size: 14px; line-height: 20px; color: #555; background: #fff; border: 1px solid #ccc; border-radius: 4px; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); font-family: inherit; min-width: 0; }
.fc:focus { border-color: #66afe9; outline: 0; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6); }
.fc::placeholder { color: #999; }
.frow3 { display: flex; gap: 0; margin: 0 0 5px; }
.frow3.gapTop { margin-top: 6px; }
.frow3 .fc { flex: 1; }
/* [agarz] isim %50 · oda %30 · F %20; skin %80 · F %20; takım %50 · Skin Galerisi %50 (6 px üstte) */
.frow3 #nick { flex: 0 0 50%; }
.frow3 #roomSel { flex: 0 0 30%; padding: 6px 12px; }
.frow3 .fbtn { flex: 0 0 20%; color: #555; cursor: pointer; text-align: center; background: #fff; }
.frow3 #team { flex: 0 0 50%; }
.frow3 #galleryBtn { flex: 0 0 50%; height: 34px; text-decoration: none; }
.frow2 { display: flex; gap: 0; margin: 5px 0 0; }
#playBtn { margin-top: 10px; }
#playBtn, .frow2 .btn { height: 35px; }
.frow2 .btn { flex: 1; }

.btn { display: inline-block; padding: 6px 12px; font-size: 14px; line-height: 20px; text-align: center; white-space: nowrap; cursor: pointer; border: 1px solid transparent; border-radius: 4px; font-family: inherit; color: #333; background: #fff; border-color: #ccc; }
.btn:hover { filter: brightness(.94); }
.btn-primary { color: #fff; background: #337ab7; border-color: #2e6da4; }
.btn-info { color: #fff; background: #5bc0de; border-color: #46b8da; }
.btn-warning { color: #fff; background: #f0ad4e; border-color: #eea236; }
.btn-danger { color: #fff; background: #d9534f; border-color: #d43f3a; }
.btn-success { color: #fff; background: #5cb85c; border-color: #4cae4c; }
.btn-block { display: block; width: 100%; }
.btn-xs { padding: 2px 6px; font-size: 12px; }

/* [agarvi ölçümü] ayarlar 15 px sonra, 20 px satırlar, kutu 13×13 (üstten 4 px) + boşluk + yazı, aralarında 10 px;
   bayraklar 6 px sonra 32×32, 8 px arayla; anlatım 2 px sonra ortalı 14px/20px; alt yazı 8px, 10 px üst / 5 px alt boşluk */
#settings { margin: 15px 0 0; padding: 0; font-size: 14px; line-height: 20px; }
#settings .srow { height: 20px; padding-left: 6px; white-space: nowrap; }
#settings label { display: inline-block; margin: 0 10px 0 0; cursor: pointer; white-space: nowrap; font-weight: 400; vertical-align: top; }
#settings input { width: 13px; height: 13px; margin: 4px 0 0; vertical-align: top; }
#flags { margin: 6px 0 0 8px; display: flex; gap: 8px; height: 32px; }
#flags a { display: block; width: 32px; height: 32px; padding: 5px 0; cursor: pointer; }
#flags svg { width: 32px; height: 22px; display: block; }
/* [agarz] anlatımın üstünde çizgi (hr, 2 px kenar), yazı #777 */
#instructions { margin-top: 2px; text-align: center; color: #777; font-size: 14px; line-height: 20px; }
#instructions hr { margin: 2px; border: 0; border-top: 1px solid #eee; }
#instructions b { color: #777; }
#footer { text-align: center; font-size: 8px; line-height: 11.4286px; min-height: 34.27px; margin: 10px 0 5px; color: #333; }
#footer a { font-size: 8px; }

/* ─── PENCERE ─── */
#modalBack { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .55); display: flex; align-items: center; justify-content: center; }
#modal { background: #fff; border-radius: 10px; width: 520px; max-width: 94vw; max-height: 88vh; display: flex; flex-direction: column; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
#modalHead { padding: 10px 14px; border-bottom: 1px solid #e5e5e5; font-size: 17px; font-weight: 700; display: flex; justify-content: space-between; }
#modalX { color: #999; font-size: 18px; text-decoration: none; }
#modalBody { padding: 12px 14px; overflow-y: auto; font-size: 14px; line-height: 1.5; }
#modalBody .fc { width: 100%; margin-bottom: 8px; }
#modalBody table { width: 100%; border-collapse: collapse; font-size: 13px; }
#modalBody td, #modalBody th { border: 1px solid #ddd; padding: 4px 6px; text-align: left; }
#modalBody th { background: #f5f5f5; }
#modalBody .row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
#modalBody .row .fc { margin: 0; flex: 1; }
#modalBody .muted { color: #888; font-size: 12px; }
#modalBody .err { color: #c62828; }
#modalBody .ok { color: #2e7d32; }
#modalBody h4 { margin: 10px 0 4px; }
.gal-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.gal-tabs a { padding: 2px 8px; border: 1px solid #ccc; border-radius: 12px; font-size: 12px; }
.gal-tabs a.on { background: #337ab7; color: #fff; border-color: #337ab7; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.gallery .sk { text-align: center; cursor: pointer; font-size: 11px; color: #333; word-break: break-word; }
.gallery .sk canvas, .gallery .sk img { width: 72px; height: 72px; border-radius: 50%; display: block; margin: 0 auto 2px; background: #eee; object-fit: cover; }
.gallery .sk:hover canvas, .gallery .sk:hover img { box-shadow: 0 0 0 3px #5bc0de; }

#favPop { position: fixed; z-index: 60; background: #fff; border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 4px 12px rgba(0, 0, 0, .3); max-width: 310px; padding: 6px; font-size: 14px; line-height: 22px; }
#favPop a { display: inline-block; padding: 1px 6px; margin: 1px; cursor: pointer; color: #1565c0; border-radius: 3px; }
#favPop a:hover { background: #e8f0fe; }
#favPop a.fx { color: #c62828; font-weight: 700; }
#favPop a.fimg { padding: 2px; vertical-align: middle; }
#favPop a.fimg img { width: 48px; height: 48px; border-radius: 50%; display: block; }

#toast { position: fixed; top: 60px; left: 50%; transform: translateX(-50%); z-index: 70; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
#toast div { background: rgba(33, 33, 33, .92); color: #fff; padding: 8px 16px; border-radius: 6px; font-size: 14px; font-weight: 700; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
#toast .err { background: rgba(198, 40, 40, .95); }
#toast .ok { background: rgba(46, 125, 50, .95); }

/* ─── KÜÇÜK EKRAN ─── */
@media (max-width: 920px) {
  #menu { display: flex; flex-direction: column; align-items: center; padding: 60px 0 70px; }
  #mainPanel { position: relative; left: auto; top: auto; margin: 0 0 10px; order: 1; }
  #leftCol, #rightCol { position: static; width: 100%; margin-top: 10px; }
  .account { position: static; width: auto; }
}
@media (max-width: 760px) {
  #chatBar .cb, #micBtn, #chatHelp { display: none; }
  #chatBar #reportBtn { display: none; }
  #stats { display: none; }
  #leaderboard { top: 40px; width: 118px; font-size: 10px; line-height: 13px; }
  #lbTitle { display: none; }
  #lbList div:nth-child(n+11) { display: none; }
  #owner { display: none !important; }
  #roomTitle { font-size: 18px; line-height: 24px; }
  #topCenter { max-width: 58vw; }
  #announce { font-size: 10px; line-height: 13px; }
  #announce div:not(:first-child) { display: none; }
  #chatBox { width: 70vw; font-size: 11px; line-height: 14px; max-height: 120px; }
  #hGold, #hReward { font-size: 15px; line-height: 19px; }
}
@media (max-width: 420px) {
  #mainPanel { width: calc(100vw - 32px); margin-left: 0; }
  #logo { width: auto; }
  #logo { font-size: 50px; }
  .frow3 #galleryBtn { flex-basis: 130px; }
  .frow3 #roomSel { flex-basis: 96px; }
  .frow3 .fbtn { flex-basis: 44px; }
}

/* açık tema okunabilirlik */
body:not(.dark) #hAcc { color: #444; text-shadow: none; }
body:not(.dark) #sector, body:not(.dark) #shareBtn { color: #666; text-shadow: none; }
body:not(.dark) #hGold, body:not(.dark) #hReward { color: #c9a400; text-shadow: 0 0 2px #fff, 0 0 1px #000; }
body:not(.dark) #announce { text-shadow: 0 0 2px #000; }

/* [G] dar / dokunmatik ekran (agarz mobil düzeni): "Ayarlar | Diğer" yazıları, koyu açılır pencereler,
   altta tam genişlikte siyah sohbet alanı (giriş + Gönder, altında kanal seçenekleri ve Şikayet Et) */
#moreRow, #chatSend, #settingsClose { display: none; }
#moreRow { text-align: center; color: #333; font-size: 20px; margin: 6px 0 2px; }
#moreRow a { cursor: pointer; padding: 0 6px; }
#otherPop { position: fixed; z-index: 80; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0, 0, 0, .8); border: 1px solid #fff; border-radius: 10px; padding: 10px 10px 34px; min-width: 260px; }
#otherPop a { display: block; color: #fff; font: 700 20px Arial, sans-serif; padding: 5px; text-decoration: none; }
#otherPop .sup { color: #fff; font: 400 15px Arial, sans-serif; padding: 5px; }
#otherPop button, #settingsClose { position: absolute; right: 2px; bottom: 2px; border-radius: 0 0 10px 0; padding: 2px 8px; border: 1px solid #888; background: #efefef; font: 700 14px Arial, sans-serif; cursor: pointer; }
@media (pointer: coarse) {
  #moreRow { display: block; }
  #leftCol .links, #rightCol { display: none; }
  #settings:not(.open) { display: none; }
  #settings.open { display: block; position: fixed; z-index: 80; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 380px; max-width: 94vw; min-height: 200px;
    background: rgba(0, 0, 0, .8); border: 1px solid #fff; border-radius: 10px; padding: 4px 4px 34px; }
  #settings.open label { color: #fff; font-size: 14px; margin: 5px; }
  #settings.open #settingsClose { display: block; }
  #chatBar { right: 0; height: 100px; background: #000; flex-wrap: wrap; align-content: center; gap: 4px 8px; padding: 2px 6px; }
  #chatBar #chatClear, #chatBar #chatHelp, #chatBar #chatEmoji, #chatBar #chatToggle, #chatBar #soundBox, #chatBar #micBtn { display: none !important; }
  /* sıra: [giriş | Gönder] üstte, kanal seçenekleri ve Şikayet Et altta */
  #chatInput { order: 1; } #chatSend { order: 2; } #chatBar #chatMenu { order: 3; } #chatBar #reportBtn { order: 4; }
  #chatInput { flex: 0 0 78%; width: auto; min-width: 0; background: #222; height: 34px; }
  #chatSend { display: inline-block; flex: 0 0 15%; height: 34px; color: #000; }
  #chatBar #chatMenu, #chatBar #chatMenu.off { display: inline-flex !important; flex-wrap: wrap; gap: 4px 10px; }
  #chatBar .cb, #chatBar #reportBtn { display: inline-flex !important; }
  #chatBox { bottom: 104px; }
}
#chatSend { margin-left: 0; padding: 0 6px; background: #efefef; border: 1px solid #888; border-radius: 3px; font-weight: 700; }

/* [G] tur sonu skor tablosu: beyaz, yuvarlak köşe, 5 px siyah çerçeve, içe gölge */
#finalPop { position: fixed; z-index: 90; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; color: #333; border: 5px solid #000; border-radius: 15px; padding: 25px; font: 20px/1.42857 'Helvetica Neue', Helvetica, Arial, sans-serif; box-shadow: inset 0 0 15px; max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); overflow: auto; }
#finalPop .acts { display: flex; justify-content: flex-start; gap: 12px; margin-top: 20px; }
#finalClose { padding: 0; box-shadow: 0 0 15px; font: inherit; font-size: 20px; }
#finalTitle { font-weight: 700; margin-bottom: 8px; }
#finalList { margin: 0 auto; border-collapse: collapse; }
#finalList td { padding: 5px; text-align: left; font-family: fantasy; }
#finalList td.n { text-align: right; }
#finalList tr.me td { color: #c00; font-weight: 700; }
#finalList tr.hd td { text-align: center; font-size: 22px; text-shadow: 1px 1px 30px; }
#finalList td.nm a { color: #337ab7; text-decoration: none; }
#finalList td.nm a:hover { color: #23527c; text-decoration: underline; }
#finalClose { margin-top: 20px; box-shadow: 0 0 15px 0; padding: 4px 16px; font-size: 16px; cursor: pointer; }

/* [G] sayfa açılınca, Oyna/İzle'ye basılana kadar (agarz ilk menü görüntüsü): skor tablosu, duyurular, haykırış yok */
body.prejoin #leaderboard, body.prejoin #announce, body.prejoin #shoutLine, body.prejoin #owner { display: none !important; }
/* [video] oyuna girmeden menünün arkası boş: göstergeler yok, yalnız sohbet çubuğu */
body.prejoin #leftHud, body.prejoin #stats, body.prejoin #topCenter { visibility: hidden; }

#chatMenu { display: inline-flex; align-items: center; gap: 8px; }
#chatMenu.off, #soundBox.off { display: none !important; }
#soundBox { display: none !important; }   /* [video] sohbet çubuğunda Ses seçeneği yok (ses açık kalır) */

/* [ugarz] 20 px satırlar: "Basilan gold ödüle ekleniyor mm:ss" ve "Girisler Kapanir: mm:ss" */
#hGoldPrize, #hEnterClose, #hStart { font-size: 20px; line-height: 20px; white-space: nowrap; }
#hStart { color: #4fc3f7; }
#hGoldPrize { color: #fff000; }   /* [agarz] 20px #fff000 */
#hEnterClose { color: #fff000; }
/* [ugarz] gold değişince sarı "+fark" yazısı 2 sn içinde yukarı doğru uçar, küçülür ve solar */
#goldMovers { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
#goldMovers div { position: absolute; color: #ffff00; font-family: Ubuntu, Arial, sans-serif; font-weight: 400; white-space: nowrap; will-change: transform; }
#loginErr { color: #d32f2f; font-size: 13px; font-weight: 700; min-height: 0; margin-top: 4px; }
#loginErr:empty { display: none; }
/* [ugarz] dokunmatik: minimap çizilmez; gold/ödül düğmelerin arasında (yatay ekranda üstte, dikeyde menü düğmelerinin altında) */
body.touch #minimap, body.touch #sector, body.touch #hAcc { display: none; }
body.touch #leftHud { left: 2px; font-size: 12px; line-height: 14px; }
body.touch #goldBox { top: 256px; }
@media (orientation: landscape) { body.touch #goldBox { top: 44px; } }

/* [agarvi] hesap kutusu: "Yeni" etiketi ve Rütbe satırı (agarvi'de Onur satırı) */
.newTag { display: inline-block; margin-left: 5px; padding: 0 5px; border-radius: 3px; background: #5cb85c; color: #fff; font: 800 10px/15px "Helvetica Neue", Helvetica, Arial, sans-serif; vertical-align: 1px; }
.rankLine { display: inline-flex; align-items: center; gap: 3px; }
.rankLine .rank-ic { flex: 0 0 auto; }

/* [agarvi] SON SANİYELER: 11–25 sn üst yazıların altında 30 px #ff0000; son 10 sn kalın 30 px, taban çizgisi ekranın %25'inde */
#announce .lastsec { font-size: 30px; line-height: 30px; margin-top: 5px; color: #ff0000; }
#lastSecBig { position: fixed; left: 0; right: 0; top: calc(25vh - 24px); text-align: center; font: 700 30px/30px 'Ubuntu', Arial, sans-serif; color: #ff0000; pointer-events: none; z-index: 6; }
/* [agarvi] HAYKIR! onay penceresi */
.shShade { position: fixed; inset: 0; z-index: 2200; background: rgba(0,0,0,.5); }
.shBox { position: fixed; z-index: 2201; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 560px; max-width: calc(100vw - 32px); display: flex; flex-direction: column; color: #fff; background: rgba(0,0,0,.9); border: 1px solid #555; font-family: Ubuntu, 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.shHead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 16px 20px 12px; border-bottom: 1px solid #333; }
.shTitle { color: #ffff00; font-size: 30px; line-height: 30px; }
.shReach { color: #aaa; font-size: 14px; }
.shBody { display: flex; flex-direction: column; gap: 14px; padding: 16px 20px; }
.shPrevB { display: flex; flex-direction: column; gap: 6px; }
.shSmall { color: #888; font-size: 13px; }
.shPrev { word-break: break-word; background: #111; border: 1px solid #333; padding: 10px 12px; font: 400 17px/1.35 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.shName { color: #8bc34a; } .shText { color: #ffff00; }
.shSums { display: flex; flex-direction: column; gap: 4px; font-size: 17px; line-height: 1.35; }
.shSums > div { display: flex; justify-content: space-between; }
.shKey { color: #aaa; } .shCost { color: #ffff00; }
.shBlock { color: red; font-size: 15px; }
.shSkip { font: inherit; color: #aaa; cursor: pointer; background: none; border: 0; align-self: flex-start; display: flex; align-items: center; gap: 8px; padding: 0; font-size: 14px; }
.shCheck { color: #000; background: #efefef; border: 1px solid #767676; display: grid; place-items: center; width: 16px; height: 16px; font-size: 13px; line-height: 1; }
.shActions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px 16px; border-top: 1px solid #333; }
.shBtn { height: 30px; font: inherit; color: #000; cursor: pointer; background: #efefef; border: 1px solid #767676; padding: 0 14px; font-size: 14px; }
.shOk { color: green; font-weight: 700; }
.shOk:disabled { color: #888; cursor: not-allowed; background: #cfcfcf; }
.shHint { color: #888; font-weight: 400; }
#shSent { position: fixed; z-index: 300; top: 110px; left: 0; right: 0; text-align: center; color: #ffff00; pointer-events: none; padding: 0 16px; font: 30px/30px Ubuntu, 'Helvetica Neue', Helvetica, Arial, sans-serif; }
@media (max-width: 640px) { .shTitle { font-size: 24px; line-height: 26px; } #shSent { font-size: 20px; line-height: 24px; } }
#chatInput:disabled { opacity: .8; }
/* v16.1: sohbette rütbe nişanı (solda) ve agarz renkleri: isim sarı, premium kalın + #18d8eb */
#chatBox .ln .rank-ic { vertical-align: -3px; margin-right: 3px; }
#chatBox .ln .nm { color: #ffff00; }
#chatBox .ln.pr .nm { font-weight: 700; }
#chatBox .ln.pr .msg { color: #18d8eb; font-weight: 700; }

/* v16.2: rütbe sıralaması (sohbetteki nişanın üstüne gelince) */
#rankTip { position: fixed; z-index: 9999; display: none; pointer-events: none; background: rgba(10,12,20,.94); border: 1px solid #3a4560; border-radius: 10px; padding: 8px 10px; color: #fff; font: 13px Arial, sans-serif; min-width: 210px; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
#rankTip .rt-h { font-weight: 700; color: #ffd84d; margin-bottom: 4px; }
#rankTip .rt-r { display: flex; align-items: center; gap: 8px; padding: 1px 4px; border-radius: 6px; }
#rankTip .rt-r em { margin-left: auto; font-style: normal; color: #9fb0cc; font-size: 12px; }
#rankTip .rt-r.cur { background: rgba(255,216,77,.18); color: #ffd84d; font-weight: 700; }
#chatBox .ln .rank-ic { cursor: help; }