<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/bg_helldivers_gradient">

    <!-- Logo Super Tierra - Arriba centro -->
    <ImageView
        android:id="@+id/logo_super_tierra"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_alignParentTop="true"
        android:layout_marginTop="12dp"
        android:src="@drawable/hd_logo"
        android:contentDescription="Super Tierra"
        android:adjustViewBounds="true"
        android:maxWidth="280dp"
        android:tint="#FFFFFF" />

    <!-- Botón Estratagemas - Esquina izquierda -->
    <Button
        android:id="@+id/btn_minijuego"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/logo_super_tierra"
        android:layout_alignParentStart="true"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:background="@drawable/btn_helldivers_primary"
        android:paddingHorizontal="20dp"
        android:paddingVertical="10dp"
        android:text="ESTRATAGEMAS"
        android:textAllCaps="true"
        android:textColor="#FFFFFF"
        android:textSize="14sp" />

    <!-- Botón QR Instagram - Esquina derecha -->
    <Button
        android:id="@+id/btn_qr_instagram"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/logo_super_tierra"
        android:layout_alignParentEnd="true"
        android:layout_marginEnd="16dp"
        android:layout_marginTop="16dp"
        android:background="@drawable/btn_helldivers_primary"
        android:paddingHorizontal="20dp"
        android:paddingVertical="10dp"
        android:text="@string/btn_qr_instagram"
        android:textAllCaps="true"
        android:textColor="#FFFFFF"
        android:textSize="14sp" />

    <!-- Grid de Flechas - Centro -->
    <GridLayout
        android:id="@+id/buttons_grid"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_marginTop="40dp"
        android:translationY="30dp"
        android:rowCount="3"
        android:columnCount="3"
        android:padding="8dp">

        <Space android:layout_width="100dp" android:layout_height="100dp" android:layout_row="0" android:layout_column="0" />

        <ImageButton
            android:id="@+id/btn_up"
            android:layout_width="95dp"
            android:layout_height="95dp"
            android:layout_row="0"
            android:layout_column="1"
            android:background="@drawable/btn_direction"
            android:contentDescription="Up"
            android:rotation="0"
            android:scaleType="centerInside"
            app:tint="#FFFFFF"
            android:src="@drawable/ic_dpad_button" />

        <Space android:layout_width="100dp" android:layout_height="100dp" android:layout_row="0" android:layout_column="2" />

        <ImageButton
            android:id="@+id/btn_left"
            android:layout_width="95dp"
            android:layout_height="95dp"
            android:layout_row="1"
            android:layout_column="0"
            android:background="@drawable/btn_direction"
            android:contentDescription="Left"
            android:rotation="-90"
            android:scaleType="centerInside"
            app:tint="#FFFFFF"
            android:src="@drawable/ic_dpad_button" />

        <ImageButton
            android:id="@+id/btn_down"
            android:layout_width="95dp"
            android:layout_height="95dp"
            android:layout_row="1"
            android:layout_column="1"
            android:background="@drawable/btn_direction"
            android:contentDescription="Down"
            android:rotation="180"
            android:scaleType="centerInside"
            app:tint="#FFFFFF"
            android:src="@drawable/ic_dpad_button" />

        <ImageButton
            android:id="@+id/btn_right"
            android:layout_width="95dp"
            android:layout_height="95dp"
            android:layout_row="1"
            android:layout_column="2"
            android:background="@drawable/btn_direction"
            android:contentDescription="Right"
            android:rotation="90"
            android:scaleType="centerInside"
            app:tint="#FFFFFF"
            android:src="@drawable/ic_dpad_button" />

        <Space android:layout_width="100dp" android:layout_height="20dp" android:layout_row="2" android:layout_column="0" />
        <Space android:layout_width="100dp" android:layout_height="20dp" android:layout_row="2" android:layout_column="1" />
        <Space android:layout_width="100dp" android:layout_height="20dp" android:layout_row="2" android:layout_column="2" />

    </GridLayout>

    <!-- Footer - Versión abajo centro -->

    <!-- Botón Música - Derecha, nivelado con el botón de la derecha -->
    <Button
        android:id="@+id/btn_music"
        android:layout_width="56dp"
        android:layout_height="56dp"
        android:layout_alignParentEnd="true"
        android:layout_alignBottom="@id/buttons_grid"
        android:layout_marginEnd="16dp"
        android:layout_marginBottom="20dp"
        android:background="@drawable/btn_helldivers_primary"
        android:text="♪"
        android:textColor="#FFFFFF"
        android:textSize="24sp"
        android:textStyle="bold" />

</RelativeLayout>