/* hellbright.com (store phase 2): the game's own look. Palette and type come from the game's title screen (--tGold, --tInk,
   Alegreya SC and Alegreya Sans). One loud thing, the title film behind the wordmark; everything else stays quiet. */
:root{
  --soot:#17110d;      /* page */
  --umber:#22180f;     /* the buy band */
  --ember:#e2b246;     /* the game's gold: actions, the wordmark */
  --ember-hi:#f0c866;
  --ash:#efe6cf;       /* text: the game's parchment */
  --smoke:#b3a48e;     /* quieter text */
  --cinder:#c2412b;    /* hellfire, used once or twice */
  --rule:rgba(239,230,207,.16);
  --display:'Alegreya SC',Georgia,'Times New Roman',serif;
  --body:'Alegreya Sans','Gill Sans','Trebuchet MS',sans-serif;
  --step-0:1.125rem; --step-1:1.375rem; --step-2:1.75rem; --step-3:clamp(1.9rem,1.4rem + 2vw,2.75rem);
  --wrap:72rem; --gutter:clamp(1rem,4vw,2.5rem);
}
*{box-sizing:border-box}
html{background:var(--soot);color:var(--ash);font:400 var(--step-0)/1.6 var(--body);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--soot)}
main{flex:1}
img,video{display:block;max-width:100%;height:auto}
a{color:var(--ember)}a:hover{color:var(--ember-hi)}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px;border-radius:2px}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.1;margin:0;letter-spacing:.01em}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-1)}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.lede{color:var(--smoke);max-width:38em;margin-top:.6rem}
.small{font-size:.95rem;color:var(--smoke)}
.skip{position:absolute;left:-999px;top:0;background:var(--ember);color:var(--soot);padding:.5rem 1rem;z-index:10}
.skip:focus{left:1rem;top:1rem}

/* the top bar: the wordmark small, three links */
.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem var(--gutter);position:relative;z-index:3}
.home .bar{position:absolute;inset:0 0 auto 0}
.mark{font-family:var(--display);font-weight:800;font-size:1.4rem;letter-spacing:.06em;color:var(--ash);text-decoration:none}
.bar nav{display:flex;gap:clamp(.9rem,3vw,2rem)}
.bar nav a{color:var(--ash);text-decoration:none;font-weight:500;padding:.25rem 0;border-bottom:2px solid transparent;white-space:nowrap}
.bar nav a:hover{color:var(--ember-hi)}
.bar nav a[aria-current="page"]{border-bottom-color:var(--ember)}

/* buttons */
.actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}
.btn{display:inline-flex;align-items:center;min-height:3rem;padding:.7rem 1.4rem;border-radius:3px;font:700 1.0625rem/1.2 var(--body);text-decoration:none;letter-spacing:.01em}
.btn-gold{background:var(--ember);color:#1b130c;border:1px solid var(--ember)}
.btn-gold:hover{background:var(--ember-hi);color:#1b130c}
.btn-line{color:var(--ash);border:1px solid rgba(239,230,207,.55);background:rgba(23,17,13,.35)}
.btn-line:hover{border-color:var(--ember);color:var(--ember-hi)}
.btn[aria-disabled="true"]{background:transparent;color:var(--smoke);border:1px dashed rgba(239,230,207,.4);cursor:default}
.hint{color:var(--smoke);font-size:.98rem;margin-top:.9rem;min-height:1.2em}

/* the hero: the title film, the wordmark set large and low */
.hero{position:relative;min-height:min(92vh,58rem);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.hero-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero-shade{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(23,17,13,.55) 0%,rgba(23,17,13,0) 22%,rgba(23,17,13,0) 42%,rgba(23,17,13,.82) 72%,var(--soot) 100%)}
.hero-text{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter) clamp(2.5rem,7vh,5rem)}
.wordmark{font-size:clamp(4rem,1rem + 13vw,10.5rem);font-weight:800;line-height:.86;letter-spacing:.035em;color:var(--ember);
  text-shadow:0 2px 0 #5a3a12,0 0 42px rgba(226,178,70,.28),0 8px 30px rgba(0,0,0,.7);margin-left:-.04em}
.pitch{font-size:var(--step-1);line-height:1.45;max-width:30em;margin-top:1.1rem;text-shadow:0 1px 12px rgba(0,0,0,.8)}
.film-toggle{position:absolute;right:var(--gutter);bottom:1rem;background:rgba(23,17,13,.6);color:var(--ash);border:1px solid var(--rule);
  border-radius:3px;padding:.35rem .7rem;font:500 .85rem var(--body);cursor:pointer}
.film-toggle:hover{border-color:var(--ember)}

/* modes: read like the game's own menu, a name and one line, with one large still that follows your choice */
.modes{padding:clamp(4rem,10vh,7rem) 0 clamp(3rem,8vh,5rem)}
.modes-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start;margin-top:2.2rem}
.modes-view{margin:0;position:sticky;top:1.5rem}
.modes-view img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:2px;box-shadow:0 24px 60px rgba(0,0,0,.55)}
.modes-view figcaption{font-family:var(--display);font-size:var(--step-1);color:var(--ember);margin-top:.7rem}
.modes-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.modes-list li{border-bottom:1px solid var(--rule)}
.mode{all:unset;box-sizing:border-box;display:block;width:100%;padding:1rem .2rem 1rem 1.1rem;cursor:pointer;border-left:3px solid transparent}
.mode:focus-visible{outline:2px solid var(--ember);outline-offset:-2px}
.mode-name{display:block;font-family:var(--display);font-weight:700;font-size:var(--step-1);color:var(--ash)}
.mode-line{display:block;color:var(--smoke);margin-top:.15rem}
.mode:hover .mode-name{color:var(--ember-hi)}
.mode[aria-pressed="true"]{border-left-color:var(--ember)}
.mode[aria-pressed="true"] .mode-name{color:var(--ember)}

