<?php
declare(strict_types=1);
// motd2.php — NGA Dynamic MOTD v2.3
// Layouts: video (default) | info | radio   |   ?dg=1 for debug

// ── API proxy ─────────────────────────────────────────────────────────────────
if (isset($_GET['action']) && $_GET['action'] === 'api') {
    header('Content-Type: application/json; charset=utf-8');
    header('Cache-Control: public, max-age=15');
    header('Access-Control-Allow-Origin: *');
    if (($_GET['target'] ?? '') === 'nowplaying') {
        $npFile = '/home/natural-radio/htdocs/radio.wonx.eu/api/now_playing.php';
        if (file_exists($npFile)) {
            ob_start(); include $npFile; echo ob_get_clean();
        } else {
            $ctx = stream_context_create(['http'=>['timeout'=>3,'ignore_errors'=>true]]);
            echo @file_get_contents('https://radio.wonx.eu/api/now_playing.php', false, $ctx) ?: '{"ok":false}';
        }
    } else { echo '{"ok":false,"error":"unknown"}'; }
    exit;
}

$now = gmdate('D, d M Y H:i:s') . ' GMT';
header('X-Content-Type-Options: nosniff');
header('X-Frame-Options: SAMEORIGIN');
header('Cache-Control: no-store, no-cache, must-revalidate');
header('Pragma: no-cache');
header('Last-Modified: ' . $now);
header('Expires: Thu, 01 Jan 1970 00:00:00 GMT');

// p() returns raw (untouched) string — HTML-escape at output point
function p(string ...$keys): string {
    foreach ($keys as $k) {
        if (isset($_GET[$k]) && $_GET[$k] !== '')
            return substr(trim((string)$_GET[$k]), 0, 200);
    }
    return '';
}
function pint(string $key, int $def=0, int $min=0, int $max=9999): int {
    foreach (explode(',', $key) as $k)
        if (isset($_GET[$k])) return max($min, min($max, (int)$_GET[$k]));
    return $def;
}
function ph(string ...$keys): string {   // HTML-safe shortcut
    foreach ($keys as $k) {
        $v = p($k);
        if ($v !== '') return htmlspecialchars($v, ENT_QUOTES|ENT_HTML5, 'UTF-8');
    }
    return '';
}

$playerName = p('n','name')         ?: 'Spieler';
$steamId64  = p('s','sid');
$currentMap = p('m','map');
$nextMap    = p('nm','nextmap');
$players    = pint('p,players',     0);
$maxPlayers = pint('mp,maxplayers', 32);
$bots       = pint('b,bots',        0);
$serverName = p('sn','servername');
$serverIp   = p('pip') ?: p('sip','serverip') ?: '145.239.0.143';
$serverPort = p('sp','serverport') ?: '27015';
$serverLocation = p('loc','location');
$layout     = p('lay','layout')    ?: 'video';
$debug      = isset($_GET['dg']) && $_GET['dg'] === '1';
if (!in_array($layout, ['video','info','radio'], true)) $layout = 'video';

$rawColor = preg_replace('/[^a-fA-F0-9]/', '', $_GET['col'] ?? $_GET['color'] ?? '');
$accent   = $rawColor ? '#'.substr($rawColor,0,6) : '#ffaa00';

// ── Language detection ─────────────────────────────────────────────────────────
$langMap = [
    'german'=>'de','english'=>'en','french'=>'fr','dutch'=>'nl',
    'russian'=>'ru','polish'=>'pl','czech'=>'cs','hungarian'=>'hu',
    'romanian'=>'ro','bulgarian'=>'bg','greek'=>'el','finnish'=>'fi',
    'swedish'=>'sv','norwegian'=>'no','danish'=>'da','ukrainian'=>'uk',
    'turkish'=>'tr','italian'=>'it','croatian'=>'hr','slovenian'=>'sl',
    'slovak'=>'sk','latvian'=>'lv','lithuanian'=>'lt','estonian'=>'et',
    'serbian'=>'sr','belarusian'=>'ru',  // BY → fallback to RU
];
$validLangs = array_values($langMap);
$langRaw    = strtolower(trim(p('lang')));
$lang       = $langMap[$langRaw] ?? (in_array($langRaw, $validLangs, true) ? $langRaw : 'de');

