/* =============================================
   Game page styles  (/shop/game/<slug>)
   ============================================= */

.gd-body {
    background: var(--fws-new-gray-dark);
}

.gd-page {
    /* Theme-aware tokens — dark is the default. themes/light-plus.css has a
       "GAME PAGE" section that flips these, so new game-page colours should
       use a token here (or a --fws-* variable) instead of a hardcoded white. */
    --gd-text:       var(--fws-white);          /* titles, strong values */
    --gd-text-soft:  rgba(255, 255, 255, .92);  /* panel copy, formatted values */
    --gd-text-mid:   rgba(255, 255, 255, .75);  /* paragraphs, review text */
    --gd-text-mute:  rgba(255, 255, 255, .5);   /* small labels, counts */
    --gd-line:       rgba(255, 255, 255, .08);  /* hairlines */
    --gd-fill:       rgba(255, 255, 255, .12);  /* subtle button/chip background */
    --gd-fill-hover: rgba(255, 255, 255, .24);
    --gd-logo-bg:    var(--fws-new-gray-dark);
    --gd-logo-line:  var(--fws-white);
    --gd-logo-text:  var(--fws-white);
    --gd-tag-bg:     var(--fws-white);
    --gd-tag-text:   var(--fws-black);
    --gd-tag-bg-alt: rgba(255, 255, 255, .88);

    max-width: 1600px;
    margin: 0 auto;
    padding: 6.5rem 3.5rem 4rem;
}

/* ---------------------------------------------
   Hero (screenshots + info panel)
   --------------------------------------------- */
.gd-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.78fr) minmax(280px, 1fr);
    gap: 2rem;
    align-items: start;
}

.gd-hero-title {
    color: var(--gd-text);
    font-size: clamp(1.6rem, 2.1vw, 2.2rem);
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 .9rem;
}

/* ---- Screenshot + thumbnails ---- */
.gd-shot {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: var(--fws-black);
}

.gd-shot img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
}

.gd-thumbs {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: .75rem;
}

.gd-thumb {
    flex: 1 1 0;
    min-width: 0;
    max-width: 170px;
    padding: 0;
    line-height: 0;
    background: none;
    border: 2px solid transparent;
    border-radius: 6px;
    overflow: hidden;
    opacity: .45;
    cursor: pointer;
    transition: opacity .2s, border-color .2s;
}

.gd-thumb img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
}

.gd-thumb:hover {
    opacity: .8;
}

.gd-thumb.is-active {
    opacity: 1;
    border-color: var(--gd-text);
}

.gd-thumbs-nav {
    flex-shrink: 0;
    margin-left: auto;
    width: 2.1rem;
    height: 2.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: var(--gd-fill);
    color: var(--gd-text);
    cursor: pointer;
    transition: background .2s;
}

.gd-thumbs-nav:hover {
    background: var(--gd-fill-hover);
}

.gd-thumbs-nav svg,
.gd-thumbs-nav i {
    width: 1.1rem;
    height: 1.1rem;
    font-size: 1.1rem;
}

/* Font Awesome glyphs are narrower than their em box — hug instead of left-aligning */
.gd-thumbs-nav i {
    width: auto;
}

/* ---- Info panel ----
   The panel is a card (#1a1a1a) and its top edge lines up with the top of
   the screenshot, because the game title now sits above the hero grid. */
.gd-panel {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.25rem 1.35rem 1.5rem;
    background: var(--fws-new-gray);
    border-radius: 10px;
}

/* Game logo: a black box inside a thick white frame, letterboxing whatever
   goes in it.
   THIS CLASS IS ON A <div> AND ON AN <img>, which is the whole reason
   `object-fit` is here and not on some other rule. The <div> carries the
   "Game Logo Here" placeholder and the flex centring below are for it; the
   <img> is the real logo, and an <img> has no children for that flex to
   arrange. Without an explicit `object-fit` the image falls back to `fill` —
   the default — and `fill` is the one value that DISTORTS: the box is pinned
   to 2.35:1 by the rule below and a logo of any other proportion is squashed
   into it. That is what it was doing.

   `contain` IS ALSO WHAT THE REST OF THE CODE ALREADY PROMISES. A logo is the
   one kind with no imposed shape — `fws_media_shape('logo')` returns `''`, the
   panel says "Any size" and "An icon with no text in it", and the crop dialog
   SKIPS the logo entirely because, in its own words, "the shop letterboxes
   rather than crops". This rule was the one place that letterbox was not
   happening. It costs nothing on the <div>, which has no object to fit. */
