/* ==========================================================================
   fungames2play — shared stylesheet
   Every page uses this one file. Colours are the two blocks below.
   ========================================================================== */

:root{
  /* Surfaces */
  --bg:#ffffff;
  --bg-alt:#f7f7f5;
  --surface:#ffffff;
  --line:#e4e4e0;
  --line-soft:#eeeeea;

  /* Text */
  --ink:#1b1b1d;
  --ink-2:#3f3f43;
  --muted:#71716f;

  /* Accent — links and focus rings. Buttons are ink, not accent. */
  --accent:#2b5cd9;
  --accent-soft:#f0f4fd;

  /* App icon tile colours */
  --tile-1:#4a5bd4;
  --tile-2:#1f9c8c;
  --tile-3:#d1603c;

  --r-sm:6px;
  --r:10px;
  --r-lg:14px;
  --maxw:66rem;
  --maxw-prose:42rem;
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:5rem;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important}
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100vh;
}
main{flex:1 0 auto}

img{max-width:100%;height:auto;display:block}

a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}

.skip{
  position:absolute;left:-9999px;top:0;
  background:var(--ink);color:#fff;
  padding:.7rem 1.1rem;border-radius:0 0 var(--r-sm) 0;
  font-weight:600;z-index:200;text-decoration:none;
}
.skip:focus{left:0}

/* ---------- Layout ---------- */

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 1.5rem}
.wrap-prose{max-width:var(--maxw-prose);margin:0 auto;padding:0 1.5rem}

section{padding:4rem 0}
section.tight{padding:3rem 0}

.section-head{margin-bottom:2rem}
.section-head h2{margin:0 0 .5rem}
.section-head p{color:var(--muted);margin:0;max-width:36rem}

/* Small label above a heading — plain, not a neon micro-caption */
.eyebrow{
  display:block;
  font-size:.9rem;font-weight:400;
  letter-spacing:0;text-transform:none;
  color:var(--muted);
  margin:0 0 .35rem;
}

/* ---------- Type ---------- */

h1,h2,h3,h4{line-height:1.25;letter-spacing:-.01em;margin:0 0 .7rem;font-weight:600;color:var(--ink)}
h1{font-size:clamp(1.9rem,4vw,2.5rem)}
h2{font-size:clamp(1.35rem,2.4vw,1.7rem)}
h3{font-size:1.1rem}
h4{font-size:.98rem}
p{margin:0 0 1.1rem}
ul,ol{margin:0 0 1.1rem;padding-left:1.25rem}
li{margin-bottom:.4rem}
strong{font-weight:600}
code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.87em;background:var(--bg-alt);
  border:1px solid var(--line-soft);
  padding:.1em .35em;border-radius:4px;
  word-break:break-word;
}
hr{border:0;border-top:1px solid var(--line);margin:2.25rem 0}

.lead{font-size:1.1rem;color:var(--ink-2)}
.muted{color:var(--muted)}
.grad{color:inherit}          /* was a gradient; now just text */

/* ---------- Header / nav ---------- */

.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;gap:1.5rem;height:4rem}
.brand{
  display:flex;align-items:center;gap:.6rem;
  font-weight:600;font-size:1.02rem;
  color:var(--ink);text-decoration:none;
  margin-right:auto;
}
.brand:hover{text-decoration:none}
.brand-mark{
  width:26px;height:26px;border-radius:6px;
  background:var(--ink);
  display:grid;place-items:center;flex:0 0 auto;
}
.brand-mark svg{width:14px;height:14px;display:block}

.nav-links{display:flex;align-items:center;gap:1.5rem;list-style:none;margin:0;padding:0}
.nav-links li{margin:0}
.nav-links a{
  color:var(--ink-2);font-size:.95rem;
  text-decoration:none;padding:.3rem 0;
  border-bottom:1px solid transparent;
}
.nav-links a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.nav-links a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink)}

