:root{
  --bg:#0b0e12;
  --fg:#e8edf2;
  --muted:#8a93a0;
  --accent:#6f8cff;
  --card:#13181f;
  --line:#232b36;
  --soft:#0f141a;
}

*{box-sizing:border-box;margin:0;padding:0}

html,body{
  width:100%;
  overflow-x:hidden;
}

body{
  font:15px/1.45 system-ui,sans-serif;
  background:var(--bg);
  color:var(--fg);
}

/* HUD */
.hud{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:8px;
  padding:12px 14px 10px;
  border-bottom:1px solid var(--line);
  background:#0c1015;
}

.hud .left,
.hud .right{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 10px;
  min-width:0;
}

.hud .right{
  opacity:.94;
}

/* status row lives outside .hud in html */
.statusBar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 14px 12px;
  border-bottom:1px solid var(--line);
  background:#0c1015;
}

#hudStatus{
  min-width:0;
  font-size:14px;
  line-height:1.3;
  opacity:.96;
  transform-origin:left center;
}

/* text */
.label{
  color:var(--muted);
  margin-right:4px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.04em;
  flex:0 0 auto;
}

.hudpick{
  display:inline-flex;
  align-items:center;
  gap:2px;
  min-height:38px;
  padding:6px 8px;
  border:1px solid transparent;
  border-radius:10px;
  cursor:pointer;
  min-width:0;
  transition:border-color .18s ease, background .18s ease, opacity .18s ease;
}

.hudpick:hover{
  border-color:var(--line);
  background:rgba(255,255,255,.02);
}

.hudpick span:last-child{
  min-width:0;
}

/* make p1/p2 readable without breaking symmetry too hard */
#pickP1,
#pickP2,
#pickPin{
  max-width:100%;
}

#pickP1 span:last-child,
#pickP2 span:last-child{
  display:inline-block;
  max-width:22ch;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  vertical-align:bottom;
}

/* keep repo visibly important */
#pickP2{
  background:rgba(255,255,255,.02);
  border-color:rgba(255,255,255,.04);
}

/* copyable */
.copyable{
  cursor:copy;
}

#hudP1.copyable,
#hudP2.copyable,
#hudPin.copyable{
  cursor:copy;
}

/* menu buttons */
.menuBtn{
  appearance:none;
  background:none;
  border:1px solid transparent;
  color:var(--fg);
  font-size:22px;
  line-height:1;
  padding:7px 9px;
  min-height:38px;
  min-width:38px;
  border-radius:10px;
  cursor:pointer;
  flex:0 0 auto;
}

.menuBtn:hover{
  border-color:var(--line);
  background:rgba(255,255,255,.03);
}

/* MAIN */
.main{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:12px;
  max-width:1080px;
  margin:0 auto;
}

.surface,
.action{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px;
}

.surface{min-height:240px}

/* rows */
.row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid var(--line);
}

.row > div:first-child{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* buttons */
.btns{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

button{
  appearance:none;
  background:var(--soft);
  border:1px solid #2d3744;
  color:var(--fg);
  padding:12px;
  border-radius:10px;
  min-height:44px;
  flex:1;
  cursor:pointer;
  transition:border-color .18s ease, transform .12s ease, background .18s ease;
}

button:hover{
  border-color:var(--accent);
}

button:active{
  transform:translateY(1px);
}

/* ACTION */
.action{
  display:none;
  flex-direction:column;
  gap:10px;
}

.action.active{display:flex}

/* inputs */
input{
  width:100%;
  background:var(--soft);
  border:1px solid #2d3744;
  color:var(--fg);
  padding:12px;
  border-radius:10px;
  font-size:16px;
  min-height:44px;
}

input:focus{
  border-color:var(--accent);
  outline:none;
}

input.hidden{display:none}

/* proof */
.proof{
  margin-top:10px;
  font-size:12px;
  color:var(--muted);
  line-height:1.5;
}

/* helper */
.actionSub{
  margin-top:10px;
  text-align:center;
  font-size:11px;
  opacity:.6;
}

/* old pulse feel */
@keyframes pulseInOut{
  0%{opacity:.16;transform:translateY(2px) scale(.985)}
  18%{opacity:1;transform:translateY(0) scale(1)}
  82%{opacity:1;transform:translateY(0) scale(1)}
  100%{opacity:.16;transform:translateY(-1px) scale(.992)}
}

@keyframes pulseIn{
  0%{opacity:.08;transform:translateY(3px) scale(.985)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}

@keyframes pulseOut{
  0%{opacity:1;transform:translateY(0) scale(1)}
  100%{opacity:.08;transform:translateY(-2px) scale(.99)}
}

#hudStatus.pulse{
  animation:pulseInOut .9s ease;
}

#hudStatus.pulseIn{
  animation:pulseIn .28s ease;
}

#hudStatus.pulseOut{
  animation:pulseOut .24s ease forwards;
}

/* desktop */
@media (min-width:768px){
  body{
    font-size:13px;
  }

  .hud{
    grid-template-columns:minmax(0,1fr) auto;
    align-items:start;
    gap:8px 18px;
    padding:12px 16px 8px;
  }

  .hud .left{
    flex-wrap:nowrap;
    min-width:0;
    overflow:hidden;
  }

  .hud .right{
    justify-content:flex-end;
    flex-wrap:nowrap;
    min-width:0;
  }

  .statusBar{
    padding:6px 16px 12px;
    align-items:center;
  }

  #hudStatus{
    font-size:12px;
  }

  .main{
    flex-direction:row;
  }

  .surface{flex:2}
  .action{flex:1;display:flex}

  button{
    flex:unset;
    padding:8px 10px;
    min-height:auto;
  }

  input{
    font-size:13px;
    min-height:auto;
    padding:8px 10px;
  }

  .hudpick{
    min-height:32px;
    padding:4px 8px;
  }

  .menuBtn{
    min-height:32px;
    min-width:32px;
    padding:4px 7px;
    font-size:20px;
  }

  #pickP1 span:last-child,
  #pickP2 span:last-child{
    max-width:16ch;
  }
}