/* -----------------------------------------------------
INTRO
----------------------------------------------------- */

.nostalgia-intro {

margin-bottom: 20px;

}

.nostalgia-note {

margin: 16px 0 22px;

padding: 10px 12px;

background: rgba(177,189,139,.10);

border-left: 3px solid var(--moss);

color: var(--brown);

font-size: 13px;

}

/* -----------------------------------------------------
COLLECTION SECTIONS
----------------------------------------------------- */

.nostalgia-section {

margin: 0 0 28px;

}

.nostalgia-section h2 {

margin-bottom: 10px;

}

/* -----------------------------------------------------
COLLECTION LINKS
----------------------------------------------------- */

.nostalgia-links {

display: flex;

flex-wrap: wrap;

gap: 7px;

margin: 12px 0 20px;

}

.nostalgia-links a {

display: inline-block;

padding: 6px 9px;

background: rgba(177,189,139,.10);

border: 1px dotted var(--moss-light);

border-radius: 4px;

color: var(--brown);

font-family:
"Alagard",
Verdana,
Arial,
Helvetica,
sans-serif;

font-size: 10px;

font-weight: normal;

text-decoration: none;

}

.nostalgia-links a:hover {

background: rgba(177,189,139,.20);

border-color: var(--moss);

color: var(--rust);

}

/* -----------------------------------------------------
GAME SHELF

The whole area remains a wooden board.

Each desktop row of three cards is treated visually
as its own recessed shelf within the board.
----------------------------------------------------- */

.game-shelf {

position: relative;

isolation: isolate;

display: grid;

grid-template-columns:
repeat(3, minmax(0, 1fr));

grid-auto-flow: row;

gap: 28px 14px;

margin: 12px 0 29px;

padding: 20px 16px 24px;

background:
#9a7652
url("../images/vecteezy_old-wood-texture-landscape-eps10-wide-background-vector-illustration_.jpg")
center center / cover
no-repeat;

border-radius: 4px;

box-shadow:
inset 0 0 0 1px rgba(45,30,18,.45),
inset 0 8px 18px rgba(255,255,255,.05),
inset 0 -10px 18px rgba(25,18,12,.22),
0 5px 8px rgba(20,14,9,.38);

}

/* -----------------------------------------------------
BOTTOM SHELF EDGE
----------------------------------------------------- */

.game-shelf::after {

content: "";

position: absolute;

left: 0;

right: 0;

bottom: -6px;

height: 6px;

background: rgba(38,27,18,.82);

border-radius:
0 0 4px 4px;

box-shadow:
0 2px 4px rgba(15,10,7,.40);

}

/* -----------------------------------------------------
RECESSED ROW SHELVES
----------------------------------------------------- */

.game-card:nth-child(3n + 1)::after {

content: "";

position: absolute;

top: -10px;

bottom: -13px;

left: -7px;

width:
calc(300% + 28px);

z-index: -1;

background:
linear-gradient(
to bottom,
rgba(25,18,12,.82) 0%,
rgba(25,18,12,.82) calc(100% - 7px),
rgba(58,42,28,.88) calc(100% - 7px),
rgba(58,42,28,.88) 100%
);

border-radius: 4px;

box-shadow:
inset 0 2px 5px rgba(8,6,4,.45),
inset 0 -3px 5px rgba(255,255,255,.035),
0 2px 4px rgba(15,10,7,.35);

}

/* -----------------------------------------------------
GAME CARD

Each card is kept strictly inside its grid column
so that one game cannot make the shelf wider than
the other cards.
----------------------------------------------------- */

.game-card {

position: relative;

z-index: 1;

display: flex;

flex-direction: column;

align-items: center;

justify-self: stretch;

width: 100%;

min-width: 0;

max-width: 100%;

padding: 0;

background: none;

border: 0;

border-radius: 0;

text-align: center;

transition:
transform .15s ease;

}

.game-card:hover {

background: none;

border: 0;

transform: translateY(-2px);

}

/* -----------------------------------------------------
GAME IMAGE

The artwork remains completely visible when the
card is not hovered.

The information sticker sits above the artwork
when the card is hovered.
----------------------------------------------------- */

.game-image {

position: relative;

z-index: 2;

display: block;

width: 100%;

max-width: 100%;

height: 220px;

object-fit: contain;

object-position: center;

margin: 0 auto 7px;

padding: 0;

box-sizing: border-box;

background: transparent;

border: 0;

opacity: 1;

mix-blend-mode: normal;

filter:
drop-shadow(2px 3px 3px rgba(25,18,12,.48))
drop-shadow(0 7px 5px rgba(25,18,12,.16));

transition:
filter .15s ease,
transform .15s ease;

}

