/* Part B public pages: games catalogue, game detail, services, custom development, about, contact, journal, legal.
   Builds on site.css tokens and components. Loaded per page via View::push('head'). */

/* ---------- shared bits ---------- */
.crumbs{display:flex;gap:10px;align-items:center;font-size:14px;color:var(--muted);margin-bottom:22px}
.crumbs a{text-decoration:none;border-bottom:1px solid var(--line)}
.crumbs a:hover{color:var(--cream);border-color:var(--cream)}
.prose-lg{max-width:760px}
.prose-lg p{font-size:clamp(16.5px,1.25vw,18.5px);line-height:1.7}
.prose-lg>p:first-child{font-size:clamp(19px,1.7vw,25px);line-height:1.5;color:var(--cream);margin-top:0}
.legal-page .prose h2{font-size:clamp(24px,2.2vw,32px)}
.legal-page .prose h3{margin-top:1.4em}
.legal-page .prose p{font-size:16.5px}

/* ---------- /games/ catalogue ---------- */
.cat-hero h1{max-width:12em}
.cat-bar{display:flex;align-items:center;justify-content:space-between;gap:20px 32px;flex-wrap:wrap;margin-bottom:clamp(24px,3vw,40px)}
.fpills{display:flex;flex-wrap:wrap;gap:10px}
.fpill{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid rgba(243,239,228,.28);font:500 15px/1 var(--body);text-decoration:none;color:rgba(243,239,228,.86);transition:border-color .2s,background .2s,color .2s}
.fpill small{font-size:12px;opacity:.6}
.fpill:hover{border-color:var(--cream)}
.fpill[aria-pressed=true]{background:var(--gold);color:var(--ink);border-color:transparent;font-weight:600}
.cat-count{color:var(--muted);font-size:14px}
.cat-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(40px,4.4vw,72px) clamp(20px,2.4vw,40px)}
.gc{grid-column:span 6;min-width:0}
.gc[hidden]{display:none}
.cat-grid:not(.is-filtered) .gc:nth-child(1){grid-column:1/-1}
.cat-grid:not(.is-filtered) .gc:nth-child(2),.cat-grid:not(.is-filtered) .gc:nth-child(5){grid-column:span 7}
.cat-grid:not(.is-filtered) .gc:nth-child(3),.cat-grid:not(.is-filtered) .gc:nth-child(4){grid-column:span 5}
.gc-media{position:relative;display:block;overflow:hidden;border-radius:4px;background:var(--bg2);height:clamp(240px,29vw,460px);isolation:isolate}
.cat-grid:not(.is-filtered) .gc:nth-child(1) .gc-media{height:clamp(260px,38vw,640px)}
.gc-media img,.gc-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gc-media img{transition:transform 1.1s var(--ease)}
.gc:hover .gc-media img{transform:scale(1.04)}
.gc-media video{opacity:0;transition:opacity .6s ease}
.gc-media.vid-on video{opacity:1}
.gc-media::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,8,12,.88) 0%,rgba(7,8,12,.15) 52%,rgba(7,8,12,.15) 100%);z-index:1}
.gc-media .chip{position:absolute;left:16px;top:16px;z-index:2}
.gc-title{position:absolute;left:clamp(16px,2vw,32px);bottom:clamp(14px,2vw,28px);right:16px;z-index:2;font:800 clamp(30px,3.6vw,60px)/1 var(--display);letter-spacing:-.025em;text-shadow:0 2px 24px rgba(0,0,0,.55)}
.cat-grid:not(.is-filtered) .gc:nth-child(1) .gc-title{font-size:clamp(40px,6vw,104px)}
.gc-body{padding-top:18px;display:grid;grid-template-columns:minmax(0,1fr);gap:6px;max-width:640px}
.gc-kind{font:700 17px/1.2 var(--display)}
.gc-sum{color:rgba(243,239,228,.78);font-size:15.5px}
.gc-modes{color:var(--muted);font-size:14px}
.gc-body .links{margin-top:10px}
.cat-note{margin-top:clamp(40px,5vw,72px);color:var(--muted);font-size:14px}

