/* Consolidated game-card styles: stable tile sizes, one image rule, one hover rule, no custom font load. */
.GameSquare,
td.GameSquare {
    box-sizing: border-box;
    position: relative;
    --tt-width: 240px;
    --tt-gap: 12px;
    --tt-halfimg: 90px; /* ~180px/2 */
    --tt-x: calc(var(--tt-halfimg) + var(--tt-gap)); /* default: show on right */
    width: 210px !important;
    min-width: 210px !important;
    max-width: 210px !important;
    height: 250px !important;
    min-height: 250px !important;
    vertical-align: top !important;
    overflow: visible;
    display: table-cell;
    content-visibility: visible;
}

.GameSquare > span,
.GameSquare > div,
.GameSquare > a,
.GameSquare > input,
.GameSquare > img,
.GameSquare .aspNetDisabled {
    max-width: 180px;
}

.imgGame {
    display: block;
    width: 180px !important;
    height: 150px !important;
    max-width: 180px !important;
    max-height: 150px !important;
    margin-left: auto;
    margin-right: auto;
    object-fit: cover;
    border-radius: 12px;
    transform-origin: center;
    transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
    will-change: auto;
    box-shadow: 0 6px 16px rgba(0,0,0,.30), 0 0 0 1px rgba(255,255,255,.10);
}

.GameSquare:hover .imgGame {
    transform: scale(1.08);
    filter: saturate(1.08) brightness(1.04);
    will-change: transform;
    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);
}

.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);
}

.GameLabel,
.GameLabelSub,
.GameLabelBelowGame {
    box-sizing: border-box;
    display: block !important;
    width: 180px !important;
    max-width: 180px !important;
    margin-left: auto;
    margin-right: auto;
    font-family: Arial, sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.GameLabel {
    display: -webkit-box !important;
    height: 56px !important;
    min-height: 56px !important;
    line-height: 26px !important;
    padding-bottom: 0 !important;
    border-radius: 6px;
    font-size: 23px;
    font-weight: 600;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.GameLabelSub {
    height: 24px !important;
    line-height: 24px !important;
    color: #D9F7FF;
    font-size: 18px;
    font-weight: 500;
}

.GameLabelBelowGame {
    height: 22px !important;
    line-height: 22px !important;
    color: #D6FFFF;
    font-size: 18px;
    font-weight: 400;
}

html[dir="ltr"] .GameLabel,
html[dir="ltr"] .GameLabelSub {
    direction: ltr;
    unicode-bidi: isolate;
}

/* High-contrast colorful labels: no background box, no layout changes. */
.GameLabel,
.GameLabelSub,
.GameLabelBelowGame {
    text-shadow:
        0 1px 2px rgba(0,0,0,0.95),
        0 0 4px rgba(0,0,0,0.90),
        0 0 8px rgba(0,0,0,0.75);
}

.ToolTip {
    width: var(--tt-width);
    background: linear-gradient(Teal,AliceBlue);
    border: 2px solid DarkRed;
    padding: 5px;
    font-family: Arial, sans-serif;
    border-radius: 12px;
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(var(--tt-x), calc(-50% + 8px));
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
    z-index: 20000;
}

@supports selector(:has(*)) {
    .GameSquare:has(.imgGame:hover) .ToolTip {
        opacity: 1;
        visibility: visible;
        transform: translate(var(--tt-x), -50%);
        transition-delay: 70ms, 70ms, 0ms;
    }
}

@supports not selector(:has(*)) {
    .GameSquare:hover .ToolTip {
        opacity: 1;
        visibility: visible;
        transform: translate(var(--tt-x), -50%);
        transition-delay: 70ms, 70ms, 0ms;
    }
}

/* Flip tooltip to the LEFT on the last / near-last column to prevent overflow. */
td.GameSquare:nth-child(6n),
td.GameSquare:nth-child(6n-1) {
    --tt-x: calc(-1 * (var(--tt-width) + var(--tt-gap) + var(--tt-halfimg)));
}

.ToolTipGameTitle {
    color: Orange;
    text-decoration: underline;
    font-weight: 600;
    font-size: 24px;
    line-height: 26px;
    font-family: Arial, sans-serif;
    padding-bottom: 26px;
}

.ToolTipDesc {
    color: AliceBlue;
    font-weight: 400;
    font-size: 22px;
    line-height: 22px;
    font-family: Arial, sans-serif;
    padding-bottom: 22px;
}

.ToolTipStatistics_1 {
    color: Maroon;
    font-weight: 400;
    font-size: 18px;
    line-height: 18px;
    margin: 10px;
    font-family: Arial, sans-serif;
}

.ToolTipStatistics_2 {
    color: Crimson;
    font-weight: 400;
    font-size: 18px;
    line-height: 18px;
    margin: 10px;
    font-family: Arial, sans-serif;
}

.ToolTipStatistics_3 {
    color: Fuchsia;
    font-weight: 300;
    font-size: 18px;
    line-height: 18px;
    margin: 10px;
    font-family: Arial, sans-serif;
}

@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);
    }
}

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

