/* 
 * rusty create | 2026-07-16
 * Action: Creating macblash-3d-games.css — 3D Glassy Game Box Styles
 */

/* Container Setup */
.game-3d-case-container {
    display: block;
    perspective: 1200px;
    /* Strong perspective for 3D depth */
    transform-style: preserve-3d;
    margin-bottom: 30px;
    position: relative;
    text-decoration: none !important;
    width: 100%;
    /* GPU Sandboxing */
    isolation: isolate !important;
}

.game-3d-case-container:hover {
    text-decoration: none;
}

/* The 3D Box */
.game-3d-case {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    transform-style: preserve-3d;
    transform-origin: center center;
    transition: transform 0.1s ease-out, box-shadow 0.4s ease;
    /* GSAP will override transform, but good fallback */
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
    /* Very soft 2% shadow */
}

.game-3d-case-container:hover .game-3d-case {
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.05);
    /* 5% visibility soft drop shadow */
}

/* Base styles for all sides */
.case-front,
.case-back,
.case-left,
.case-right,
.case-top,
.case-bottom {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.05);
}

/* Front Face */
.case-front {
    transform: translateZ(20px);
    border-radius: 12px;
    overflow: hidden;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* The Artwork inside the case */
.case-art {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    transform: translateZ(-5px) scale(1.05);
    /* Push art slightly back for parallax */
    transition: transform 0.3s ease;
    border-radius: 12px;
}

/* Top Accent Glow (Platform agnostic) */
.case-glow-accent {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
    z-index: 10;
    opacity: 0.7;
}

/* Text and Overlay Content */
.case-content {
    padding: 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%);
    transform: translateZ(15px);
    /* Push text forward for parallax */
    height: 50%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.case-title {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 15px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
    line-height: 1.4;
    text-align: right;
    font-family: 'Sukar', 'Inter', sans-serif;
    /* Fallbacks */
}

html[dir="ltr"] .case-title {
    text-align: left;
}

/* Ratings Overlay */
/* rusty begin update | 2026-09-08 05:22 */
/* Action: FIX — the expert circle and the user square were not sitting on a common
   horizontal baseline.
   Cause: align-items:flex-end aligned the two badges by their BOTTOM edge, so any
   difference in label height shifted the glass shape above it. The labels do differ:
   the expert one carries an inline IGDB pill, and the user one ("تقييم المستخدمين",
   plus the star icon added on 2026-09-08) is long enough to wrap onto a second line.
   A wrapped label pushed its 45px shape upward relative to the other.
   Fix: align to flex-start so both shapes start at the same y regardless of what the
   labels below them do. Combined with white-space:nowrap on .rating-label (below),
   both columns are now equal height anyway — flex-start just makes it robust. */
.case-ratings {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    justify-content: flex-start;
}

/* rusty end update */

html[dir="ltr"] .case-ratings {
    justify-content: flex-start;
}

/* rusty begin update | 2026-09-08 05:22 */
/* Action: the column stack was already correct here — flex/column/center were all
   present, so this was never the source of the misalignment (see .case-ratings above).
   Hardened anyway per spec: justify-content + text-align pinned, and margins/float
   explicitly zeroed so nothing inherited can push a badge off its own centre line. */
.rating-badge {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 6px !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* rusty end update */

/* Expert Rating (Neon Ring) */
.expert-rating .rating-ring {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: conic-gradient(#00ff88 var(--rating), rgba(255, 255, 255, 0.1) 0);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.4);
}

.expert-rating .rating-ring::before {
    content: '';
    position: absolute;
    inset: 3px;
    background: #111;
    border-radius: 50%;
    z-index: 1;
}

/* User Rating (Frosted Glass) */
.user-rating .rating-glass {
    width: 45px;
    height: 45px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.rating-value {
    position: relative;
    z-index: 2;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    font-family: 'Inter', monospace;
}

.rating-symbol {
    position: relative;
    z-index: 2;
    color: rgba(255, 255, 255, 0.7);
    font-size: 10px;
    margin-left: 1px;
}

/* rusty begin update | 2026-09-08 05:22 */
/* Action: white-space:nowrap is the load-bearing part — it stops the long Arabic label
   "تقييم المستخدمين" (and the expert label's inline IGDB pill) from wrapping onto a
   second line, which is what made the two badge columns unequal in height and knocked
   the glass shapes off a shared baseline.
   The flex row also centres the star icon against the text; it is a <span> in the
   markup, which display:flex promotes to a flex container perfectly well, so the
   component's parent > glass + label structure needed no change.
   letter-spacing trimmed 0.5px -> 0.3px to buy back a few px of width, since nowrap
   means these labels can no longer relieve pressure by wrapping. */
.rating-label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* rusty begin update | 2026-09-08 05:44 */
    /* Action: labels were clipping on narrower viewports. nowrap (above) removed their
       ability to relieve width pressure by wrapping, so the width has to come out of the
       type instead: 10px -> 9px and gap 4px -> 2px.
       Budget: two labels were ~92px each + 15px .case-ratings gap = ~200px against roughly
       210px of card content width at col-lg-3. The 10% type reduction saves ~8px per
       label and the tighter gap ~2px per label, bringing the pair to ~180px — a usable
       margin instead of a 10px one. */
    gap: 2px !important;
    font-size: 9px !important;
    /* rusty end update */
    white-space: nowrap !important;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* rusty end update */

/* Specular Reflection Canvas Container */
.case-specular-reflection {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    pointer-events: none;
    border-radius: 12px;
    overflow: hidden;
}

/* Physical side panels removed to avoid grid overlap and keep design minimal */

/* .case-shadow div removed to prevent 3D clipping. Using box-shadow on the case instead. */

/* rusty delete | 2026-07-17 */
/* Action: Removing legacy hide override — Reason: Legacy HTML purged from views; global !important was a prohibited override risk */
/* rusty end */

/* rusty change | 2026-07-17 */
/* Action: start creating — Platform band and watermark */
.case-platforms {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 35px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    z-index: 15;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.case-platforms img {
    height: 18px;
    width: auto;
    object-fit: contain;
}

.case-watermark {
    position: absolute;
    bottom: 15px;
    left: 15px;
    width: 60px;
    height: auto;
    opacity: 0.6;
    z-index: 5;
    pointer-events: none;
}

html[dir="ltr"] .case-watermark {
    left: auto;
    right: 15px;
}

/* rusty end */
/* rusty begin update | 2026-09-02 20:05 */
/* Action: Homepage 3D game boxes fit the unified 3-column 1+4 grid.
   The grid rows are capped (minmax 210-300px), so on desktop every case simply FILLS
   its track: the small cards land near square, the featured (1 col x 2 rows) becomes a
   portrait poster ~1:1.7. That keeps the featured box from towering, which is what the
   forced 3/4 ratio on tall rows was doing.
   Tablet/mobile put every case in an `auto`-height flow row, so the portrait ratio is
   restored there to stop the boxes collapsing.
   All rules scoped under .home-feature, so /all-services-new (Bootstrap columns, base
   `.game-3d-case { aspect-ratio: 3/4 }`) is untouched. */

/* Grid gap handles spacing on the homepage; the base 30px margin would double it. */
.home-feature .game-3d-case-container {
    margin-bottom: 0;
    height: 100%;
}

/* Desktop: the case fills its grid track (row cap controls the height). */
.home-feature .game-3d-case-container .game-3d-case {
    height: 100%;
    aspect-ratio: auto;
}

.home-feature .game-3d-case-container.is-featured .case-title {
    font-size: 1.5rem;
}

.home-feature .game-3d-case-container.is-featured .case-platforms {
    height: 44px;
}

.home-feature .game-3d-case-container.is-featured .case-platforms img {
    height: 22px;
}

.home-feature .game-3d-case-container.is-featured .case-watermark {
    width: 84px;
}

/* Tablet: 2-col grid, `minmax(200px, 300px)` rows. Small cards fill; the featured cell
   is a full-width banner, so give it a real height rather than a thin strip. */
@media (max-width: 992px) {
    .home-feature--games .home-feature-grid> :first-child {
        min-height: 320px;
    }
}

/* Mobile: single column, `auto` rows with no height to fill, so restore the portrait
   game-box ratio on every case (small and featured). */
@media (max-width: 768px) {
    .home-feature .game-3d-case-container {
        aspect-ratio: 3 / 4;
    }

    .home-feature .game-3d-case-container .game-3d-case {
        height: 100%;
    }
}

/* rusty end update */
/* ============================================================
   PLATFORM BAND MARQUEE  (rusty begin new code | 2026-09-17 04:10)
   Action: A game on 4-5 platforms crowded or clipped the fixed 35px band, which was a
   centred flex row with no overflow handling. Past 3 logos the band becomes a looping
   marquee. CSS-only — the markup renders the icon set twice and this animates the track
   by exactly -50%, so the second copy arrives where the first began and there is no seam.
   Cards with 1-3 platforms never get these classes and are completely unaffected.
   ============================================================ */
.case-platforms-viewport {
    /* Take over the band's own centring/gap for the marquee case only. */
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    /* Fade the logos out at both ends so they enter and leave the band softly
       instead of being hard-cut by the edge. */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
}

.case-platforms-track {
    display: flex;
    align-items: center;
    width: max-content;
    will-change: transform;
    animation: case-platforms-scroll var(--marquee-duration, 10s) linear infinite;
}

.case-platforms-set {
    display: flex;
    align-items: center;
    gap: 15px;              /* matches the band's original gap */
    padding-inline-end: 15px; /* keeps spacing even across the seam */
    flex: 0 0 auto;
}

@keyframes case-platforms-scroll {
    from { transform: translateX(0); }
    /* Distance comes from the markup (--marquee-shift = 100% / copy count), so it is
       always exactly one set width no matter how many copies are rendered. Hard-coding
       -50% here was the seam: it assumed 2 copies, leaving the trailing side empty once
       a set was narrower than the card. */
    to   { transform: translateX(var(--marquee-shift, -25%)); }
}

/* Let people read the logos on hover. */
.game-3d-case-container:hover .case-platforms-track {
    animation-play-state: paused;
}

/* Respect the OS setting: no motion, just a static scrollable row. */
@media (prefers-reduced-motion: reduce) {
    .case-platforms-track {
        animation: none;
        will-change: auto;
    }
    .case-platforms-viewport {
        overflow-x: auto;
        scrollbar-width: none;
    }
    .case-platforms-viewport::-webkit-scrollbar {
        display: none;
    }
    /* Without animation the duplicate set is redundant and would just repeat the logos. */
    .case-platforms-set[aria-hidden="true"] {
        display: none;   /* all duplicates, whatever the copy count */
    }
}
/* rusty end new code */