@{
    Layout = "_GameLayout";
}

@section Styles {
    <link rel="stylesheet" href="~/css/sicbo-winner.css" />
}

<div class="home">
    <!-- Background Image -->
    <img class="image" src="~/img/image-2.png" />
    
    <!-- Reuse Game Menu -->
    <partial name="_GameMenu" />

    <!-- Winner Content Panel -->
    <div class="winner-panel">
        <!-- Daily Ranking Card -->
        <a href="@Url.Action("DailyRanking", "Home")" class="ranking-card daily">
            <!-- Triangles -->
            <div class="card-triangles">
                <span class="triangle blue">▲</span>
                <span class="triangle white">▲</span>
                <span class="triangle white">▲</span>
            </div>
            
            <!-- Main Character Image -->
            <div class="card-image">
                <img src="~/img/daily-ranking.png" alt="Daily Ranking" />
            </div>
            
            <!-- Dice Images -->
            <img class="dice dice-1" src="~/img/Group.png" alt="" />
            <img class="dice dice-2" src="~/img/Group1.png" alt="" />
            
            <!-- Corner Rectangle -->
            <img class="corner-rectangle" src="~/img/Rectangle_Red.png" alt="" />
            
            <!-- Title -->
            <div class="card-title daily-title">
                <span class="title-line-1">Daily</span>
                <span class="title-line-2">Ranking</span>
            </div>
        </a>

        <!-- Monthly Ranking Card -->
        <a href="@Url.Action("MonthlyRanking", "Home")" class="ranking-card monthly">
            <!-- Triangles -->
            <div class="card-triangles">
                <span class="triangle white">▲</span>
                <span class="triangle blue">▲</span>
                <span class="triangle white">▲</span>
            </div>
            
            <!-- Main Character Image -->
            <div class="card-image">
                <img src="~/img/monthly-ranking.png" alt="Monthly Ranking" />
            </div>
            
            <!-- Dice Image -->
            <img class="dice dice-monthly" src="~/img/GroupN.png" alt="" />
            
            <!-- Corner Rectangle -->
            <img class="corner-rectangle" src="~/img/Rectangle_Blue.png" alt="" />
            
            <!-- Title -->
            <div class="card-title monthly-title">
                <span class="title-line-1">Monthly</span>
                <span class="title-line-2">Ranking</span>
            </div>
        </a>
    </div>
</div>
