/* Shared by the holding page and the legal / support pages.
   The game itself (index.html) carries its own styles so it stays a single
   self-contained file. */
:root{
  --cream:#FDFAF4; --panel:#fff; --butter:#F4EDDF; --pepper:#1B1815;
  --soft:#6A5F52; --faint:#A2988A; --rule:#E7DECB;
  --yolk:#E09A1F; --chive:#4E8B3C;
}
@media (prefers-color-scheme:dark){:root{
  --cream:#17150F; --panel:#221E16; --butter:#1C1913; --pepper:#F5EFE2;
  --soft:#A99C88; --faint:#6F6555; --rule:#332C21;
  --yolk:#F0B03A; --chive:#7FBF63;
}}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--cream);color:var(--pepper);
  font:400 16px/1.62 Archivo,"Helvetica Neue",Arial,sans-serif;
  -webkit-text-size-adjust:100%}
.wrap{max-width:680px;margin:0 auto;padding:0 22px}

/* the five-bar mark: a chain growing and shrinking by a letter */
.mark{display:flex;flex-direction:column;gap:5px}
.mark i{display:block;height:11px;border-radius:6px;background:var(--pepper);
  transform-origin:left;animation:grow .7s cubic-bezier(.2,.9,.3,1.2) both}
.mark i:nth-child(1){width:34px;animation-delay:.02s}
.mark i:nth-child(2){width:58px;animation-delay:.09s}
.mark i:nth-child(3){width:82px;background:var(--chive);animation-delay:.16s}
.mark i:nth-child(4){width:58px;animation-delay:.23s}
.mark i:nth-child(5){width:34px;animation-delay:.3s}
@keyframes grow{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
@media (prefers-reduced-motion:reduce){
  .mark i{animation:none}
}

/* page header used by privacy / terms / support */
.top{border-bottom:1px solid var(--rule);padding:26px 0}
.top .wrap{display:flex;align-items:center;gap:16px}
.top .mark{gap:3px}
.top .mark i{height:6px}
.top .mark i:nth-child(1),.top .mark i:nth-child(5){width:18px}
.top .mark i:nth-child(2),.top .mark i:nth-child(4){width:31px}
.top .mark i:nth-child(3){width:44px}
.top a.home{font:800 22px/1 Archivo;font-stretch:112%;
  letter-spacing:-.01em;text-decoration:none;color:var(--pepper)}

main{padding:38px 0 10px}
h1{font:800 clamp(30px,6vw,42px)/1.08 Archivo;font-stretch:112%;
  letter-spacing:-.02em;margin:0 0 6px;text-wrap:balance}
.stamp{color:var(--faint);font-size:13.5px;margin:0 0 30px}
h2{font:700 20px/1.3 Archivo;margin:34px 0 8px;text-wrap:balance}
h3{font:700 16px/1.4 Archivo;margin:22px 0 4px}
p,li{color:var(--soft)}
p{margin:0 0 14px}
ul{margin:0 0 14px;padding-left:20px}
li{margin-bottom:7px}
strong{color:var(--pepper);font-weight:600}
a{color:var(--pepper);text-decoration-color:var(--yolk);
  text-underline-offset:3px;text-decoration-thickness:2px}
a:hover{color:var(--yolk)}

.callout{background:var(--panel);border:1px solid var(--rule);
  border-left:4px solid var(--chive);border-radius:10px;
  padding:16px 18px;margin:0 0 22px}
.callout p:last-child{margin:0}

dl.faq{margin:0}
dl.faq dt{font-weight:600;color:var(--pepper);margin:20px 0 4px}
dl.faq dd{margin:0;color:var(--soft)}

footer{border-top:1px solid var(--rule);margin-top:46px;padding:24px 0 46px;
  color:var(--faint);font-size:13px}
footer .wrap{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
footer a{color:var(--soft);text-decoration-color:var(--rule)}
footer .rights{margin-left:auto}
@media(max-width:560px){footer .rights{margin-left:0;flex:1 0 100%}}