/* Thumb Wars site. The app's Glass look (theme.css): the hub's soft colour behind
   frosted panels, iOS system blue and red, the heavy italic wordmark with its blue and
   red edges. System fonts only, so the site makes no request to anyone but its host. */
:root{
  --bg:#0d1016;
  --bg-top:#121722;
  --glow1:rgba(94,92,230,.34);
  --glow2:rgba(10,132,255,.26);
  --glow3:rgba(48,209,88,.14);
  --ink:#fff;
  --dim:rgba(235,235,245,.66);
  --faint:rgba(235,235,245,.42);
  --glass:rgba(20,22,30,.46);
  --glass-line:rgba(255,255,255,.14);
  --glass-hi:rgba(255,255,255,.12);
  --shadow:0 6px 20px -6px rgba(0,0,0,.35);
  --blue:#0a84ff;
  --red:#ff453a;
  --link:#64a8ff;
  --word:#fff;
  --sf:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --sfd:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color-scheme:dark;
}
@media (prefers-color-scheme:light){
  :root{
    --bg:#e6e9f5;
    --bg-top:#eceffa;
    --glow1:rgba(112,134,255,.50);
    --glow2:rgba(255,132,186,.36);
    --glow3:rgba(120,226,190,.42);
    --ink:#15161c;
    --dim:rgba(60,60,67,.78);
    --faint:rgba(60,60,67,.55);
    --glass:rgba(255,255,255,.72);
    --glass-line:rgba(255,255,255,.8);
    --glass-hi:rgba(255,255,255,.7);
    --shadow:0 6px 20px -8px rgba(20,30,60,.28);
    --blue:#007aff;
    --red:#ff3b30;
    --link:#0062cc;
    --word:#15161c;
    color-scheme:light;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;color:var(--ink);font:16px/1.55 var(--sf);
}
/* the hub's soft colour: a layer over the whole page, glows sized in px so a long page does not smear them */
html{background:var(--bg)}
body{position:relative;z-index:0}
body::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(760px 460px at 0% 0%,var(--glow1),transparent 70%),
    radial-gradient(760px 440px at 100% 260px,var(--glow2),transparent 72%),
    radial-gradient(900px 420px at 50% 100%,var(--glow3),transparent 72%),
    linear-gradient(180deg,var(--bg-top) 0,var(--bg) 900px)}
a{color:var(--link);text-underline-offset:2px}
a:hover{text-decoration-thickness:2px}
img{max-width:100%;display:block}

.wrap{max-width:760px;margin:0 auto;padding:0 16px}

/* top bar on the inner pages */
.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:18px 0 6px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand img{width:36px;height:36px;border-radius:9px;box-shadow:var(--shadow)}
.top nav{display:flex;gap:16px;font-size:14px;font-weight:600}
.top nav a{color:var(--dim);text-decoration:none}
.top nav a:hover,.top nav a[aria-current]{color:var(--ink)}

/* the wordmark: heavy italic, player one's blue a step down-left, player two's red up-right */
.tw{display:inline-block;margin:0;padding:0 4px;font:italic 800 32px/1 var(--sfd);letter-spacing:-.02em;
  text-transform:uppercase;color:var(--word);white-space:nowrap;
  text-shadow:-2px 1px 0 var(--blue),2px -1px 0 var(--red)}
.brand .tw{font-size:20px;text-shadow:-1.5px 1px 0 var(--blue),1.5px -1px 0 var(--red)}

/* glass panel */
.glass{background:var(--glass);border:.5px solid var(--glass-line);border-radius:22px;
  box-shadow:var(--shadow),inset 0 1px 0 var(--glass-hi);
  -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%)}

/* ---------- home ---------- */
.hero{text-align:center;padding:44px 0 12px}
.hero .icon{width:112px;height:112px;margin:0 auto 22px;border-radius:26px;box-shadow:0 14px 34px -10px rgba(0,0,0,.55)}
.hero .tw{font-size:clamp(40px,12vw,64px);text-shadow:-3px 2px 0 var(--blue),3px -2px 0 var(--red)}
.hero .lede{max-width:30em;margin:18px auto 0;font-size:18px;line-height:1.5;color:var(--ink)}
.hero .lede span{color:var(--dim)}
.soon{display:inline-flex;align-items:center;gap:9px;margin-top:24px;padding:12px 20px;border-radius:999px;
  font:650 15px/1 var(--sf);color:var(--ink)}