// ── Translations ───────────────────────────────────────────────────────────────
$T = [
'welcome' => [
    'de'=>'Willkommen','en'=>'Welcome','fr'=>'Bienvenue','nl'=>'Welkom',
    'pl'=>'Witaj','cs'=>'Vítej','hu'=>'Üdvözöllek','ro'=>'Bun venit',
    'bg'=>'Добре дошъл','el'=>'Καλώς ήρθες','fi'=>'Tervetuloa',
    'sv'=>'Välkommen','no'=>'Velkommen','da'=>'Velkommen',
    'ru'=>'Добро пожаловать','uk'=>'Ласкаво просимо','tr'=>'Hoş geldin',
    'it'=>'Benvenuto','hr'=>'Dobrodošao','sl'=>'Dobrodošel','sk'=>'Vitaj',
    'lv'=>'Laipni lūdzam','lt'=>'Sveiki','et'=>'Tere tulemast','sr'=>'Dobrodošao',
],
'motd_reopen' => [
    'de'=>'zum Wiederöffnen','en'=>'to reopen','fr'=>'pour rouvrir',
    'nl'=>'om opnieuw te openen','pl'=>'aby otworzyć ponownie',
    'cs'=>'pro znovu otevření','hu'=>'az újranyitáshoz',
    'ro'=>'pentru a redeschide','bg'=>'за повторно отваряне',
    'el'=>'για επαναφορά','fi'=>'avataksesi uudelleen',
    'sv'=>'för att öppna igen','no'=>'for å gjenåpne',
    'da'=>'for at genåbne','ru'=>'чтобы открыть снова',
    'uk'=>'щоб відкрити знову','tr'=>'yeniden açmak için',
    'it'=>'per riaprire','hr'=>'za ponovni otvor','sl'=>'za vnovično odprtje',
    'sk'=>'pre znovuotvorenie','lv'=>'lai atvērtu vēlreiz',
    'lt'=>'vėl atidaryti','et'=>'uuesti avamiseks','sr'=>'za ponovni otvor',
],
'curr_map' => [
    'de'=>'Aktuelle Map','en'=>'Current Map','fr'=>'Carte actuelle',
    'nl'=>'Huidige map','pl'=>'Aktualna mapa','cs'=>'Aktuální mapa',
    'hu'=>'Jelenlegi térkép','ro'=>'Hartă curentă','bg'=>'Текуща карта',
    'el'=>'Τρέχων χάρτης','fi'=>'Nykyinen kartta','sv'=>'Aktuell karta',
    'no'=>'Gjeldende kart','da'=>'Nuværende kort','ru'=>'Текущая карта',
    'uk'=>'Поточна карта','tr'=>'Mevcut harita','it'=>'Mappa corrente',
    'hr'=>'Trenutna mapa','sl'=>'Trenutna mapa','sk'=>'Aktuálna mapa',
    'lv'=>'Pašreizējā karte','lt'=>'Dabartinis žemėlapis',
    'et'=>'Praegune kaart','sr'=>'Trenutna mapa',
],
'next_map' => [
    'de'=>'Nächste','en'=>'Next','fr'=>'Suivante','nl'=>'Volgende',
    'pl'=>'Następna','cs'=>'Příští','hu'=>'Következő','ro'=>'Următoarea',
    'bg'=>'Следваща','el'=>'Επόμενη','fi'=>'Seuraava','sv'=>'Nästa',
    'no'=>'Neste','da'=>'Næste','ru'=>'Следующая','uk'=>'Наступна',
    'tr'=>'Sonraki','it'=>'Prossima','hr'=>'Sljedeća','sl'=>'Naslednja',
    'sk'=>'Ďalšia','lv'=>'Nākamā','lt'=>'Kitas','et'=>'Järgmine','sr'=>'Sledeća',
],
'players' => [
    'de'=>'Spieler','en'=>'Players','fr'=>'Joueurs','nl'=>'Spelers',
    'pl'=>'Gracze','cs'=>'Hráči','hu'=>'Játékosok','ro'=>'Jucători',
    'bg'=>'Играчи','el'=>'Παίκτες','fi'=>'Pelaajat','sv'=>'Spelare',
    'no'=>'Spillere','da'=>'Spillere','ru'=>'Игроки','uk'=>'Гравці',
    'tr'=>'Oyuncular','it'=>'Giocatori','hr'=>'Igrači','sl'=>'Igralci',
    'sk'=>'Hráči','lv'=>'Spēlētāji','lt'=>'Žaidėjai','et'=>'Mängijad','sr'=>'Igrači',
],
'players_online' => [
    'de'=>'Spieler online','en'=>'Players online','fr'=>'Joueurs en ligne',
    'nl'=>'Spelers online','pl'=>'Gracze online','cs'=>'Hráčů online',
    'hu'=>'Online játékosok','ro'=>'Jucători online','bg'=>'Играчи онлайн',
    'el'=>'Παίκτες online','fi'=>'Pelaajia paikalla','sv'=>'Spelare online',
    'no'=>'Spillere online','da'=>'Spillere online','ru'=>'Игроков онлайн',
    'uk'=>'Гравців онлайн','tr'=>'Çevrimiçi oyuncular','it'=>'Giocatori online',
    'hr'=>'Igrači online','sl'=>'Spletni igralci','sk'=>'Hráči online',
    'lv'=>'Tiešsaistes spēlētāji','lt'=>'Žaidėjų internete',
    'et'=>'Mängijaid veebis','sr'=>'Igrači online',
],
'rules' => [
    'de'=>'Regeln','en'=>'Rules','fr'=>'Règles','nl'=>'Regels',
    'pl'=>'Zasady','cs'=>'Pravidla','hu'=>'Szabályok','ro'=>'Reguli',
    'bg'=>'Правила','el'=>'Κανόνες','fi'=>'Säännöt','sv'=>'Regler',
    'no'=>'Regler','da'=>'Regler','ru'=>'Правила','uk'=>'Правила',
    'tr'=>'Kurallar','it'=>'Regole','hr'=>'Pravila','sl'=>'Pravila',
    'sk'=>'Pravidlá','lv'=>'Noteikumi','lt'=>'Taisyklės','et'=>'Reeglid','sr'=>'Pravila',
],
'sound_btn' => [
    'de'=>'Ton','en'=>'Sound','fr'=>'Son','nl'=>'Geluid',
    'pl'=>'Dźwięk','cs'=>'Zvuk','hu'=>'Hang','ro'=>'Sunet',
    'bg'=>'Звук','el'=>'Ήχος','fi'=>'Ääni','sv'=>'Ljud',
    'no'=>'Lyd','da'=>'Lyd','ru'=>'Звук','uk'=>'Звук',
    'tr'=>'Ses','it'=>'Audio','hr'=>'Zvuk','sl'=>'Zvok',
    'sk'=>'Zvuk','lv'=>'Skaņa','lt'=>'Garsas','et'=>'Heli','sr'=>'Zvuk',
],
'unmute' => [
    'de'=>'Klicken für Ton &nbsp;·&nbsp; Leertaste oder M',
    'en'=>'Click for sound &nbsp;·&nbsp; Space or M',
    'fr'=>'Cliquer pour le son &nbsp;·&nbsp; Espace ou M',
    'nl'=>'Klik voor geluid &nbsp;·&nbsp; Spatie of M',
    'pl'=>'Kliknij dla dźwięku &nbsp;·&nbsp; Spacja lub M',
    'cs'=>'Klikni pro zvuk &nbsp;·&nbsp; Mezerník nebo M',
    'hu'=>'Kattints a hangért &nbsp;·&nbsp; Szóköz vagy M',
    'ro'=>'Click pentru sunet &nbsp;·&nbsp; Spațiu sau M',
    'bg'=>'Клик за звук &nbsp;·&nbsp; Интервал или M',
    'el'=>'Κλικ για ήχο &nbsp;·&nbsp; Κενό ή M',
    'fi'=>'Klikkaa ääntä varten &nbsp;·&nbsp; Välilyönti tai M',
    'sv'=>'Klicka för ljud &nbsp;·&nbsp; Mellanslag eller M',
    'no'=>'Klikk for lyd &nbsp;·&nbsp; Mellomrom eller M',
    'da'=>'Klik for lyd &nbsp;·&nbsp; Mellemrum eller M',
    'ru'=>'Нажмите для звука &nbsp;·&nbsp; Пробел или M',
    'uk'=>'Натисніть для звуку &nbsp;·&nbsp; Пробіл або M',
    'tr'=>'Ses için tıklayın &nbsp;·&nbsp; Boşluk veya M',
    'it'=>'Clicca per il suono &nbsp;·&nbsp; Spazio o M',
    'hr'=>'Klikni za zvuk &nbsp;·&nbsp; Razmak ili M',
    'sl'=>'Klikni za zvok &nbsp;·&nbsp; Presledek ali M',
    'sk'=>'Klikni pre zvuk &nbsp;·&nbsp; Medzera alebo M',
    'lv'=>'Noklikšķini skaņai &nbsp;·&nbsp; Atstarpe vai M',
    'lt'=>'Spustelėk garsui &nbsp;·&nbsp; Tarpas arba M',
    'et'=>'Klõpsa heli jaoks &nbsp;·&nbsp; Tühik või M',
    'sr'=>'Klikni za zvuk &nbsp;·&nbsp; Razmak ili M',
],
'radio_hint' => [
    'de'=>'Klicke Play zum Hören','en'=>'Click Play to listen',
    'fr'=>'Cliquez sur Play pour écouter','nl'=>'Klik op Play om te luisteren',
    'pl'=>'Kliknij Play by słuchać','cs'=>'Klikni Play pro poslech',
    'hu'=>'Kattints Play-re a hallgatáshoz','ro'=>'Apasă Play pentru a asculta',
    'bg'=>'Натисни Play за слушане','el'=>'Πάτα Play για να ακούσεις',
    'fi'=>'Paina Play kuunnellaksesi','sv'=>'Tryck Play för att lyssna',
    'no'=>'Trykk Play for å lytte','da'=>'Tryk Play for at lytte',
    'ru'=>'Нажмите Play для прослушивания','uk'=>'Натисніть Play для прослуховування',
    'tr'=>'Dinlemek için Play\'e tıklayın','it'=>'Clicca Play per ascoltare',
    'hr'=>'Klikni Play za slušanje','sl'=>'Klikni Play za poslušanje',
    'sk'=>'Klikni Play pre počúvanie','lv'=>'Nospied Play lai klausītos',
    'lt'=>'Spustelėk Play klausytis','et'=>'Vajuta Play kuulamiseks','sr'=>'Klikni Play za slušanje',
],
'radio_ready' => [
    'de'=>'Bereit','en'=>'Ready','fr'=>'Prêt','nl'=>'Klaar',
    'pl'=>'Gotowy','cs'=>'Připraven','hu'=>'Kész','ro'=>'Gata',
    'bg'=>'Готов','el'=>'Έτοιμο','fi'=>'Valmis','sv'=>'Redo',
    'no'=>'Klar','da'=>'Klar','ru'=>'Готово','uk'=>'Готово',
    'tr'=>'Hazır','it'=>'Pronto','hr'=>'Spreman','sl'=>'Pripravljen',
    'sk'=>'Pripravený','lv'=>'Gatavs','lt'=>'Paruošta','et'=>'Valmis','sr'=>'Spreman',
],
'radio_stopped' => [
    'de'=>'Gestoppt','en'=>'Stopped','fr'=>'Arrêté','nl'=>'Gestopt',
    'pl'=>'Zatrzymany','cs'=>'Zastaveno','hu'=>'Megállítva','ro'=>'Oprit',
    'bg'=>'Спряно','el'=>'Σταμάτησε','fi'=>'Pysäytetty','sv'=>'Stoppad',
    'no'=>'Stoppet','da'=>'Stoppet','ru'=>'Остановлено','uk'=>'Зупинено',
    'tr'=>'Durduruldu','it'=>'Fermato','hr'=>'Zaustavljeno','sl'=>'Ustavljeno',
    'sk'=>'Zastavené','lv'=>'Apturēts','lt'=>'Sustabdyta','et'=>'Peatatud','sr'=>'Zaustavljeno',
],
'listeners' => [
    'de'=>'Hörer','en'=>'Listeners','fr'=>'Auditeurs','nl'=>'Luisteraars',
    'pl'=>'Słuchaczy','cs'=>'Posluchačů','hu'=>'Hallgató','ro'=>'Ascultători',
    'bg'=>'Слушатели','el'=>'Ακροατές','fi'=>'Kuulijaa','sv'=>'Lyssnare',
    'no'=>'Lyttere','da'=>'Lyttere','ru'=>'Слушателей','uk'=>'Слухачів',
    'tr'=>'Dinleyici','it'=>'Ascoltatori','hr'=>'Slušatelja','sl'=>'Poslušalcev',
    'sk'=>'Poslucháčov','lv'=>'Klausītāji','lt'=>'Klausytojų','et'=>'Kuulajat','sr'=>'Slušalaca',
],
'stream_err' => [
    'de'=>'Stream nicht verfügbar','en'=>'Stream unavailable',
    'fr'=>'Stream indisponible','nl'=>'Stream niet beschikbaar',
    'pl'=>'Stream niedostępny','cs'=>'Stream nedostupný','hu'=>'Stream nem elérhető',
    'ro'=>'Stream indisponibil','bg'=>'Потокът е недостъпен','el'=>'Ροή μη διαθέσιμη',
    'fi'=>'Virta ei saatavilla','sv'=>'Ström ej tillgänglig',
    'no'=>'Strøm utilgjengelig','da'=>'Stream utilgængelig',
    'ru'=>'Поток недоступен','uk'=>'Потік недоступний','tr'=>'Yayın kullanılamıyor',
    'it'=>'Stream non disponibile','hr'=>'Stream nedostupan','sl'=>'Stream ni na voljo',
    'sk'=>'Stream nedostupný','lv'=>'Straume nav pieejama',
    'lt'=>'Srautas nepasiekiamas','et'=>'Voog pole saadaval','sr'=>'Stream nedostupan',
],
'click_first' => [
    'de'=>'Erst klicken, dann Radio','en'=>'Click somewhere first, then radio',
    'fr'=>'Cliquez d\'abord, puis radio','nl'=>'Klik eerst, dan radio',
    'pl'=>'Najpierw kliknij, potem radio','cs'=>'Nejprve klikni, pak rádio',
    'hu'=>'Előbb kattints, majd rádió','ro'=>'Mai întâi click, apoi radio',
    'bg'=>'Първо кликни, после радио','el'=>'Πρώτα κλικ, μετά ραδιόφωνο',
    'fi'=>'Klikkaa ensin, sitten radio','sv'=>'Klicka först, sedan radio',
    'no'=>'Klikk først, så radio','da'=>'Klik først, så radio',
    'ru'=>'Сначала нажмите, потом радио','uk'=>'Спочатку натисніть, потім радіо',
    'tr'=>'Önce tıkla, sonra radyo','it'=>'Prima clicca, poi radio',
    'hr'=>'Prvo klikni, onda radio','sl'=>'Najprej klikni, nato radio',
    'sk'=>'Najprv klikni, potom rádio','lv'=>'Vispirms noklikšķini, tad radio',
    'lt'=>'Pirmiausia spustelėk, paskui radijas','et'=>'Esmalt klõpsa, siis raadio','sr'=>'Prvo klikni, onda radio',
],
'server_lbl' => [
    'de'=>'Server','en'=>'Server','fr'=>'Serveur','nl'=>'Server',
    'pl'=>'Serwer','cs'=>'Server','hu'=>'Szerver','ro'=>'Server',
    'bg'=>'Сървър','el'=>'Διακομιστής','fi'=>'Palvelin','sv'=>'Server',
    'no'=>'Server','da'=>'Server','ru'=>'Сервер','uk'=>'Сервер',
    'tr'=>'Sunucu','it'=>'Server','hr'=>'Poslužitelj','sl'=>'Strežnik',
    'sk'=>'Server','lv'=>'Serveris','lt'=>'Serveris','et'=>'Server','sr'=>'Server',
],
];
$t = fn(string $k): string => $T[$k][$lang] ?? $T[$k]['en'] ?? $k;

