/* Meusvita Games — one-screen site. Brand: sunflower #ffc83d, ink #15181f, Archivo Black + Manrope (approved 25 Oct 2026, direction B Shelf, intro 3 Stripes).
   Everything inside #site is sized in container units, so the page always fits one screen with no scrolling. */
@font-face{font-family:"Archivo Black";src:url(assets/fonts/archivo-black-latin.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url(assets/fonts/manrope-latin.woff2) format("woff2");font-weight:500 800;font-style:normal;font-display:swap}
:root{
  --sun:#ffc83d; --ink:#15181f; --ink-2:#2a2e38; --white:#ffffff;
  --display:"Archivo Black","Arial Black",Impact,sans-serif;
  --body:"Manrope","Segoe UI",system-ui,-apple-system,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--sun);color:var(--ink);font-family:var(--body);overflow:hidden}
button{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

#site{position:fixed;inset:0;container-type:size;container-name:site;background:var(--sun);overflow:hidden;
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
.pat{position:absolute;inset:0;background:repeating-linear-gradient(-45deg,rgba(21,24,31,.06) 0 1.2cqmax,transparent 1.2cqmax 2.4cqmax);pointer-events:none}

/* logo lockup: same proportions as the approved banner (badge = 1.957em, gap .32em, GAMES .32em) */
.lock{font-size:var(--ls);display:flex;align-items:center;gap:.32em;line-height:1;text-decoration:none;color:var(--ink)}
.lock .b{width:1.957em;height:1.957em;flex:none}
.lock .b svg{display:block;width:100%;height:100%;overflow:visible}
.lock .w{font-family:var(--display);font-size:1em;line-height:.95;letter-spacing:-.01em;white-space:nowrap}
.lock .w small{display:block;font-family:var(--body);font-weight:800;font-size:.32em;letter-spacing:.34em;margin-top:.5em}
.lock .w i{font-style:normal;display:inline-block}

.hdr{position:absolute;left:5cqw;right:5cqw;top:4.5cqh;display:flex;justify-content:space-between;align-items:center;z-index:5}
.hlock{--ls:3.2cqmin}
.soc{display:flex;gap:1.2cqmin}
.si{display:grid;place-items:center;width:4.4cqmin;height:4.4cqmin;border-radius:50%;color:var(--ink);transition:background .2s,color .2s}
.si svg{width:2.5cqmin;height:2.5cqmin}
.si:hover{background:var(--ink);color:var(--sun)}

.foot{position:absolute;left:5cqw;right:5cqw;bottom:3.4cqh;display:flex;justify-content:space-between;align-items:center;gap:2cqmin;font:700 1.45cqmin/1.3 var(--body);letter-spacing:.08em;z-index:4}
.foot .links{display:flex;gap:2.4cqmin;align-items:center}
.foot .mail{user-select:all;letter-spacing:.02em}
.foot a{text-decoration:none;border-bottom:.2cqmin solid currentColor}

.btn{display:inline-flex;align-items:center;gap:.7em;background:var(--ink);color:var(--sun);border:0;border-radius:999px;padding:1.05em 1.6em;font:800 1.7cqmin/1 var(--body);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
video,img.px{image-rendering:pixelated}

/* intro (plays once per visit) */
.intro{position:absolute;inset:0;z-index:20;background:var(--sun);display:grid;place-items:center;cursor:pointer}
.intro .ilock{--ls:7.4cqmin;transform-origin:0 0}
.intro .sweep{position:absolute;inset:-20%;background:repeating-linear-gradient(-45deg,var(--ink) 0 3cqmax,transparent 3cqmax 6cqmax);opacity:0}

/* shelf */
.B{position:absolute;inset:0;padding:13cqh 7cqw 12cqh;display:grid;grid-template-rows:auto 1fr auto;gap:2cqh}
.B .top{display:flex;justify-content:space-between;align-items:end;gap:4cqw}
.B h1{font:400 7.4cqmin/.92 var(--display);margin:0;letter-spacing:-.015em}
.B p{font:600 2.1cqmin/1.5 var(--body);max-width:28em;margin:0}
.shelf{position:relative;align-self:end;display:flex;align-items:flex-end;justify-content:center;gap:4cqw;padding:0 3cqw;border-bottom:1.6cqmin solid var(--ink);margin-bottom:2cqh}
.shelf::after{content:"";position:absolute;left:4%;right:4%;bottom:-4.6cqmin;height:3cqmin;background:repeating-linear-gradient(90deg,var(--ink) 0 1.2cqmin,transparent 1.2cqmin 30%)}
.gw{position:relative}
.box{position:relative;border:.5cqmin solid var(--ink);border-radius:1.6cqmin;background:var(--white);box-shadow:1.4cqmin 1.4cqmin 0 var(--ink);display:flex;flex-direction:column;overflow:hidden;transition:transform .25s,box-shadow .25s;padding:0;text-align:left}
.box.game{width:22cqmin;cursor:pointer}
.box.game:hover{transform:translateY(-1.6cqmin) rotate(-1.5deg);box-shadow:1.4cqmin 3cqmin 0 var(--ink)}
.box.game video{width:100%;aspect-ratio:9/16;height:auto;object-fit:cover;display:block;border-bottom:.5cqmin solid var(--ink);background:#3f8f4f}
.box .lab{padding:1.4cqmin 1.6cqmin 1.6cqmin;font:800 1.3cqmin/1.2 var(--body);letter-spacing:.12em}
.box .lab b{display:block;font:400 1.75cqmin/1 var(--display);letter-spacing:0;margin-bottom:.35em;white-space:nowrap}
.box.next{width:20cqmin;height:38cqmin;background:repeating-linear-gradient(-45deg,var(--ink) 0 1.4cqmin,var(--ink-2) 1.4cqmin 2.8cqmin);color:var(--sun);justify-content:flex-end}
.box.next .q{position:absolute;inset:0;display:grid;place-items:center;font:400 12cqmin/1 var(--display);color:var(--sun)}
.box.next .lab{background:var(--ink);color:var(--white)}
.box.follow{width:20cqmin;height:38cqmin;background:transparent;box-shadow:none;border-style:dashed;justify-content:center;align-items:center;gap:1.1cqmin;text-align:center;padding:2cqmin}
.box.follow .fh{font:400 2.4cqmin/1 var(--display)}
.box.follow .fp{font:800 1.2cqmin/1 var(--body);letter-spacing:.14em;margin-bottom:.8cqmin}
.frow{display:flex;gap:1cqmin;justify-content:center}
.fb{display:grid;place-items:center;width:4.6cqmin;height:4.6cqmin;border-radius:50%;background:var(--ink);color:var(--sun);transition:transform .2s}
.fb svg{width:2.4cqmin;height:2.4cqmin}
.fb:hover{transform:translateY(-.3cqmin)}
.fline{display:none;margin:0;font:800 2.8cqw/1 var(--body);letter-spacing:.06em;text-transform:uppercase}
.tag{position:absolute;left:50%;top:-3.2cqmin;transform-origin:50% 50%;translate:-50% 0;background:var(--sun);border:.45cqmin solid var(--ink);border-radius:1cqmin;padding:.9cqmin 1.3cqmin;font:800 1.25cqmin/1.2 var(--body);letter-spacing:.12em;white-space:nowrap;animation:swing 3.2s ease-in-out infinite;z-index:2}
@keyframes swing{0%,100%{rotate:-5deg}50%{rotate:-1deg}}

/* game page */
.chips{display:flex;flex-wrap:wrap;gap:1cqmin;margin:0 0 2.4cqmin;padding:0;list-style:none}
.chips li{border:.4cqmin solid var(--ink);border-radius:999px;padding:.8cqmin 1.4cqmin;font:800 1.3cqmin/1 var(--body);letter-spacing:.12em;background:var(--white)}
.soon{display:inline-flex;align-items:center;gap:1cqmin;background:var(--ink);color:var(--white);border-radius:1.4cqmin;padding:1.2cqmin 2cqmin;font:800 1.3cqmin/1.25 var(--body);letter-spacing:.12em;align-self:flex-start}
.soon b{display:block;font:400 2.2cqmin/1 var(--display);letter-spacing:0;color:var(--sun)}
.legal{margin:1.8cqmin 0 0;font:700 1.3cqmin/1.3 var(--body);letter-spacing:.06em}
.legal a{margin-right:1.6cqmin}
.detail{position:absolute;inset:0;z-index:10;background:var(--sun);display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;align-content:center;column-gap:5cqw;padding:11cqh 6cqw 6cqh;visibility:hidden}
.detail.open{visibility:visible}
.detail .vid{grid-column:1;grid-row:1/4;height:76cqh;aspect-ratio:9/16;background:var(--ink);padding:1cqmin;border-radius:3cqmin;align-self:center;box-shadow:1.6cqmin 1.6cqmin 0 rgba(21,24,31,.18)}
.detail .vid video{width:100%;height:100%;object-fit:cover;border-radius:2.2cqmin;display:block;background:#3f8f4f}
.detail .head,.detail .info,.detail .shotsrow{grid-column:2;min-width:0}
.detail .info{display:flex;flex-direction:column;justify-content:center}
.back{align-self:flex-start;background:var(--white);border:.4cqmin solid var(--ink);border-radius:999px;padding:1cqmin 1.8cqmin;font:800 1.35cqmin/1 var(--body);letter-spacing:.14em;cursor:pointer;margin-bottom:2.6cqmin;display:inline-flex;gap:.8cqmin;align-items:center}
.back svg{width:1.2em;height:1.2em}
.eyebrow{font:800 1.4cqmin/1 var(--body);letter-spacing:.2em;margin-bottom:1.4cqmin}
.detail h2{font:400 7.2cqmin/.92 var(--display);margin:0 0 1.2cqmin;letter-spacing:-.015em}
.detail .tl{font:800 2.6cqmin/1.2 var(--body);margin:0 0 1.8cqmin}
.detail .desc{font:600 2cqmin/1.55 var(--body);max-width:38em;margin:0 0 2.4cqmin}
.shots{display:flex;gap:1.4cqmin;overflow-x:auto;padding:2.4cqmin 0 1.2cqmin;scrollbar-width:thin;min-width:0}
.shots img{height:22cqh;width:auto;aspect-ratio:1/2;border:.4cqmin solid var(--ink);border-radius:1.2cqmin;flex:none;display:block;object-fit:cover}

/* phone / portrait */
@container site (orientation:portrait){
  .hdr{top:3.5cqh}
  .hlock{--ls:4.6cqw}
  .soc{display:none}
  .foot{font-size:2.6cqw;bottom:2.4cqh;flex-direction:column;gap:1.2cqh;text-align:center}
  .foot .links{gap:4cqw;flex-wrap:wrap;justify-content:center}
  .intro .ilock{--ls:8.6cqw}
  .B{padding:11cqh 6cqw 12cqh;gap:1.6cqh}
  .B .top{flex-direction:column;align-items:flex-start;gap:1.6cqh}
  .B h1{font-size:12cqw}
  .B p{font-size:3.7cqw}
  .shelf{gap:3cqw;padding:0 1cqw;border-bottom-width:2.4cqw;margin-bottom:3cqh}
  .shelf::after{bottom:-6cqw;height:4cqw}
  .box{border-width:.8cqw;box-shadow:2cqw 2cqw 0 var(--ink);border-radius:2.4cqw}
  .box.game{width:35cqw}
  .box.next{width:30cqw;height:56cqw}
  .box.follow{display:none}
  .fline{display:flex;flex-direction:column;align-items:center;gap:1.4cqh;min-width:0}
  .fline .fb{width:10cqw;height:10cqw}
  .fline .fb svg{width:5cqw;height:5cqw}
  .fline .frow{gap:2.4cqw}
  .box .lab{font-size:2.1cqw;padding:2cqw 2.4cqw}
  .box .lab b{font-size:3.3cqw}
  .box.next .q{font-size:16cqw}
  .tag{font-size:2cqw;top:-4.4cqw;padding:1.2cqw 1.8cqw;border-width:.6cqw}
  .chips li{font-size:2.2cqw;padding:1.2cqw 2.2cqw;border-width:.6cqw}
  .chips{gap:1.4cqw}
  .soon{font-size:2.2cqw;padding:2cqw 3cqw;border-radius:2.4cqw}
  .soon b{font-size:3.6cqw}
  .legal{font-size:2.3cqw}
  .detail{grid-template-columns:38cqw 1fr;gap:2.4cqh 5cqw;padding:9cqh 5cqw 4cqh;align-content:start}
  .detail .head{grid-column:1/-1;grid-row:1}
  .detail .vid{grid-column:1;grid-row:2;height:auto;width:38cqw;padding:1.4cqw;border-radius:4cqw;align-self:start}
  .detail .vid video{border-radius:3cqw}
  .detail .info{grid-column:2;grid-row:2;justify-content:flex-start}
  .back{font-size:2.3cqw;padding:1.8cqw 3cqw;border-width:.6cqw;margin-bottom:2cqh}
  .eyebrow{font-size:2.3cqw}
  .detail h2{font-size:8.6cqw}
  .detail .tl{font-size:4.2cqw;margin:0}
  .detail .desc{font-size:3.4cqw}
  .detail .shotsrow{grid-column:1/-1;grid-row:3}
  .shots img{height:24cqh;border-width:.6cqw;border-radius:2cqw}
}
@media (prefers-reduced-motion:reduce){.tag{animation:none}.box{transition:none}}