*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#f4efe6;color:#2a2320;font-family:'Lato',sans-serif;-webkit-font-smoothing:antialiased}
a{color:#2a2320}
a:hover{color:#c2612a}
@keyframes ypulse{0%{opacity:1}50%{opacity:.25}100%{opacity:1}}

.page{min-height:100vh;display:flex;flex-direction:column}
.wrap{max-width:1160px;margin:0 auto;width:100%}
.col{display:flex;flex-direction:column;gap:20px}
.h2{margin:0;font-family:'VT323',monospace;font-weight:400;font-size:54px;line-height:1.1;text-transform:uppercase}
.h3{margin:0;font-family:'VT323',monospace;font-weight:400;font-size:35px;line-height:1.1}

/* header */
.topbar{position:sticky;top:0;z-index:5;background:#f4efe6;border-bottom:4px solid #2a2320}
/* wide: the bar has no vertical padding so the links can fill its full height (hover tab reaches the top) */
.topbar-in{--pad:24px;max-width:1160px;margin:0 auto;padding:0 var(--pad);display:flex;align-items:stretch;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand{font-family:'Press Start 2P',monospace;font-size:14px;color:#2a2320;text-decoration:none;display:flex;align-items:center;gap:12px;padding-block:14px}
.brand-logo{display:block;width:44px;height:44px;image-rendering:pixelated}
.nav{display:flex;align-items:stretch;gap:22px;flex-wrap:wrap;font-family:'VT323',monospace;font-size:24px;text-transform:uppercase}
.nav a{text-decoration:none}
.nav-links{display:flex;gap:4px}
/* hover uses the grey-blue behind the cat in the logo */
.nav-links a{display:flex;align-items:center;padding:0 18px;transition:background-color .15s}
.nav-links a:hover,.nav-links a:focus-visible,.langs button:not([aria-pressed="true"]):hover{background:#cfe3dc}
.langs{display:flex;align-self:center;border:3px solid #2a2320}
.langs button{font-family:'VT323',monospace;font-size:22px;padding:2px 10px;border:0;cursor:pointer;background:transparent;color:#2a2320}
.langs button[aria-pressed="true"]{background:#2a2320;color:#f4efe6}
/* narrow: logo + languages on the first row, the three links spread across the second */
@media (max-width:820px){
  .topbar-in{display:grid;grid-template-columns:1fr auto;align-items:center;row-gap:12px;padding-top:12px}
  .brand{padding-block:0}
  .nav{display:contents}
  .langs{grid-column:2;grid-row:1}
  /* full-width row of equal tabs, from a divider under the logo down to the bar's bottom border */
  .nav-links{grid-column:1 / -1;grid-row:2;gap:0;margin-inline:calc(-1 * var(--pad));border-top:2px solid #2a2320}
  .nav-links a{flex:1;justify-content:center;padding:10px 4px}
}
/* smallest phones: shrink the name so it and the languages still share a row */
@media (max-width:400px){.brand{font-size:11px;gap:10px}}

/* hero */
/* the stage's 14px frame is a box-shadow: 54px top = 40px visible; .hero-in gap + .hero-foot padding (34px) = 20px visible */
.hero{background:#2a2320;padding:54px 24px 40px}
.hero-in{max-width:960px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
.hero-stage{width:100%;aspect-ratio:16/9;position:relative;overflow:hidden;background:#000;box-shadow:0 0 0 6px #e88a3c,0 0 0 12px #2a2320,0 0 0 14px #e88a3c}
.hero-canvas{position:absolute;left:0;top:0;width:960px;height:540px;transform-origin:0 0}
.hero-foot{display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap;padding-top:14px}
.tagline{margin:0;color:#f4efe6;font-family:'VT323',monospace;font-size:32px;line-height:1.15;text-wrap:balance;text-align:center}
@media (min-width:760px){.tagline{white-space:nowrap}}

/* games */
.games{padding:80px 24px}
.games .col{gap:36px}
.game-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:32px}
.card{border:4px solid #2a2320;box-shadow:8px 8px 0 #2a2320;display:flex;flex-direction:column}
.card-media{position:relative;aspect-ratio:16/9;overflow:hidden;border-bottom:4px solid #2a2320}
.card-body{padding:24px;display:flex;flex-direction:column;gap:14px;flex:1}
.tags{display:flex;gap:8px;flex-wrap:wrap;font-family:'VT323',monospace;font-size:18px;line-height:1.1}
.tag-solid{padding:3px 8px}
.tag{border:2px solid currentColor;padding:1px 8px}
.motto{margin:0;font-size:20px;font-weight:700}
.desc{margin:0;font-size:18px;line-height:1.5;text-wrap:pretty}
.card-cta{margin-top:auto;padding-top:8px}
.btn{display:inline-flex;font-family:'VT323',monospace;font-size:24px;line-height:1.1;background:#2a2320;color:#f4efe6;padding:10px 18px;text-decoration:none}
.btn:hover{background:#c2612a;color:#f4efe6}

.card-pawcery{background:#fffaf2}
.card-pawcery .card-media{background:#1c1a22}
.card-pawcery .cover{width:100%;height:100%;object-fit:cover;object-position:70% center;display:block}
.pawcery-logo{position:absolute;left:20px;top:16px;width:44%;max-width:240px;filter:drop-shadow(0 4px 0 rgba(0,0,0,.5))}
.card-pawcery .tag-solid{background:#e88a3c;color:#2a2320}
.card-pawcery .motto{color:#c2612a}

.card-frontiers{background:#05060f;color:#e8fdff}
.grid-bg{display:flex;align-items:center;justify-content:center;background-color:#05060f;background-image:linear-gradient(rgba(0,229,255,.14) 2px,transparent 2px),linear-gradient(90deg,rgba(0,229,255,.14) 2px,transparent 2px);background-size:32px 32px}
.shots{gap:4%}
.shots img{height:84%;aspect-ratio:9/16;object-fit:cover;border:2px solid #00e5ff;box-shadow:0 0 0 3px #05060f,0 0 18px rgba(0,229,255,.35);display:block}
.shots img:nth-child(2){border-color:#ff2bd6;box-shadow:0 0 0 3px #05060f,0 0 18px rgba(255,43,214,.35)}
.card-frontiers .tag-solid{background:#ff2bd6;color:#05060f}
.card-frontiers .tag{color:#00e5ff}
.card-frontiers .h3{color:#00e5ff}
.title-row{display:flex;align-items:center;gap:14px}
.app-icon{width:48px;height:48px;flex:none;border-radius:11px;box-shadow:0 0 0 2px #00e5ff,0 0 14px rgba(0,229,255,.35)}
.card-frontiers .motto{color:#ffc04a}
.card-frontiers .desc{color:#cfe9ee}
.soon{font-family:'Lato',sans-serif;font-size:15px;color:#8fb4bd}

/* about */
.about{padding:80px 24px;background:#cfe3dc;border-top:4px solid #2a2320;border-bottom:4px solid #2a2320}
.about-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:48px;align-items:center}
.lead{margin:0;font-size:20px;line-height:1.55;text-wrap:pretty}
/* equal columns sized to the widest box, so both boxes match */
.people{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:16px;width:fit-content}
/* about-grid stacks to one column below 2×420px + 48px gap + 2×24px padding */
@media (max-width:935px){.people{margin-inline:auto}}
.person{background:#f4efe6;border:4px solid #2a2320;padding:14px 18px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.person-name{font-family:'VT323',monospace;font-size:30px;line-height:1}
.person-role{font-family:'VT323',monospace;font-size:22px;line-height:1;color:#6b5f56}
.map-col{display:flex;flex-direction:column;gap:12px}
.map-box{background:#f4efe6;border:4px solid #2a2320;padding:16px;aspect-ratio:2/1;display:flex;align-items:center;justify-content:center}
.map-box svg{width:100%;height:100%;display:block}
.where{display:flex;align-items:center;gap:10px;font-family:'VT323',monospace;font-size:26px;text-transform:uppercase}
.where-dot{width:14px;height:14px;background:#e88a3c;border:3px solid #2a2320}

/* cats / footer */
.cats{background:#2a2320;color:#f4efe6;padding:72px 24px 40px}
.cats-in{display:flex;flex-direction:column;gap:40px}
.cats-head{display:flex;flex-direction:column;gap:10px}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:24px}
/* when the five don't fit in one row: the founders on top, Leia and the juniors below */
@media (max-width:893px){
  .cat-grid{grid-template-columns:repeat(6,1fr);gap:28px 16px}
  .cat{grid-column:span 2}
  .cat:nth-child(-n+2){grid-column:span 3}
}
.cat{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.cat-pic{position:relative;display:block;width:100%;max-width:170px;aspect-ratio:1;padding:0;border:0;background:none;cursor:pointer;border-radius:50%;perspective:600px}
.cat-pic:focus-visible{outline:3px solid #e88a3c;outline-offset:4px}
/* badge on the front, photo on the back: the coin flips around its vertical axis */
.cat-flip{position:absolute;inset:0;display:block;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.4,1.3,.5,1)}
.cat-flip svg{position:absolute;inset:0;display:block;width:100%;height:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.cat-flip .cat-photo{transform:rotateY(180deg)}
.cat-pic[aria-pressed="true"] .cat-flip,.cat-pic.peek .cat-flip{transform:rotateY(180deg)}
@media (hover:hover){.cat-pic:hover .cat-flip{transform:rotateY(180deg)}}
@media (prefers-reduced-motion:reduce){.cat-flip{transition:none}}
.cat-name{font-family:'VT323',monospace;font-size:30px;line-height:1;letter-spacing:.04em}
.cat-desc{font-family:'Lato',sans-serif;font-size:15px;line-height:1.5;color:#bfb3a6;max-width:200px}
.foot{border-top:3px solid #4a3f39;padding-top:20px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-family:'Lato',sans-serif;font-size:15px;color:#bfb3a6}

@media (max-width:520px){
  .h2{font-size:40px}
  .topbar-in{--pad:16px}
  .hero,.games,.about,.cats{padding-left:16px;padding-right:16px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.cta-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.btn-neon{background:#00e5ff;color:#05060f}
.btn-neon:hover{background:#ff2bd6;color:#05060f}