/* --- Stone / Stoic theme helpers --- */
:root{
    --stone-dk:#131313;
    --stone-md:#1B1B1B;
    --stone-md2:#222;
    --stone-hl:#2a2a2a;
    --gold:#d0c28f;
    --gold-soft:#c2b47e;
    --line:#3a3a3a;
}
body{
    background: radial-gradient(1200px 800px at 30% 0%, #202020 0%, #161616 60%, #121212 100%), linear-gradient(to right, #161616, #1a1a1a 45%, #161616);
}
header{
    background: linear-gradient(#171717, #141414);
    border-bottom: 1px solid #2b2b2b;
}

/* --- Play demo board --- */
.play-demo{
    margin-top: 1rem;
    background:
            radial-gradient(900px 600px at 70% -10%, rgba(255,255,255,0.04), transparent 60%),
            radial-gradient(900px 600px at 30% 110%, rgba(255,255,255,0.03), transparent 60%),
            linear-gradient(180deg, #181818, #141414);
    border: 1px solid #2a2a2a;
    border-radius: 14px;
    box-shadow: inset 0 0 0 1px #0d0d0d, 0 8px 24px rgba(0,0,0,.5);
    padding: 1.5rem;
}

/* Areas: Evil (top), two Righteous (bottom) */
.play-demo > section{
    border: 1px solid #282828;
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1.25rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
    position: relative;
}

/* Labels with gold inlay */
.play-demo > section::before{
    content: attr(class);
    position: absolute;
    top: -12px;
    left: 14px;
    padding: .25rem .6rem;
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #111;
    background: linear-gradient(180deg, var(--gold), var(--gold-soft));
    border: 1px solid #866;
    border: 1px solid rgba(20,20,20,.6);
    border-radius: 8px;
    box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 2px 6px rgba(0,0,0,.5);
}

/* Zone rows */
.play-demo .deck,
.play-demo .cost-zone,
.play-demo .main-zone{
    border: 1px dashed #3a3a3a;
    background: repeating-linear-gradient( 135deg, #161616, #161616 8px, #151515 8px, #151515 16px );
    min-height: 110px;
    border-radius: 10px;
    position: relative;
    padding: .65rem .65rem 1rem;
    box-shadow: inset 0 0 0 1px #0e0e0e;
}

.play-demo .deck{ width: 120px; display: inline-block; vertical-align: top; margin-right: .8rem; }
.play-demo .cost-zone{ width: 220px; display: inline-block; vertical-align: top; margin-right: .8rem; }
.play-demo .main-zone{ display: inline-block; width: calc(100% - 120px - 220px - 2.4rem); min-height: 160px; }

/* Zone titles */
.play-demo .deck::after,
.play-demo .cost-zone::after,
.play-demo .main-zone::after{
    position: absolute;
    left: .7rem;
    bottom: .4rem;
    font-size: .8rem;
    color: #999;
    letter-spacing: .06em;
}
.play-demo .deck::after{ content:"Deck"; }
.play-demo .cost-zone::after{ content:"Cost Zone"; }
.play-demo .main-zone::after{ content:"Main Zone"; }

/* Deck stack (card backs) */
.card-stack{
    position: absolute;
    width: 72px;
    height: 104px;
    right: 12px;
    top: 12px;
}
.card-stack .stack-card{
    position: absolute;
    width: 72px;
    height: 104px;
    border-radius: 8px;
    border: 1px solid #000;
    background-size: cover;
    background-position: center;
    box-shadow: 0 2px 6px rgba(0,0,0,.6);
    transform: translate(var(--x,0), var(--y,0)) rotate(var(--r,0deg));
    transition: transform .2s ease;
}
.card-stack .stack-card:nth-child(1){ --x: 0px;  --y: 0px;  --r: -1deg; }
.card-stack .stack-card:nth-child(2){ --x: 2px;  --y: -2px; --r: 1deg; }
.card-stack .stack-card:nth-child(3){ --x: -2px; --y: 2px;  --r: .5deg; }
.card-stack .stack-card:nth-child(4){ --x: 4px;  --y: 0px;  --r: -1.5deg; }
.card-stack .stack-card:nth-child(5){ --x: -3px; --y: -1px; --r: .8deg; }

/* Clickable deck area */
.play-demo .deck{ cursor: pointer; }
.play-demo .deck:hover{ border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }

/* Cards in zones */
.pm-card{
    position: relative;
    width: 90px;
    height: 130px;
    border-radius: 10px;
    border: 1px solid #0a0a0a;
    background: #0f0f0f;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,.6);
    user-select: none;
    transition: transform .2s ease, box-shadow .2s ease;
}
.pm-card img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.pm-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,.7);
}

/* Rotate (tap) effect to “use/spend” */
.pm-card.rotated{
    transform: rotate(90deg);
}

/* Subtle gold dividers for each area */
.play-demo > section{
    outline: 1px solid rgba(208,194,143,.07);
    box-shadow: 0 0 0 1px rgba(208,194,143,.05) inset;
}

/* Make grid robust on narrow screens */
@media (max-width: 900px){
    .play-demo .deck,
    .play-demo .cost-zone,
    .play-demo .main-zone{ display: block; width: 100%; margin: 0 0 .8rem; min-height: 120px; }
    .card-stack{ right: auto; left: 12px; }
}
/** should be working all below **/

/* Zone bases */
.play-demo .deck,
.play-demo .discard-pile,
.play-demo .resisted-pile,
.play-demo .cost-zone,
.play-demo .main-zone{
    border:1px dashed #3a3a3a;
    background: repeating-linear-gradient(135deg, #161616, #161616 8px, #151515 8px, #151515 16px);
    min-height:110px;
    border-radius:10px;
    position:relative;
    padding:.65rem .65rem 1rem;
    box-shadow: inset 0 0 0 1px #0e0e0e;
}

/* Inline layout for the five evil-zone boxes; righteous areas omit "resisted" but CSS still works */
.play-demo .deck{ width:120px; display:inline-block; vertical-align:top; margin-right:.8rem; cursor:pointer; }
.play-demo .discard-pile{ width:120px; display:inline-block; vertical-align:top; margin-right:.8rem; }
.play-demo .resisted-pile{ width:120px; display:inline-block; vertical-align:top; margin-right:.8rem; }
.play-demo .cost-zone{ width:220px; display:inline-block; vertical-align:top; margin-right:.8rem; }
.play-demo .main-zone{ display:inline-block; width:calc(100% - 120px - 120px - 120px - 220px - 3.2rem); min-height:160px; }

/* Zone captions */
.play-demo .deck::after,
.play-demo .discard-pile::after,
.play-demo .resisted-pile::after,
.play-demo .cost-zone::after,
.play-demo .main-zone::after{
    position:absolute; left:.7rem; bottom:.4rem; font-size:.8rem; color:#999; letter-spacing:.06em;
}
.play-demo .deck::after{ content:"Deck"; }
.play-demo .discard-pile::after{ content:"Discard Pile (Shift+Click)"; }
.play-demo .resisted-pile::after{ content:"Resisted Pile (Alt+Click)"; }
.play-demo .cost-zone::after{ content:"Cost Zone (Double-click)"; }
.play-demo .main-zone::after{ content:"Main Zone"; }

/* Stack visuals */
.card-stack{ position:absolute; width:72px; height:104px; right:12px; top:12px; }
.stack-card{
    position:absolute; width:72px; height:104px; border-radius:8px; border:1px solid #000;
    background-size:cover; background-position:center; box-shadow:0 2px 6px rgba(0,0,0,.6);
    transform: translate(var(--x,0), var(--y,0)) rotate(var(--r,0deg));
}
.stack-card:nth-child(1){ --x:0px;  --y:0px;  --r:-1deg; }
.stack-card:nth-child(2){ --x:2px;  --y:-2px; --r:1deg; }
.stack-card:nth-child(3){ --x:-2px; --y:2px;  --r:.5deg; }
.stack-card:nth-child(4){ --x:4px;  --y:0px;  --r:-1.5deg; }
.stack-card:nth-child(5){ --x:-3px; --y:-1px; --r:.8deg; }

/* Cards */
.pm-card{
    width:90px; height:130px; border-radius:10px; border:1px solid #0a0a0a; background:#0f0f0f;
    display:inline-flex; align-items:center; justify-content:center; margin:6px;
    box-shadow:0 4px 12px rgba(0,0,0,.6); transition:transform .2s ease, box-shadow .2s ease; user-select:none;
}
.pm-card img{ width:100%; height:100%; object-fit:cover; display:block; }
.pm-card:hover{ transform: translateY(-2px); box-shadow:0 10px 20px rgba(0,0,0,.7); }
.pm-card.rotated{ transform: rotate(90deg); }

/* Responsive: stack rows on narrow screens */
@media (max-width: 980px){
    .play-demo .deck,
    .play-demo .discard-pile,
    .play-demo .resisted-pile,
    .play-demo .cost-zone,
    .play-demo .main-zone{ display:block; width:100%; margin:0 0 .8rem; }
    .card-stack{ left:12px; right:auto; }
}

/* Only decks show a stacked fan of card backs */
.play-demo .deck .card-stack{
    position:absolute;
    width:72px; height:104px;
    right:12px; top:12px;
}
.play-demo .deck .stack-card{
    position:absolute;
    width:72px; height:104px;
    border-radius:8px; border:1px solid #000;
    background-image: url("../cardback.jpg");
    background-size:cover; background-position:center;
    box-shadow:0 2px 6px rgba(0,0,0,.6);
    transform: translate(var(--x,0), var(--y,0)) rotate(var(--r,0deg));
}
.play-demo .deck .stack-card:nth-child(1){ --x:0px;  --y:0px;  --r:-1deg; }
.play-demo .deck .stack-card:nth-child(2){ --x:2px;  --y:-2px; --r:1deg; }
.play-demo .deck .stack-card:nth-child(3){ --x:-2px; --y:2px;  --r:.5deg; }
.play-demo .deck .stack-card:nth-child(4){ --x:4px;  --y:0px;  --r:-1.5deg; }
.play-demo .deck .stack-card:nth-child(5){ --x:-3px; --y:-1px; --r:.8deg; }

/* Hand zone visuals */
.play-demo .hand{
    border:1px dashed #3a3a3a;
    background: repeating-linear-gradient(135deg, #161616, #161616 8px, #151515 8px, #151515 16px);
    min-height:110px; border-radius:10px; position:relative;
    padding:.65rem .65rem 1rem; box-shadow: inset 0 0 0 1px #0e0e0e;
    width:260px; display:inline-block; vertical-align:top; margin-right:.8rem;
}
.play-demo .hand::after{
    content:"Hand (dbl-click → Main)"; position:absolute; left:.7rem; bottom:.4rem;
    font-size:.8rem; color:#999; letter-spacing:.06em;
}
.phase-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 10px;
    max-width: 800px;
    margin: 2rem auto;
    font-family: sans-serif;
    text-align: center;
}

.phase {
    background: #1a1a1a;
    color: white;
    border: 2px solid #444;
    padding: 1em;
    border-radius: 10px;
    font-size: 0.95em;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.phase span {
    margin-top: 0.5em;
    font-weight: normal;
    font-size: 0.85em;
    color: #ccc;
}

.phase.center {
    background: #33331a;
    color: #fdf5a9;
    border: 2px dashed gold;
    font-size: 0.85em;
    font-weight: bold;
    grid-column: 2;
    grid-row: 2;
}

.maturity-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 600px) {
    .maturity-grid {
        grid-template-columns: 1fr 1fr;
    }
}

p:has(.righteous-area-zones) {
    text-align: center;
}

img.righteous-area-zones {
    width: 60%;
}

.hidden-on-main {
    display: none;

}

.cta p.summary {
    max-width: 300px;
    display: block;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
    font-style: italic;
}

.short-summary.bold{
    font-weight: bold;
    max-width: 300px;
    display: block;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
    font-style: italic;
}

p.summary img {
    max-width: 95%;
}


.game-example div.center {
    text-align: center;
}

.game-example img {
    width: 100%;
    max-width: 350px;
    text-align: center;
}

.li-title {
    font-weight: bold;
}

/* --- Gallery Section --- */
.gallery {
    text-align: center;
    background: linear-gradient(180deg, var(--stone-md), var(--stone-dk));
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 3rem 1rem;
    box-shadow: inset 0 0 0 1px #0e0e0e, 0 0 20px rgba(0,0,0,.4);
}

.gallery h3 {
    color: var(--gold);
    text-shadow: 1px 1px 2px #000;
    margin-bottom: 2rem;
    letter-spacing: 0.05em;
}

/* Grid layout */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
}

/* Image cards */
.gallery-grid figure {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid #333;
    background: #1a1a1a;
    box-shadow: 0 4px 12px rgba(0,0,0,.5);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-grid figure:hover {
    transform: scale(1.05);
    box-shadow: 0 0 18px rgba(208,194,143,.25);
}

/* Images */
.gallery-grid img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    transition: opacity 0.3s ease;
}

.gallery-grid figure:hover img {
    opacity: 0.95;
}

/* Lightbox effect */
.gallery-grid figure::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    background: rgba(0,0,0,0.65);
    color: var(--gold);
    font-size: 0.85rem;
    padding: 0.4rem 0;
    opacity: 0;
    transition: opacity 0.3s;
}

.gallery-grid figure:hover::after {
    opacity: 1;
}

/* Optional lightbox overlay */
.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.9);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.lightbox img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 12px;
    box-shadow: 0 0 40px rgba(0,0,0,0.8);
}