/* -----------------------------------------------------
SUBTLE IMPERFECTION
----------------------------------------------------- */

.game-card:nth-child(3n + 1) .game-image {

transform: rotate(-1deg);

}

.game-card:nth-child(3n + 2) .game-image {

transform: rotate(.7deg);

}

.game-card:nth-child(3n) .game-image {

transform: rotate(-.5deg);

}

/* -----------------------------------------------------
STICKER CONTENT

The entire information block is the sticker.

It is positioned over the bottom of the artwork,
but its height is automatic so longer descriptions
simply make the sticker taller.

The text itself remains in normal document flow,
which keeps the title safely above longer details.
----------------------------------------------------- */

.game-info {

position: absolute;

left: 4%;

right: 4%;

bottom: 7px;

z-index: 5;

box-sizing: border-box;

padding: 7px 10px 8px;

background: rgba(244,239,225,.95);

border-radius: 10px;

box-shadow:
2px 3px 5px rgba(20,14,9,.38);

opacity: 0;

transform:
translateY(6px);

transition:
opacity .18s ease,
transform .18s ease;

pointer-events: none;

}

/* -----------------------------------------------------
GAME TITLE
----------------------------------------------------- */

.game-card h4 {

position: relative;

z-index: 6;

margin: 0;

padding: 0 0 2px;

background: transparent;

color: var(--forest);

font-family:
"Alagard",
Verdana,
Arial,
Helvetica,
sans-serif;

font-size: 14px;

font-weight: normal;

line-height: 1.25;

}

/* -----------------------------------------------------
GAME TYPE
----------------------------------------------------- */

.game-card .game-type {

position: relative;

z-index: 6;

margin: 0;

padding: 1px 0 2px;

background: transparent;

color: var(--moss);

font-family:
"Alagard",
Verdana,
Arial,
Helvetica,
sans-serif;

font-size: 10px;

line-height: 1.3;

}

/* -----------------------------------------------------
GAME DETAILS
----------------------------------------------------- */

.game-card .game-details {

position: relative;

z-index: 6;

margin: 0;

padding: 2px 0 0;

background: transparent;

color: var(--brown);

font-family:
"Rainy Hearts",
Verdana,
Arial,
Helvetica,
sans-serif;

font-size: 12px;

line-height: 1.45;

}

.game-card .game-details span {

color: var(--moss);

}

/* -----------------------------------------------------
STICKER HOVER
----------------------------------------------------- */

.game-card:hover .game-info {

opacity: 1;

transform:
translateY(0);

}

/* -----------------------------------------------------
STICKER HOVER / IMAGE HOVER

The artwork gets a slightly stronger shadow while
the information sticker appears.
----------------------------------------------------- */

.game-card:hover .game-image {

transform:
rotate(0deg)
translateY(-2px);

filter:
drop-shadow(3px 4px 4px rgba(20,14,9,.55))
drop-shadow(0 8px 6px rgba(20,14,9,.18));

}

/* -----------------------------------------------------
GAME GROUP TITLES
----------------------------------------------------- */

.game-group-title {

margin: 18px 0 10px;

color: var(--forest);

font-family:
"MossyNewt",
serif;

font-size: 16px;

font-weight: normal;

line-height: 1.25;

}

/* -----------------------------------------------------
SHELF NOTE
----------------------------------------------------- */

.shelf-note {

margin-top: 10px;

padding: 10px 12px;

background: rgba(197,164,93,.06);

border-top: 1px dashed var(--gold);

border-bottom: 1px dashed var(--gold);

color: var(--brown);

font-size: 13px;

}

/* -----------------------------------------------------
COLLECTION DIVIDER
----------------------------------------------------- */

.collection-divider {

display: block;

width: 100%;

margin: 20px 0 22px;

color: var(--gold);

font-size: 12px;

line-height: 1;

text-align: center;

letter-spacing: 3px;

}

/* -----------------------------------------------------
RESPONSIVE
----------------------------------------------------- */

@media (max-width: 700px) {

.game-shelf {


grid-template-columns:
  repeat(2, minmax(0, 1fr));

gap: 18px 14px;

}

.game-card:nth-child(3n + 1)::after {

display: none;

}

}

@media (max-width: 500px) {

.game-shelf {


grid-template-columns: 1fr;

}

}