:root{
  --green:#00AA6E;
  --green-dark:#048A58;
  --green-pale:#E3F6EC;
  --gold:#FCD25A;
  --gold-light:#FDE49C;
  --cream:#FEF6DE;
  --black:#020817;
  --gray-900:#2B2B2B;
  --gray-600:#6B6B6B;
  --gray-400:#9B9B9B;
  --gray-200:#EDE6D2;
  --gray-100:#FBF6E8;
  --bg:var(--cream);
  --white:#FFFFFF;
  --red:#D6323F;
  --orange:#E67E22;
  --radius-lg:18px;
  --radius-md:12px;
  --radius-sm:10px;
  --shadow:0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
}

*{ box-sizing:border-box; }

html,body{
  margin:0; padding:0;
  background:linear-gradient(180deg, var(--gold-light) 0%, var(--cream) 340px);
  font-family:'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang TC", "Microsoft JhengHei", sans-serif;
  color:var(--black);
  -webkit-font-smoothing:antialiased;
}

.phone{
  max-width:480px;
  margin:0 auto;
  min-height:100vh;
  background:var(--white);
  display:flex;
  flex-direction:column;
  position:relative;
  box-shadow:0 0 40px rgba(0,0,0,0.08);
}

.hidden{ display:none !important; }
.accent-green{ color:var(--green); font-weight:700; }

