:root {
  --navy: #0A1B3F; --navy-2: #0E2552; --card: #12285C; --line: #3B5A99; --line-2: #1B3A6B;
  --text: #FFFFFF; --muted: #C9D5F0; --muted-2: #AFC0E4; --blue: #5BC0FF; --gold: #FFC857; --green: #1B9E5F; --disabled: #6F7FA6;
  --display: Fraunces, Georgia, serif; --body: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--navy); color: var(--text); font-family: var(--body); -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }
button { font-family: var(--body); cursor: pointer; }
button:disabled { cursor: not-allowed; }
input { font-family: var(--body); }
h1, h2 { margin: 0; font-family: var(--display); font-weight: 700; }
p { margin: 0; }

/* ---------- phone app ---------- */
.app { max-width: 460px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; position: relative; }
.screen { padding: 20px 20px 32px; display: flex; flex-direction: column; gap: 18px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { font-weight: 600; letter-spacing: .08em; font-size: 13px; color: var(--blue); }
.pill-btn { min-height: 44px; min-width: 64px; padding: 0 16px; border-radius: 22px; border: 1px solid var(--blue); background: transparent; color: var(--text); font-size: 14px; font-weight: 600; }
.primary { min-height: 56px; border-radius: 28px; border: none; background: var(--gold); color: var(--navy); font-size: 18px; font-weight: 600; width: 100%; }
.primary:disabled { background: var(--disabled); }
.title-lg { font-size: 34px; line-height: 1.12; }
.sub { font-size: 15px; line-height: 1.5; color: var(--muted); }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; color: var(--muted); }
.field input[type=text], .field input[type=tel] { min-height: 48px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--text); font-size: 16px; padding: 0 14px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; line-height: 1.5; color: var(--muted-2); }
.check input { width: 22px; height: 22px; margin: 0; flex-shrink: 0; accent-color: var(--gold); }
.error { font-size: 14px; color: #FFB4B4; min-height: 0; }
.star-ico { width: 64px; height: 64px; }

.treecard { display: flex; flex-direction: column; align-items: center; gap: 12px; background: var(--navy-2); border-radius: 20px; padding: 16px 14px; }
.phases { display: flex; gap: 6px; width: 100%; }
.phase { flex: 1 1 0; min-width: 0; text-align: center; font-size: 12px; font-weight: 600; padding: 7px 4px; border-radius: 10px; background: var(--card); color: var(--muted-2); }
.phase.now { background: var(--gold); color: var(--navy); }
.phase.past { background: var(--green); color: #fff; }
.phase-text { font-size: 15px; font-weight: 600; text-align: center; }
.bar { width: 85%; height: 8px; border-radius: 4px; background: var(--line-2); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--gold); transition: width .6s; }
.small { font-size: 12px; color: var(--muted); }

.notice { background: var(--card); border: 1px solid var(--gold); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.notice.plain { border-color: var(--line); }
.notice .btns { display: flex; gap: 10px; }
.btn-gold, .btn-ghost { flex: 1; min-height: 44px; border-radius: 22px; font-size: 15px; font-weight: 600; }
.btn-gold { border: none; background: var(--gold); color: var(--navy); }
.btn-ghost { border: 1px solid var(--blue); background: transparent; color: var(--text); }

.section-title { font-size: 20px; margin: 4px 0 -6px; }
.missions { display: flex; flex-direction: column; gap: 12px; }
.mission { text-align: left; border: 1px solid var(--line); background: var(--card); color: var(--text); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 8px; min-height: 44px; width: 100%; }
.mission:disabled { border-color: var(--line-2); opacity: .65; }
.mission .top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.mission .name { font-size: 17px; font-weight: 600; }
.mission .reward { font-size: 13px; font-weight: 600; color: var(--gold); white-space: nowrap; }
.mission:disabled .reward { color: var(--muted-2); }
.mission .desc { font-size: 14px; line-height: 1.4; color: var(--muted); }
.mission .prog { display: flex; align-items: center; gap: 10px; }
.mission .prog .bar { flex-grow: 1; width: auto; height: 6px; }
.mission .note { font-size: 12px; color: var(--muted-2); }
.mission:disabled .note { color: #7CC8FF; }

.opps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.opp { min-height: 52px; border-radius: 14px; border: 2px solid var(--line); background: var(--card); color: var(--text); font-size: 15px; font-weight: 600; padding: 0 8px; overflow: hidden; text-overflow: ellipsis; }
.opp[aria-pressed=true] { border-color: var(--gold); background: #1F3D7A; }

/* modal */
.overlay { position: fixed; inset: 0; background: rgba(4, 10, 26, .78); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 20; }
.dialog { position: relative; width: 100%; max-width: 420px; max-height: 100%; overflow-y: auto; background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 24px 20px 20px; display: flex; flex-direction: column; gap: 14px; }
.x { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border-radius: 22px; border: none; background: transparent; color: #fff; font-size: 28px; line-height: 1; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--gold); }
.dialog h1 { font-size: 28px; line-height: 1.15; margin: -6px 44px 0 0; }
.dialog .how { font-size: 16px; line-height: 1.5; color: #D6E0F5; }
.qty { background: var(--navy-2); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.qty .ctl { display: flex; align-items: center; justify-content: space-between; }
.qty button { width: 52px; height: 52px; border-radius: 26px; border: 1px solid var(--blue); background: transparent; color: #fff; font-size: 26px; }
.qty .n { font-family: var(--display); font-size: 40px; font-weight: 700; }
.stats { display: flex; gap: 10px; }
.stat { flex: 1 1 0; background: var(--navy-2); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.stat span:first-child { font-size: 12px; color: var(--muted); }
.stat span:last-child { font-size: 18px; font-weight: 600; }
.honor { font-size: 12px; line-height: 1.4; color: var(--muted-2); text-align: center; }
.result { text-align: center; display: flex; flex-direction: column; gap: 6px; align-items: center; padding-top: 6px; }
.result .big { font-family: var(--display); font-size: 38px; font-weight: 700; color: var(--gold); }
.result .lit { font-size: 19px; font-weight: 600; }
.realbox { background: var(--navy-2); border: 2px solid var(--gold); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.realbox h2 { font-size: 20px; }
.realbox p { font-size: 15px; line-height: 1.5; color: #E4ECFB; }
.toast { position: fixed; left: 16px; right: 16px; bottom: 20px; max-width: 428px; margin: 0 auto; background: #5A1E2A; color: #fff; border-radius: 14px; padding: 14px 16px; font-size: 14px; z-index: 30; }

/* ---------- dashboard ---------- */
.dash { height: 100vh; display: flex; gap: 4vw; padding: 3vh 4vw; overflow: hidden; }
.dash-tree { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.dash-main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2vh; }
.dash h1 { font-size: clamp(32px, 4.4vw, 64px); line-height: 1.05; }
.dash .brand { font-size: clamp(12px, 1vw, 16px); }
.big-pct { font-family: var(--display); font-size: clamp(64px, 9vw, 140px); line-height: 1; font-weight: 700; color: var(--gold); }
.dash .phase-line { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.dash .phase-line span:last-child { font-size: clamp(16px, 1.5vw, 24px); color: var(--muted); }
.dash .phases .phase { font-size: clamp(13px, 1.1vw, 18px); padding: 10px 6px; border-radius: 12px; }
.join { text-align: right; max-width: 40%; }
.join .url { font-size: clamp(14px, 1.3vw, 22px); font-weight: 600; color: var(--blue); word-break: break-all; }
.join .lbl { font-size: clamp(11px, .9vw, 14px); color: var(--muted); }
.panels { display: flex; gap: 1.6vw; flex-grow: 1; min-height: 0; }
.panel { background: var(--card); border-radius: 20px; padding: 2vh 1.6vw; display: flex; flex-direction: column; gap: 1vh; overflow: hidden; }
.panel.leaders { flex: 1 1 0; min-width: 0; }
.panel.feed { flex: 1.3 1 0; min-width: 0; }
.panel h2 { font-size: clamp(18px, 1.7vw, 28px); margin-bottom: 4px; }
.lrow { display: flex; align-items: center; gap: 12px; font-size: clamp(15px, 1.35vw, 22px); }
.lrow .rk { width: 1.6em; font-weight: 600; color: var(--gold); }
.lrow .nm { flex-grow: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lrow .pt { font-weight: 600; }
.frow { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font-size: clamp(14px, 1.25vw, 20px); line-height: 1.35; }
.frow .b { font-weight: 600; color: var(--gold); white-space: nowrap; }
.empty { color: var(--muted); font-size: clamp(14px, 1.2vw, 20px); }
@media (max-width: 900px) {
  .dash { flex-direction: column; height: auto; min-height: 100vh; overflow: visible; }
}