:root {
    --game-bg: #06111f;
    --game-panel: rgba(10, 26, 48, .82);
    --game-panel-strong: rgba(8, 19, 35, .94);
    --game-line: rgba(127, 215, 255, .24);
    --game-line-strong: rgba(127, 215, 255, .48);
    --game-text: #f3fbff;
    --game-muted: #a9bed0;
    --game-cyan: #79dbff;
    --game-gold: #d7ad58;
    --game-purple: #9b72ff;
    --game-danger: #ff7d7d;
    --game-radius: 8px;
}

* {
    box-sizing: border-box;
}

body.game-store-body,
body.game-store-page {
    min-height: 100vh;
    margin: 0;
    color: var(--game-text);
    background:
        linear-gradient(180deg, rgba(3, 8, 28, .72), rgba(3, 8, 28, .90)),
        url("/assets/images/game-store/backgrounds/game-page-bg-1920x1080.webp") center top / cover fixed;
    font-family: "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
    letter-spacing: 0;
}

body.game-cart-page {
    background-image:
        linear-gradient(180deg, rgba(3, 8, 28, .72), rgba(3, 8, 28, .92)),
        url("/assets/images/game-store/backgrounds/game-page-bg-1920x1080.webp");
}

body.game-checkout-page {
    background-image:
        linear-gradient(180deg, rgba(3, 8, 28, .72), rgba(3, 8, 28, .92)),
        url("/assets/images/game-store/backgrounds/game-page-bg-1920x1080.webp");
}

a {
    color: inherit;
}

.game-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    border-bottom: 1px solid var(--game-line);
    background:
        linear-gradient(90deg, rgba(4, 10, 31, .94), rgba(19, 10, 48, .9)),
        url("/assets/images/game-store/backgrounds/game-nav-bg-1920x220.webp") center / cover;
    backdrop-filter: blur(16px);
}

.game-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: min(1440px, calc(100% - 32px));
    min-height: 72px;
    margin: 0 auto;
}

.game-brand {
    display: inline-flex;
    align-items: center;
    min-width: 128px;
}

.game-brand img {
    width: 148px;
    max-width: 38vw;
    height: auto;
    display: block;
}

.game-navlinks {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.game-mobile-nav {
    display: none;
    width: 100%;
}

.game-mobile-nav summary {
    padding: 9px 14px;
    border: 1px solid var(--game-line);
    border-radius: var(--game-radius);
    background: rgba(13, 36, 64, .8);
    cursor: pointer;
    font-weight: 700;
}

.game-mobile-nav[open] .game-navlinks {
    margin-top: 8px;
}

.game-navlinks a,
.game-inline-form button,
.game-admin-topbar button,
.game-admin-site-link,
.game-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 14px;
    border: 1px solid var(--game-line);
    border-radius: var(--game-radius);
    color: var(--game-text);
    background: rgba(13, 36, 64, .72);
    text-decoration: none;
    font-size: .94rem;
    line-height: 1.2;
    transition: border-color .18s ease, transform .18s ease, background .18s ease;
}

.game-navlinks a:hover,
.game-inline-form button:hover,
.game-admin-topbar button:hover,
.game-admin-site-link:hover,
.game-btn:hover {
    border-color: var(--game-cyan);
    background: rgba(20, 58, 96, .84);
    transform: translateY(-1px);
}

.game-inline-form {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.game-inline-form button,
.game-admin-topbar button {
    cursor: pointer;
}

.game-member-name {
    color: var(--game-gold);
    font-weight: 700;
    white-space: nowrap;
}

.game-alert,
.game-admin-alert {
    width: min(1180px, calc(100% - 32px));
    margin: 18px auto 0;
    padding: 12px 16px;
    border: 1px solid rgba(215, 173, 88, .5);
    border-radius: var(--game-radius);
    background: rgba(47, 35, 12, .84);
    color: #fff3cc;
}

.game-shell {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 22px;
    width: min(1440px, calc(100% - 32px));
    margin: 28px auto 56px;
}

.game-sidebar {
    align-self: start;
    position: sticky;
    top: 96px;
    padding: 16px;
    border: 1px solid var(--game-line);
    border-radius: var(--game-radius);
    background:
        linear-gradient(180deg, rgba(8, 16, 44, .86), rgba(6, 12, 34, .92)),
        url("/assets/images/game-store/backgrounds/game-sidebar-bg-480x1400.webp") center top / cover;
}

.game-search {
    display: grid;
    gap: 10px;
    margin-bottom: 16px;
}

.game-search label,
.game-field label {
    color: var(--game-muted);
    font-size: .9rem;
}

.game-search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.game-input,
.game-select,
.game-textarea {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid var(--game-line);
    border-radius: var(--game-radius);
    color: var(--game-text);
    background: rgba(5, 15, 28, .86);
    outline: none;
}

.game-textarea {
    min-height: 150px;
    resize: vertical;
}

.game-input:focus,
.game-select:focus,
.game-textarea:focus {
    border-color: var(--game-cyan);
    box-shadow: 0 0 0 3px rgba(121, 219, 255, .12);
}

.game-category-links {
    display: grid;
    gap: 10px;
}

.game-category-link {
    display: block;
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(127, 215, 255, .18);
    border-radius: var(--game-radius);
    background: rgba(5, 16, 31, .74);
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.game-category-link img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 560 / 150;
    object-fit: contain;
}

.game-category-link:hover,
.game-category-link:focus-visible {
    border-color: var(--game-cyan);
    box-shadow: 0 0 20px rgba(121, 219, 255, .14);
    transform: translateY(-1px);
}

.game-content {
    min-width: 0;
}

.game-category-header {
    overflow: hidden;
    margin-bottom: 20px;
    border: 1px solid var(--game-line);
    border-radius: var(--game-radius);
}

.game-category-header img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 280px;
    object-fit: cover;
}