@media (max-width:680px){
  .nav{height:auto;flex-wrap:wrap;padding-top:.85rem;padding-bottom:.85rem;gap:.4rem 1.2rem}
  .nav-links{width:100%;gap:1.15rem;font-size:.92rem}
}

/* ---------- Hero ---------- */

.hero{
  padding:4.5rem 0 3.5rem;
  border-bottom:1px solid var(--line);
}
.hero h1{max-width:22ch;margin-bottom:1rem}
.hero .lead{max-width:48ch;margin-bottom:1.75rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}

/* ---------- Buttons ---------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-size:.95rem;font-weight:500;line-height:1;
  padding:.75rem 1.2rem;border-radius:var(--r-sm);
  border:1px solid transparent;
  text-decoration:none;cursor:pointer;font-family:inherit;
  transition:background .12s ease, border-color .12s ease, color .12s ease;
}
.btn:hover{text-decoration:none}
.btn svg{width:1em;height:1em;flex:0 0 auto}

.btn-primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-primary:hover{background:#000;color:#fff}

.btn-ghost{background:var(--bg);border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink);color:var(--ink)}

.btn-block{width:100%}

/* Store badges — Apple's and Google's official artwork, unmodified.
   The image IS the button, so no background or padding of our own.
   Both are set to 40px tall: Apple's minimum is 40, Google's is 28.
   The .75rem gap gives each badge more than the quarter-of-its-height
   clear space both companies ask for. */
.stores{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin:0}
.store-btn{
  display:inline-block;
  line-height:0;
  border-radius:8px;
  text-decoration:none;
  transition:opacity .12s ease;
}
.store-btn:hover{opacity:.82;text-decoration:none}
.store-btn img{height:40px;width:auto;display:block}

/* ---------- Cards / app grid ---------- */

.grid{display:grid;gap:1.25rem}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(19rem,1fr))}

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:1.4rem;
  display:flex;flex-direction:column;
  transition:border-color .12s ease;
}
.card:hover{border-color:#c9c9c4}
.card h3{margin-bottom:.2rem}
.card .card-sub{color:var(--muted);font-size:.9rem;margin:0 0 .9rem}
.card p{color:var(--ink-2);font-size:.95rem}
.card-foot{margin-top:auto;padding-top:1.1rem}
a.card{text-decoration:none}
a.card:hover{text-decoration:none}

/* A real app icon: store icons already carry their own rounded corners and
   transparent surround, so no tile colour behind them. */
img.app-icon{
  display:block;
  background:none;
  object-fit:contain;
  border-radius:13px;
}

/* Placeholder tile, used by templates/new-app-card.html until a real icon exists */
.app-icon{
  width:56px;height:56px;border-radius:13px;
  display:grid;place-items:center;
  margin-bottom:1rem;flex:0 0 auto;
  overflow:hidden;
}
.app-icon svg{width:28px;height:28px;display:block}
.app-icon img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.app-icon.i-1{background:var(--tile-1)}
.app-icon.i-2{background:var(--tile-2)}
.app-icon.i-3{background:var(--tile-3)}
.app-icon.lg{width:72px;height:72px;border-radius:16px}
.app-icon.lg svg{width:36px;height:36px}

/* Tags — plain text chips */
.tags{display:flex;flex-wrap:wrap;gap:.35rem;list-style:none;margin:0 0 .9rem;padding:0}
.tags li{margin:0}
.tag{
  display:inline-block;
  font-size:.78rem;font-weight:400;
  letter-spacing:0;text-transform:none;
  color:var(--muted);
  background:var(--bg-alt);
  border:1px solid var(--line-soft);
  border-radius:999px;
  padding:.15rem .6rem;
}
.tag.accent{color:var(--ink-2)}

/* ---------- Alternating band ---------- */

.values{
  background:var(--bg-alt);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.value h3{display:flex;align-items:center;gap:.5rem;font-size:1rem;margin-bottom:.4rem}
.value h3 svg{width:17px;height:17px;color:var(--muted);flex:0 0 auto}
.value p{color:var(--muted);font-size:.94rem;margin:0}

/* ---------- App page ---------- */

.app-hero{padding:2.75rem 0 2.25rem;border-bottom:1px solid var(--line)}
.app-hero-inner{display:flex;gap:1.5rem;align-items:flex-start;flex-wrap:wrap}
.app-hero h1{font-size:clamp(1.6rem,3.5vw,2.1rem);margin-bottom:.4rem}
.app-hero .lead{margin-bottom:1.25rem;max-width:46ch}

.backlink{
  display:inline-flex;align-items:center;gap:.35rem;
  color:var(--muted);font-size:.9rem;
  margin-bottom:1.25rem;text-decoration:none;
}
.backlink:hover{color:var(--ink);text-decoration:none}
.backlink svg{width:13px;height:13px}

/* Screenshot placeholders */
.shots{
  display:flex;gap:.9rem;overflow-x:auto;
  padding-bottom:.9rem;margin:0;
  -webkit-overflow-scrolling:touch;
}
.shot{
  flex:0 0 auto;
  width:175px;aspect-ratio:9/19.5;
  border-radius:16px;
  background:var(--bg-alt);
  border:1px solid var(--line);
  display:grid;place-items:center;
  color:var(--muted);font-size:.76rem;text-align:center;
  padding:1rem;
}
.shot img{width:100%;height:100%;object-fit:cover;border-radius:inherit}

/* ---------- FAQ ---------- */

.faq{border-top:1px solid var(--line);margin-top:.75rem}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;
  padding:1rem 2.25rem 1rem 0;
  font-weight:500;font-size:1rem;
  position:relative;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:.4rem;top:1.35rem;
  width:8px;height:8px;
  border-right:1.5px solid var(--muted);
  border-bottom:1.5px solid var(--muted);
  transform:rotate(45deg);
  transition:transform .15s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg);top:1.55rem}