/* ---------- game detail ---------- */
.gh{position:relative;min-height:88vh;min-height:88svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;isolation:isolate}
.gh-bg{position:absolute;inset:0;z-index:-2}
.gh-bg img{width:100%;height:100%;object-fit:cover}
.gh-shade{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,rgba(7,8,12,.92) 0%,rgba(7,8,12,.7) 38%,rgba(7,8,12,.12) 78%),
  linear-gradient(0deg,rgba(7,8,12,1) 0%,rgba(7,8,12,.7) 22%,rgba(7,8,12,0) 55%),
  linear-gradient(180deg,rgba(7,8,12,.65) 0%,rgba(7,8,12,0) 24%)}
.gh-main{padding-top:140px;padding-bottom:clamp(36px,6vw,80px)}
.gh h1{font:800 clamp(52px,9vw,148px)/.92 var(--display);letter-spacing:-.04em;margin-top:18px;max-width:9em}
.gh-tag{margin-top:24px;max-width:600px;font-size:clamp(17px,1.5vw,22px);color:rgba(243,239,228,.86)}
.gh .chip{backdrop-filter:blur(8px)}
.facts{border-bottom:1px solid var(--line);background:var(--bg)}
.facts dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.facts dl>div{padding:26px 24px 28px 0}
.facts dl>div+div{padding-left:24px;border-left:1px solid var(--line)}
.facts dt{font-size:14px;color:var(--muted)}
.facts dd{margin-top:8px;font:700 clamp(16px,1.35vw,19px)/1.3 var(--display)}
.notice{margin-top:22px;padding:16px 18px;border:1px solid rgba(242,193,94,.45);border-radius:10px;color:var(--cream);font-size:15.5px;background:rgba(242,193,94,.07)}
.modes{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.modes li{font-size:14px;padding:6px 14px;border:1px solid var(--line);border-radius:999px;color:rgba(243,239,228,.84)}
.clipband{padding-bottom:clamp(56px,7vw,110px)}
.clipbox{border-radius:6px;overflow:hidden;background:#000;border:1px solid var(--line);aspect-ratio:16/9;max-width:1280px;margin-inline:auto}
.clipbox video{width:100%;height:100%;object-fit:contain;background:#000}
.craft h2{max-width:13em}
.craft-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,6vw,100px);margin-top:clamp(32px,4vw,56px);padding-top:clamp(28px,3vw,44px);border-top:1px solid var(--line)}
.craft-col h3{font:700 clamp(22px,2vw,28px)/1.1 var(--display);margin-bottom:6px}
.craft-col p{margin-top:16px;color:rgba(243,239,228,.82);font-size:clamp(16px,1.15vw,17.5px);line-height:1.7;max-width:56ch}
.tech{margin-top:clamp(36px,4vw,60px);display:flex;gap:16px 32px;align-items:baseline;flex-wrap:wrap;padding-top:24px;border-top:1px solid var(--line)}
.tech-k{font:600 14px/1 var(--body);color:var(--muted)}
.tech ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px 26px}
.tech li{font:700 clamp(17px,1.5vw,22px)/1.2 var(--display)}
.gal h2{margin-bottom:clamp(24px,3vw,40px)}
.gal-list{list-style:none;display:flex;flex-wrap:wrap;gap:clamp(8px,1vw,14px)}
.gal-list::after{content:"";flex:10 1 0}
.gal-list li{flex:var(--ar) 1 calc(var(--ar) * 230px);min-width:0}
.gal-list button{all:unset;display:block;width:100%;cursor:zoom-in;border-radius:4px;overflow:hidden;background:var(--bg3);line-height:0}
.gal-list button:focus-visible{outline:2px solid var(--gold1);outline-offset:3px}
.gal-list img{width:100%;height:auto;transition:transform .7s var(--ease),filter .3s}
.gal-list button:hover img{transform:scale(1.04)}
.lb{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100%;height:100%;color:var(--cream)}
.lb::backdrop{background:rgba(5,6,9,.92)}
.lb[open]{display:grid;place-items:center}
.lb img{max-width:min(94vw,1500px);max-height:84vh;max-height:84dvh;width:auto;height:auto;border-radius:4px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lb-x{position:absolute;top:16px;right:16px;width:48px;height:48px;border-radius:50%;border:1px solid rgba(243,239,228,.3);background:rgba(7,8,12,.6);font-size:28px;line-height:1;cursor:pointer}
.lb-n{position:absolute;top:50%;margin-top:-26px;width:52px;height:52px;border-radius:50%;border:1px solid rgba(243,239,228,.3);background:rgba(7,8,12,.6);cursor:pointer;display:grid;place-items:center}
.lb-prev{left:16px}.lb-next{right:16px}
.lb-n svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
.lb-x:hover,.lb-n:hover{border-color:var(--gold1)}
.feat-list{list-style:none;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(28px,4vw,64px)}
.feat-list li{padding:26px 0 28px;border-bottom:1px solid var(--line)}
.feat-list h3{font:700 clamp(20px,1.8vw,26px)/1.15 var(--display)}
.feat-list p{margin-top:10px;color:var(--muted);font-size:15.5px;line-height:1.55}
.planned{display:inline-block;vertical-align:middle;margin-left:8px;padding:3px 10px;border:1px solid var(--gold1);border-radius:999px;font:600 12px/1.2 var(--body);color:var(--gold1);letter-spacing:.01em}
.gcta-in{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.gcta h2{font-size:clamp(30px,3.6vw,52px);max-width:14em}
.rel h2{font-size:clamp(30px,3.6vw,52px);margin-bottom:clamp(28px,3vw,44px)}
.rel-list{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,40px)}
.rel-list a{display:block;text-decoration:none}
.rel-img{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:4px;background:var(--bg2)}
.rel-img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.rel-list a:hover .rel-img img{transform:scale(1.05)}
.rel-img .chip{position:absolute;left:12px;top:12px}
.rel-t{display:block;margin-top:16px;font:700 clamp(22px,1.9vw,28px)/1.1 var(--display)}
.rel-k{display:block;margin-top:4px;color:var(--muted);font-size:15px}

/* ---------- services ---------- */
.svc-hero h1{max-width:12em}
.svc-rows{border-top:0}
.srow{padding-block:clamp(48px,6vw,96px);border-bottom:1px solid var(--line)}
.srow .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(24px,3vw,56px);align-items:center}
.srow-img{grid-column:1/span 6;display:block;aspect-ratio:16/10;overflow:hidden;border-radius:4px;background:var(--bg2);position:relative}
.srow-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.srow-img:hover img{transform:scale(1.04)}
.srow-text{grid-column:8/span 5}
.srow.flip .srow-img{grid-column:7/span 6;grid-row:1}
.srow.flip .srow-text{grid-column:1/span 5;grid-row:1}
.srow h2{font-size:clamp(28px,3vw,44px);line-height:1.04;overflow-wrap:break-word}
.srow-lead{margin-top:18px;font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:var(--cream)}
.srow-cov{list-style:none;margin-top:22px;display:grid;gap:8px}
.srow-cov li{position:relative;padding-left:22px;color:rgba(243,239,228,.8);font-size:15.5px}
.srow-cov li::before{content:"";position:absolute;left:0;top:.72em;width:12px;height:2px;background:var(--gold1)}
.srow-proof{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:15px}
.srow-games{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px}
.srow-games a{color:var(--cream);text-decoration:none;border-bottom:1px solid var(--gold1);font-weight:500}
.srow-games a:hover{border-color:var(--cream)}
.srow-text>p:last-child{margin-top:26px}

