/* ==========================================================================
   Games: the "you might also like" strip, the /games/ listing, and the
   per-game inner pages. Kept in its own file so the homepage bundle stays
   exactly as it was; loaded by index.html and by everything under /games/.
   ========================================================================== */

/* ------------------------------------------------------------ game strip */

.games-strip-section{background:#fff2f7;border-top:1px solid #f4dbe5}
.strip-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:26px;margin-bottom:30px}
.strip-heading h2{margin:9px 0 0;font-size:clamp(29px,3.6vw,43px)}
.strip-more{flex:none}
.game-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.game-row-wide{grid-template-columns:repeat(6,minmax(0,1fr))}
.game-card{min-width:0}
.strip-count{margin:24px 0 0;font-size:13px;color:var(--ink-soft)}
.strip-count a{color:var(--berry);font-weight:800;text-decoration:underline;text-underline-offset:3px}

.game-card{display:flex;flex-direction:column;background:#fff;border:1px solid #efdae3;border-radius:12px;overflow:hidden;text-decoration:none;color:inherit;box-shadow:0 7px 20px rgba(94,43,67,.06);transition:transform .2s ease,box-shadow .2s ease}
.game-card:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(94,43,67,.16)}
.game-card:focus-visible{outline:3px solid #d887aa;outline-offset:3px}
.game-card-thumb{position:relative;display:block;background:#2b1020;aspect-ratio:16/9}
.game-card-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.game-card-body{display:flex;flex-direction:column;gap:5px;padding:12px 13px 15px}
.game-card-title{font-family:'Nunito',sans-serif;font-size:14.5px;font-weight:900;color:#7f2f53;line-height:1.25}
.game-card-note{font-size:11.5px;line-height:1.5;color:#8a7180;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* The NEW badge is hidden in markup and revealed by script.js only while
   data-new-until is still in the future, so it retires itself after 30 days
   without anyone touching the build. */
.badge-new{position:absolute;top:9px;left:9px;padding:4px 9px;border-radius:100px;background:linear-gradient(180deg,#ff6f8f,#d61f4f);color:#fff;font-family:'Nunito',sans-serif;font-size:10px;font-weight:900;letter-spacing:.13em;box-shadow:0 3px 10px rgba(214,31,79,.45)}
.badge-new[hidden]{display:none}

/* --------------------------------------------------------- games listing */

.listing-hero{background:linear-gradient(126deg,#fff9fb 0%,#ffe3ec 54%,#fde6ee 100%);padding:74px 0 84px}
.listing-hero h1{margin:14px 0 16px;font-size:clamp(35px,5vw,58px)}
.listing-hero p{max-width:640px;color:#7d6370;font-size:16px;line-height:1.75}
.listing-section{background:#fffefa;padding-top:78px}
.listing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.listing-grid .game-card-note{-webkit-line-clamp:3;font-size:12.5px}
.listing-grid .game-card-title{font-size:17px}
.listing-back{background:#fff2f7}
.listing-back-inner{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.listing-back-inner h2{margin:10px 0 8px;font-size:clamp(28px,3.6vw,40px)}
.listing-back-inner p{max-width:560px;margin:0;color:#7d6370;font-size:15px;line-height:1.7}

/* ------------------------------------------------------------ inner page */

.theme-jester{--ink:#efe4ef;--ink-soft:#c4adc0;--berry:#e0688f;--berry-dark:#a82a55;--pink:#f39bb8;--line:#4a2740;--blush:#1b0d1a;--cream:#160b15;--white:#1e1020}
.theme-jester body,.theme-jester .play-section,.theme-jester .faq-section,.theme-jester .credits-section{background:#160b15;color:#f0e5ef}
.theme-jester .site-header{background:rgba(24,12,24,.95);border-bottom-color:#3a1f36;backdrop-filter:blur(14px)}
.theme-jester .site-nav a{color:#d6bfd2}
.theme-jester .site-nav a:hover{color:#f39bb8}
.theme-jester .brand{color:#f6e6f1}
.theme-jester .brand-heart{color:#e0688f;text-shadow:2px 2px 0 #6d1338,-1px -1px 0 #6d1338}
.theme-jester .header-cta{background:#b3234f;box-shadow:0 4px 0 #7d1338}
.theme-jester .skip-link{background:#b3234f}
.theme-jester .section-heading p,.theme-jester .inner-sub,.theme-jester .inner-tagline{color:#c4adc0}
.theme-jester h1,.theme-jester h2,.theme-jester h3{color:#f6e9f2}
.theme-jester .final-cta h2{color:#fff}
.theme-jester .inner-tagline{font-size:20px;line-height:1.55;color:#e9d8e7}
.theme-jester .kicker{color:#e0688f}
.theme-jester .eyebrow{color:#e0688f}
.theme-jester .button-ghost{border-color:#5c3355;background:rgba(255,255,255,.05);color:#e9c9dc}
.theme-jester .button-ghost:hover{background:rgba(255,255,255,.11)}

.inner-hero{position:relative;overflow:hidden;background:#1b0d1a;padding:74px 0 88px}
.inner-hero-glow{position:absolute;inset:0;background:radial-gradient(900px 420px at 78% 18%,rgba(179,35,79,.36),transparent 70%),radial-gradient(#ffffff14 1px,transparent 1px);background-size:auto,26px 26px;pointer-events:none}
.inner-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
/* Grid items default to min-width:auto, so a 1280px-wide image would blow the
   art column past its fr share and squeeze the copy. Zero it out. */
.inner-hero-grid>*,.about-grid>*{min-width:0}
.inner-hero-copy h1{margin:0 0 16px;font-size:clamp(38px,5.4vw,64px);line-height:1.02}
.inner-hero-copy h1 .heading-heart{color:#e0688f}
.inner-sub{max-width:520px;font-size:15px;line-height:1.7;margin:0 0 27px}
.inner-hero-art{position:relative;padding:10px;background:#0e050d;border:1px solid #4a2740;border-radius:10px;box-shadow:0 28px 62px rgba(0,0,0,.6);transform:rotate(1.6deg)}
.inner-hero-art img{width:100%;display:block;border-radius:4px}
.inner-facts{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:30px 0 0;padding:0}
.inner-facts li{display:flex;flex-direction:column;gap:2px;min-width:104px;padding:11px 14px;border:1px solid #4a2740;border-radius:10px;background:rgba(255,255,255,.04)}
.inner-facts strong{font-family:'Nunito',sans-serif;font-size:22px;font-weight:900;color:#f2a9c3;line-height:1.1}
.inner-facts span{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#b79aad;font-weight:800}

.theme-jester .play-section{padding-top:80px}
.theme-jester .game-shell{border-color:#3f1f36;background:#241020;box-shadow:0 13px 0 #35182c,0 26px 55px rgba(0,0,0,.5)}
.theme-jester .game-shell-top{background:#3f1f36;color:#f3dcea}
.theme-jester .window-dots i{background:#8c4b6d}
.theme-jester .window-dots i:nth-child(2){background:#b96a8d}
.theme-jester .window-dots i:nth-child(3){background:#e59bb6}
.theme-jester .game-stage{background:#0b040a}

.inner-about{background:#1f0f1e}
.inner-about h2{margin:12px 0 20px}
.inner-about p{color:#c9b3c6;font-size:15px;line-height:1.8;margin:0 0 16px}
.theme-jester .story-quote{border-left-color:#e0688f}
.theme-jester .story-quote>span{color:#e0688f}
.theme-jester .story-quote p{color:#e5d2e2}
.theme-jester .story-quote strong{color:#f39bb8}
.theme-jester .text-link{color:#f39bb8;border-bottom-color:#8c4b6d}
.about-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:start}
.theme-jester .controls-card{background:#250f22;border-color:#4a2740;box-shadow:none}
.theme-jester .controls-card-title{border-bottom-color:#43223c}
.theme-jester .controls-card-title span{color:#e0688f}
.theme-jester .controls-card dt{color:#c9b3c6}
.theme-jester .controls-card dd{color:#f39bb8}
.theme-jester .controls-card dl>div{border-bottom-color:#3a2039}
.theme-jester .controls-card p{color:#a68da6}

.how-section{background:#160b15}
.how-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 42px;counter-reset:how}
.how-list li{display:grid;grid-template-columns:52px 1fr;gap:16px;border-top:1px solid #40223a;padding-top:20px}
.how-num{font-family:Georgia,serif;font-size:21px;font-style:italic;color:#e0688f}
.how-list h3{margin:0 0 6px;font-size:19px}
.how-list p{margin:0;font-size:14px;line-height:1.72;color:#bda5b9}

.shots-section{background:#1f0f1e}
.theme-jester .shots-section .section-heading p{color:#bda5b9}
.shots-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.shot{margin:0;background:#250f22;border:1px solid #4a2740;border-radius:12px;overflow:hidden}
.shot img{width:100%;display:block}
.shot figcaption{padding:11px 15px;font-size:10.5px;letter-spacing:.15em;font-weight:900;color:#c99ab3;background:#1d0c1c}

.theme-jester .content-warning{background:#3a0f22}
.theme-jester .warning-icon{border-color:#e0688f;color:#f8cede}
.theme-jester .warning-inner p{color:#f0dbe6}
.theme-jester .warning-heart{color:#e0688f}

.theme-jester .faq-list{border-top-color:#4a2740}
.theme-jester .faq-list details{border-bottom-color:#4a2740}
.theme-jester .faq-list summary{color:#f3e2ee}
.theme-jester .faq-list summary:after{color:#e0688f}
.theme-jester .faq-list details p{color:#bda5b9}
.theme-jester .faq-decoration{color:#33182e}
.theme-jester .faq-intro p{color:#bda5b9}

.credits-section{background:#160b15}
.credits-section h2{margin:12px 0 26px}
.credits-list{list-style:none;margin:0;padding:0;display:grid;gap:10px;max-width:820px}
.credits-list li{position:relative;padding-left:22px;font-size:14px;line-height:1.7;color:#bda5b9}
.credits-list li:before{content:'♠';position:absolute;left:0;top:0;color:#8c4b6d}

.more-section{background:#1f0f1e}
.theme-jester .more-section .section-heading p{color:#bda5b9}
.theme-jester .game-card{background:#250f22;border-color:#4a2740;box-shadow:none}
.theme-jester .game-card:hover{box-shadow:0 16px 34px rgba(0,0,0,.45)}
.theme-jester .game-card-title{color:#f6dcea}
.theme-jester .game-card-note{color:#ad92a9}
.more-link-row{margin:28px 0 0}

.theme-jester .final-cta{background:linear-gradient(125deg,#a3234f,#5c0f2c)}
.theme-jester .final-cta .kicker{color:#ffd6e5}
.theme-jester .final-cta p{color:#ffe3ee}
.theme-jester .final-sparkle,.theme-jester .final-heart{color:#ff9ec0}
.theme-jester .button-light{background:#fff2f7;color:#7d1338;box-shadow:0 6px 0 #4a0a1f}

/* ---------------------------------------------------------- responsive */

@media(max-width:1100px){
  .game-row,.game-row-wide{grid-template-columns:repeat(3,minmax(0,1fr))}
  .listing-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .inner-hero-grid,.about-grid{grid-template-columns:1fr;gap:38px}
  .inner-hero-art{transform:none;max-width:640px}
}
@media(max-width:800px){
  .strip-heading{flex-direction:column;align-items:flex-start;gap:16px}
  .how-list{grid-template-columns:1fr}
  .shots-grid{grid-template-columns:1fr}
  .theme-jester .inner-facts li{min-width:92px}
}
@media(max-width:560px){
  .game-row,.game-row-wide{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .listing-grid{grid-template-columns:1fr}
  .game-card-title{font-size:13px}
  .inner-hero{padding:52px 0 62px}
}