/* ---------- Status bar ---------- */
.status-bar{
  padding:14px 16px 12px;
  background:linear-gradient(180deg, var(--gold) 0%, var(--gold-light) 100%);
  position:sticky;
  top:0;
  z-index:10;
}
.status-top{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.status-avatar{
  width:40px; height:40px;
  border-radius:50%;
  background:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-size:20px;
  flex-shrink:0;
}
.status-id{ flex:1; min-width:0; }
.status-name{ font-weight:700; font-size:15px; line-height:1.2; }
.status-sub{ font-size:12px; color:var(--gray-900); opacity:.7; }
.status-seed{
  font-size:11px;
  font-weight:700;
  color:var(--black);
  background:rgba(255,255,255,.55);
  padding:4px 8px;
  border-radius:20px;
  flex-shrink:0;
}
.status-bars{ display:flex; gap:14px; margin-bottom:10px; }
.stat-bar{ display:flex; align-items:center; gap:6px; flex:1; min-width:0; }
.stat-icon{ font-size:13px; }
.stat-text{ font-size:11px; color:var(--gray-900); opacity:.75; flex-shrink:0; }
.stat-num{ font-size:11px; color:var(--gray-900); opacity:.75; flex-shrink:0; white-space:nowrap; font-variant-numeric:tabular-nums; }
.bar-track{ flex:1; height:7px; background:rgba(255,255,255,.55); border-radius:6px; overflow:hidden; min-width:24px; }
.bar-fill{ height:100%; border-radius:6px; transition:width .3s ease; }
.bar-fill.stamina{ background:linear-gradient(90deg,#FFB020,#FF7A1A); }
.bar-fill.mood{ background:linear-gradient(90deg,#4FB0FF,#2E7BEE); }
.status-money{ display:flex; gap:8px; }
.money-chip{
  flex:1;
  background:rgba(255,255,255,.7);
  border-radius:12px;
  padding:6px 10px;
  display:flex;
  flex-direction:column;
}
.money-chip:first-child{ background:var(--white); }
.money-label{ font-size:10px; color:var(--gray-900); opacity:.65; }
.money-value{ font-size:14px; font-weight:700; }
.status-estimate{
  margin-top:8px;
  font-size:11px;
  color:var(--gray-900);
  opacity:.8;
  display:flex;
  justify-content:space-between;
  gap:8px;
}
.status-estimate .warn{ color:var(--red); font-weight:700; opacity:1; }
.status-breakdown{
  margin-top:8px;
  gap:5px;
}
.status-breakdown .effect-chip{
  font-size:10.5px;
  padding:3px 8px;
  background:rgba(255,255,255,.7);
}

/* ---------- Screen ---------- */
.screen{
  flex:1;
  padding:16px 16px 100px;
  overflow-y:auto;
}

.section-title{
  font-size:13px;
  font-weight:700;
  color:var(--gray-600);
  text-transform:uppercase;
  letter-spacing:.04em;
  margin:18px 0 8px;
}
.section-title:first-child{ margin-top:0; }

/* ---------- Generic card ---------- */
.card{
  background:var(--white);
  border:1px solid var(--gray-200);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:16px;
  margin-bottom:14px;
}
.card-title{ font-size:17px; font-weight:800; margin:0 0 6px; }
.card-desc{ font-size:14px; color:var(--gray-900); line-height:1.55; margin:0 0 4px; }
.card-tag{
  display:inline-block;
  font-size:11px;
  font-weight:700;
  padding:3px 9px;
  border-radius:20px;
  background:var(--gray-100);
  color:var(--gray-600);
  margin-bottom:8px;
}

/* ---------- Title screen ---------- */
.hero{
  text-align:center;
  padding:28px 16px 20px;
  margin:-16px -16px 8px;
  background:linear-gradient(180deg, var(--gold) 0%, var(--gold-light) 100%);
  border-radius:0 0 24px 24px;
}
.hero-emoji{ font-size:52px; }
.hero-title{ font-size:22px; font-weight:800; margin:8px 0 4px; }
.hero-sub{ font-size:13px; color:var(--gray-900); opacity:.75; margin:0 0 4px; line-height:1.5; }

.seed-row{
  display:flex;
  gap:8px;
  margin:16px 0 4px;
}
.seed-input{
  flex:1;
  border:1px solid var(--gray-200);
  border-radius:var(--radius-md);
  padding:12px 14px;
  font-size:14px;
  font-family:inherit;
  background:var(--gray-100);
  color:var(--black);
}
.seed-input:focus{ outline:2px solid var(--green); background:var(--white); }
.dice-btn{
  width:46px;
  border:none;
  border-radius:var(--radius-md);
  background:var(--gray-100);
  font-size:18px;
  cursor:pointer;
}
.dice-btn:active{ background:var(--gray-200); }

.origin-grid{ display:flex; flex-direction:column; gap:10px; }
.origin-card{
  text-align:left;
  border:2px solid var(--gray-200);
  border-radius:var(--radius-md);
  background:var(--white);
  padding:12px 14px;
  cursor:pointer;
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.origin-card.selected{ border-color:var(--green); background:var(--green-pale); }
.origin-emoji{ font-size:26px; flex-shrink:0; }
.origin-name{ font-weight:800; font-size:14.5px; }
.origin-tag{ font-size:11px; color:var(--green-dark); font-weight:700; margin-bottom:2px; }
.origin-story{ font-size:12.5px; color:var(--gray-600); line-height:1.5; margin-top:3px; }

/* ---------- Choice list (lifestyle / effort / cards / events) ---------- */
.choice-list{ display:flex; flex-direction:column; gap:10px; }
.choice-btn{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  text-align:left;
  border:1px solid var(--gray-200);
  border-radius:var(--radius-md);
  background:var(--white);
  padding:13px 14px;
  cursor:pointer;
  font-family:inherit;
  transition:border-color .15s, background .15s;
}
.choice-btn:hover{ border-color:var(--green); }
.choice-btn:active{ background:var(--gray-100); }
.choice-btn.disabled{ opacity:.45; pointer-events:none; }
.choice-emoji{ font-size:22px; flex-shrink:0; }
.choice-body{ flex:1; min-width:0; }
.choice-label{ font-weight:700; font-size:14.5px; }
.choice-meta{ font-size:12px; color:var(--gray-600); margin-top:2px; }
.choice-tone{
  font-size:10.5px;
  font-weight:800;
  padding:2px 7px;
  border-radius:20px;
  flex-shrink:0;
  align-self:flex-start;
}
.tone-aggressive{ background:#FDE9E9; color:var(--red); }
.tone-moderate{ background:#FFF3E0; color:var(--orange); }
.tone-conservative{ background:var(--green-pale); color:var(--green-dark); }
.tone-plain{ background:var(--gray-100); color:var(--gray-600); }

/* ---------- Effects list (result / settlement) ---------- */
.effects-list{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.effect-chip{
  font-size:12px;
  font-weight:700;
  padding:4px 9px;
  border-radius:20px;
  background:var(--gray-100);
}
.effect-chip.pos{ background:var(--green-pale); color:var(--green-dark); }
.effect-chip.neg{ background:#FDE9E9; color:var(--red); }

.outcome-banner{
  border-radius:var(--radius-md);
  padding:10px 12px;
  font-size:13px;
  font-weight:700;
  margin-bottom:10px;
}
.outcome-banner.good{ background:var(--green-pale); color:var(--green-dark); }
.outcome-banner.bad{ background:#FDE9E9; color:var(--red); }

/* ---------- Settlement table ---------- */
.settle-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:9px 0;
  border-bottom:1px solid var(--gray-100);
  font-size:13.5px;
}
.settle-row:last-child{ border-bottom:none; }
.settle-label{ color:var(--gray-600); }
.settle-value{ font-weight:700; }
.settle-value.pos{ color:var(--green-dark); }
.settle-value.neg{ color:var(--red); }

.progress-dots{ display:flex; gap:5px; margin-bottom:14px; justify-content:center; }
.progress-dot{ width:7px; height:7px; border-radius:50%; background:var(--gray-200); }
.progress-dot.done{ background:var(--green); }
.progress-dot.current{ background:var(--black); }

/* ---------- CTA bar ---------- */
.cta-bar{
  position:sticky;
  bottom:0;
  left:0; right:0;
  background:var(--white);
  border-top:1px solid var(--gray-200);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
}
.cta-button{
  width:100%;
  border:none;
  border-radius:var(--radius-sm);
  background:var(--black);
  color:var(--white);
  font-size:15px;
  font-weight:700;
  font-family:inherit;
  padding:15px;
  cursor:pointer;
}
.cta-button.green{ background:var(--green); }
.cta-button:disabled{ background:var(--gray-200); color:var(--gray-400); cursor:not-allowed; }
.cta-button:active:not(:disabled){ opacity:.85; }

/* ---------- Ending ---------- */
.ending-emoji{ font-size:56px; text-align:center; }
.ending-title{ font-size:20px; font-weight:800; text-align:center; margin:8px 0; }
.ending-desc{ font-size:13.5px; color:var(--gray-600); text-align:center; line-height:1.6; margin-bottom:16px;}

.badge-row{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:10px; }
.badge{ font-size:11.5px; font-weight:700; background:var(--gray-100); padding:5px 10px; border-radius:20px; }

/* ---------- JUJI mascot / special loan screen ---------- */
.juji-mascot{ display:flex; justify-content:center; margin-bottom:4px; }
.juji-mascot img{ width:96px; height:auto; }

/* ---------- Disabled choice reason text ---------- */
.choice-meta.warn-text{ color:var(--red); font-weight:700; }