.game-section {
    margin-bottom: 30px;
    padding: 18px;
    border: 1px solid rgba(127, 215, 255, .14);
    border-radius: var(--game-radius);
    background:
        linear-gradient(180deg, rgba(7, 16, 42, .74), rgba(5, 12, 31, .84)),
        url("/assets/images/game-store/backgrounds/game-section-bg-1600x900.webp") center / cover;
}

.game-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.game-section-head h1,
.game-section-head h2 {
    margin: 0;
    font-size: clamp(1.35rem, 2vw, 1.9rem);
}

.game-section-head p {
    margin: 4px 0 0;
    color: var(--game-muted);
}

.game-product-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.game-product-card {
    display: grid;
    grid-template-rows: auto 1fr auto;
    overflow: hidden;
    min-height: 100%;
    border: 1px solid var(--game-line);
    border-radius: var(--game-radius);
    background:
        linear-gradient(180deg, rgba(10, 26, 48, .82), rgba(7, 16, 37, .9)),
        url("/assets/images/game-store/backgrounds/game-panel-texture-1200x600.webp") center / cover;
}

/* picture is inline by default, which would put the card's image in a line box and leave a
   descender gap under it. Added with the responsive <source> in PERF-IMG-01; the frame itself
   is unchanged because aspect-ratio still governs the img. */
.game-product-card picture {
    display: block;
}

.game-product-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    background: rgba(255, 255, 255, .04);
}

.game-product-card-body {
    padding: 12px;
}

.game-product-card h3 {
    min-height: 2.8em;
    margin: 0 0 8px;
    font-size: 1rem;
    line-height: 1.4;
}

.game-product-card h3 a {
    text-decoration: none;
}

.game-product-card .game-meta {
    color: var(--game-muted);
    font-size: .84rem;
}

.game-price {
    color: var(--game-gold);
    font-weight: 800;
    font-size: 1.08rem;
}

.game-product-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 0 12px 12px;
}

.game-btn {
    width: 100%;
    border-color: rgba(215, 173, 88, .42);
    background: rgba(54, 40, 13, .78);
}

.game-btn-primary {
    border-color: rgba(121, 219, 255, .62);
    background: linear-gradient(180deg, rgba(18, 94, 135, .95), rgba(13, 58, 96, .95));
}

.game-btn-danger {
    border-color: rgba(255, 125, 125, .54);
    background: rgba(94, 24, 30, .86);
}

.game-empty {
    padding: 24px;
    border: 1px dashed var(--game-line);
    border-radius: var(--game-radius);
    color: var(--game-muted);
    background: rgba(6, 17, 31, .64);
}

.game-detail {
    width: min(1180px, calc(100% - 32px));
    margin: 28px auto 56px;
}

.game-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr);
    gap: 24px;
    align-items: start;
}

.game-gallery,
.game-form-panel,
.game-table-panel,
.game-detail-info,
.game-order-panel {
    border: 1px solid var(--game-line);
    border-radius: var(--game-radius);
    background: var(--game-panel);
}

.game-gallery {
    overflow: hidden;
}

.game-gallery-frame {
    position: relative;
    aspect-ratio: 4 / 3;
    background: rgba(255, 255, 255, .04);
}

.game-gallery-frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .32s ease;
}

.game-gallery-frame img.is-active {
    opacity: 1;
}

.game-gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    gap: 8px;
    padding: 10px;
}