.soon .dot{width:9px;height:9px;border-radius:50%;flex:none;
  background:linear-gradient(90deg,var(--blue) 0 50%,var(--red) 50% 100%)}

.games{margin:40px 0 0}
.games h2,.how h2{font:700 13px/1 var(--sf);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);text-align:center;margin:0 0 16px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 12px;margin:0;padding:0;list-style:none}
.grid li{text-align:center;font:600 12.5px/1.25 var(--sf);color:var(--dim)}
.grid img{width:100%;height:auto;aspect-ratio:1;border-radius:18%;margin-bottom:6px;box-shadow:0 6px 16px -6px rgba(0,0,0,.5)}
.games .more{text-align:center;color:var(--faint);font-size:14px;margin:16px 0 0}
@media (min-width:640px){.grid{grid-template-columns:repeat(6,1fr)}}

.how{margin:44px 0 0}
.points{display:grid;gap:12px;margin:0;padding:0;list-style:none}
@media (min-width:640px){.points{grid-template-columns:repeat(3,1fr)}}
.points li{padding:18px 18px 16px}
.points b{display:block;font:700 16px/1.3 var(--sfd);margin-bottom:4px}
.points span{color:var(--dim);font-size:15px;line-height:1.45}

/* ---------- inner pages ---------- */
.doc{margin:18px 0 0;padding:26px 22px 28px}
@media (min-width:640px){.doc{padding:36px 40px 40px}}
.doc h1{font:800 30px/1.15 var(--sfd);letter-spacing:-.01em;margin:0 0 6px}
.doc .meta{color:var(--faint);font-size:14px;margin:0 0 22px}
.doc h2{font:700 19px/1.3 var(--sfd);margin:30px 0 8px}
.doc h3{font:650 16px/1.35 var(--sf);margin:20px 0 6px}
.doc p,.doc li{color:var(--ink)}
.doc p{margin:0 0 12px}
.doc ul{margin:0 0 12px;padding-left:20px}
.doc li{margin:0 0 6px}
.doc .short{border-radius:16px;padding:14px 16px 4px;margin:0 0 8px;
  background:rgba(10,132,255,.12);border:.5px solid rgba(10,132,255,.28)}
.doc .short ul{padding-left:18px}
.doc .note{color:var(--dim);font-size:15px}
.doc table{width:100%;border-collapse:collapse;margin:4px 0 14px;font-size:14.5px}
.doc th,.doc td{text-align:left;vertical-align:top;padding:9px 8px;border-bottom:.5px solid var(--glass-line)}
.doc th{font-weight:650;color:var(--dim);font-size:13px}
@media (prefers-color-scheme:light){.doc th,.doc td{border-bottom-color:rgba(60,60,67,.16)}}
.mail{display:inline-flex;align-items:center;gap:10px;margin:6px 0 4px;padding:13px 20px;border-radius:999px;
  background:var(--blue);color:#fff;font:650 16px/1 var(--sf);text-decoration:none;box-shadow:0 8px 20px -8px rgba(10,132,255,.7);
  max-width:100%;overflow-wrap:anywhere}
.mail:hover{filter:brightness(1.08)}
.faq details{border-top:.5px solid var(--glass-line);padding:14px 0}
@media (prefers-color-scheme:light){.faq details{border-top-color:rgba(60,60,67,.16)}}
.faq details:last-child{border-bottom:.5px solid var(--glass-line)}
.faq summary{cursor:pointer;font:650 16px/1.4 var(--sf);list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--faint);font-weight:400;font-size:22px;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details p,.faq details ol,.faq details ul{margin:10px 0 0;color:var(--dim)}
.faq details ol,.faq details ul{padding-left:20px}

/* ---------- footer ---------- */
footer.wrap{margin:56px auto 0;padding:22px 16px calc(36px + env(safe-area-inset-bottom,0px));text-align:center;color:var(--faint);font-size:14px}
footer nav{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 20px;margin-bottom:10px;font-weight:600}
footer nav a{color:var(--dim);text-decoration:none}
footer nav a:hover{color:var(--ink)}
footer p{margin:4px 0}