/* together */
.together{padding:clamp(2.5rem,7vh,4.5rem) 0 clamp(4rem,10vh,6.5rem)}
.ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem 2.5rem;margin:1.8rem 0 0}
.ways dt{font-family:var(--display);font-weight:700;font-size:var(--step-2);color:var(--ember)}
.ways dd{margin:.3rem 0 0;color:var(--ash)}
.together .lede{margin-top:1.8rem}

/* buy: the one warm band */
.buy{background:linear-gradient(180deg,var(--umber),#1c140e);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:clamp(3.5rem,9vh,6rem) 0}
.buy-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:center}
.price{margin-top:1rem;display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap}
.price-amount{font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,2rem + 2.4vw,3.6rem);color:var(--ember);line-height:1}
.price-note{color:var(--smoke)}
.gets{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;gap:.55rem}
.gets li{padding-left:1.4rem;position:relative}
.gets li::before{content:"";position:absolute;left:0;top:.62em;width:.5rem;height:.5rem;background:var(--cinder);transform:rotate(45deg)}
.buy .small{margin-top:1.2rem}
.buy-art{border-radius:2px;box-shadow:0 24px 60px rgba(0,0,0,.5)}

/* buying (store.js): who's signed in, the sandbox notice, the account dialog */
button.btn{cursor:pointer}
.who{margin-top:.5rem;color:var(--smoke);font-size:.98rem}
.who b{color:var(--ash);font-weight:700}
.linkish{all:unset;color:var(--ember);text-decoration:underline;text-underline-offset:.15em;cursor:pointer}
.linkish:hover{color:var(--ember-hi)}
.linkish:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
.testbar{margin:0 0 1.4rem;padding:.7rem .9rem;border:1px dashed var(--ember);border-radius:3px;color:var(--ash);font-size:.95rem;background:rgba(226,178,70,.07)}
dialog.acct{width:min(28rem,calc(100vw - 2rem));max-height:calc(100dvh - 2rem);overflow:auto;padding:0;border:1px solid var(--rule);border-radius:4px;
  background:var(--umber);color:var(--ash);box-shadow:0 30px 80px rgba(0,0,0,.6)}