/* ---------- custom development ---------- */
.ch{position:relative;min-height:84vh;min-height:84svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;isolation:isolate}
.ch-short{min-height:62vh;min-height:62svh}
.ch-bg{position:absolute;inset:0;z-index:-2}
.ch-bg img{width:100%;height:100%;object-fit:cover}
.ch-shade{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,rgba(7,8,12,.94) 0%,rgba(7,8,12,.78) 42%,rgba(7,8,12,.2) 85%),
  linear-gradient(0deg,rgba(7,8,12,1) 0%,rgba(7,8,12,.5) 25%,rgba(7,8,12,0) 55%),
  linear-gradient(180deg,rgba(7,8,12,.6) 0%,rgba(7,8,12,0) 22%)}
.ch-main{padding-top:140px;padding-bottom:clamp(40px,6vw,88px)}
.ch h1{font:800 clamp(44px,7vw,112px)/.95 var(--display);letter-spacing:-.035em;max-width:11em}
.ch-short h1{font-size:clamp(38px,5.4vw,84px);max-width:13em}
@media (max-width:640px){.ch h1{font-size:clamp(30px,9vw,44px)}.ch-short h1{font-size:clamp(30px,9vw,40px)}}
.ch .sub{margin-top:26px;max-width:600px;font-size:clamp(16px,1.3vw,19.5px);color:rgba(243,239,228,.86)}
.ex-head{align-items:end;margin-bottom:clamp(36px,5vw,72px)}
.ex-lede{margin-top:0;max-width:520px}
.ex-list{display:grid;gap:clamp(40px,5vw,84px)}
.ex{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(20px,3vw,56px);align-items:center}
.ex-img{grid-column:1/span 7;display:block;aspect-ratio:2.2/1;overflow:hidden;border-radius:4px;background:var(--bg2)}
.ex-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.ex-img:hover img{transform:scale(1.04)}
.ex-text{grid-column:9/span 4}
.ex.flip .ex-img{grid-column:6/span 7;grid-row:1}
.ex.flip .ex-text{grid-column:1/span 4;grid-row:1}
.ex-text h3{font:800 clamp(28px,2.6vw,40px)/1.05 var(--display);letter-spacing:-.015em}
.ex-text h3 a{text-decoration:none}
.ex-k{margin-top:12px;font:700 17px/1.3 var(--display)}
.ex-text p{margin-top:10px;color:rgba(243,239,228,.78);font-size:15.5px}
.ex-text p:last-child{margin-top:18px}
.proc h2{max-width:12em}
.faq{border-top:1px solid var(--line)}
.faq-i{border-bottom:1px solid var(--line)}
.faq-i summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:24px;cursor:pointer;padding:24px 0;font:700 clamp(18px,1.6vw,23px)/1.25 var(--display)}
.faq-i summary::-webkit-details-marker{display:none}
.faq-i summary:focus-visible{outline:2px solid var(--gold1);outline-offset:2px}
.faq-i summary i{flex:none;position:relative;width:34px;height:34px;border:1px solid rgba(243,239,228,.3);border-radius:50%;transition:border-color .2s,background .2s}
.faq-i summary i::before,.faq-i summary i::after{content:"";position:absolute;left:10px;right:10px;top:16px;height:2px;background:var(--cream);transition:transform .3s var(--ease)}
.faq-i summary i::after{transform:rotate(90deg)}
.faq-i[open] summary i::after{transform:rotate(0)}
.faq-i summary:hover i{border-color:var(--gold1)}
.faq-i p{padding:0 56px 26px 0;color:rgba(243,239,228,.8);font-size:16.5px;line-height:1.7;max-width:62ch}
.enq .lede{max-width:420px}
.enq-svc{margin-top:18px;color:var(--cream)}
.enq-svc strong{color:var(--gold1);font-weight:600}
.enq-form{background:var(--bg3);border:1px solid var(--line);border-radius:18px;padding:clamp(20px,3vw,40px)}
.band .enq-form{background:var(--bg)}
.enq-stub{display:grid;gap:20px}