.gd-logo-box {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 2.35 / 1;
    object-fit: contain;
    padding: .75rem 1.5rem;
    background: var(--gd-logo-bg);
    color: var(--gd-logo-text);
    font-size: clamp(1.05rem, 1.3vw + .6rem, 1.7rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: .01em;
    text-align: center;
}

.gd-panel-title {
    color: var(--gd-text);
    font-size: clamp(1.1rem, .5vw + .95rem, 1.4rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}

.gd-panel-text {
    color: var(--gd-text-soft);
    font-size: .92rem;
    line-height: 1.55;
    margin: 0;
    white-space: pre-line;
}

/* Info rows (Développement, Édition, Tags)
   One grid for all rows, so every value starts on the same column
   whatever the label length is. */
.gd-info {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: baseline;
    column-gap: 1.4rem;
    row-gap: .65rem;
    margin: 0;
}

.gd-info-row {
    display: contents;
}

.gd-info-label {
    color: var(--gd-text-soft);
    font-size: .95rem;
    white-space: nowrap;
}

.gd-info-label::after {
    content: ' :';
}

.gd-info-value {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin: 0;
    color: var(--gd-text);
    font-size: .95rem;
    font-weight: 600;
}

/* Verified badge next to the studio name */
.gd-verified {
    display: inline-flex;
    flex-shrink: 0;
    width: 1.05rem;
    height: 1.05rem;
    color: var(--fws-red-galaxy);
}

.gd-verified svg,
.gd-verified i {
    width: 100%;
    height: 100%;
    font-size: 1.05rem;
    display: block;
}

/* Tags */
.gd-tags {
    gap: .3rem;
}

.gd-tag {
    padding: .16rem .42rem;
    background: var(--gd-tag-bg);
    border-radius: 2px;
    color: var(--gd-tag-text);
    font-size: .62rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

.gd-tag--more {
    background: var(--gd-tag-bg-alt);
    cursor: help;
}

/* Platform icon (tooltip lists every supported platform) + price + buy button */
.gd-buy-row,
.gd-follow-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* The LEFT SLOT of .gd-buy-row: the glyph and the price (or the "not for sale"
   sentence) are one cluster, so `space-between` puts THAT on the left and the
   button on the right no matter which of the two is present. Without the
   wrapper the row would have three children and space-between would spread the
   glyph, the price and the button into three equal columns. */
.gd-buy-info {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-width: 0;
}

/* A bare <p> carries the UA's 1em block margins, which inside a centred flex
   row reads as a price floating slightly below its button. */
.gd-price,
.gd-not-for-sale {
    margin: 0;
}

.gd-price {
    display: inline-flex;
    align-items: baseline;
    gap: .45rem;
    color: var(--gd-text);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.gd-price s {
    color: var(--gd-text-mute);
    font-size: 1rem;
    font-weight: 400;
}

.gd-price-badge {
    color: var(--fws-accent);
    font-size: .85rem;
    font-weight: 600;
}

.gd-not-for-sale {
    color: var(--gd-text-mid);
    font-size: .95rem;
    font-weight: 600;
}

.gd-platforms-icon {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--fws-accent);
}

.gd-platforms-icon svg,
.gd-platforms-icon i {
    width: 2.9rem;
    height: 2.9rem;
    font-size: 2.9rem;
    display: block;
}

/* gamepad glyph is 1.25em wide — hugging it keeps it clear of the buy button */
.gd-platforms-icon i {
    width: auto;
}

/* .fws-button styling comes from main.css (angled sides, padding, font).
   Only the width is set here — the same approach as .cart-footer-actions
   in cart.css. min-width keeps the label clear of the 15px angled cuts. */
.gd-buy,
.gd-follow {
    flex: 0 0 auto;
    width: 40%;
    min-width: 10.5rem;
    max-width: 16rem;
}

/* Rating */
.gd-rating-label {
    display: inline-flex;
    align-items: baseline;
    gap: .3rem;
    color: var(--gd-text);
    font-size: .95rem;
    font-weight: 600;
}

.gd-rating-count {
    color: var(--gd-text-mute);
    font-size: .82rem;
    font-weight: 400;
}

.gd-rating {
    display: flex;
    align-items: center;
}

.gd-rating .star-rating {
    font-size: 1.75rem;
}

/* ---------------------------------------------
   Collapsible sections
   --------------------------------------------- */
.gd-section {
    margin-top: 2.25rem;
}

.gd-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem .85rem .7rem 1.15rem;
    background: var(--fws-new-gray);
    border-radius: 8px;
}

.gd-section-title {
    color: var(--gd-text);
    font-size: 1.15rem;
    font-weight: 500;
    margin: 0;
}

.gd-collapse {
    position: relative;
    flex-shrink: 0;
    width: 1.9rem;
    height: 1.9rem;
    border: none;
    border-radius: 4px;
    background: var(--gd-fill);
    cursor: pointer;
    transition: background .2s;
}

.gd-collapse:hover {
    background: var(--gd-fill-hover);
}

.gd-collapse-bar {
    position: absolute;
    top: calc(50% - 1px);
    left: 50%;
    width: .8rem;
    height: 2px;
    margin-left: -.4rem;
    background: var(--gd-text);
    border-radius: 2px;
}

.gd-collapse-bar+.gd-collapse-bar {
    transform: rotate(90deg);
    transition: transform .2s;
}

/* Expanded = minus, collapsed = plus */
.gd-section:not(.is-collapsed) .gd-collapse-bar+.gd-collapse-bar {
    transform: rotate(90deg) scaleX(0);
}

.gd-section-body {
    margin-top: .75rem;
}

.gd-section.is-collapsed .gd-section-body {
    display: none;
}

/* ---- Generic card + text ---- */
.gd-card {
    padding: 1.4rem 1.6rem;
    background: var(--fws-new-gray);
    border-radius: 8px;
}

/* ---- Gated by the reader's content settings ----
   The 403's card. Drawn on the SAME `.gd-card` as the 404 beside it, because
   the two are the same shape of message — "this is not the page you asked
   for" — and only the words differ.

   The name is set in the display face at a size between the heading and the
   body, because it is the one thing on the page the reader brings with them
   and it should be the most legible line after the heading. It is NOT a teaser
   for the game: there is no artwork, no price, no description and no review
   score here, and adding any of them would defeat the setting. */
.gd-gated-name {
    margin: 1.25rem 0 0;
    color: var(--gd-text-hi);
    font-family: 'Futura PT Medium', sans-serif;
    font-size: 1.15rem;
    font-weight: 500;
}

.gd-gated-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin: 1.5rem 0 0;
}

.gd-para {
    color: var(--gd-text-mid);
    font-size: .9rem;
    line-height: 1.75;
    margin: 0 0 1rem;
}

.gd-para:last-child {
    margin-bottom: 0;
}

/* ---- À propos de ce jeu ---- */
.gd-about-img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: 6px;
    display: block;
    margin: 1.25rem 0;
}