// ── Computed vars ──────────────────────────────────────────────────────────────
$fdlBase     = 'https://' . ($_SERVER['HTTP_HOST'] ?? 'fdl2.wonx.eu') . '/motd';
$streamUrl   = 'https://radio.wonx.eu/stream/mp3/192kps';

// ── Initial Now-Playing (server-side render) ───────────────────────────────
$_initTitle  = "Natural's Gaming Radio";
$_initArtist = '';
try {
    $_npFile = '/home/natural-radio/htdocs/radio.wonx.eu/api/now_playing.php';
    if (file_exists($_npFile)) {
        ob_start(); include $_npFile; $_npJson = ob_get_clean();
    } else {
        $_ctx = stream_context_create(['http'=>['timeout'=>2,'ignore_errors'=>true]]);
        $_npJson = @file_get_contents('https://radio.wonx.eu/api/now_playing.php', false, $_ctx) ?: '';
    }
    if ($_npJson) {
        $_np = json_decode($_npJson, true);
        $_initTitle  = ($_np['track']['title']  ?? $_np['title']  ?? '') ?: $_initTitle;
        $_initArtist = ($_np['track']['artist'] ?? $_np['artist'] ?? '') ?: '';
    }
} catch (\Throwable $_e) {}
$serverFull  = $serverIp.':'.$serverPort;
$displayName = $serverName ?: "Natural's Gaming Area";

$mapThumb    = $currentMap
    ? 'https://image.gametracker.com/images/maps/160x120/css/'.rawurlencode($currentMap).'.jpg'
    : '';
$nextThumb   = $nextMap
    ? 'https://image.gametracker.com/images/maps/160x120/css/'.rawurlencode($nextMap).'.jpg'
    : '';

// SVG placeholder for failed map images (28x21 px)
$nmPlaceholder = 'data:image/svg+xml;base64,'.base64_encode('<svg xmlns="http://www.w3.org/2000/svg" width="28" height="21"><rect width="28" height="21" fill="#1a1a1a" rx="3"/><text x="14" y="15" text-anchor="middle" fill="#555" font-size="12" font-family="sans-serif">?</text></svg>');

