@font-face {
    font-family: "Fredoka";
    src: url("../Fonts/Fredoka/Fredoka_SemiCondensed-Regular.ttf");
    font-display: swap;
}

.GameSquare {
}

/* Slight zoom of image on hover */
.GameSquare:hover .imgGame {
    transform: scale(1.08);
    filter: saturate(1.08);
}

/* Don't zoom on touch devices */
@media (pointer: coarse) {
    .GameSquare:hover .imgGame {
        transform: none;
        filter: none;
    }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .imgGame {
        transition: none !important;
    }
    .GameSquare:hover .imgGame {
        transform: none;
        filter: none;
    }
}

.imgGame {
    width: 180px;
    height: 150px;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0,0,0,.30);
    transition: transform .14s ease, filter .14s ease;
    will-change: transform;
    transform-origin: center;
}

.GameLabel {
    font-size: 24px;
    font-weight: 600;
    font-family: "Fredoka";
    padding-bottom: 26px;
    border-radius: 6px;
}
.GameLabelSub {
    color: darkblue;
    font-weight: 500;
    font-size: 18px;
    line-height: 24px;
    font-family: "Fredoka";
}
.GameLabelBelowGame {
    color: cyan;
    font-weight: 400;
    font-size: 18px;
    line-height: 22px;
    font-family: "Fredoka";
}
.ToolTip {
    background: linear-gradient(Teal,AliceBlue);
    border: 2px solid DarkRed;
    padding: 5px;
    width: 240px;
    display: none;
    font-family: "Fredoka";
    border-radius: 12px;
}
.ToolTipGameTitle {
    color: Orange;
    text-decoration: underline;
    font-weight: 600;
    font-size: 24px;
    line-height: 26px;
    font-family: "Fredoka";
    padding-bottom: 26px;
}
.ToolTipDesc {
    color: AliceBlue;
    font-family: David;
    font-weight: 400;
    font-size: 22px;
    line-height: 22px;
    font-family: "Fredoka";
    padding-bottom: 22px;
}
.ToolTipStatistics_1 {
    color: Maroon;
    font-weight: 400;
    font-size: 18px;
    line-height: 18px;
    margin: 10px;
    font-family: "Fredoka";
}
.ToolTipStatistics_2 {
    color: Crimson;
    font-weight: 400;
    font-size: 18px;
    line-height: 18px;
    margin: 10px;
    font-family: "Fredoka";
}
.ToolTipStatistics_3 {
    color: Fuchsia;
    font-weight: 300;
    font-size: 18px;
    line-height: 18px;
    margin: 10px;
    font-family: "Fredoka";
}
#Label1 {
    color: Purple;
    font-family: "Fredoka";
}
#Label2 {
    color: Red;
    font-family: "Fredoka";
}
#Label3 {
    color: Navy;
    font-family: "Fredoka";
}
#Label4 {
    color: Orange;
    font-family: "Fredoka";
}
#Label5 {
    color: Maroon;
    font-family: "Fredoka";
}
#Label6 {
    color: Fuchsia;
    font-family: "Fredoka";
}
#Label7 {
    color: Green;
    font-family: "Fredoka";
}
#Label8 {
    color: Yellow;
    font-family: "Fredoka";
}
#Label9 {
    color: Red;
    font-family: "Fredoka";
}
#Label11 {
    color: Purple;
    font-family: "Fredoka";
}
#Label12 {
    color: Red;
    font-family: "Fredoka";
}
#Label13 {
    color: Navy;
    font-family: "Fredoka";
}
#Label14 {
    color: Orange;
    font-family: "Fredoka";
}
#Label15 {
    color: Maroon;
    font-family: "Fredoka";
}
#Label16 {
    color: Fuchsia;
    font-family: "Fredoka";
}
#Label17 {
    color: Green;
    font-family: "Fredoka";
}
#Label18 {
    color: Yellow;
    font-family: "Fredoka";
}
#Label19 {
    color: Red;
    font-family: "Fredoka";
}
#Label21 {
    color: Purple;
    font-family: "Fredoka";
}
#Label22 {
    color: Red;
    font-family: "Fredoka";
}
#Label23 {
    color: Navy;
    font-family: "Fredoka";
}
#Label24 {
    color: Orange;
    font-family: "Fredoka";
}
#Label25 {
    color: Maroon;
    font-family: "Fredoka";
}
#Label26 {
    color: Fuchsia;
    font-family: "Fredoka";
}
#Label27 {
    color: Green;
    font-family: "Fredoka";
}
#Label28 {
    color: Yellow;
    font-family: "Fredoka";
}
#Label29 {
    color: Red;
    font-family: "Fredoka";
}
#Label30 {
    color: Navy;
    font-family: "Fredoka";
}
#Label31 {
    color: Purple;
    font-family: "Fredoka";
}
#Label32 {
    color: Red;
    font-family: "Fredoka";
}
#Label33 {
    color: Navy;
    font-family: "Fredoka";
}
#Label34 {
    color: Orange;
    font-family: "Fredoka";
}
#Label35 {
    color: Maroon;
    font-family: "Fredoka";
}
#Label36 {
    color: Fuchsia;
    font-family: "Fredoka";
}
#Label37 {
    color: Green;
    font-family: "Fredoka";
}
#Label38 {
    color: Yellow;
    font-family: "Fredoka";
}
#Label39 {
    color: Red;
    font-family: "Fredoka";
}
#Label40 {
    color: Navy;
    font-family: "Fredoka";
}

/* === Lightweight glow + hover (card feel without "boxes") === */
/* Override image transition to include box-shadow */
.imgGame{
    transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
    /* Base shadow + very subtle ring so it feels like a "card" without a background box */
    box-shadow: 0 6px 16px rgba(0,0,0,.30), 0 0 0 1px rgba(255,255,255,.10);
}

/* Hover: keep your zoom, add gentle glow */
.GameSquare:hover .imgGame{
    transform: scale(1.08);
    filter: saturate(1.08) brightness(1.04);
    box-shadow:
        0 10px 22px rgba(0,0,0,.36),
        0 0 18px rgba(170,120,255,.38),
        0 0 0 1px rgba(255,255,255,.18);
}

/* Pressed feel on the whole card (Example 2) — implemented safely via the image */
.GameSquare:active .imgGame{
    transform: scale(1.06);
    filter: saturate(1.06) brightness(.98);
    box-shadow:
        0 8px 18px rgba(0,0,0,.34),
        0 0 14px rgba(170,120,255,.28),
        0 0 0 1px rgba(255,255,255,.16);
}

/* No hover fancy stuff on touch devices */
@media (pointer: coarse){
    .GameSquare:hover .imgGame{
        transform: none;
        filter: none;
        box-shadow: 0 6px 16px rgba(0,0,0,.30), 0 0 0 1px rgba(255,255,255,.10);
    }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
    .imgGame{ transition: none !important; }
}