.faq summary:hover{color:var(--accent)}
.faq .faq-body{padding:0 0 1.15rem;color:var(--ink-2);font-size:.96rem}
.faq .faq-body p:last-child{margin-bottom:0}

/* ---------- Callout ---------- */

.callout{
  background:var(--bg-alt);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:1.15rem 1.3rem;
  margin:1.5rem 0;
}
.callout h3{margin-bottom:.45rem}
.callout p:last-child{margin-bottom:0}
.callout.soft{background:var(--accent-soft);border-color:#dbe4f7}

/* ---------- Contact form ---------- */

.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:2.75rem;align-items:start}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr;gap:2rem}}

.contact-aside dl{margin:1.25rem 0 0}
.contact-aside dt{
  font-size:.85rem;font-weight:600;color:var(--ink);
  margin-bottom:.2rem;letter-spacing:0;text-transform:none;
}
.contact-aside dd{margin:0 0 1.1rem;font-size:.96rem;color:var(--ink-2)}

form.contact{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:1.5rem;
}
.field{margin-bottom:1rem}
.field label{display:block;font-size:.9rem;font-weight:500;margin-bottom:.35rem;color:var(--ink)}
.field .req{color:var(--muted)}
.field input,.field textarea{
  width:100%;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  color:var(--ink);
  font-family:inherit;font-size:.97rem;line-height:1.5;
  padding:.65rem .8rem;
  transition:border-color .12s ease, box-shadow .12s ease;
}
.field input::placeholder,.field textarea::placeholder{color:#a4a49f}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(43,92,217,.12);
}
.field textarea{resize:vertical;min-height:8rem}
.field.err input,.field.err textarea{border-color:#c0392b}
.field-msg{display:block;font-size:.83rem;color:#c0392b;margin-top:.3rem}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

.form-note{font-size:.83rem;color:var(--muted);margin:.85rem 0 0;line-height:1.5}

.formstatus{border-radius:var(--r-sm);padding:.8rem 1rem;font-size:.93rem;margin-bottom:1.1rem}
.formstatus.ok{background:#eef7f0;border:1px solid #cfe6d6;color:#1e5b33}
.formstatus.bad{background:#fdf0ee;border:1px solid #f2d3cd;color:#94291b}
.formstatus p:last-child{margin-bottom:0}
[hidden]{display:none!important}
.btn[aria-busy="true"]{opacity:.6;pointer-events:none}

/* ---------- Prose (privacy policy) ---------- */

.prose{padding:2.75rem 0 4rem}
.prose h2{font-size:1.2rem;margin:2.5rem 0 .8rem}
.prose h2:first-of-type{margin-top:1.25rem}
.prose h3{font-size:1rem;margin:1.6rem 0 .5rem}
.prose p,.prose li{color:var(--ink-2)}
.prose strong{color:var(--ink)}

.page-head{padding:2.75rem 0 1.75rem;border-bottom:1px solid var(--line)}
.page-head h1{margin-bottom:.4rem}
.page-head .updated{color:var(--muted);font-size:.9rem;margin:0}

.tablewrap{overflow-x:auto;margin:0 0 1.4rem;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:.93rem;min-width:24rem}
th,td{text-align:left;vertical-align:top;padding:.65rem .8rem;border:1px solid var(--line);color:var(--ink-2)}
th{background:var(--bg-alt);font-weight:600;color:var(--ink);width:38%}
thead th{width:auto;white-space:nowrap}

/* The catalogue table breaks out of the narrow prose column */
.prose .tablewrap.wide{
  width:min(66rem, calc(100vw - 3rem));
  margin-left:50%;
  transform:translateX(-50%);
}
.prose .tablewrap.wide table{font-size:.88rem;min-width:46rem}
.prose .tablewrap.wide th,
.prose .tablewrap.wide td{padding:.65rem .75rem}
@media (max-width:900px){
  .prose .tablewrap.wide{width:calc(100vw - 2.3rem)}
}

.applist{list-style:none;padding:0;margin:0 0 1.4rem}
.applist li{padding:.55rem 0;border-bottom:1px solid var(--line-soft);margin:0}
.applist li:last-child{border-bottom:0}
.applist .name{font-weight:600;color:var(--ink)}

/* ---------- Footer ---------- */

.site-footer{
  border-top:1px solid var(--line);
  background:var(--bg-alt);
  padding:2.5rem 0 2rem;
  margin-top:auto;
}
.footer-top{
  display:flex;flex-wrap:wrap;gap:2rem;
  justify-content:space-between;align-items:flex-start;
  margin-bottom:2rem;
}
.footer-brand{max-width:22rem}
.footer-brand .brand{margin-bottom:.6rem}
.footer-brand p{color:var(--muted);font-size:.9rem;margin:0}
.footer-cols{display:flex;gap:3rem;flex-wrap:wrap}
.footer-col h4{font-size:.9rem;color:var(--ink);margin-bottom:.65rem;font-weight:600;letter-spacing:0;text-transform:none}
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col li{margin-bottom:.45rem}
.footer-col a{color:var(--ink-2);font-size:.92rem;text-decoration:none}
.footer-col a:hover{color:var(--ink);text-decoration:underline}
.footer-bottom{
  border-top:1px solid var(--line);
  padding-top:1.25rem;
  display:flex;flex-wrap:wrap;gap:.75rem 2rem;
  justify-content:space-between;
  color:var(--muted);font-size:.83rem;
}
.footer-bottom p{margin:0;max-width:44rem}

@media (max-width:560px){
  body{font-size:16px}
  section{padding:3rem 0}
  .hero{padding:3rem 0 2.5rem}
  .wrap,.wrap-prose{padding:0 1.15rem}
  form.contact{padding:1.2rem}
  th{width:auto}
  .footer-cols{gap:2rem}
}