/* ---------- about ---------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.stats dt{order:2;color:var(--muted);font-size:15px;margin-top:6px}
.stats>div{display:flex;flex-direction:column}
.stats dd{order:1;font:800 clamp(56px,8vw,120px)/.95 var(--display);letter-spacing:-.04em;background:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.how{list-style:none;border-top:1px solid var(--line)}
.how li{padding:28px 0 30px;border-bottom:1px solid var(--line)}
.how h3{font:700 clamp(21px,2vw,28px)/1.15 var(--display)}
.how p{margin-top:10px;color:rgba(243,239,228,.78);max-width:60ch}

/* ---------- journal ---------- */
.posts{list-style:none;display:grid;gap:clamp(32px,4vw,56px);max-width:960px}
.posts li{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:28px;align-items:center;padding-bottom:clamp(32px,4vw,56px);border-bottom:1px solid var(--line)}
.posts li:not(:has(.post-img)){grid-template-columns:1fr}
.post-img{display:block;aspect-ratio:16/10;overflow:hidden;border-radius:4px}
.post-img img{width:100%;height:100%;object-fit:cover}
.posts time,.post-date{color:var(--muted);font-size:14px}
.posts h2{font:700 clamp(24px,2.4vw,34px)/1.1 var(--display);margin:8px 0}
.posts h2 a{text-decoration:none}.posts h2 a:hover{color:#fff}
.posts p{color:rgba(243,239,228,.78)}
.post-date{margin-top:14px}
.post-cover{margin-bottom:clamp(28px,4vw,48px);max-width:1100px}
.post-cover img{width:100%;height:auto;border-radius:6px}
.post-back{margin-top:48px}

/* ---------- cookies table ---------- */
.ctable{margin-top:24px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ctr{display:grid;grid-template-columns:minmax(120px,1fr) 3fr minmax(140px,1.2fr);gap:20px;padding:16px 20px;border-bottom:1px solid var(--line);font-size:15px}
.ctr:last-child{border-bottom:0}
.ctr.head{background:var(--bg2);font-weight:600;color:var(--cream)}
.ctr span{color:rgba(243,239,228,.84)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .facts dl{grid-template-columns:1fr 1fr}
  .facts dl>div:nth-child(3){padding-left:0;border-left:0}
  .facts dl>div:nth-child(n+3){border-top:1px solid var(--line)}
  .rel-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .srow-text{grid-column:7/span 6}
  .srow-img{grid-column:1/span 6}
  .srow.flip .srow-img{grid-column:7/span 6}
  .srow.flip .srow-text{grid-column:1/span 6}
}
@media (max-width:860px){
  .cat-grid{grid-template-columns:1fr}
  .cat-grid:not(.is-filtered) .gc:nth-child(n){grid-column:auto}
  .gc-media,.cat-grid:not(.is-filtered) .gc:nth-child(1) .gc-media{height:clamp(220px,62vw,420px)}
  .gc-title,.cat-grid:not(.is-filtered) .gc:nth-child(1) .gc-title{font-size:clamp(32px,10vw,56px)}
  .craft-cols{grid-template-columns:1fr}
  .feat-list{grid-template-columns:1fr}
  .rel-list{grid-template-columns:1fr}
  .rel-list li:nth-child(n+3){display:none}
  .srow .wrap{display:block}
  .srow-img,.srow.flip .srow-img{margin-bottom:24px}
  .ex{display:block}
  .ex-img{margin-bottom:20px;aspect-ratio:16/10}
  .stats{grid-template-columns:1fr 1fr;gap:32px 20px}
  .posts li{grid-template-columns:1fr}
  .ctr{grid-template-columns:1fr;gap:6px}
  .ctr.head{display:none}
  .gh-shade{background:linear-gradient(0deg,rgba(7,8,12,1) 0%,rgba(7,8,12,.88) 36%,rgba(7,8,12,.2) 72%,rgba(7,8,12,.55) 100%)}
  .ch-shade{background:linear-gradient(0deg,rgba(7,8,12,1) 0%,rgba(7,8,12,.88) 40%,rgba(7,8,12,.3) 80%,rgba(7,8,12,.55) 100%)}
  .gh-main,.ch-main{padding-top:110px}
  .lb-n{top:auto;bottom:20px;margin-top:0}
  .lb-prev{left:calc(50% - 64px)}.lb-next{right:calc(50% - 64px)}
}
@media (max-width:640px){
  .facts dl>div{padding:18px 12px 20px 0}
  .facts dl>div+div{padding-left:14px}
  .gcta-in .btn{width:100%}
  .faq-i p{padding-right:0}
  .gal-list li{flex-basis:calc(var(--ar) * 150px)}
  .cat-bar{display:block}
  .cat-count{margin-top:14px}
}
@media (prefers-reduced-motion:reduce){
  .gc:hover .gc-media img,.rel-list a:hover .rel-img img,.srow-img:hover img,.ex-img:hover img,.gal-list button:hover img{transform:none}
}
.craft h2,.gal h2,.feat h2{font-size:clamp(30px,3.8vw,56px)}

/* gallery videos (admin-added: uploads, direct links, YouTube/Vimeo click-to-load) */
.vids h2{margin-bottom:clamp(20px,2.4vw,32px)}
.vid-list{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(20px,2.4vw,32px)}
.vid-list .clipbox{max-width:none;margin:0}
.vid-list figcaption{margin-top:10px;color:var(--muted);font-size:15px;line-height:1.5}
.vid-embed{position:relative}
.vid-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid-play{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--cream);font:600 16px/1 var(--body);background:radial-gradient(ellipse at 50% 40%,var(--bg3),#000 75%)}
.vid-play svg{width:64px;height:64px;fill:none;stroke:var(--gold1);stroke-width:2}
.vid-play svg path{fill:var(--gold1);stroke:none}
.vid-play:hover svg circle{fill:rgba(255,255,255,.08)}
.vid-play:focus-visible{outline:2px solid var(--gold1);outline-offset:-4px}
@media (max-width:360px){.ch h1{font-size:8.2vw}.gh h1{font-size:11.5vw}}