:root{
  color-scheme:dark;
  --bg:#090806;
  --ink:#f0e7d4;
  --muted:#91846d;
  --gold:#d9b467;
  --gold2:#8f6a2d;
  --red:#a63e32;
  --red2:#57201c;
  --acid:#c8d86d;
  --line:rgba(217,180,103,.34);
  --line-soft:rgba(217,180,103,.14);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink)}
body{
  min-height:100dvh;
  overflow-x:hidden;
  font-family:Arial,Helvetica,sans-serif;
  background:
    linear-gradient(115deg,rgba(255,255,255,.012) 0 1px,transparent 1px 13px),
    radial-gradient(circle at 14% 18%,rgba(166,62,50,.12),transparent 28%),
    radial-gradient(circle at 84% 72%,rgba(217,180,103,.09),transparent 30%),
    #090806;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.22;
  background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.012) 3px 4px);
  mix-blend-mode:soft-light;
}
button,input{font:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible,input:focus-visible{outline:1px solid var(--gold);outline-offset:3px}
.ambient{
  position:fixed;
  pointer-events:none;
  z-index:0;
  border:1px solid rgba(217,180,103,.11);
  transform:rotate(-9deg);
}
.ambient-a{width:210px;height:210px;left:-135px;top:17vh;border-radius:50%}
.ambient-b{width:165px;height:300px;right:-115px;bottom:9vh;transform:rotate(17deg)}
.app{
  position:relative;
  z-index:1;
  width:min(100%,540px);
  min-height:100dvh;
  margin:auto;
  padding:calc(env(safe-area-inset-top) + 10px) 14px calc(env(safe-area-inset-bottom) + 14px);
  display:flex;
  flex-direction:column;
}
.brand{
  height:52px;
  display:grid;
  grid-template-columns:42px 1fr 42px;
  align-items:center;
  color:#9e875b;
  font-size:9px;
  letter-spacing:.22em;
}
.brand-mark{
  width:33px;height:33px;
  display:grid;place-items:center;
  border:1px solid rgba(217,180,103,.36);
  border-radius:50%;
  font-weight:800;
  letter-spacing:.06em;
  transform:rotate(-8deg);
}
.brand-name{text-align:left;padding-left:10px}
.brand-index{
  justify-self:end;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  color:#655a48;
}
.hidden{display:none!important}

/* Signal intro */
.signal-view{
  position:fixed;
  inset:0;
  z-index:30;
  display:grid;
  place-items:center;
  padding:24px;
  background:
    radial-gradient(circle at 50% 46%,rgba(166,62,50,.08),transparent 25%),
    linear-gradient(180deg,#080705,#030302);
  overflow:hidden;
}
.signal-view::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.26;
  background:
    repeating-linear-gradient(0deg,transparent 0 4px,rgba(217,180,103,.02) 4px 5px),
    linear-gradient(90deg,transparent 49.8%,rgba(217,180,103,.05) 50%,transparent 50.2%);
}
.signal-frame{
  position:relative;
  width:min(88vw,430px);
  height:min(62vh,470px);
  border:1px solid rgba(217,180,103,.16);
  clip-path:polygon(0 0,94% 0,100% 6%,100% 96%,96% 100%,6% 100%,0 94%);
}
.signal-frame::before,.signal-frame::after{
  content:"";
  position:absolute;
  width:36px;height:36px;
  border-color:rgba(166,62,50,.6);
}
.signal-frame::before{left:12px;top:12px;border-left:2px solid;border-top:2px solid}
.signal-frame::after{right:12px;bottom:12px;border-right:2px solid;border-bottom:2px solid}
.signal-coordinate{
  position:absolute;
  color:#544a3b;
  font:700 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.14em;
}
.signal-coordinate--a{left:18px;bottom:18px}
.signal-coordinate--b{right:18px;top:18px}
.signal-target{
  position:absolute;
  left:50%;top:37%;
  width:112px;height:112px;
  transform:translate(-50%,-50%) rotate(7deg);
  border:1px solid rgba(217,180,103,.16);
  border-radius:50%;
}
.signal-target::before,.signal-target::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  background:rgba(217,180,103,.18);
}
.signal-target::before{width:150%;height:1px;transform:translate(-50%,-50%)}
.signal-target::after{width:1px;height:150%;transform:translate(-50%,-50%)}
.signal-target span{
  position:absolute;
  width:16px;height:16px;
  border-color:rgba(166,62,50,.7);
}
.signal-target span:nth-child(1){left:-5px;top:-5px;border-left:2px solid;border-top:2px solid}
.signal-target span:nth-child(2){right:-5px;top:-5px;border-right:2px solid;border-top:2px solid}
.signal-target span:nth-child(3){left:-5px;bottom:-5px;border-left:2px solid;border-bottom:2px solid}
.signal-target span:nth-child(4){right:-5px;bottom:-5px;border-right:2px solid;border-bottom:2px solid}
.signal-target i{
  position:absolute;
  left:50%;top:50%;
  width:7px;height:7px;
  border-radius:50%;
  background:var(--red);
  transform:translate(-50%,-50%);
  opacity:.35;
  box-shadow:0 0 0 0 rgba(166,62,50,.25);
  animation:signalPulse 1.3s ease-out infinite;
}
.signal-status{
  position:absolute;
  left:28px;right:28px;
  top:55%;
  margin:0;
  color:#d1b170;
  font:900 12px/1 Arial,Helvetica,sans-serif;
  letter-spacing:.2em;
}
.signal-substatus{
  position:absolute;
  left:28px;right:28px;
  top:61%;
  margin:0;
  color:#615748;
  font:10px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
}
.signal-code-shell{
  position:absolute;
  left:28px;right:28px;
  top:70%;
  padding:12px 0;
  border-top:1px solid rgba(217,180,103,.15);
  border-bottom:1px solid rgba(217,180,103,.08);
  opacity:.25;
  transition:opacity .35s ease,transform .35s ease;
  transform:translateY(5px);
}
.signal-code-shell span{
  display:block;
  color:#534a3e;
  font:700 7px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.15em;
}
.signal-code-shell strong{
  display:block;
  margin-top:8px;
  color:#766342;
  font:700 clamp(21px,6vw,30px)/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.12em;
  filter:blur(3px);
  transition:filter .35s ease,color .35s ease,text-shadow .35s ease;
}
.signal-scan{
  position:absolute;
  left:0;right:0;
  top:-8%;
  height:2px;
  opacity:0;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  box-shadow:0 0 18px rgba(217,180,103,.22);
}
.signal-scanning .signal-scan{
  opacity:.8;
  animation:scanDown 1.2s cubic-bezier(.3,.1,.3,1) forwards;
}
.signal-code-visible .signal-code-shell{opacity:1;transform:none}
.signal-code-visible .signal-code-shell strong{
  filter:none;
  color:var(--gold);
  text-shadow:0 0 22px rgba(217,180,103,.18);
}
.signal-confirmed .signal-target{border-color:rgba(200,216,109,.4)}
.signal-confirmed .signal-target i{background:var(--acid)}
.signal-confirmed .signal-status{color:#cfd99a}

/* Panels */
.panel{
  position:relative;
  margin:auto 0;
  padding:30px 23px 24px;
  background:
    linear-gradient(135deg,rgba(35,28,19,.94),rgba(17,13,9,.98) 68%),
    #16110c;
  border:1px solid rgba(217,180,103,.28);
  clip-path:polygon(0 0,93% 0,100% 7%,100% 96%,96% 100%,4% 100%,0 95%);
  box-shadow:0 32px 80px rgba(0,0,0,.48);
}
.panel::before{
  content:"";
  position:absolute;
  left:12px;top:13px;
  width:62px;height:1px;
  background:var(--red);
  box-shadow:74px 0 0 rgba(166,62,50,.35);
}
.panel::after{
  content:"";
  position:absolute;
  right:18px;bottom:16px;
  width:24px;height:24px;
  border-right:1px solid rgba(217,180,103,.35);
  border-bottom:1px solid rgba(217,180,103,.35);
}
.panel--invite{transform:rotate(-.45deg)}
.panel--auth{transform:rotate(.22deg)}
.panel--return{transform:rotate(.4deg)}
.panel--denied{border-color:rgba(166,62,50,.46)}
.panel--profile{
  padding-top:25px;
  clip-path:polygon(0 2%,6% 0,96% 0,100% 5%,100% 100%,0 100%);
}
.panel-mark{
  position:absolute;
  top:13px;right:20px;
  color:#5f5545;
  font:700 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.12em;
  transform:rotate(2deg);
}
.eyebrow{
  margin:8px 0 9px;
  color:#c19c57;
  font:800 9px/1 Arial,Helvetica,sans-serif;
  letter-spacing:.2em;
}
h1,h2{font-family:Georgia,"Times New Roman",serif;font-weight:500}
h1{
  margin:0 0 20px;
  max-width:95%;
  font-size:clamp(37px,10vw,55px);
  line-height:.88;
  letter-spacing:-.035em;
}
h1 em,h2 em{color:var(--gold);font-weight:400}
h1 em{position:relative;font-style:italic}
h1 em::after{
  content:"";
  position:absolute;
  left:-5%;right:-10%;bottom:-6px;
  height:2px;
  background:linear-gradient(90deg,var(--red),transparent);
  transform:rotate(-1deg);
}
h2{
  margin:0 0 14px;
  font-size:26px;
  line-height:.98;
  letter-spacing:-.02em;
}
.copy{
  max-width:92%;
  margin:10px 0;
  color:#a99c86;
  font-size:13px;
  line-height:1.48;
}
.lead-copy{color:#d0c4ae;font-size:15px}
.muted-copy{opacity:.68}
.offset-copy{
  margin-left:9%;
  max-width:80%;
  border-left:1px solid rgba(217,180,103,.22);
  padding-left:11px;
}
.gate-copy{margin-left:6%;max-width:82%;color:#8f8069}

/* Tabs and progressive auth */
.tabs{
  display:flex;
  gap:18px;
  margin:24px 0 14px;
  border-bottom:1px solid rgba(217,180,103,.13);
}
.tab{
  position:relative;
  padding:10px 0 9px;
  color:#6e6250;
  background:none;
  border:0;
  font-size:10px;
  font-weight:800;
  letter-spacing:.14em;
}
.tab.active{color:#e7dbc4}
.tab.active::after{
  content:"";
  position:absolute;
  left:0;bottom:-2px;
  width:115%;height:3px;
  background:var(--red);
  transform:rotate(-1.5deg);
}
.form-stack{position:relative}
.form-stack label:nth-of-type(even){margin-left:5%}
label{display:block;margin:11px 0}
label span{
  display:block;
  margin:0 0 5px 2px;
  color:#8d7c61;
  font-size:8px;
  font-weight:800;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.progressive-form{min-height:130px}
.progress-step{
  max-height:0;
  margin:0!important;
  opacity:0;
  overflow:hidden;
  pointer-events:none;
  transform:translateY(-7px);
  transition:max-height .32s ease,opacity .28s ease,transform .32s ease,margin .32s ease;
}
.progress-step.step-visible{
  max-height:84px;
  margin:11px 0!important;
  opacity:1;
  pointer-events:auto;
  transform:none;
}
.progress-step:nth-of-type(even).step-visible{margin-left:5%!important}
.auth-final{
  max-height:0;
  min-height:0!important;
  margin-top:0!important;
  opacity:0;
  overflow:hidden;
  pointer-events:none;
  transition:max-height .32s ease,opacity .28s ease,min-height .32s ease,margin .32s ease;
}
.auth-final.step-visible{
  max-height:60px;
  min-height:47px!important;
  margin-top:16px!important;
  opacity:1;
  pointer-events:auto;
}
input{
  width:100%;
  padding:12px 13px;
  color:var(--ink);
  border:0;
  border-bottom:1px solid #675032;
  outline:none;
  background:rgba(5,4,3,.62);
  box-shadow:inset 3px 0 0 rgba(217,180,103,.09);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:14px;
}
input:focus{
  border-bottom-color:var(--gold);
  box-shadow:inset 3px 0 0 rgba(166,62,50,.5);
}
input::placeholder{color:#544b3f}

/* Buttons */
.primary,.secondary,.ghost{
  position:relative;
  min-height:47px;
  font-weight:900;
  letter-spacing:.105em;
  text-transform:uppercase;
}
.primary{
  width:88%;
  margin:16px 0 0 3%;
  color:#151007;
  border:0;
  background:linear-gradient(92deg,#e0bc73,#b98539);
  clip-path:polygon(0 8%,96% 0,100% 83%,94% 100%,3% 94%);
  box-shadow:8px 8px 0 rgba(87,32,28,.28);
  transform:rotate(-.55deg);
  transition:filter .12s ease,transform .12s ease,box-shadow .12s ease;
}
.primary::before{
  content:"";
  position:absolute;
  left:10px;top:8px;
  width:28px;height:2px;
  background:rgba(36,25,10,.45);
}
.primary:active{
  transform:rotate(-.55deg) translateY(2px) scale(.988);
  box-shadow:4px 4px 0 rgba(87,32,28,.22);
  filter:brightness(.93);
}
.primary--enter{width:74%;min-height:57px;font-size:15px}
.primary--share{width:82%}
.primary:disabled{opacity:.42;cursor:default}
.secondary{
  width:72%;
  margin:10px 0 0 18%;
  color:#d9ceb9;
  border:1px solid #624927;
  background:rgba(26,19,12,.72);
  clip-path:polygon(3% 0,100% 5%,96% 100%,0 93%);
  transform:rotate(.4deg);
}
.secondary:active{transform:rotate(.4deg) translateY(1px)}
.secondary--offset{margin-left:11%;width:66%}
.secondary--compact{width:auto;min-width:104px;margin-left:0}
.ghost{
  width:auto;
  min-height:38px;
  margin:9px 0 0 7%;
  padding:0;
  color:#746956;
  border:0;
  background:none;
  font-size:9px;
  letter-spacing:.14em;
  text-decoration:underline;
  text-decoration-color:#493d2d;
  text-underline-offset:4px;
}
.ghost--side{transform:rotate(-1deg)}
.action-split{display:flex;align-items:flex-end;gap:8px}
.action-split .primary{flex:1;margin-left:0}

/* Code artifacts */
.code-box{
  position:relative;
  margin:22px 4% 10px 0;
  padding:17px 14px 19px;
  background:
    linear-gradient(90deg,rgba(217,180,103,.04),transparent 40%),
    rgba(5,4,3,.78);
  border-top:1px solid rgba(217,180,103,.35);
  border-bottom:1px solid rgba(217,180,103,.18);
  transform:rotate(.65deg);
  text-align:left;
}
.code-box::before{
  content:"";
  position:absolute;
  left:-6px;top:-7px;
  width:16px;height:16px;
  border-left:2px solid var(--red);
  border-top:2px solid var(--red);
}
.code-box::after{
  content:"TRANSMIT";
  position:absolute;
  right:8px;bottom:6px;
  color:#4f473b;
  font:700 7px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.12em;
}
.code-box span{
  display:block;
  color:#84745c;
  font-size:8px;
  font-weight:800;
  letter-spacing:.15em;
}
.code-box strong{
  display:block;
  margin-top:7px;
  color:var(--gold);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:25px;
  letter-spacing:.13em;
  text-shadow:0 0 18px rgba(217,180,103,.12);
}
.code-box small{
  display:block;
  margin-top:7px;
  color:#544b3e;
  font:7px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.code-box--artifact{
  box-shadow:-7px 7px 0 rgba(87,32,28,.12);
  overflow:hidden;
}
.code-box--artifact::selection{background:var(--red)}
.code-box--artifact strong{opacity:.25;filter:blur(2px);transform:translateX(-5px)}
.code-box--artifact.artifact-active strong{
  animation:artifactReveal .48s cubic-bezier(.2,.8,.2,1) forwards;
}
.code-box.compact strong{font-size:20px}
.return-code{margin-left:7%;margin-right:0;transform:rotate(-.7deg)}
.return-code strong{font-size:31px}

/* Profile and gate */
.message{
  min-height:18px;
  margin:10px 0 0;
  color:#8e816d;
  font-size:11px;
}
.message[data-type="error"]{color:#dc766c}
.profile-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.profile-head h1{margin-bottom:8px}
.profile-sigil{
  position:relative;
  width:42px;height:42px;
  margin-top:9px;
  border:1px solid rgba(217,180,103,.35);
  border-radius:50%;
  transform:rotate(11deg);
}
.profile-sigil::before,.profile-sigil::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  background:rgba(166,62,50,.75);
}
.profile-sigil::before{width:62%;height:1px;transform:translate(-50%,-50%)}
.profile-sigil::after{width:1px;height:62%;transform:translate(-50%,-50%)}
.profile-sigil span{
  position:absolute;
  left:50%;top:50%;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--red);
  transform:translate(-50%,-50%);
}
.stats{display:flex;gap:10px;margin:6px 0 15px}
.stat{
  position:relative;
  min-width:112px;
  padding:9px 13px 10px;
  border-left:2px solid rgba(217,180,103,.34);
  background:rgba(7,5,3,.58);
}
.stat--record{transform:translateY(5px)}
.stats span{
  display:block;
  color:#756752;
  font-size:8px;
  font-weight:800;
  letter-spacing:.14em;
}
.stats strong{
  display:block;
  margin-top:2px;
  color:var(--gold);
  font:700 27px/1 Georgia,"Times New Roman",serif;
}
.gate-card{
  position:relative;
  margin-top:13px;
  padding:19px 15px 17px;
  border:0;
  border-left:1px solid rgba(217,180,103,.28);
  border-top:1px solid rgba(217,180,103,.18);
  background:
    radial-gradient(circle at 90% 10%,rgba(166,62,50,.09),transparent 32%),
    rgba(7,5,3,.48);
  clip-path:polygon(0 0,100% 3%,96% 100%,2% 96%);
}
.gate-card--open{
  background:
    radial-gradient(circle at 88% 14%,rgba(200,216,109,.08),transparent 34%),
    rgba(7,5,3,.48);
}
.gate-notch{
  position:absolute;
  top:9px;right:11px;
  color:#514839;
  font:800 7px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.12em;
}
.status-box{
  position:relative;
  margin:16px 8% 0 3%;
  padding:11px 12px 10px 16px;
  border:0;
  border-left:3px solid var(--red);
  background:rgba(13,10,7,.8);
  transform:rotate(-.45deg);
  transition:border-color .3s ease,background .3s ease,box-shadow .3s ease;
}
.status-box::before{
  content:"";
  position:absolute;
  left:-3px;top:-5px;
  width:32px;height:1px;
  background:currentColor;
}
.status-box span{
  color:#c5a262;
  font-size:9px;
  font-weight:900;
  letter-spacing:.15em;
}
.status-box p{
  margin:5px 0 0;
  color:#8f816b;
  font-size:11px;
}
.status-box[data-state="waiting"]{color:var(--red)}
.status-box[data-state="detected"]{
  color:var(--gold);
  border-left-color:var(--gold);
  background:rgba(35,26,12,.82);
  box-shadow:0 0 24px rgba(217,180,103,.06);
}
.status-box[data-state="detected"] span{
  color:#e0bd75;
  animation:statusBlink 1.5s ease-in-out infinite;
}
.status-box[data-state="complete"]{
  color:var(--acid);
  border-left-color:var(--acid);
}
.status-box[data-state="complete"] span{color:var(--acid)}
.status-box[data-state="error"]{color:#dc766c;border-left-color:#dc766c}
.return-form{margin-top:14px}
.account-email{
  margin:14px 0 0;
  color:#5f5547;
  font:10px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;
  text-align:right;
}
.toast{
  position:fixed;
  left:50%;
  bottom:calc(env(safe-area-inset-bottom) + 22px);
  transform:translateX(-50%) rotate(-1deg);
  padding:9px 15px;
  border:1px solid #735832;
  background:#18110a;
  color:var(--ink);
  font-size:10px;
  font-weight:800;
  letter-spacing:.1em;
  z-index:40;
  clip-path:polygon(4% 0,100% 5%,95% 100%,0 93%);
}

/* Motion */
@keyframes signalPulse{
  0%{box-shadow:0 0 0 0 rgba(166,62,50,.28)}
  100%{box-shadow:0 0 0 20px rgba(166,62,50,0)}
}
@keyframes scanDown{
  0%{top:-5%}
  100%{top:105%}
}
@keyframes artifactReveal{
  0%{opacity:.18;filter:blur(3px);transform:translateX(-7px)}
  55%{opacity:1;filter:blur(0);transform:translateX(2px)}
  100%{opacity:1;filter:blur(0);transform:none}
}
@keyframes statusBlink{
  0%,100%{opacity:1}
  50%{opacity:.55}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
@media (max-width:380px){
  .panel{padding:27px 18px 21px}
  h1{font-size:38px}
  h2{font-size:23px}
  .primary{width:91%}
  .code-box strong{font-size:22px}
  .signal-frame{height:58vh}
}
@media (max-height:710px){
  .brand{height:42px}
  .panel{padding-top:24px;padding-bottom:18px}
  h1{font-size:36px;margin-bottom:14px}
  h2{font-size:22px;margin-bottom:10px}
  .copy{margin:7px 0}
  .tabs{margin:16px 0 10px}
  label{margin:8px 0}
  .progress-step.step-visible{margin:8px 0!important}
  input{padding:10px 12px}
  .primary,.secondary{min-height:42px;margin-top:9px}
  .code-box{margin-top:14px;padding:13px 13px 17px}
  .gate-card{padding:16px 13px 14px}
  .status-box{margin-top:11px}
}


/* Game home */
.home-view{
  position:relative;
  flex:1;
  min-height:0;
  margin:2px -4px 0;
  padding:16px 10px 8px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.home-view::before{
  content:"";
  position:absolute;
  inset:5% 7% 10% 11%;
  pointer-events:none;
  border-left:1px solid rgba(217,180,103,.08);
  border-right:1px solid rgba(217,180,103,.045);
  transform:rotate(.7deg);
}
.home-view::after{
  content:"";
  position:absolute;
  width:260px;
  height:260px;
  left:50%;
  top:53%;
  border:1px solid rgba(217,180,103,.055);
  border-radius:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.home-noise-mark{
  position:absolute;
  right:13px;
  top:9px;
  color:#4f4639;
  font:700 7px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.15em;
  transform:rotate(2deg);
}
.home-top{
  position:relative;
  z-index:2;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  min-height:78px;
}
.home-identity{
  max-width:82%;
  transform:rotate(-.65deg);
}
.home-kicker{
  display:block;
  margin:2px 0 4px 3px;
  color:#7c6c53;
  font:800 8px/1 Arial,Helvetica,sans-serif;
  letter-spacing:.18em;
}
.home-identity h1{
  margin:0;
  max-width:100%;
  color:var(--ink);
  font-size:clamp(38px,11vw,60px);
  line-height:.86;
  overflow-wrap:anywhere;
}
.home-identity h1::first-letter{color:var(--gold)}
.home-exit{
  width:34px;
  height:34px;
  margin-top:8px;
  display:grid;
  place-items:center;
  color:#665b49;
  border:1px solid rgba(217,180,103,.12);
  border-radius:50%;
  background:transparent;
  font:300 21px/1 Arial,Helvetica,sans-serif;
  transform:rotate(5deg);
}
.home-hud{
  position:relative;
  z-index:2;
  min-height:68px;
  margin:0 2px 3px;
  display:grid;
  grid-template-columns:1fr 74px 1fr;
  align-items:center;
}
.hud-piece{
  position:relative;
  min-height:58px;
  padding:5px 8px;
}
.hud-piece--record{
  border-left:2px solid var(--red);
  transform:rotate(-1deg);
}
.hud-piece--coin{
  text-align:right;
  border-right:2px solid var(--gold2);
  transform:translateY(5px) rotate(.8deg);
}
.hud-piece span{
  display:block;
  color:#756753;
  font:800 8px/1 Arial,Helvetica,sans-serif;
  letter-spacing:.16em;
}
.hud-piece strong{
  display:inline-block;
  margin-top:2px;
  color:var(--gold);
  font:500 33px/.95 Georgia,"Times New Roman",serif;
}
.hud-piece small{
  margin-left:5px;
  color:#4d4539;
  font:700 6px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.12em;
}
.hud-axis{
  position:relative;
  height:1px;
  background:rgba(217,180,103,.13);
  transform:rotate(-4deg);
}
.hud-axis::before{
  content:"";
  position:absolute;
  left:50%;
  top:-7px;
  width:1px;
  height:15px;
  background:rgba(166,62,50,.55);
}
.hud-axis i{
  position:absolute;
  top:-2px;
  width:3px;
  height:3px;
  border-radius:50%;
  background:#675b49;
}
.hud-axis i:nth-child(1){left:8%}
.hud-axis i:nth-child(2){left:29%}
.hud-axis i:nth-child(3){left:49%}
.hud-axis i:nth-child(4){left:68%}
.hud-axis i:nth-child(5){left:91%}
.home-core{
  position:relative;
  z-index:2;
  flex:1;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.mission{
  position:relative;
  width:100%;
  max-width:475px;
  padding:20px 19px 18px;
  background:
    radial-gradient(circle at 92% 8%,rgba(166,62,50,.11),transparent 31%),
    rgba(12,9,6,.71);
  border-top:1px solid rgba(217,180,103,.16);
  border-left:1px solid rgba(217,180,103,.13);
  clip-path:polygon(0 0,96% 2%,100% 11%,98% 100%,4% 97%,0 89%);
}
.mission--locked{transform:rotate(-.28deg)}
.mission--open{
  background:
    radial-gradient(circle at 84% 12%,rgba(200,216,109,.08),transparent 33%),
    rgba(12,9,6,.62);
  transform:rotate(.3deg);
}
.mission-index{
  position:absolute;
  right:16px;
  top:10px;
  color:#554a3b;
  font:500 32px/1 Georgia,"Times New Roman",serif;
}
.mission-cross{
  position:absolute;
  right:17px;
  top:49px;
  width:23px;
  height:23px;
  border:1px solid rgba(166,62,50,.28);
  border-radius:50%;
}
.mission-cross::before,
.mission-cross::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  background:rgba(166,62,50,.6);
}
.mission-cross::before{width:15px;height:1px;transform:translate(-50%,-50%)}
.mission-cross::after{width:1px;height:15px;transform:translate(-50%,-50%)}
.mission-cross i{
  position:absolute;
  left:50%;top:50%;
  width:4px;height:4px;
  border-radius:50%;
  background:var(--red);
  transform:translate(-50%,-50%);
}
.mission-cross--open{
  border-color:rgba(200,216,109,.25);
}
.mission-cross--open::before,
.mission-cross--open::after{background:rgba(200,216,109,.5)}
.mission-cross--open i{background:var(--acid)}
.mission-kicker{
  margin:0 0 6px;
  color:#a48958;
  font:900 8px/1 Arial,Helvetica,sans-serif;
  letter-spacing:.19em;
}
.mission h2{
  margin:0 0 11px;
  max-width:80%;
  font-size:clamp(31px,8.5vw,44px);
  line-height:.9;
}
.mission-copy{
  width:78%;
  margin:0 0 13px 7%;
  color:#8f816d;
  font-size:12px;
  line-height:1.45;
  border-left:1px solid rgba(217,180,103,.14);
  padding-left:9px;
}
.home-key{
  position:relative;
  width:91%;
  margin:14px 0 9px 3%;
  padding:12px 14px 15px;
  background:rgba(4,3,2,.75);
  border-top:1px solid rgba(217,180,103,.28);
  border-bottom:1px solid rgba(217,180,103,.12);
  box-shadow:-5px 5px 0 rgba(87,32,28,.1);
  transform:rotate(.55deg);
  overflow:hidden;
}
.home-key::before{
  content:"";
  position:absolute;
  left:-1px;
  top:0;
  width:3px;
  height:38%;
  background:var(--red);
}
.home-key span{
  color:#786a55;
  font:800 7px/1 Arial,Helvetica,sans-serif;
  letter-spacing:.16em;
}
.home-key strong{
  display:block;
  margin-top:5px;
  color:var(--gold);
  font:800 clamp(18px,5.5vw,25px)/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.13em;
}
.home-key small{
  display:block;
  margin-top:6px;
  color:#4c4438;
  font:700 6px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.11em;
}
.home-key.code-box--artifact strong{
  opacity:.25;
  filter:blur(2px);
  transform:translateX(-5px);
}
.home-key.code-box--artifact.artifact-active strong{
  animation:artifactReveal .48s cubic-bezier(.2,.8,.2,1) forwards;
}
.home-main-action{
  position:relative;
  width:72%;
  min-height:61px;
  margin:12px 0 0 1%;
  padding:7px 20px 8px;
  color:#171006;
  border:0;
  background:linear-gradient(98deg,#e0bc73,#ac7935);
  clip-path:polygon(0 7%,97% 0,100% 78%,91% 100%,3% 92%);
  text-align:left;
  transform:rotate(-.7deg);
  box-shadow:9px 8px 0 rgba(87,32,28,.24);
}
.home-main-action span{
  display:block;
  font:800 8px/1 Arial,Helvetica,sans-serif;
  letter-spacing:.16em;
}
.home-main-action strong{
  display:block;
  margin-top:3px;
  font:900 19px/1 Arial,Helvetica,sans-serif;
  letter-spacing:.06em;
}
.home-main-action:active{
  transform:rotate(-.7deg) translateY(2px);
  box-shadow:4px 4px 0 rgba(87,32,28,.18);
}
.home-text-action{
  margin:6px 0 0 9%;
  padding:8px 0;
  color:#6f6351;
  border:0;
  background:none;
  font:800 8px/1 Arial,Helvetica,sans-serif;
  letter-spacing:.15em;
  text-decoration:underline;
  text-decoration-color:#443a2d;
  text-underline-offset:4px;
}
.mission-state{
  position:absolute;
  right:12px;
  bottom:15px;
  width:39%;
  min-height:57px;
  padding:9px 8px 8px 13px;
  display:flex;
  gap:8px;
  align-items:flex-start;
  background:rgba(8,6,4,.86);
  border-left:2px solid var(--red);
  transform:rotate(.7deg);
}
.mission-state-dot{
  flex:0 0 auto;
  width:7px;
  height:7px;
  margin-top:1px;
  border-radius:50%;
  background:var(--red);
  box-shadow:0 0 0 0 rgba(166,62,50,.22);
  animation:missionPulse 1.8s ease-out infinite;
}
.mission-state span{
  color:#bc9c62;
  font:900 7px/1.2 Arial,Helvetica,sans-serif;
  letter-spacing:.13em;
}
.mission-state p{
  margin:4px 0 0;
  color:#756a58;
  font-size:9px;
  line-height:1.25;
}
.mission-state[data-state="detected"]{
  border-left-color:var(--gold);
}
.mission-state[data-state="detected"] .mission-state-dot{
  background:var(--gold);
}
.mission-state[data-state="complete"]{
  border-left-color:var(--acid);
}
.mission-state[data-state="complete"] .mission-state-dot{
  background:var(--acid);
}
.home-return-form{
  position:relative;
  margin-top:14px;
  padding-top:8px;
  border-top:1px solid rgba(217,180,103,.1);
}
.home-return-form input{max-width:64%}
.home-unlock-action{
  position:absolute;
  right:0;
  bottom:19px;
  width:31%;
  min-height:41px;
  color:#171006;
  border:0;
  background:var(--gold);
  font:900 9px/1 Arial,Helvetica,sans-serif;
  letter-spacing:.12em;
  clip-path:polygon(3% 0,100% 8%,94% 100%,0 92%);
}
.game-trigger{
  position:relative;
  width:164px;
  height:164px;
  margin:22px auto 4px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  background:transparent;
}
.game-trigger::before{
  content:"";
  position:absolute;
  inset:17px;
  border:1px solid rgba(217,180,103,.32);
  border-radius:50%;
  background:
    radial-gradient(circle,rgba(217,180,103,.14),rgba(13,10,6,.3) 55%,transparent 58%);
}
.game-trigger::after{
  content:"";
  position:absolute;
  inset:2px;
  border:1px dashed rgba(166,62,50,.36);
  border-radius:50%;
  animation:slowSpin 15s linear infinite;
}
.game-trigger-ring{
  position:absolute;
  inset:28px;
  border:3px solid var(--red);
  border-left-color:transparent;
  border-radius:50%;
  transform:rotate(-18deg);
}
.game-trigger-copy{
  position:relative;
  z-index:2;
  text-align:center;
}
.game-trigger-copy small{
  display:block;
  color:#8c7d65;
  font:800 7px/1 Arial,Helvetica,sans-serif;
  letter-spacing:.14em;
}
.game-trigger-copy strong{
  display:block;
  margin-top:5px;
  color:var(--gold);
  font:900 18px/1 Arial,Helvetica,sans-serif;
  letter-spacing:.08em;
}
.game-trigger:active{transform:scale(.97)}
.game-trigger:active::before{background:radial-gradient(circle,rgba(217,180,103,.22),rgba(13,10,6,.4) 55%,transparent 58%)}
.home-open-note{
  margin-top:4px;
  color:#514939;
  font:700 7px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  text-align:center;
  letter-spacing:.16em;
}
.home-footer{
  position:relative;
  z-index:2;
  min-height:24px;
  margin-top:6px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
}
.home-account,
.home-version{
  color:#4d463b;
  font:700 7px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.09em;
}
.home-account{
  max-width:70%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
@keyframes missionPulse{
  0%{box-shadow:0 0 0 0 rgba(166,62,50,.26)}
  100%{box-shadow:0 0 0 10px rgba(166,62,50,0)}
}
@keyframes slowSpin{
  to{transform:rotate(360deg)}
}
@media (max-width:380px){
  .home-view{padding-left:5px;padding-right:5px}
  .home-hud{grid-template-columns:1fr 55px 1fr}
  .mission{padding:17px 14px 15px}
  .mission-state{width:42%;right:8px;bottom:12px}
  .home-main-action{width:67%}
  .home-key{width:94%}
}
@media (max-height:720px){
  .home-top{min-height:63px}
  .home-identity h1{font-size:36px}
  .home-hud{min-height:53px}
  .hud-piece{min-height:48px}
  .hud-piece strong{font-size:27px}
  .mission{padding-top:16px;padding-bottom:14px}
  .mission h2{font-size:29px}
  .mission-copy{margin-bottom:8px}
  .home-key{margin-top:9px;padding-top:10px;padding-bottom:12px}
  .home-main-action{min-height:52px;margin-top:8px}
  .mission-state{min-height:49px}
  .game-trigger{width:135px;height:135px;margin-top:12px}
}


/* Timed run */
body.run-active .brand{visibility:hidden}
body.run-active .ambient{opacity:.2}
.game-view{
  position:fixed;
  inset:0;
  z-index:20;
  display:flex;
  flex-direction:column;
  width:min(100%,560px);
  margin:auto;
  padding:calc(env(safe-area-inset-top) + 12px) 14px calc(env(safe-area-inset-bottom) + 14px);
  background:
    radial-gradient(circle at 50% 32%,rgba(217,180,103,.055),transparent 30%),
    linear-gradient(180deg,#080705,#040302);
  overflow:hidden;
}
.game-view::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,transparent 49.8%,rgba(217,180,103,.025) 50%,transparent 50.2%),
    repeating-linear-gradient(0deg,transparent 0 5px,rgba(255,255,255,.01) 5px 6px);
}
.run-hud{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:72px 1fr 72px;
  align-items:start;
  gap:8px;
  min-height:82px;
}
.run-level-block,
.run-best-block{
  padding-top:8px;
}
.run-best-block{text-align:right}
.run-level-block span,
.run-best-block span,
.run-timer-shell>span{
  display:block;
  color:#625746;
  font:800 7px/1 Arial,Helvetica,sans-serif;
  letter-spacing:.16em;
}
.run-level-block strong,
.run-best-block strong{
  display:block;
  margin-top:3px;
  color:var(--gold);
  font:500 29px/1 Georgia,"Times New Roman",serif;
}
.run-timer-shell{
  position:relative;
  padding:7px 10px 9px;
  text-align:center;
  border-top:1px solid rgba(217,180,103,.12);
}
.run-timer-shell strong{
  display:block;
  margin-top:2px;
  color:#d8c59e;
  font:700 clamp(28px,8vw,39px)/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.04em;
  transition:color .2s ease,text-shadow .2s ease;
}
.run-time-track{
  height:2px;
  margin-top:7px;
  background:#261e14;
  overflow:hidden;
}
.run-time-track i{
  display:block;
  width:80%;
  height:100%;
  background:var(--gold);
  transition:width .2s linear,background .2s ease;
}
.run-timer-shell[data-zone="warning"] strong{color:#d7ad61}
.run-timer-shell[data-zone="warning"] .run-time-track i{background:#b88338}
.run-timer-shell[data-zone="danger"] strong{
  color:#d77667;
  text-shadow:0 0 18px rgba(166,62,50,.18);
}
.run-timer-shell[data-zone="danger"] .run-time-track i{background:var(--red)}
.run-timer-shell[data-zone="critical"]{
  animation:timerCritical .72s ease-in-out infinite;
}
.run-timer-shell[data-zone="critical"] strong{color:#ef7568}
.run-timer-shell[data-zone="critical"] .run-time-track i{background:#d54d40}
.run-bonus{
  position:absolute;
  right:-8px;
  top:4px;
  color:var(--acid);
  font:900 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  opacity:0;
}
.run-bonus.bonus-pop{animation:bonusRise .85s ease-out forwards}
.puzzle-area{
  position:relative;
  z-index:2;
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:center;
  padding:6px 4px 12px;
  transition:opacity .2s ease,transform .2s ease;
}
.puzzle-area.puzzle-success{
  opacity:.18;
  transform:scale(.985);
}
.puzzle-brief{
  width:90%;
  margin:0 0 24px 3%;
  transform:rotate(-.35deg);
}
.puzzle-brief>span{
  color:#6d5f49;
  font:800 8px/1 Arial,Helvetica,sans-serif;
  letter-spacing:.16em;
}
.puzzle-brief h2{
  margin:6px 0 8px;
  max-width:90%;
  color:var(--ink);
  font-size:clamp(31px,9vw,45px);
  line-height:.91;
}
.puzzle-brief p{
  width:82%;
  margin:0 0 0 7%;
  color:#857762;
  font-size:12px;
  line-height:1.45;
}
.word-puzzle{
  margin:6px 7%;
  color:#7e725f;
  font:500 21px/1.45 Georgia,"Times New Roman",serif;
}
.word-puzzle button{
  padding:0 3px;
  color:var(--gold);
  border:0;
  border-bottom:1px solid var(--red);
  background:none;
  font:inherit;
  font-style:italic;
}
.drag-reveal-stage{
  position:relative;
  height:150px;
  margin:8px 9%;
  display:grid;
  place-items:center;
}
.hidden-real{
  position:absolute;
  width:110px;
  height:48px;
  color:#bfcf76;
  border:1px solid rgba(200,216,109,.4);
  background:#101208;
  font:900 11px/1 Arial,Helvetica,sans-serif;
  letter-spacing:.14em;
}
.drag-decoy{
  position:absolute;
  width:190px;
  height:74px;
  display:grid;
  place-items:center;
  touch-action:none;
  user-select:none;
  color:#1a1207;
  background:linear-gradient(90deg,#ddb76c,#a87535);
  clip-path:polygon(0 7%,96% 0,100% 84%,91% 100%,4% 94%);
  font:900 15px/1 Arial,Helvetica,sans-serif;
  letter-spacing:.08em;
  box-shadow:8px 8px 0 rgba(87,32,28,.24);
}
.sequence-row,
.recall-row,
.dual-row{
  display:flex;
  justify-content:center;
  gap:13px;
  margin:18px 4%;
}
.sequence-row button,
.recall-row button{
  width:70px;
  height:70px;
  color:var(--gold);
  border:1px solid rgba(217,180,103,.22);
  background:#0c0906;
  font:600 28px/1 Georgia,"Times New Roman",serif;
  transform:rotate(-1deg);
}
.sequence-row button:nth-child(even),
.recall-row button:nth-child(even){transform:translateY(8px) rotate(1deg)}
.sequence-row button.done{opacity:.22}
.symbol-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin:12px 10%;
}
.symbol-grid button{
  aspect-ratio:1;
  color:#b79a63;
  border:1px solid rgba(217,180,103,.15);
  background:rgba(12,9,6,.72);
  font-size:30px;
}
.symbol-grid button:nth-child(2),
.symbol-grid button:nth-child(6){transform:translateY(7px) rotate(2deg)}
.hold-button{
  --hold:0%;
  position:relative;
  width:170px;
  height:170px;
  margin:18px auto;
  color:var(--gold);
  border:1px solid rgba(217,180,103,.25);
  border-radius:50%;
  background:conic-gradient(var(--red) var(--hold),rgba(22,17,11,.9) 0);
  touch-action:none;
}
.hold-button::before{
  content:"";
  position:absolute;
  inset:12px;
  border-radius:50%;
  background:#090705;
}
.hold-button span{
  position:relative;
  z-index:2;
  font:900 12px/1 Arial,Helvetica,sans-serif;
  letter-spacing:.16em;
}
.double-target{
  width:145px;
  height:145px;
  margin:20px auto;
  color:var(--red);
  border:1px dashed rgba(217,180,103,.28);
  border-radius:50%;
  background:rgba(10,8,5,.7);
  font-size:42px;
}
.slider-puzzle{
  margin:12px 10%;
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  text-align:center;
}
.slider-puzzle strong{
  color:var(--gold);
  font:500 58px/1 Georgia,"Times New Roman",serif;
}
.slider-puzzle input{
  width:100%;
  accent-color:#b78743;
}
.slider-puzzle button,
.prototype-next{
  min-height:48px;
  color:#171006;
  border:0;
  background:var(--gold);
  font:900 10px/1 Arial,Helvetica,sans-serif;
  letter-spacing:.14em;
}
.drop-stage{
  position:relative;
  height:190px;
  margin:8px 5%;
  touch-action:none;
}
.drag-token,
.drop-home{
  position:absolute;
  top:50%;
  width:82px;
  height:82px;
  display:grid;
  place-items:center;
  transform:translateY(-50%);
  font-size:37px;
}
.drag-token{
  left:7%;
  color:var(--gold);
  border:1px solid rgba(217,180,103,.18);
  background:#0b0805;
  touch-action:none;
  z-index:2;
}
.drop-home{
  right:6%;
  color:#685b47;
  border:1px dashed rgba(217,180,103,.22);
  border-radius:50%;
}
.dual-row{gap:18px}
.dual-row button{
  width:45%;
  max-width:150px;
  min-height:82px;
  color:#83745d;
  border:1px solid rgba(217,180,103,.2);
  background:#0b0805;
  font:900 9px/1 Arial,Helvetica,sans-serif;
  letter-spacing:.13em;
  touch-action:none;
}
.dual-row button.held{
  color:var(--gold);
  border-color:var(--red);
  background:#181008;
}
.prototype-next{
  width:70%;
  margin:20px auto;
}
.game-message{
  position:relative;
  z-index:2;
  min-height:18px;
  margin:0;
  color:#9e7468;
  font-size:10px;
  text-align:center;
}

/* Failure */
.fail-view{
  position:fixed;
  inset:0;
  z-index:25;
  width:min(100%,540px);
  margin:auto;
  padding:calc(env(safe-area-inset-top) + 52px) 24px calc(env(safe-area-inset-bottom) + 24px);
  background:
    radial-gradient(circle at 52% 36%,rgba(166,62,50,.13),transparent 27%),
    #060403;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.fail-view::before{
  content:"";
  position:absolute;
  left:10%;right:15%;
  top:29%;
  height:1px;
  background:linear-gradient(90deg,var(--red),transparent);
  transform:rotate(-2deg);
}
.fail-mark{
  position:absolute;
  top:calc(env(safe-area-inset-top) + 18px);
  right:20px;
  color:#5a453b;
  font:800 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.14em;
}
.fail-reason{
  margin:0 0 9px;
  color:#b65a4f;
  font:900 9px/1 Arial,Helvetica,sans-serif;
  letter-spacing:.2em;
}
.fail-view h1{
  margin:0 0 27px;
  font-size:clamp(44px,13vw,68px);
  line-height:.84;
}
.fail-stats{
  display:flex;
  gap:28px;
  margin:0 0 23px 7%;
}
.fail-stats div{border-left:2px solid rgba(166,62,50,.45);padding-left:10px}
.fail-stats span{
  display:block;
  color:#655849;
  font:800 7px/1 Arial,Helvetica,sans-serif;
  letter-spacing:.14em;
}
.fail-stats strong{
  display:block;
  margin-top:4px;
  color:var(--gold);
  font:500 34px/1 Georgia,"Times New Roman",serif;
}
.fail-copy{
  width:74%;
  margin:0 0 16px 12%;
  color:#776a57;
  font-size:12px;
  line-height:1.4;
}
.fail-restart{
  width:76%;
  min-height:58px;
  margin-left:2%;
  color:#160e06;
  border:0;
  background:linear-gradient(92deg,#dcb66c,#a97131);
  clip-path:polygon(0 8%,96% 0,100% 82%,92% 100%,3% 93%);
  font:900 13px/1 Arial,Helvetica,sans-serif;
  letter-spacing:.11em;
  box-shadow:8px 8px 0 rgba(87,32,28,.3);
  transform:rotate(-.65deg);
}
.fail-home{margin-left:10%}

@keyframes bonusRise{
  0%{opacity:0;transform:translateY(7px)}
  20%{opacity:1}
  100%{opacity:0;transform:translateY(-15px)}
}
@keyframes timerCritical{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.025)}
}