.game-gallery-thumbs button {
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
}

.game-gallery-thumbs button.is-active {
    border-color: var(--game-gold);
}

.game-gallery-thumbs img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 5px;
    display: block;
}

.game-detail-info {
    padding: 22px;
}

.game-detail-info h1 {
    margin: 0 0 12px;
    font-size: clamp(1.65rem, 3vw, 2.35rem);
}

.game-detail-text {
    margin-top: 18px;
    color: #d8eaf5;
    line-height: 1.85;
    white-space: pre-line;
}

.game-form-panel,
.game-order-panel {
    width: min(760px, calc(100% - 32px));
    margin: 32px auto 56px;
    padding: 24px;
}

.game-form-panel.wide,
.game-table-panel.wide {
    width: min(1180px, calc(100% - 32px));
}

.game-form-panel h1,
.game-order-panel h1 {
    margin: 0 0 18px;
}

.game-form-grid {
    display: grid;
    gap: 16px;
}

.game-form-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.game-field {
    display: grid;
    gap: 7px;
}

.game-upload-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.game-upload-row .game-btn {
    width: auto;
    min-width: 116px;
    white-space: nowrap;
}

.game-validation {
    color: #ffd2d2;
    font-size: .9rem;
}

.game-captcha-row {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.game-captcha-row img {
    width: 180px;
    height: 72px;
    border-radius: var(--game-radius);
    border: 1px solid var(--game-line);
}

.game-table-panel {
    width: min(1180px, calc(100% - 32px));
    margin: 32px auto 56px;
    overflow: hidden;
}

.game-table-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    padding: 18px;
    border-bottom: 1px solid var(--game-line);
}

.game-table-head h1 {
    margin: 0;
    font-size: 1.55rem;
}

.game-table-wrap {
    overflow-x: auto;
}

.game-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

.game-table th,
.game-table td {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(127, 215, 255, .14);
    vertical-align: middle;
}

.game-table th {
    color: var(--game-muted);
    font-weight: 700;
    background: rgba(6, 17, 31, .56);
}

.game-table td form {
    margin: 0;
}

.game-total-row {
    display: flex;
    justify-content: flex-end;
    gap: 18px;
    align-items: center;
    padding: 18px;
    font-size: 1.15rem;
}

.game-total-row strong,
.game-total-row .game-price {
    white-space: nowrap;
}

.game-total-row .game-btn {
    width: auto;
    min-width: 118px;
    flex: 0 0 auto;
}

.game-footer {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 26px 16px 36px;
    color: var(--game-muted);
    border-top: 1px solid rgba(127, 215, 255, .12);
}

body.game-admin-login-page {
    background:
        linear-gradient(180deg, rgba(3, 8, 28, .62), rgba(3, 8, 28, .92)),
        url("/assets/images/game-store/backgrounds/game-page-bg-1920x1080.webp") center / cover fixed;
}

body.game-member-login-page {
    background:
        linear-gradient(180deg, rgba(3, 8, 28, .62), rgba(3, 8, 28, .92)),
        url("/assets/images/game-store/backgrounds/game-page-bg-1920x1080.webp") center / cover fixed;
}

body.game-admin-body {
    min-height: 100vh;
    margin: 0;
    color: var(--game-text);
    background:
        linear-gradient(180deg, rgba(3, 8, 28, .78), rgba(3, 8, 28, .96)),
        url("/assets/images/game-store/backgrounds/game-page-bg-1920x1080.webp") center / cover fixed;
    font-family: "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
}

.game-admin-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 270px;
    padding: 20px 16px;
    /* inset already bounds this to the viewport; without an overflow rule the items
       past the fold render outside it and cannot be reached at all. */
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    border-right: 1px solid var(--game-line);
    background: rgba(4, 13, 28, .94);
}

.game-admin-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--game-text);
    text-decoration: none;
    font-weight: 800;
}

.game-admin-logo img {
    width: 108px;
    height: auto;
}

.game-admin-sidebar nav {
    display: grid;
    gap: 8px;
}

.game-admin-sidebar nav a {
    padding: 11px 12px;
    border: 1px solid rgba(127, 215, 255, .16);
    border-radius: var(--game-radius);
    color: var(--game-text);
    text-decoration: none;
    background: rgba(12, 31, 56, .7);
}

.game-admin-sidebar nav a:hover {
    border-color: var(--game-cyan);
}

.game-admin-site-link {
    margin-top: 18px;
    width: 100%;
}

.game-admin-main {
    min-height: 100vh;
    margin-left: 270px;
}

.game-admin-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 72px;
    padding: 14px 24px;
    border-bottom: 1px solid var(--game-line);
    background: rgba(5, 15, 29, .86);
    backdrop-filter: blur(14px);
}