$jsConf = json_encode([
    'n'    => $playerName, 's'   => $steamId64,
    'm'    => $currentMap, 'nm'  => $nextMap,
    'p'    => $players,    'mp'  => $maxPlayers, 'b' => $bots,
    'sn'   => $displayName,'srv' => $serverFull,
    'lay'  => $layout,
    'vid'  => ['webm'=>$fdlBase.'/trailer-css-vp9.webm','mp4'=>$fdlBase.'/trailer-css.mp4'],
    'stream'=> $streamUrl,
    'np'   => '?action=api&target=nowplaying',
    'acc'  => $accent,
    'mapThumb'  => $mapThumb,
    'nextThumb' => $nextThumb,
    'i18n' => [
        'stopped'    => $t('radio_stopped'),
        'ready'      => $t('radio_ready'),
        'listeners'  => $t('listeners'),
        'stream_err' => $t('stream_err'),
        'click_first'=> $t('click_first'),
        'sound_on'   => '🔊 '.$t('sound_btn'),
        'sound_off'  => '🔇 '.$t('sound_btn'),
    ],
], JSON_HEX_TAG|JSON_HEX_AMP|JSON_UNESCAPED_SLASHES);
?>
<!doctype html>
<html lang="<?= $lang ?>">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate">
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Expires" content="Thu, 01 Jan 1970 00:00:00 GMT">
  <meta http-equiv="Last-Modified" content="<?= $now ?>">
  <title><?= htmlspecialchars($playerName, ENT_QUOTES|ENT_HTML5) ?> – <?= htmlspecialchars($displayName, ENT_QUOTES|ENT_HTML5) ?></title>
  <link rel="icon" href="data:,">
  <style>
    :root{
      --acc:<?= $accent ?>;
      --accA:<?= $rawColor ? $accent.'55':'rgba(255,170,0,.33)' ?>;
      --bg:#060608;--bar:rgba(0,0,0,.94);--txt:#eaeaea;--dim:rgba(255,255,255,.5);--r:5px;
      --tb:92px;    /* topbar */
      --bb:130px;   /* bottombar */
    }
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
    html{font-size:18px;}
    body{width:100%;height:100%;background:var(--bg);overflow:hidden;
      font-family:'Arial Narrow',Arial,sans-serif;color:var(--txt);}

    /* ── Background ── */
    #bgs{position:fixed;inset:0;z-index:0;
      background:radial-gradient(ellipse at 18% 28%,rgba(255,170,0,.07) 0%,transparent 52%),
                 radial-gradient(ellipse at 82% 72%,rgba(0,80,200,.08) 0%,transparent 52%),var(--bg);}
    #vw{position:fixed;inset:0;z-index:0;display:none;cursor:pointer;}
    #vw video{width:100%;height:100%;object-fit:cover;}
    body.lv #vw{display:block;}

    /* ── Topbar ── */
    #tb{position:fixed;top:0;left:0;right:0;z-index:20;
      background:var(--bar);border-bottom:2.5px solid color-mix(in srgb,var(--acc) 55%,transparent);
      backdrop-filter:blur(8px);
      display:flex;align-items:center;padding:0 20px;height:var(--tb);gap:14px;}
    #logo{font-size:1.1rem;font-weight:bold;color:var(--acc);letter-spacing:.09em;
      text-transform:uppercase;flex-shrink:1;min-width:0;max-width:36%;
      display:flex;flex-direction:column;gap:1px;overflow:hidden;}
    #logo-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    #logo-sub{font-size:.66rem;color:rgba(255,200,80,.42);letter-spacing:.03em;
      text-transform:none;font-weight:normal;white-space:nowrap;overflow:hidden;
      text-overflow:ellipsis;font-family:monospace;}
    #nav{display:flex;gap:7px;flex:1;justify-content:center;}
    #nav a{padding:10px 18px;font-size:1rem;font-weight:bold;text-decoration:none;
      text-transform:uppercase;letter-spacing:.06em;color:#bbb;
      border:2px solid rgba(255,255,255,.2);border-radius:var(--r);white-space:nowrap;
      cursor:pointer;transition:background .15s,color .15s,border-color .15s;}
    #nav a:hover{background:var(--accA);color:var(--acc);
      border-color:color-mix(in srgb,var(--acc) 65%,transparent);}
    #tbr{display:flex;gap:8px;flex-shrink:0;align-items:center;}
    .btn{background:rgba(255,255,255,.08);color:var(--txt);
      border:2px solid rgba(255,255,255,.22);border-radius:var(--r);
      padding:10px 18px;font-size:1rem;font-weight:bold;cursor:pointer;user-select:none;
      transition:background .15s,border-color .15s;white-space:nowrap;line-height:1.2;}
    .btn:hover{background:rgba(255,255,255,.2);}
    .btn.on{border-color:color-mix(in srgb,var(--acc) 70%,transparent);
      background:var(--accA);color:var(--acc);}

    /* ── Bottombar ── */
    #bb{position:fixed;bottom:0;left:0;right:0;z-index:20;
      background:var(--bar);border-top:2.5px solid color-mix(in srgb,var(--acc) 48%,transparent);
      backdrop-filter:blur(8px);
      padding:0 20px;height:var(--bb);
      display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;}

    /* Left: welcome */
    #bb-left{display:flex;flex-direction:column;gap:3px;min-width:0;}
    #greet{font-size:.78rem;color:var(--dim);text-transform:uppercase;letter-spacing:.1em;}
    #greet-name{font-size:1.2rem;font-weight:bold;color:var(--acc);
      white-space:nowrap;overflow:hidden;max-width:260px;}
    #gn.scroll{display:inline-block;white-space:nowrap;animation:scrollname 8s ease-in-out infinite;}
    @keyframes scrollname{0%,20%{transform:translateX(0);}70%,90%{transform:translateX(var(--scroll-dx,0px));}100%{transform:translateX(0);}}
    #motd-hint{font-size:.8rem;color:rgba(255,255,255,.38);}
    #motd-hint strong{color:rgba(255,200,80,.6);}

    /* Center: Radio strip */
    #np-strip{
      display:flex;align-items:center;gap:12px;
      background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
      border-radius:8px;padding:10px 14px;min-width:0;overflow:hidden;
    }
    #np-art-wrap{position:relative;flex-shrink:0;}
    #np-cover{width:56px;height:56px;border-radius:5px;object-fit:cover;
      background:#111;border:1px solid rgba(255,255,255,.12);display:block;}
    #np-cover.h{display:none;}
    #np-note{font-size:1.6rem;line-height:1;color:var(--acc);flex-shrink:0;}
    #np-info{flex:1;min-width:0;}
    #np-title{font-size:1rem;font-weight:bold;color:var(--txt);overflow:hidden;white-space:nowrap;}
    #np-artist{font-size:.82rem;color:var(--dim);overflow:hidden;white-space:nowrap;}
    #np-title-txt,#np-artist-txt{display:inline-block;white-space:nowrap;}
    .np-scroll{animation:npscroll 9s ease-in-out infinite;}
    @keyframes npscroll{0%,25%{transform:translateX(0);}65%,85%{transform:translateX(var(--np-dx,0px));}100%{transform:translateX(0);}}
    #np-ctrl{display:flex;align-items:center;gap:6px;flex-shrink:0;}
    .np-btn{width:38px;height:38px;border-radius:50%;border:2px solid rgba(255,255,255,.25);
      background:rgba(255,255,255,.08);color:var(--txt);cursor:pointer;font-size:.95rem;
      display:flex;align-items:center;justify-content:center;
      transition:background .15s,border-color .15s;}
    .np-btn:hover{background:var(--accA);border-color:var(--acc);}
    .np-btn.on{background:var(--accA);border-color:color-mix(in srgb,var(--acc) 70%,transparent);color:var(--acc);}

    /* Right: Map + Players */
    #bb-right{display:flex;align-items:center;gap:14px;justify-content:flex-end;}
    #map-card{display:flex;align-items:center;gap:10px;cursor:default;}
    #map-thumb-wrap{position:relative;flex-shrink:0;}
    #map-thumb{width:100px;height:75px;border-radius:5px;object-fit:cover;
      background:#111;border:1px solid rgba(255,255,255,.15);display:block;
      transition:transform .25s,box-shadow .25s;cursor:zoom-in;position:relative;z-index:1;}
    #map-thumb:hover{transform:scale(2.2);transform-origin:right center;z-index:22;
      box-shadow:0 4px 24px rgba(0,0,0,.85);}
    #map-thumb.h{display:none;}
    #map-thumb-placeholder{width:100px;height:75px;border-radius:5px;
      background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
      display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0;}
    #map-details{display:flex;flex-direction:column;gap:4px;}
    .map-name-big{font-size:1.05rem;font-weight:bold;color:var(--txt);white-space:nowrap;}
    .map-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--dim);}
    .map-next-line{font-size:.82rem;color:var(--dim);display:flex;align-items:center;gap:5px;white-space:nowrap;}
    .map-next-line img{width:32px;height:24px;border-radius:3px;object-fit:cover;
      background:#111;border:1px solid rgba(255,255,255,.12);
      transition:transform .25s,box-shadow .25s;cursor:zoom-in;position:relative;z-index:1;}
    .map-next-line img:hover{transform:scale(5);transform-origin:right bottom;z-index:22;
      box-shadow:0 4px 24px rgba(0,0,0,.85);}
    #player-badges{display:flex;flex-direction:column;gap:6px;align-items:flex-end;flex-shrink:0;}
    .badge{display:flex;align-items:center;gap:6px;
      background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
      border-radius:20px;padding:5px 12px;font-size:.9rem;white-space:nowrap;cursor:default;}
    .badge span{font-size:.72rem;color:var(--dim);}
    .badge strong{color:var(--txt);}
    #srv-addr{font-size:.72rem;color:rgba(255,255,255,.3);font-family:monospace;
      text-align:right;white-space:nowrap;}

    /* ── Bomb countdown ── */
    #bomb{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
      z-index:15;display:none;align-items:center;gap:16px;
      background:rgba(0,0,0,.9);border:2px solid rgba(180,20,0,.6);
      border-radius:6px;padding:18px 36px;
      box-shadow:0 0 32px rgba(180,0,0,.25),0 2px 16px rgba(0,0,0,.8);}
    body.lv #bomb{display:flex;}
    #bomb .bi{font-size:2.6rem;filter:drop-shadow(0 0 6px rgba(255,80,0,.5));}
    #cd{font-family:'Consolas','Courier New',monospace;font-size:3.4rem;font-weight:bold;
      color:#ff2200;text-shadow:0 0 12px #ff2200;letter-spacing:.14em;
      font-variant-numeric:tabular-nums;}
    @keyframes bl{0%,49%{opacity:1}50%,100%{opacity:.1}}
    #bomb.bl #cd{animation:bl .42s step-end infinite;}
    #bomb.done{border-color:rgba(0,180,0,.6);}
    #bomb.done #cd{color:#00cc44;text-shadow:0 0 12px #00cc44;animation:none;}

    /* ── Unmute overlay ── */
    #mute-ov{
      position:fixed;top:var(--tb);bottom:var(--bb);left:0;right:0;z-index:25;
      display:none;align-items:center;justify-content:center;flex-direction:column;gap:16px;
      pointer-events:auto;cursor:pointer;}
    body.lv #mute-ov{display:flex;}
    #mute-ov.h{display:none!important;}
    .mute-ring{
      width:110px;height:110px;border-radius:50%;
      background:rgba(0,0,0,.75);border:3px solid rgba(255,255,255,.8);
      display:flex;align-items:center;justify-content:center;
      font-size:2.8rem;color:#fff;
      box-shadow:0 0 40px rgba(0,0,0,.7);
      transition:transform .15s,background .15s;}
    .mute-ring:hover{transform:scale(1.08);background:rgba(0,0,0,.9);}
    .mute-label{font-size:1rem;color:rgba(255,255,255,.8);
      background:rgba(0,0,0,.65);padding:7px 20px;border-radius:20px;
      backdrop-filter:blur(4px);}

    /* ── Volume popup ── */
    #vol{position:fixed;bottom:calc(var(--bb) + 12px);left:50%;transform:translateX(-50%);z-index:25;
      display:none;align-items:center;gap:10px;
      background:rgba(0,0,0,.9);border:1px solid rgba(255,255,255,.18);
      border-radius:var(--r);padding:12px 18px;}
    #vol.sh{display:flex;}
    input[type=range]{-webkit-appearance:none;height:5px;
      background:rgba(255,255,255,.22);border-radius:3px;outline:none;cursor:pointer;}
    #vs{width:140px;}#rvs{width:140px;}
    input[type=range]::-webkit-slider-thumb{
      -webkit-appearance:none;width:17px;height:17px;border-radius:50%;
      background:var(--acc);cursor:pointer;}
    .vl{font-size:.8rem;color:var(--dim);width:40px;}

    /* ── Info layout ── */
    #iw{position:fixed;top:var(--tb);bottom:var(--bb);left:0;right:0;z-index:10;display:none;
      align-items:center;justify-content:center;padding:24px;overflow-y:auto;}
    body.li #iw{display:flex;}
    .igrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
      gap:18px;width:100%;max-width:900px;}
    .ic{background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.13);
      border-radius:8px;padding:24px 26px;backdrop-filter:blur(4px);text-align:center;
      transition:border-color .2s,background .2s;cursor:default;}
    .ic:hover{border-color:var(--accA);background:rgba(255,255,255,.1);}
    .icl{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
      color:var(--dim);margin-bottom:10px;}
    .icv{font-size:1.8rem;font-weight:bold;color:var(--acc);line-height:1.1;}
    .ics{font-size:.78rem;color:var(--dim);margin-top:6px;}
    .icbig{font-size:2.8rem;}
    .bw{margin-top:10px;height:7px;background:rgba(255,255,255,.12);border-radius:3px;overflow:hidden;}
    .bf{height:100%;background:var(--acc);border-radius:3px;transition:width 1.5s;}

    /* ── Radio layout ── */
    #rw{position:fixed;top:var(--tb);bottom:var(--bb);left:0;right:0;z-index:10;display:none;
      align-items:center;justify-content:center;flex-direction:column;gap:20px;padding:24px;}
    body.lr #rw{display:flex;}
    #rp{background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.13);
      border-radius:12px;padding:34px 44px;backdrop-filter:blur(4px);
      text-align:center;width:100%;max-width:500px;}
    #rcov{width:140px;height:140px;border-radius:8px;object-fit:cover;background:#111;
      margin:0 auto 20px;display:block;border:2px solid rgba(255,255,255,.15);}
    #rcov.h{display:none;}
    #rtit{font-size:1.2rem;font-weight:bold;color:var(--acc);margin-bottom:6px;line-height:1.3;}
    #rart{font-size:.95rem;color:var(--dim);margin-bottom:24px;}
    #rpb{width:82px;height:82px;border-radius:50%;background:var(--acc);
      border:none;cursor:pointer;font-size:2rem;color:#000;
      margin:0 auto 18px;display:flex;align-items:center;justify-content:center;
      transition:transform .15s;box-shadow:0 0 24px var(--accA);}
    #rpb:hover{transform:scale(1.08);}
    #rpb.playing{background:rgba(255,255,255,.1);color:var(--acc);
      border:2.5px solid var(--acc);box-shadow:none;}
    #rvol{display:flex;align-items:center;gap:10px;justify-content:center;}
    #rst{font-size:.82rem;color:var(--dim);margin-top:14px;min-height:1.2em;}
    #rls{font-size:.82rem;color:var(--dim);}

    /* ── Toast ── */
    #toast{position:fixed;bottom:calc(var(--bb) + 12px);right:18px;z-index:50;
      background:rgba(0,0,0,.94);color:var(--txt);
      border:1px solid rgba(255,255,255,.2);border-radius:var(--r);
      padding:10px 18px;font-size:.88rem;pointer-events:none;
      opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s;}
    #toast.sh{opacity:1;transform:none;}
    #toast.err{border-color:rgba(220,50,50,.6);}

    /* ── Debug ── */
    #dbg{position:fixed;top:calc(var(--tb) + 8px);right:10px;z-index:100;
      background:rgba(0,0,0,.92);border:1px solid rgba(255,255,255,.3);
      border-radius:6px;padding:12px 16px;font-family:'Consolas',monospace;
      font-size:.72rem;color:#0ff;max-width:340px;line-height:1.7;display:none;}
    #dbg.sh{display:block;}
    #dbg .dk{color:rgba(255,255,255,.5);}
  </style>