/* ---- Configuration minimale requise ---- */
.gd-config {
    padding: .35rem 1.6rem;
    margin: 0;
}

.gd-config-row {
    display: grid;
    grid-template-columns: minmax(180px, 30%) 1fr;
    gap: 1.5rem;
    padding: .8rem 0;
    border-bottom: 1px solid var(--gd-line);
}

.gd-config-row:last-child {
    border-bottom: none;
}

.gd-config-label {
    color: var(--gd-text-mute);
    font-size: .82rem;
}

.gd-config-value {
    color: var(--gd-text-soft);
    font-size: .82rem;
    margin: 0;
}

/* ---- Nouvelles ---- */
.gd-news-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.gd-news-card {
    background: var(--fws-new-gray);
    border-radius: 8px;
    overflow: hidden;
}

.gd-news-cover {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
    padding: 1.1rem 1.5rem;
}

.gd-news-cover img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gd-news-title {
    position: relative;
    color: var(--fws-white);
    font-size: 1.05rem;
    font-weight: 700;
    text-align: center;
    margin: 0;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .55);
}

.gd-news-body {
    padding: 1.3rem 1.6rem 1.5rem;
}

.gd-news-quote {
    padding: .8rem 1.2rem;
    margin: 0 0 1.1rem;
    background: linear-gradient(90deg, rgba(67, 224, 133, .9) 0%, rgba(31, 143, 82, .9) 100%);
    border-radius: 4px;
    color: var(--fws-white);
    font-size: .88rem;
    line-height: 1.6;
    text-align: center;
}