.game-admin-topbar small {
    display: block;
    color: var(--game-muted);
}

.game-admin-topbar form {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.game-admin-content {
    padding: 24px;
}

.game-admin-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

.game-admin-metric {
    padding: 18px;
    border: 1px solid var(--game-line);
    border-radius: var(--game-radius);
    background: var(--game-panel);
}

.game-admin-metric span {
    color: var(--game-muted);
}

.game-admin-metric strong {
    display: block;
    margin-top: 8px;
    font-size: 2rem;
}

.game-admin-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.game-inline-edit {
    display: grid;
    grid-template-columns: repeat(4, minmax(130px, 1fr)) auto;
    gap: 8px;
}

.game-thumb-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 10px;
}

.game-thumb-list img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--game-line);
}

.game-thumb-item {
    display: grid;
    gap: 8px;
}

.game-thumb-item form {
    margin: 0;
}

.game-thumb-item .game-btn {
    min-height: 34px;
    padding: 6px 10px;
    font-size: .86rem;
}

@media (max-width: 1180px) {
    .game-product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 920px) {
    .game-topbar-inner {
        align-items: flex-start;
        flex-direction: column;
        padding: 12px 0;
    }

    .game-navlinks {
        justify-content: flex-start;
        width: 100%;
    }

    .game-shell {
        /* minmax(0, 1fr), not 1fr: the horizontally scrolling category strip has a
           min-content width of ~800px, and a bare 1fr track let it widen the whole page
           instead of scrolling inside itself. Measured at 430px: 840px document width. */
        grid-template-columns: minmax(0, 1fr);
    }

    .game-sidebar {
        position: static;
    }

    .game-category-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .game-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .game-detail-grid,
    .game-form-grid.two {
        grid-template-columns: 1fr;
    }

    .game-admin-sidebar {
        position: static;
        width: auto;
        border-right: 0;
        border-bottom: 1px solid var(--game-line);
        /* Static again: the page scrolls, so the sidebar must not be its own scroller. */
        overflow: visible;
        overscroll-behavior: auto;
    }

    .game-admin-main {
        margin-left: 0;
    }

    .game-admin-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .game-inline-edit {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .game-desktop-nav {
        display: none;
    }

    .game-mobile-nav {
        display: block;
    }

    .game-product-grid,
    .game-admin-grid {
        grid-template-columns: 1fr;
    }

    .game-shell {
        width: min(100% - 20px, 1440px);
        margin-top: 14px;
    }

    .game-sidebar,
    .game-section {
        padding: 12px;
    }

    .game-navlinks a,
    .game-inline-form button {
        flex: 1 1 calc(50% - 8px);
        padding-inline: 10px;
        font-size: .88rem;
    }

    .game-captcha-row {
        grid-template-columns: 1fr;
    }

    .game-upload-row {
        grid-template-columns: 1fr;
    }

    .game-upload-row .game-btn {
        width: 100%;
    }

    .game-table-head,
    .game-total-row,
    .game-section-head,
    .game-admin-topbar {
        align-items: stretch;
        flex-direction: column;
    }
}

.game-order-followup,
.game-checkout-expectation {
    margin: 20px 0;
    padding: 18px;
    border: 1px solid var(--game-line-strong);
    border-left: 4px solid var(--game-cyan);
    border-radius: var(--game-radius);
    color: var(--game-text);
    background: rgba(6, 17, 31, .72);
    line-height: 1.7;
}

.game-order-followup h2 {
    margin: 0 0 12px;
    color: var(--game-gold);
    font-size: 1.3rem;
}

.game-order-followup p,
.game-checkout-expectation p {
    margin: 0 0 8px;
}

.game-order-followup p:last-of-type,
.game-checkout-expectation p:last-child {
    margin-bottom: 0;
}

.game-order-followup dl {
    display: grid;
    gap: 8px;
    margin: 16px 0 0;
}

.game-order-followup dl div {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 10px;
}

.game-order-followup dt {
    color: var(--game-muted);
}

.game-order-followup dd {
    margin: 0;
}

/* Product Edit -> Inventory cross-link. Bidirectional navigation between the two screens that
   maintain the same product: the inventory page links here by AutoNo, this links back by PNo. */
.game-form-crosslink { margin: 0 0 16px; }
.game-form-crosslink a { display: inline-block; padding: 8px 14px; border: 1px solid #2c4a7c; border-radius: 8px; color: #1c3a68; font-weight: 700; text-decoration: none; }
.game-form-crosslink a:hover { background: #eef4fc; }

/* ==========================================================================
   UI-CARD-01  GAME storefront product card behaviour contract
   (Conversion Priority round, 2026-08-16)

   BEHAVIOUR only. The GAME skin — panel texture, gradient fill, gold price — is
   untouched; GAME keeps looking like GAME. See pc-store.css for the full rationale
   and book-store.css "G5 storefront product card" for the original.

   GAME was the worst of the three stores. Measured on production at 1440px across
   57 cards, 10 rows had their price and 供貨 lines misaligned, because
   .game-product-card h3 had no line clamp (computed -webkit-line-clamp: none) and
   no break rules, so titles ran 2-4 lines and everything below them floated:

       row y=168   titleH [67, 67, 90, 67]  ->  priceY [441, 441, 463, 441]
       row y=904   titleH [67, 67, 90, 90]  ->  priceY [1176, 1176, 1199, 1199]
       row y=2007  titleH [67, 90, 67, 90]  ->  priceY [2280, 2302, 2280, 2302]

   THE CONTRACT
   1. Fixed image aspect ratio, so every card in a row starts its text at the same y.
   2. Title occupies exactly --game-card-title-lines lines: reserved and clamped.
   3. 供貨 is reserved and clamped at 2 lines.
   4. Price + 供貨 pinned to the bottom with margin-top:auto.
   5. Long unbroken text always has a break opportunity.
   ========================================================================== */

.game-product-card {
    --game-card-title-lines: 3;
    --game-card-title-line-height: 1.4;
    --game-card-meta-line-height: 1.4;
}

.game-product-card-body {
    display: flex;
    flex-direction: column;
}

.game-product-card h3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--game-card-title-lines);
    line-clamp: var(--game-card-title-lines);
    overflow: hidden;
    min-height: calc(var(--game-card-title-lines) * var(--game-card-title-line-height) * 1em);
    line-height: var(--game-card-title-line-height);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.game-product-card .game-price {
    margin-top: auto;
}

.game-product-card .game-product-availability {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    min-height: calc(2 * var(--game-card-meta-line-height) * 1em);
    margin-top: 4px;
    line-height: var(--game-card-meta-line-height);
    overflow-wrap: anywhere;
}

@media (max-width: 620px) {
    .game-product-card {
        --game-card-title-lines: 2;
    }
}

/* ------------------------------------------------------------------
   R4.2-A2 — "查看全部"
   The home page shows eight rotating items per section. A count of what
   is hidden is only honest if it comes with somewhere to go, so every
   capped section gets this link. 44px minimum target: it is a primary
   navigation action on a phone, not a footnote.
   ------------------------------------------------------------------ */
.game-view-all {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 44px;
    padding: .55rem 1.1rem;
    border-radius: 999px;
    border: 1px solid currentColor;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.game-view-all::after { content: "›"; font-size: 1.15em; line-height: 1; }

.game-view-all:hover,
.game-view-all:focus-visible { text-decoration: underline; }

.game-view-all--nav {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: .75rem;
}

.game-section-head { flex-wrap: wrap; gap: .75rem; }

/* ==========================================================================
   MOBILE-OVERFLOW-01 — the same defect BOOK fixed, in the two stores that
   did not get the fix.

   All three storefronts share one product-detail structure: a two-column grid
   whose right-hand column holds .game-detail-text with white-space: pre-line.
   Product copy arrives from the admin and contains long runs with no break
   opportunity. Grid items default to min-width:auto, so that min-content floor
   propagates into the track: the grid resolves to a single column wider than
   the grid itself, and the gallery is stretched to match - a victim, not the
   cause. The fixed mobile CTA bar then sizes to the widened layout viewport,
   which is what makes the page scroll sideways.

   BOOK diagnosed and fixed this and the other two were left alone. Measured on
   production at 375px on 2026-08-30, before this change:

       /game-store/product/TVGAME093   scrollWidth 406 vs 375   (+31px)
       /game-store/product/TVGAME026   scrollWidth 406 vs 375   (+31px)
       /game-store/product/PCGAME080   scrollWidth 406 vs 375   (+31px)
       /book-store/product/BK-LNV-00349            375 vs 375   (0, already fixed)

   Every GAME product page, on every phone. PC measured 0 today, but it has the
   identical structure and only escapes because its current copy happens to
   break; it is included so the third store cannot become the next report.
   ========================================================================== */

.game-detail-grid > * {
    /* Let the track shrink to the column instead of to the widest unbreakable word. */
    min-width: 0;
}

.game-detail-text {
    /* pre-line keeps the author's line breaks; this only adds break opportunities
       inside runs that would otherwise have none. */
    overflow-wrap: anywhere;
}