#Label1 {
    color: #E7B8FF;
    font-family: Arial, sans-serif;
}
#Label2 {
    color: #FFB8B8;
    font-family: Arial, sans-serif;
}
#Label3 {
    color: #F2F2F2;
    font-family: Arial, sans-serif;
}
#Label4 {
    color: #FFD18A;
    font-family: Arial, sans-serif;
}
#Label5 {
    color: #FFBFAF;
    font-family: Arial, sans-serif;
}
#Label6 {
    color: #FFB7FF;
    font-family: Arial, sans-serif;
}
#Label7 {
    color: #B8FFB8;
    font-family: Arial, sans-serif;
}
#Label8 {
    color: #FFF29A;
    font-family: Arial, sans-serif;
}
#Label9 {
    color: #FFB8B8;
    font-family: Arial, sans-serif;
}
#Label11 {
    color: #E7B8FF;
    font-family: Arial, sans-serif;
}
#Label12 {
    color: #FFB8B8;
    font-family: Arial, sans-serif;
}
#Label13 {
    color: #F2F2F2;
    font-family: Arial, sans-serif;
}
#Label14 {
    color: #FFD18A;
    font-family: Arial, sans-serif;
}
#Label15 {
    color: #FFBFAF;
    font-family: Arial, sans-serif;
}
#Label16 {
    color: #FFB7FF;
    font-family: Arial, sans-serif;
}
#Label17 {
    color: #B8FFB8;
    font-family: Arial, sans-serif;
}
#Label18 {
    color: #FFF29A;
    font-family: Arial, sans-serif;
}
#Label19 {
    color: #FFB8B8;
    font-family: Arial, sans-serif;
}
#Label21 {
    color: #E7B8FF;
    font-family: Arial, sans-serif;
}
#Label22 {
    color: #FFB8B8;
    font-family: Arial, sans-serif;
}
#Label23 {
    color: #F2F2F2;
    font-family: Arial, sans-serif;
}
#Label24 {
    color: #FFD18A;
    font-family: Arial, sans-serif;
}
#Label25 {
    color: #FFBFAF;
    font-family: Arial, sans-serif;
}
#Label26 {
    color: #FFB7FF;
    font-family: Arial, sans-serif;
}
#Label27 {
    color: #B8FFB8;
    font-family: Arial, sans-serif;
}
#Label28 {
    color: #FFF29A;
    font-family: Arial, sans-serif;
}
#Label29 {
    color: #FFB8B8;
    font-family: Arial, sans-serif;
}
#Label30 {
    color: #F2F2F2;
    font-family: Arial, sans-serif;
}
#Label31 {
    color: #E7B8FF;
    font-family: Arial, sans-serif;
}
#Label32 {
    color: #FFB8B8;
    font-family: Arial, sans-serif;
}
#Label33 {
    color: #F2F2F2;
    font-family: Arial, sans-serif;
}
#Label34 {
    color: #FFD18A;
    font-family: Arial, sans-serif;
}
#Label35 {
    color: #FFBFAF;
    font-family: Arial, sans-serif;
}
#Label36 {
    color: #FFB7FF;
    font-family: Arial, sans-serif;
}
#Label37 {
    color: #B8FFB8;
    font-family: Arial, sans-serif;
}
#Label38 {
    color: #FFF29A;
    font-family: Arial, sans-serif;
}
#Label39 {
    color: #FFB8B8;
    font-family: Arial, sans-serif;
}
#Label40 {
    color: #F2F2F2;
    font-family: Arial, sans-serif;
}


/* Backup highlight classes. The main animation is injected from Menu.aspx.cs to bypass browser cache. */
.ghFirstGameFlash {
    animation: ghFirstGameFlash 2.4s ease-in-out 1 both !important;
    position: relative !important;
    z-index: 30 !important;
}
.ghFirstTileFlash {
    position: relative !important;
    z-index: 25 !important;
}

@keyframes ghFirstGameFlash {
    0% { transform: scale(1); filter: brightness(1) saturate(1); }
    18% {
        transform: scale(1.16) rotate(-1deg);
        filter: brightness(1.85) saturate(1.35);
        box-shadow: 0 16px 34px rgba(0,0,0,.48), 0 0 28px rgba(255,255,255,.98), 0 0 50px rgba(255,230,60,.98), 0 0 0 5px rgba(255,255,255,.70);
        outline: 4px solid rgba(255,245,130,.95);
    }
    44% { transform: scale(1.04) rotate(1deg); filter: brightness(1.20) saturate(1.12); }
    70% {
        transform: scale(1.13);
        filter: brightness(1.65) saturate(1.28);
        box-shadow: 0 16px 34px rgba(0,0,0,.45), 0 0 26px rgba(255,255,255,.90), 0 0 46px rgba(255,230,60,.90), 0 0 0 5px rgba(255,255,255,.55);
        outline: 4px solid rgba(255,245,130,.85);
    }
    100% { transform: scale(1); filter: brightness(1) saturate(1); }
}