:root{
  --bg:#0A0B10;
  --bg-2:#101219;
  --ink:#F4F1EA;
  --muted:#8A8798;
  --line:rgba(244,241,234,.10);
  --you:#E0563F;
  --them:#4B7FE0;
  --trust:#3FBF7F;
  --panel:rgba(255,255,255,.035);
  --r:18px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  background:
    radial-gradient(120% 80% at 50% -10%, #17141d 0%, transparent 60%),
    radial-gradient(90% 60% at 50% 110%, #101a26 0%, transparent 55%),
    var(--bg);
  color:var(--ink);
  font-family:"Fraunces",Georgia,serif;
  display:flex;align-items:center;justify-content:center;
  padding:24px 16px;
}
.frame{width:100%;max-width:420px}
.phone{
  position:relative;
  background:linear-gradient(180deg,#0C0D13 0%,#090A0E 100%);
  border:1px solid var(--line);
  border-radius:38px;
  min-height:760px;
  max-height:88vh;
  display:flex;flex-direction:column;
  overflow:hidden;
  box-shadow:0 40px 120px -40px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06);
}
@media (max-width:520px){
  body{padding:0;align-items:stretch}
  .frame{max-width:none;height:100%}
  .phone{border:0;border-radius:0;min-height:100dvh;max-height:none}
}
.hud{
  padding:18px 22px 14px;
  border-bottom:1px solid var(--line);
  font-family:"JetBrains Mono",monospace;
  font-size:10px;letter-spacing:.14em;
  color:var(--muted);
  background:linear-gradient(180deg,rgba(255,255,255,.03),transparent);
  backdrop-filter:blur(8px);
}
.hud-row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.hud-row+.hud-row{margin-top:8px}
.brand{color:var(--ink);letter-spacing:.28em;font-weight:700;font-size:9px}
.hud-stat{white-space:nowrap}
.hud-stat b{color:var(--ink);font-weight:500}
#hudTrust{color:var(--trust)}

#stage{position:relative;flex:1;overflow:hidden}
.screen{
  position:absolute;inset:0;
  padding:30px 24px 26px;
  display:none;flex-direction:column;
  overflow-y:auto;
  animation:fadeUp .5s cubic-bezier(.2,.7,.2,1) both;
}
.screen.active{display:flex}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.kicker{
  font-family:"JetBrains Mono",monospace;
  font-size:9.5px;letter-spacing:.24em;color:var(--muted);
  margin:0 0 22px;
}
h1{
  font-size:clamp(30px,8.4vw,40px);
  line-height:1.08;font-weight:300;letter-spacing:-.02em;
  margin:0 0 18px;
}
h1 em{font-style:italic;color:var(--you)}
.lede{font-size:14.5px;line-height:1.62;color:#C9C5BC;margin:0 0 26px;max-width:34ch}
.rules{
  border-top:1px solid var(--line);
  margin-bottom:auto;padding-top:4px;
}
.rules div{
  font-family:"JetBrains Mono",monospace;font-size:11px;
  padding:11px 0;border-bottom:1px solid var(--line);
  color:var(--muted);display:flex;gap:12px;align-items:baseline;
}
.rules b{color:var(--ink);font-weight:500;min-width:66px;letter-spacing:.08em;font-size:10px}
.cta{
  margin-top:26px;
  font-family:"JetBrains Mono",monospace;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  padding:17px 20px;border-radius:100px;border:0;cursor:pointer;
  background:var(--ink);color:#0A0B10;
  transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s,opacity .22s;
}
.cta:hover{transform:translateY(-2px);box-shadow:0 14px 34px -14px rgba(244,241,234,.5)}
.cta:active{transform:translateY(0)}
.cta.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.planks{display:flex;gap:7px;margin-bottom:22px}
.plank{
  flex:1;height:44px;border-radius:6px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--line);
  transition:background .4s,border-color .4s,transform .4s;
}
.plank.done{background:rgba(63,191,127,.16);border-color:rgba(63,191,127,.4)}
.plank.now{border-color:rgba(224,86,63,.7);background:rgba(224,86,63,.12);animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}

.cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
.card{
  background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:13px 14px;
  transition:border-color .3s,background .3s;
}
.card.you{border-color:rgba(224,86,63,.28)}
.card.them{border-color:rgba(75,127,224,.28)}
.card-label{
  font-family:"JetBrains Mono",monospace;font-size:8.5px;
  letter-spacing:.2em;color:var(--muted);display:block;margin-bottom:8px;
}
.card strong{font-size:15px;font-weight:500;letter-spacing:-.01em}
.card.you strong{color:var(--you)}
.card.them strong{color:var(--them)}
.feed{
  flex:1;min-height:96px;max-height:200px;overflow-y:auto;
  font-family:"JetBrains Mono",monospace;font-size:11px;line-height:1.75;
  color:var(--muted);margin-bottom:16px;
  border-left:1px solid var(--line);padding-left:14px;
  scrollbar-width:none;
}
.feed::-webkit-scrollbar{display:none}
.feed .line{animation:fadeUp .35s ease both}
.feed .line b{color:var(--ink);font-weight:500}
.feed .line.bad b{color:var(--you)}
.feed .line.good b{color:var(--trust)}
.feed .line.dim{opacity:.55}

.moves{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.move{
  text-align:left;cursor:pointer;
  background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:14px 13px;
  color:var(--ink);
  transition:transform .2s cubic-bezier(.2,.7,.2,1),border-color .2s,background .2s;
}
.move:hover{transform:translateY(-2px);border-color:rgba(244,241,234,.28);background:rgba(255,255,255,.06)}
.move:active{transform:translateY(0) scale(.99)}
.move b{display:block;font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.14em;font-weight:700}
.move span{display:block;font-size:11.5px;color:var(--muted);margin-top:5px;line-height:1.35}
.move:disabled{opacity:.35;cursor:default;transform:none}
#screenEnd h2{
  font-size:clamp(24px,6.6vw,31px);font-weight:300;line-height:1.16;
  letter-spacing:-.02em;margin:0 0 24px;
}
.read{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:20px;margin-bottom:18px;
}
.read h3{
  font-size:21px;font-weight:400;margin:0 0 10px;letter-spacing:-.01em;color:var(--you);
}
.read p{margin:0;font-size:13.5px;line-height:1.65;color:#C1BDB4}

.ladder{display:flex;flex-direction:column;gap:1px;margin-bottom:20px}
.rung{
  display:flex;align-items:center;gap:12px;
  padding:13px 0;border-bottom:1px solid var(--line);
  font-family:"JetBrains Mono",monospace;font-size:10.5px;
  color:var(--muted);letter-spacing:.04em;
  transition:color .3s;
}
.rung .dot{
  width:7px;height:7px;border-radius:50%;
  background:rgba(255,255,255,.14);flex:none;
  transition:background .3s,box-shadow .3s;
}
.rung.on{color:var(--ink)}
.rung.on .dot{background:var(--trust);box-shadow:0 0 12px rgba(63,191,127,.7)}
.rung .need{margin-left:auto;opacity:.6;font-size:9.5px;letter-spacing:.1em}
.endline{
  font-family:"JetBrains Mono",monospace;font-size:10px;
  letter-spacing:.12em;color:var(--muted);line-height:1.9;
  margin-bottom:auto;text-transform:uppercase;
}