/* mAInely Games — studio site.
 *
 * Deliberately standalone: this repo must not depend on any game's stylesheet,
 * or the studio front page breaks whenever a game reskins.
 *
 * Accent is CYAN, sampled from the splash artwork's own glow (#00FDFC at its
 * brightest). It is NOT Card Monarchy's gold -- that gold belongs to the game,
 * and inheriting it made the studio page look like a Card Monarchy page. The
 * raw sample is too hot for UI, so dark mode uses a cooled version and light
 * mode a darkened one that can hold contrast.
 *
 * Three-state theming, same contract the game sites use: an explicit choice
 * stamps data-theme on the root, the default "system" setting stamps nothing,
 * so prefers-color-scheme is the only signal. The HERO ignores all of it and
 * stays dark in both, because it is artwork with its own baked-in background.
 */
:root{
  --ground:#0E1218; --panel:#161C25; --panel-2:#1D242F; --rule:#2A3341;
  --ink:#E8EAF0; --ink-2:#B4BCCB; --ink-3:#798394;
  --accent:#31DFDD; --accent-dim:#1B7E7D;
  --maxw:980px;
  /* Sampled from the splash's own corner, so the letterbox fill and the art
     are the same black and the seam is invisible on any viewport shape. */
  --splash-bg:#0A0E14;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --ground:#E7E8EE; --panel:#FFFFFF; --panel-2:#F2F3F7; --rule:#D3D6E0;
    --ink:#151821; --ink-2:#414757; --ink-3:#6E7587;
    --accent:#0B7C82; --accent-dim:#7FB6BA;
  }
}
:root[data-theme="light"]{
  --ground:#E7E8EE; --panel:#FFFFFF; --panel-2:#F2F3F7; --rule:#D3D6E0;
  --ink:#151821; --ink-2:#414757; --ink-3:#6E7587;
  --accent:#0B7C82; --accent-dim:#7FB6BA;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* ---- hero: the splash is the page ------------------------------------- */
.hero{
  position:relative; width:100%; min-height:100vh; min-height:100svh;
  background:var(--splash-bg); overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
}
/* contain, not cover. The artwork is a composition -- moose left, wordmark
   right -- and cover would crop one of them off on any viewport that is not
   16:9. Letterboxing against the art's own background colour costs nothing
   visually and keeps the whole logo intact at every size. */
.hero-art{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; object-position:center;
}
/* Badges sit low, over the artwork's own empty band. The scrim guarantees
   contrast there regardless of what the art does behind it -- without it the
   badges are legible today and break the moment the splash is re-cut. */
.scrim{
  position:absolute; left:0; right:0; bottom:0; height:46%;
  background:linear-gradient(to bottom, rgba(10,14,20,0) 0%, rgba(10,14,20,.72) 55%, rgba(10,14,20,.94) 100%);
  pointer-events:none;
}

.badges{
  position:relative; display:flex; flex-wrap:wrap; gap:12px;
  justify-content:center; padding:0 20px 6px;
}
.badge{
  display:flex; align-items:center; gap:12px;
  background:rgba(22,28,37,.82); border:1px solid rgba(120,132,150,.34);
  border-radius:8px; padding:11px 16px; min-width:236px;
  text-decoration:none; color:#E8EAF0;
  backdrop-filter:blur(3px);
}
a.badge{transition:border-color .13s, background .13s, transform .13s}
a.badge:hover{border-color:var(--accent); background:rgba(22,28,37,.94); transform:translateY(-2px)}
a.badge:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.badge.soon{opacity:.5}
.badge .suits{
  font-size:17px; letter-spacing:1px; color:var(--accent); line-height:1;
  flex:none;
}
.badge.soon .suits{color:#798394; font-size:20px}
.badge .txt{display:flex; flex-direction:column; line-height:1.25}
.badge .nm{font-family:Georgia,"Times New Roman",serif; font-size:16px}
.badge .sub{font-size:11.5px; color:#B4BCCB; letter-spacing:.02em}

.hero .legal{
  position:relative; text-align:center; margin:14px 0 0; padding:0 20px 18px;
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:#798394;
}

/* ---- everything below the fold ---------------------------------------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:44px 20px 60px}
h2{
  font-family:Georgia,"Times New Roman",serif; font-weight:normal;
  font-size:23px; margin:0 0 6px;
}
.note{color:var(--ink-2); margin:0 0 18px; max-width:70ch}
footer{
  margin-top:40px; padding-top:20px; border-top:1px solid var(--rule);
  color:var(--ink-3); font-size:13px;
}

/* A short landscape phone has no room for a full-height hero plus badges, so
   the hero gives up the 100vh floor and sizes to the artwork instead. */
@media (max-height:520px){
  .hero{min-height:0; padding-top:56vw}
  .hero-art{position:absolute}
}
@media (max-width:520px){
  .badge{min-width:0; width:100%; justify-content:flex-start}
  .scrim{height:58%}
}