</head>
<body class="l<?= $layout[0] ?>">
  <div id="bgs"></div>

  <!-- Video -->
  <div id="vw">
    <video id="vid" autoplay muted playsinline preload="auto">
      <source src="<?= $fdlBase ?>/trailer-css.mp4" type="video/mp4">
      <source src="<?= $fdlBase ?>/trailer-css-vp9.webm" type="video/webm; codecs=vp9,vorbis">
    </video>
  </div>

  <!-- Bomb countdown -->
  <div id="bomb"><span class="bi">💣</span><span id="cd">--:--</span></div>

  <!-- Unmute overlay -->
  <div id="mute-ov">
    <div class="mute-ring">🔊</div>
    <div class="mute-label"><?= $t('unmute') ?></div>
  </div>

  <!-- Info layout -->
  <div id="iw">
    <div class="igrid">
      <div class="ic" title="<?= htmlspecialchars($t('players'), ENT_QUOTES|ENT_HTML5) ?>">
        <div class="icl"><?= htmlspecialchars($t('players'), ENT_QUOTES|ENT_HTML5) ?></div>
        <div class="icv icbig" id="ic-n"></div>
        <?php if ($steamId64): ?><div class="ics"><a href="https://steamcommunity.com/profiles/<?= htmlspecialchars($steamId64, ENT_QUOTES|ENT_HTML5) ?>" target="_blank" style="color:var(--dim);font-size:.72rem;text-decoration:none">Steam ↗</a></div><?php endif; ?>
      </div>
      <div class="ic" title="<?= htmlspecialchars($t('curr_map'), ENT_QUOTES|ENT_HTML5) ?>">
        <div class="icl"><?= htmlspecialchars($t('curr_map'), ENT_QUOTES|ENT_HTML5) ?></div>
        <div class="icv"><?= htmlspecialchars($currentMap ?: '—', ENT_QUOTES|ENT_HTML5) ?></div>
        <?php if ($nextMap): ?><div class="ics"><?= htmlspecialchars($t('next_map'), ENT_QUOTES|ENT_HTML5) ?>: <?= htmlspecialchars($nextMap, ENT_QUOTES|ENT_HTML5) ?></div><?php endif; ?>
        <?php if ($mapThumb): ?><img src="<?= htmlspecialchars($mapThumb, ENT_QUOTES|ENT_HTML5) ?>" style="width:80px;height:60px;border-radius:4px;margin-top:10px;object-fit:cover;border:1px solid rgba(255,255,255,.12)" onerror="this.style.display='none'"><?php endif; ?>
      </div>
      <div class="ic" title="<?= htmlspecialchars($t('players_online'), ENT_QUOTES|ENT_HTML5) ?>">
        <div class="icl"><?= htmlspecialchars($t('players_online'), ENT_QUOTES|ENT_HTML5) ?></div>
        <div class="icv"><?= $players ?><span style="font-size:1.1rem;color:var(--dim)">/<?= $maxPlayers ?></span></div>
        <?php if ($bots > 0): ?><div class="ics"><?= $bots ?> Bot<?= $bots!==1?'s':'' ?></div><?php endif; ?>
        <div class="bw"><div class="bf" style="width:<?= $maxPlayers>0?round($players/$maxPlayers*100):0 ?>%"></div></div>
      </div>
      <div class="ic" title="<?= htmlspecialchars($t('server_lbl'), ENT_QUOTES|ENT_HTML5) ?>">
        <div class="icl"><?= htmlspecialchars($t('server_lbl'), ENT_QUOTES|ENT_HTML5) ?></div>
        <div class="icv" style="font-size:1rem"><?= htmlspecialchars($serverFull, ENT_QUOTES|ENT_HTML5) ?></div>
        <?php if ($serverLocation): ?><div class="ics" style="color:var(--acc)">📍 <?= htmlspecialchars($serverLocation, ENT_QUOTES|ENT_HTML5) ?></div><?php endif; ?>
        <div class="ics"><?= htmlspecialchars($displayName, ENT_QUOTES|ENT_HTML5) ?></div>
        <div class="ics" style="margin-top:6px;font-family:monospace;font-size:.75rem">connect <?= htmlspecialchars($serverFull, ENT_QUOTES|ENT_HTML5) ?></div>
      </div>
    </div>
  </div>

  <!-- Radio layout -->
  <div id="rw">
    <div id="rp">
      <img id="rcov" src="" alt="" class="h">
      <div id="rtit"><?= htmlspecialchars($displayName, ENT_QUOTES|ENT_HTML5) ?> Radio</div>
      <div id="rart"><?= htmlspecialchars($t('radio_hint'), ENT_QUOTES|ENT_HTML5) ?></div>
      <button id="rpb" type="button" aria-label="Play/Pause" title="Play/Pause">▶</button>
      <div id="rvol">
        <span title="-">🔈</span>
        <input type="range" id="rvs" min="0" max="100" value="70" title="Volume">
        <span title="+">🔊</span>
        <span class="vl" id="rvl">70%</span>
      </div>
      <div id="rst"><?= htmlspecialchars($t('radio_ready'), ENT_QUOTES|ENT_HTML5) ?></div>
      <div id="rls"></div>
    </div>
  </div>

  <!-- Volume popup -->
  <div id="vol">
    <span title="-">🔈</span>
    <input type="range" id="vs" min="0" max="100" value="60" title="Volume">
    <span title="+">🔊</span>
    <span class="vl" id="vl">60%</span>
  </div>

  <!-- Topbar -->
  <header id="tb">
    <div id="logo" title="<?= htmlspecialchars($displayName, ENT_QUOTES|ENT_HTML5) ?>"><div id="logo-name">⚡ <?= htmlspecialchars($displayName, ENT_QUOTES|ENT_HTML5) ?></div><?php if($serverLocation||$serverFull): ?><div id="logo-sub"><?php if($serverLocation): ?>📍 <?= htmlspecialchars($serverLocation, ENT_QUOTES|ENT_HTML5) ?> · <?php endif; ?><?= htmlspecialchars($serverFull, ENT_QUOTES|ENT_HTML5) ?></div><?php endif; ?></div>
    <nav id="nav">
      <a href="https://stats.natural.yt"           target="_blank" title="HLstatsX">📊 Stats</a>
      <a href="https://bans.natural.yt"            target="_blank" title="Sourcebans">🔨 Bans</a>
      <a href="https://wi.natural.yt"              target="_blank" title="Homepage">🏠 HP</a>
      <a href="<?= htmlspecialchars($fdlBase, ENT_QUOTES|ENT_HTML5) ?>/rules.php" title="<?= htmlspecialchars($t('rules'), ENT_QUOTES|ENT_HTML5) ?>">📜 <?= htmlspecialchars($t('rules'), ENT_QUOTES|ENT_HTML5) ?></a>
    </nav>
    <div id="tbr">
      <?php if ($layout==='video'): ?>
      <button class="btn" id="mb" type="button" title="<?= htmlspecialchars($t('sound_btn'), ENT_QUOTES|ENT_HTML5) ?> (M)">🔇 <?= htmlspecialchars($t('sound_btn'), ENT_QUOTES|ENT_HTML5) ?></button>
      <button class="btn" id="vb" type="button" title="Volume">🎚 Vol</button>
      <?php endif; ?>
      <?php if ($layout!=='radio'): ?>
      <button class="btn" id="rb" type="button" title="Radio (R)">📻 Radio</button>
      <?php endif; ?>
    </div>
  </header>

  <!-- Bottombar -->
  <footer id="bb">

    <!-- Left: Welcome -->
    <div id="bb-left">
      <div id="greet"><?= htmlspecialchars($t('welcome'), ENT_QUOTES|ENT_HTML5) ?></div>
      <div id="greet-name"><strong id="gn"></strong></div>
      <div id="motd-hint">Chat: <strong>!motd</strong> <?= htmlspecialchars($t('motd_reopen'), ENT_QUOTES|ENT_HTML5) ?></div>
    </div>

    <!-- Center: Radio -->
    <div id="np-strip" title="Natural's Gaming Radio">
      <span id="np-note" class="<?= ($mapThumb ? 'h' : '') ?>">🎵</span>
      <div id="np-art-wrap">
        <img id="np-cover" src="" alt="" class="h" title="Cover">
      </div>
      <div id="np-info">
        <div id="np-title"><span id="np-title-txt"><?= htmlspecialchars($_initTitle, ENT_QUOTES|ENT_HTML5) ?></span></div>
        <div id="np-artist"><span id="np-artist-txt"><?= htmlspecialchars($_initArtist, ENT_QUOTES|ENT_HTML5) ?></span></div>
      </div>
      <div id="np-ctrl">
        <button class="np-btn" id="np-play" title="Play/Pause (R)">▶</button>
        <button class="np-btn" id="np-stop" title="Stop">⏹</button>
        <button class="np-btn" id="np-vol" title="Volume">🔊</button>
      </div>
    </div>

    <!-- Right: Map + Players -->
    <div id="bb-right">
      <div id="map-card">
        <div id="map-thumb-wrap">
          <?php if ($currentMap): ?>
          <img id="map-thumb" src="<?= htmlspecialchars($mapThumb, ENT_QUOTES|ENT_HTML5) ?>"
               alt="<?= htmlspecialchars($currentMap, ENT_QUOTES|ENT_HTML5) ?>"
               title="<?= htmlspecialchars($t('curr_map').': '.$currentMap, ENT_QUOTES|ENT_HTML5) ?>"
               onerror="this.classList.add('h');document.getElementById('map-thumb-placeholder').style.display='flex'">
          <div id="map-thumb-placeholder" style="display:none" title="<?= htmlspecialchars($t('curr_map').': '.$currentMap, ENT_QUOTES|ENT_HTML5) ?>">🗺</div>
          <?php else: ?>
          <div id="map-thumb-placeholder" title="Map">🗺</div>
          <?php endif; ?>
        </div>
        <div id="map-details">
          <div class="map-label"><?= htmlspecialchars($t('curr_map'), ENT_QUOTES|ENT_HTML5) ?></div>
          <div class="map-name-big" title="<?= htmlspecialchars($currentMap ?: '', ENT_QUOTES|ENT_HTML5) ?>"><?= htmlspecialchars($currentMap ?: '—', ENT_QUOTES|ENT_HTML5) ?></div>
          <?php if ($nextMap): ?>
          <a href="<?= htmlspecialchars($fdlBase.'/maps.php?m='.rawurlencode($nextMap), ENT_QUOTES|ENT_HTML5) ?>" target="_blank" style="text-decoration:none;color:inherit">
          <div class="map-next-line" title="<?= htmlspecialchars($t('next_map').': '.$nextMap, ENT_QUOTES|ENT_HTML5) ?>">
            ⏭
            <img src="<?= htmlspecialchars($nextThumb ?: '', ENT_QUOTES|ENT_HTML5) ?>" alt="" onerror="this.src=<?= json_encode($nmPlaceholder) ?>">
            <?= htmlspecialchars($nextMap, ENT_QUOTES|ENT_HTML5) ?>
          </div>
          </a>
          <?php endif; ?>
        </div>
      </div>

      <div id="player-badges">
        <div class="badge" title="<?= htmlspecialchars($t('players_online'), ENT_QUOTES|ENT_HTML5) ?>">
          <strong><?= $players ?>/<?= $maxPlayers ?></strong>
          <span><?= htmlspecialchars($t('players'), ENT_QUOTES|ENT_HTML5) ?></span>
        </div>
        <?php if ($bots > 0): ?>
        <div class="badge" title="<?= $bots ?> Bot<?= $bots!==1?'s':'' ?>">
          🤖 <strong><?= $bots ?></strong> <span>Bot<?= $bots!==1?'s':'' ?></span>
        </div>
        <?php endif; ?>

      </div>
    </div>

  </footer>

  <div id="toast" role="alert"></div>

  <?php if ($debug): ?>
  <div id="dbg" class="sh">
    <strong style="color:#ff0">🐛 DEBUG params</strong><br>
    <?php foreach ($_GET as $k => $v): ?>
    <span class="dk"><?= htmlspecialchars($k) ?>:</span> <?= htmlspecialchars(substr((string)$v,0,60)) ?><br>
    <?php endforeach; ?>
    <span class="dk">PHP:</span> <?= PHP_VERSION ?> | <span class="dk">Layout:</span> <?= $layout ?> | <span class="dk">Lang:</span> <?= $lang ?>
  </div>
  <?php endif; ?>