dialog.acct::backdrop{background:rgba(10,7,5,.75)}
.acct-form{position:relative;padding:1.6rem 1.5rem 1.4rem}
.acct h2{font-size:var(--step-2);color:var(--ember);padding-right:2.2rem}
.acct-lead{color:var(--smoke);margin-top:.6rem;font-size:1rem}
.acct-lead b{color:var(--ash)}
.acct-x{position:absolute;top:.6rem;right:.6rem;width:2.5rem;height:2.5rem;border:0;border-radius:3px;background:none;color:var(--smoke);font:400 1.7rem/1 var(--body);cursor:pointer}
.acct-x:hover{color:var(--ash)}
.acct-tabs{display:flex;margin-top:1.3rem;border:1px solid var(--rule);border-radius:3px;overflow:hidden}
.acct-tabs button{flex:1;min-height:2.75rem;padding:.5rem;border:0;background:none;color:var(--smoke);font:600 1rem var(--body);cursor:pointer}
.acct-tabs button+button{border-left:1px solid var(--rule)}
.acct-tabs button[aria-pressed="true"]{background:rgba(226,178,70,.14);color:var(--ember)}
.acct label{display:block;margin-top:1rem;font-size:.95rem;color:var(--smoke)}
.acct input:not([type=checkbox]){display:block;width:100%;margin-top:.3rem;padding:.65rem .75rem;border:1px solid rgba(239,230,207,.28);border-radius:3px;
  background:#140e0a;color:var(--ash);font:400 1.05rem var(--body)}
.acct input:not([type=checkbox]):focus{border-color:var(--ember);outline:none}
.acct-rules{list-style:none;padding:0;margin:.7rem 0 0;display:grid;gap:.15rem;font-size:.92rem;color:var(--smoke)}
.acct-rules li::before{content:"\2022";display:inline-block;width:1.2rem;text-align:center}
.acct-rules li[data-ok]{color:var(--ash)}
.acct-rules li[data-ok]::before{content:"\2713";color:var(--ember)}
.acct-msg{min-height:1.4em;margin-top:.9rem;font-size:.98rem;color:#f2907a}
.acct-msg[data-k="ok"]{color:var(--smoke)}
.acct-go{width:100%;justify-content:center;margin-top:.3rem}
.acct-go:disabled{opacity:.6;cursor:default}
.acct-foot{margin-top:1rem}
.acct-code{margin-top:1.1rem;padding:.9rem .6rem;border:1px dashed var(--ember);border-radius:3px;text-align:center;color:var(--ember);
  font:700 1.2rem/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.05em;user-select:all;overflow-wrap:anywhere}
.acct [data-view="code"] .btn{width:100%;justify-content:center;margin-top:1rem}
.acct .acct-check{display:flex;gap:.6rem;align-items:center;margin-top:1.1rem;color:var(--ash);cursor:pointer}
.acct-check input{width:1.15rem;height:1.15rem;accent-color:var(--ember)}
.th-more{margin-top:1rem;color:var(--smoke)}
.rd-form label{display:block;color:var(--smoke);font-size:.98rem}
.rd-form input{display:block;width:100%;max-width:24rem;margin-top:.4rem;padding:.7rem .8rem;border:1px solid rgba(239,230,207,.28);border-radius:3px;background:#140e0a;
  color:var(--ash);font:700 1.15rem/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.06em;text-transform:uppercase}
.rd-form input:focus{border-color:var(--ember);outline:none}
.rd-form input::placeholder{color:rgba(179,164,142,.6)}

/* text pages: support, download, terms */
.page{padding:clamp(2rem,6vh,4rem) 0 clamp(4rem,10vh,6rem)}
.page .wrap{max-width:46rem}
.page h1{font-size:clamp(2.4rem,1.6rem + 3vw,3.6rem);color:var(--ember)}
.page h2{font-size:var(--step-2);margin-top:2.6rem}
.page h3{margin-top:1.6rem}
.page p,.page ul,.page ol{margin-top:.9rem}
.page li{margin-top:.35rem}
.page .updated{color:var(--smoke);margin-top:.6rem}
.page dl{margin:1rem 0 0}.page dt{font-weight:700;margin-top:1.4rem}.page dd{margin:.3rem 0 0;color:var(--ash)}
.dl-box{margin-top:2rem;padding:1.6rem;border:1px solid var(--rule);border-radius:3px;background:rgba(34,24,15,.6)}
.dl-box h2{margin-top:0}
.dl-box .btn{margin-top:1rem}
.dl-meta{color:var(--smoke)}

/* the footer */
.foot{border-top:1px solid var(--rule);padding:2.2rem var(--gutter) 2.6rem;display:grid;gap:.9rem;max-width:var(--wrap);width:100%;margin:0 auto}
.foot-mark{font-family:var(--display);font-weight:800;letter-spacing:.06em;font-size:1.2rem}
.foot nav{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem}
.foot nav a{color:var(--ash)}
.foot-small{font-size:.92rem;color:var(--smoke);max-width:46em}

@media (max-width:860px){
  .modes-grid,.buy-grid{grid-template-columns:1fr}
  .modes-view{position:static}
  .buy-art{display:none}
  .ways{grid-template-columns:1fr}
}
/* phones: the film is a band across the top, the wordmark overlaps its lower edge, and the words sit on the dark page */
@media (max-width:640px){
  .hero{display:block;min-height:0}
  .hero-film{position:relative;inset:auto;height:auto;aspect-ratio:4/3;z-index:-2}
  .hero-shade{inset:0 0 auto 0;aspect-ratio:4/3;height:auto;
    background:linear-gradient(180deg,rgba(23,17,13,.6) 0%,rgba(23,17,13,0) 24%,rgba(23,17,13,0) 55%,var(--soot) 100%)}
  .hero-text{margin-top:-2.6rem;padding-bottom:2.2rem}
  .pitch{font-size:var(--step-0);text-shadow:none}
  .film-toggle{top:3.4rem;bottom:auto;font-size:.8rem;padding:.25rem .55rem}
}
@media (max-width:520px){
  .bar{padding-top:.8rem;gap:.6rem}
  .mark{font-size:1.1rem}
  .bar nav{gap:.85rem;font-size:.98rem}
  .btn{width:100%;justify-content:center}
}