:root{
  --bg:#0e1014;
  --panel:#151923;
  --panel2:#121520;
  --text:#e6e9f0;
  --muted:#9aa3b5;
  --plus:#69eb78;
  --minus:#eb5a5a;
  --accent:#6bdcff;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background: radial-gradient(1200px 700px at 30% 20%, #1a2232 0%, var(--bg) 55%, #090a0d 100%);
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

#app{min-height:100%; display:flex; flex-direction:column;}

.top{
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:14px 14px 8px;
}
.title{font-size:18px;font-weight:850;letter-spacing:0.4px; cursor:pointer; user-select:none;}
.sub{font-size:12px;color:var(--muted); margin-top:2px;}
.status{font-size:12px;color:var(--muted); padding:6px 10px; border:1px solid rgba(255,255,255,0.08); border-radius:999px; background: rgba(0,0,0,0.18);}

.screen{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding: 16px; gap:14px;}
.hidden{display:none !important;}

/* iOS safe-area */
body{padding-bottom: env(safe-area-inset-bottom);}

.h1{margin:0; font-size: clamp(22px, 4vw, 40px); letter-spacing:0.3px;}

.pm{display:grid; grid-template-columns:1fr 1fr; gap:16px; width:min(720px, 100%);}

.big{
  /* use svh to behave better with mobile browser UI */
  height: min(44svh, 340px);
  min-height: 180px;
  border:0;
  border-radius: 18px;
  font-size: clamp(64px, 12vw, 120px);
  font-weight: 900;
  color:#0b0c10;
  box-shadow: 0 18px 60px rgba(0,0,0,0.55);
}
.big.plus{background: linear-gradient(180deg, rgba(105,235,120,1) 0%, rgba(60,196,92,1) 100%);}
.big.minus{background: linear-gradient(180deg, rgba(235,90,90,1) 0%, rgba(195,52,52,1) 100%);}
.big:active{transform: translateY(1px); filter: brightness(0.98);}

.link{
  border:0;
  background: rgba(0,0,0,0.18);
  color: var(--text);
  border:1px solid rgba(255,255,255,0.12);
  padding: 12px 18px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 750;
  cursor:pointer;
}

.primary{
  width:100%;
  border:0;
  background: #2a3350;
  color: var(--text);
  padding: 14px 14px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 800;
  cursor:pointer;
}

.card{
  width: min(720px, 100%);
  background: rgba(18,21,32,0.85);
  border:1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 16px 60px rgba(0,0,0,0.45);
}
.label{color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; margin-bottom: 8px;}
textarea{
  width:100%;
  background: rgba(0,0,0,0.22);
  border:1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  color: var(--text);
  padding: 12px;
  resize: vertical;
  font-size: 16px; /* avoids iOS zoom-on-focus */
  outline: none;
}

.grid{
  width:min(720px,100%);
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}

.person{
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
  border-radius: 16px;
  padding: 16px 14px;
  font-weight: 850;
  font-size: 16px;
  text-align:center;
  cursor:pointer;
  color: var(--text);
}
.person small{display:block; color: var(--muted); font-weight:700; margin-top: 6px;}

.splash{
  font-size: clamp(64px, 11vw, 120px);
  font-weight: 950;
  letter-spacing: 1px;
}

.userTop{display:flex; align-items:baseline; gap:12px;}
.score{font-size: clamp(22px, 4vw, 36px); color: var(--accent); font-weight: 900;}

.stories{margin: 10px 0 0; padding-left: 18px;}
.stories li{margin: 8px 0; line-height: 1.35;}
.stories .ts{color: var(--muted); font-size: 12px; margin-right: 8px;}
.stories .deltaPlus{color: var(--plus); font-weight: 900;}
.stories .deltaMinus{color: var(--minus); font-weight: 900;}

.home{
  position: fixed;
  bottom: calc(16px + env(safe-area-inset-bottom));
  right: 16px;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.25);
  color: var(--text);
  font-size: 22px;
  font-weight: 900;
  cursor:pointer;
}

.modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
}
.modalCard{
  width: min(520px, 100%);
  background: var(--panel2);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  padding: 16px;
}
.modalTitle{font-size: 18px; font-weight: 900; margin-bottom: 10px;}
.modalBody{color: var(--text);}
.modalBtns{display:flex; justify-content:flex-end; margin-top: 12px;}

select{
  width:100%;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.22);
  color: var(--text);
  margin: 8px 0 10px;
}

.danger{
  width:100%;
  border:0;
  background: #3a2430;
  color: var(--text);
  padding: 12px;
  border-radius: 14px;
  font-weight: 900;
  cursor:pointer;
  border: 1px solid rgba(235,90,90,0.35);
}
.hr{border:0; height:1px; background: rgba(255,255,255,0.08); margin: 12px 0;}
.small{color: var(--muted); font-size: 12px; margin-top: 8px;}

@media (min-width: 760px){
  .grid{grid-template-columns: repeat(3, minmax(0,1fr));}
}