/* tw.css — extended offline utilities (v3)
   Fixes:
   - Links inherit color and no underline
   - Contact form card is centered
   - Footer: md:flex-row available, plus md:justify-between
   - Square images in #game
*/

:root { --ink:#0E0B12; --accent:#DA8CFF; }

/* Base resets */
*{box-sizing:border-box}
a{color:inherit;text-decoration:none}
img,video{max-width:100%;height:auto;display:block}
button{background:transparent;border:0}

/* Display & layout */
.hidden{display:none}.block{display:block}.inline-flex{display:inline-flex}.flex{display:flex}.grid{display:grid}
.flex-col{flex-direction:column}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.justify-center{justify-content:center}
.place-items-center{place-items:center}
.flex-wrap{flex-wrap:wrap}
.overflow-hidden{overflow:hidden}

/* Grid templates */
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* Gap */
.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}

/* Sizing */
.w-auto{width:auto}.w-full{width:100%}
.h-auto{height:auto}.h-full{height:100%}.h-6{height:1.5rem}.w-6{width:1.5rem}.h-8{height:2rem}.h-10{height:2.5rem}.h-16{height:4rem}

/* Max-widths & centering */
.mx-auto{margin-left:auto;margin-right:auto}
.max-w-2xl{max-width:42rem}
.max-w-3xl{max-width:48rem}

/* Spacing */
.mt-2{margin-top:.5rem}.mt-5{margin-top:1.25rem}.mt-8{margin-top:2rem}
.mb-0{margin-bottom:0}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mb-10{margin-bottom:2.5rem}
.p-0{padding:0}.p-2{padding:.5rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}
.pt-24{padding-top:6rem}
.py-8{padding-top:2rem;padding-bottom:2rem}
.py-20{padding-top:5rem;padding-bottom:5rem}
.py-24{padding-top:6rem;padding-bottom:6rem}

/* Border & radius */
.rounded-md{border-radius:.375rem}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}
.border{border-width:1px}.border-t{border-top-width:1px}
.border-white\/15{border-color:rgba(255,255,255,.15)}.border-white\/10{border-color:rgba(255,255,255,.10)}

/* Typography */
.text-center{text-align:center}
.text-sm{font-size:.875rem;line-height:1.25rem}
.text-base{font-size:1rem;line-height:1.5rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-xl{font-size:1.25rem;line-height:1.75rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}
.text-4xl{font-size:2.25rem;line-height:2.5rem}
.text-6xl{font-size:3.75rem;line-height:1}
.text-white{color:#fff}.text-white\/80{color:rgba(255,255,255,.8)}.text-white\/60{color:rgba(255,255,255,.6)}
.text-accent{color:var(--accent)}
.tracking-wide{letter-spacing:.025em}

/* Colors & bg */
.bg-ink{background-color:var(--ink)}
.bg-\[\#14101C\]{background-color:#14101C}

/* Object fit */
.object-cover{object-fit:cover}.object-center{object-position:center}

/* Shadows */
.drop-shadow-xl{filter:drop-shadow(0 20px 13px rgba(0,0,0,.15)) drop-shadow(0 8px 5px rgba(0,0,0,.08))}
.shadow-lg{box-shadow:0 10px 15px rgba(0,0,0,.25),0 4px 6px rgba(0,0,0,.15)}

/* Opacity & transitions */
.opacity-80{opacity:.8}.hover\:opacity-100:hover{opacity:1}
.transition-opacity{transition:opacity .2s ease}

/* Positioning & z-index */
.fixed{position:fixed}.relative{position:relative}.absolute{position:absolute}
.top-0{top:0}.left-0{left:0}.right-0{right:0}.z-50{z-index:50}

/* Aspect ratio */
.aspect-video{position:relative;width:100%}.aspect-video::before{content:"";display:block;padding-top:56.25%}
.aspect-video>*{position:absolute;inset:0;width:100%;height:100%}
.aspect-square{aspect-ratio:1/1}
.aspect-square.fallback{position:relative;width:100%}
.aspect-square.fallback::before{content:"";display:block;padding-top:100%}
.aspect-square.fallback>*{position:absolute;inset:0;width:100%;height:100%}

/* Hover text color */
.hover\:text-white:hover{color:#fff}

/* Responsive variants */
@media (min-width:640px){ /* sm: */ .sm\:flex-row{flex-direction:row} .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:768px){ /* md: */
  .md\:text-lg{font-size:1.125rem;line-height:1.75rem}
  .md\:text-4xl{font-size:2.25rem;line-height:2.5rem}
  .md\:text-6xl{font-size:3.75rem;line-height:1}
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .md\:flex-row{flex-direction:row}
  .md\:justify-between{justify-content:space-between}
}
@media (min-width:1024px){ /* lg: */ .lg\:flex{display:flex} .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))} .lg\:hidden{display:none} }

/* --- Section-specific fixes --- */
/* #game images should be squares */
#game figure.neon-card{aspect-ratio:1/1}
#game figure.neon-card img{width:100%;height:100%;object-fit:cover;object-position:center}

/* Contact card must be centered even if utilities fail */
#contact .neon-card{margin-left:auto;margin-right:auto;max-width:42rem}

/* Footer nav: wrap & center on small, split on md+ */
footer nav{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
@media(min-width:768px){ footer .container{display:flex;align-items:center;justify-content:space-between;gap:16px} }


/* --- Vertical spacing utilities --- */
.space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: .5rem; }
.space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: .75rem; }
.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }
.space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.5rem; }
.space-y-8 > :not([hidden]) ~ :not([hidden]) { margin-top: 2rem; }