<script>
(function(){
'use strict';
const C=<?= $jsConf ?>;
function $(id){return document.getElementById(id);}
function esc(s){return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');}
let _tt;
function toast(msg,cls=''){
  const el=$('toast');el.textContent=msg;el.className='sh'+(cls?' '+cls:'');
  clearTimeout(_tt);_tt=setTimeout(()=>el.className='',3200);
}
function p2(n){return n<10?'0'+n:''+n;}
function applyNPScroll(wrap,el){if(!el||!wrap)return;el.classList.remove('np-scroll');el.style.removeProperty('--np-dx');requestAnimationFrame(()=>{if(el.scrollWidth>wrap.clientWidth){el.style.setProperty('--np-dx',-(el.scrollWidth-wrap.clientWidth+12)+'px');el.classList.add('np-scroll');}});}

// ── Greet ─────────────────────────────────────────────────────────────────────
$('gn').textContent=C.n;
const gnWrap=$('greet-name'),gnEl=$('gn');function chkGn(){if(gnWrap&&gnEl&&gnEl.scrollWidth>gnWrap.clientWidth){gnEl.style.setProperty('--scroll-dx',-(gnEl.scrollWidth-gnWrap.clientWidth)+'px');gnEl.classList.add('scroll');}}requestAnimationFrame(chkGn);setTimeout(chkGn,400);
const icn=$('ic-n');if(icn)icn.textContent=C.n;

// ── Now-playing ───────────────────────────────────────────────────────────────
function fetchNP(){
  try{
    var xhr=new XMLHttpRequest();
    xhr.open('GET',C.np,true);
    xhr.onreadystatechange=function(){
      if(xhr.readyState!==4||xhr.status!==200)return;
      try{
        var d=JSON.parse(xhr.responseText);
        var track  = d.track || d;
        var title  = track.title  || d.title  || '';
        var artist = track.artist || d.artist || '';
        var cover  = track.cover_url || d.cover_url || '';
        if(title){ $('np-title-txt').textContent=title; applyNPScroll($('np-title'),$('np-title-txt')); if($('rtit'))$('rtit').textContent=title; }
        if(artist){ $('np-artist-txt').textContent=artist; applyNPScroll($('np-artist'),$('np-artist-txt')); if($('rart'))$('rart').textContent=artist; }
        if(cover){
          var nc=$('np-cover');
          if(nc){nc.src=cover;nc.classList.remove('h');$('np-note').classList.add('h');}
          var rc=$('rcov');if(rc){rc.src=cover;rc.classList.remove('h');}
        }
        if($('rls')&&d.listeners!=null)$('rls').textContent='👥 '+d.listeners+' '+C.i18n.listeners;
      }catch(ex){}
    };
    xhr.send();
  }catch(e){}
}
fetchNP();setInterval(fetchNP,20000);

// ── Video & bomb ──────────────────────────────────────────────────────────────
const vid=$('vid'),bomb=$('bomb'),cd=$('cd');
const muteOv=$('mute-ov');
const mb=$('mb'),vb=$('vb'),vol=$('vol'),vs=$('vs'),vl=$('vl');
let unmuted=false,volOpen=false,tick;

function doUnmute(){
  if(unmuted)return;
  unmuted=true;
  if(muteOv)muteOv.classList.add('h');
  if(vid){vid.muted=false;vid.volume=vs?(vs.value/100):0.6;}
  if(mb){mb.textContent=C.i18n.sound_on;mb.classList.add('on');}
}

function refreshBomb(){
  if(!vid||!vid.duration||isNaN(vid.duration))return;
  const rem=Math.max(0,vid.duration-vid.currentTime);
  cd.textContent=p2(Math.floor(rem/60))+':'+p2(Math.floor(rem)%60);
  rem>0&&rem<=10?bomb.classList.add('bl'):bomb.classList.remove('bl');
  if(rem<=0){clearInterval(tick);bomb.classList.remove('bl');bomb.classList.add('done');cd.textContent='00:00';}
}

if(vid){
  vid.muted=false;vid.volume=0.6;
  vid.play().then(()=>{
    unmuted=true;
    if(muteOv)muteOv.classList.add('h');
    if(mb){mb.textContent=C.i18n.sound_on;mb.classList.add('on');}
  }).catch(()=>{vid.muted=true;vid.play().catch(()=>{});});

  vid.addEventListener('loadedmetadata',refreshBomb);
  vid.addEventListener('play',()=>{clearInterval(tick);tick=setInterval(refreshBomb,200);});
  vid.addEventListener('pause',()=>clearInterval(tick));
  vid.addEventListener('ended',()=>{clearInterval(tick);bomb.classList.add('done');cd.textContent='00:00';});
}

document.addEventListener('click',doUnmute);
document.addEventListener('touchstart',doUnmute,{passive:true});
document.addEventListener('keydown',e=>{
  if(e.target.tagName==='INPUT')return;
  doUnmute();
  if(e.key.toLowerCase()==='m'&&mb)mb.click();
  if(e.key.toLowerCase()==='r')togRadio();
  if(e.code==='Space'){e.preventDefault();if(vid)vid.paused?vid.play():vid.pause();}
  if(e.key==='ArrowUp'){
    if(rA){rA.volume=Math.min(1,rA.volume+.1);toast('Radio Vol '+Math.round(rA.volume*100)+'%');}
    else if(vid)vid.volume=Math.min(1,vid.volume+.1);
  }
  if(e.key==='ArrowDown'){
    if(rA){rA.volume=Math.max(0,rA.volume-.1);toast('Radio Vol '+Math.round(rA.volume*100)+'%');}
    else if(vid)vid.volume=Math.max(0,vid.volume-.1);
  }
});

if(mb)mb.addEventListener('click',e=>{
  e.stopPropagation();
  if(!unmuted){doUnmute();return;}
  if(vid){vid.muted=!vid.muted;mb.textContent=vid.muted?C.i18n.sound_off:C.i18n.sound_on;mb.classList.toggle('on',!vid.muted);}
});
if(vb&&vol)vb.addEventListener('click',e=>{
  e.stopPropagation();
  volOpen=!volOpen;vol.classList.toggle('sh',volOpen);vb.classList.toggle('on',volOpen);
});
const npVol=$('np-vol');
if(npVol&&vol)npVol.addEventListener('click',e=>{
  e.stopPropagation();
  volOpen=!volOpen;vol.classList.toggle('sh',volOpen);
  if(vb)vb.classList.toggle('on',volOpen);npVol.classList.toggle('on',volOpen);
});
if(vs)vs.addEventListener('input',()=>{const v=vs.value/100;if(vl)vl.textContent=vs.value+'%';if(rPlaying&&rA)rA.volume=v;else if(vid)vid.volume=v;});

// ── Radio ─────────────────────────────────────────────────────────────────────
let rA=null,rPlaying=false;
const rpb=$('rpb'),rvs=$('rvs'),rst=$('rst');
const rcov=$('rcov'),rtit=$('rtit'),rart=$('rart'),rls=$('rls');
const rb=$('rb'),npPlay=$('np-play'),npStop=$('np-stop');

function syncRadioUI(){
  const playing=rPlaying;
  if(rpb){rpb.textContent=playing?'⏸':'▶';rpb.classList.toggle('playing',playing);}
  if(npPlay){npPlay.textContent=playing?'⏸':'▶';npPlay.classList.toggle('on',playing);}
  if(npStop)npStop.classList.toggle('on',playing);
  if(rb){rb.textContent=playing?'📻 Stop':'📻 Radio';rb.classList.toggle('on',playing);}
  if(rst)rst.textContent=playing?'▶ Live':C.i18n.stopped;
}

function startRadio(){
  if(!rA){
    rA=new Audio(C.stream);
    rA.volume=rvs?(rvs.value/100):0.7;
    if(vs){vs.value=Math.round(rA.volume*100);if(vl)vl.textContent=vs.value+'%';}
    rA.addEventListener('playing',()=>{rPlaying=true;syncRadioUI();fetchNP();});
    rA.addEventListener('error',()=>{toast(C.i18n.stream_err,'err');stopRadio();});
  }
  if(vid&&!vid.muted){vid.muted=true;if(mb){mb.textContent=C.i18n.sound_off;mb.classList.remove('on');}}
  rA.play().catch(()=>toast(C.i18n.click_first));
}
function stopRadio(){
  rPlaying=false;if(rA){rA.pause();rA.src='';rA=null;}
  syncRadioUI();
}
function pauseRadio(){
  if(!rA)return;
  if(rPlaying){rA.pause();rPlaying=false;}else{rA.play().catch(()=>{});}
  syncRadioUI();
}
function togRadio(){if(rPlaying)pauseRadio();else startRadio();}

if(rpb) rpb.addEventListener('click', e=>{e.stopPropagation();togRadio();});
if(rb)  rb.addEventListener('click',  e=>{e.stopPropagation();togRadio();});
if(npPlay)npPlay.addEventListener('click',e=>{e.stopPropagation();togRadio();});
if(npStop)npStop.addEventListener('click',e=>{e.stopPropagation();stopRadio();});
if(rvs)rvs.addEventListener('input',()=>{if(rA)rA.volume=rvs.value/100;const l=$('rvl');if(l)l.textContent=rvs.value+'%';});

if(C.lay==='radio')startRadio();

})();
</script>
</body>
</html>