.gd-news-img {
    width: 45%;
    min-width: 220px;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: 6px;
    display: block;
    margin: 1.15rem 0;
}

/* ---- Avis ---- */
.gd-review-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.gd-review {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    background: var(--fws-new-gray);
    border-radius: 8px;
}

.gd-review-avatar {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    overflow: hidden;
}

.gd-review-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gd-review-main {
    flex: 1;
    min-width: 0;
}

.gd-review-name {
    color: var(--gd-text);
    font-size: .95rem;
    font-weight: 700;
    margin: 0 0 .35rem;
}

.gd-review-text {
    color: var(--gd-text-mid);
    font-size: .85rem;
    line-height: 1.65;
    margin: 0;
}

.gd-review-votes {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    flex-shrink: 0;
}

.gd-vote {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: 0;
    background: none;
    border: none;
    color: var(--gd-text-mute);
    font-family: 'Proxima Nova', sans-serif;
    font-size: .75rem;
    cursor: pointer;
    transition: color .2s;
}

.gd-vote svg,
.gd-vote i {
    width: 1rem;
    height: 1rem;
    font-size: 1rem;
}

.gd-vote:hover {
    color: var(--gd-text);
}

.gd-vote.is-active {
    color: var(--fws-success);
}

.gd-vote.is-active[data-vote="down"] {
    color: var(--fws-red);
}

/* =============================================
   Responsive
   ============================================= */
@media (max-width: 1024px) {
    .gd-page {
        padding: 6.25rem 2rem 3.5rem;
    }

    .gd-hero {
        gap: 1.5rem;
    }

    .gd-news-img {
        width: 60%;
    }
}

@media (max-width: 860px) {
    .gd-hero {
        grid-template-columns: 1fr;
    }

    .gd-panel {
        max-width: 520px;
    }

    .gd-thumb {
        flex: 0 0 110px;
        max-width: none;
    }

    .gd-thumbs {
        overflow-x: auto;
        padding-bottom: .25rem;
        scrollbar-width: none;
    }

    .gd-thumbs::-webkit-scrollbar {
        display: none;
    }
}

@media (max-width: 640px) {
    .gd-page {
        padding: 5.5rem 1rem 3rem;
    }

    .gd-section-head {
        padding: .6rem .6rem .6rem .9rem;
    }

    .gd-section-title {
        font-size: 1rem;
    }

    .gd-card,
    .gd-news-body {
        padding: 1.1rem 1rem 1.25rem;
    }

    .gd-config {
        padding: .2rem 1rem;
    }

    .gd-config-row {
        grid-template-columns: 1fr;
        gap: .2rem;
    }

    .gd-news-img {
        width: 100%;
        min-width: 0;
    }

    .gd-review {
        align-items: flex-start;
        flex-wrap: wrap;
        padding: 1rem;
    }

    .gd-review-votes {
        flex-direction: row;
        gap: 1rem;
        width: 100%;
        padding-left: 4rem;
    }
}

/* The angled .fws-button needs its full width to keep the label clear of the
   clipped corners, so below this size the buttons take their own line
   (same pattern as .cart-footer-actions in cart.css). */
@media (max-width: 480px) {
    .gd-buy-row,
    .gd-follow-row {
        flex-wrap: wrap;
        row-gap: .9rem;
    }

    /* The left cluster keeps its own inline layout and simply sits on its own
       line above the button — .gd-buy is width:100% below this point, so the
       button already takes the next row and nothing needs to push it there. */
    .gd-buy-info {
        flex: 0 0 auto;
    }

    .gd-buy,
    .gd-follow {
        width: 100%;
        max-width: none;
    }
}