:root{
  --bg:#0a0d12; --panel:#11161e; --frame:#2c3642; --green:#3ee87a; --amber:#f2c05c;
  --red:#ff5a52; --white:#e4e9ee; --muted:#8794a0; --blue:#6cb6ff; --purple:#b388ff; --cyan:#5eead4;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"DejaVu Sans Mono",monospace;
  --ui:system-ui,-apple-system,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;background:#05070a;color:var(--white);font-family:var(--ui);}
body{min-height:100dvh;}
.app{max-width:560px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;background:var(--bg);position:relative;}
.bar{display:flex;align-items:center;gap:8px;padding:9px 12px;background:#0e131b;border-bottom:1px solid var(--frame);flex:0 0 auto;}
.dot{width:11px;height:11px;border-radius:50%;}
.dot.r{background:#ff5f56;}.dot.y{background:#ffbd2e;}.dot.g{background:#27c93f;}
.bartitle{color:var(--muted);font-size:12px;font-family:var(--mono);margin-left:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.counter{margin-left:auto;color:var(--green);font-size:12px;font-family:var(--mono);}
.game{flex:1;display:flex;flex-direction:column;min-height:0;}
.hidden{display:none!important;}

/* ===== 진화 화면 ===== */
.play{flex:1;display:flex;flex-direction:column;min-height:0;padding:14px 16px;gap:14px;}
.evtop{display:flex;align-items:center;gap:8px;flex:0 0 auto;}
.stagebadge{color:var(--muted);font-family:var(--mono);font-size:13px;font-weight:700;}
.tierbadge{margin-left:auto;font-family:var(--mono);font-size:12px;font-weight:800;padding:3px 12px;border-radius:20px;border:1px solid;}
.tierbadge.t0{color:#96a2ae;border-color:#96a2ae;}
.tierbadge.t1{color:var(--green);border-color:var(--green);}
.tierbadge.t2{color:var(--blue);border-color:var(--blue);}
.tierbadge.t3{color:var(--purple);border-color:var(--purple);box-shadow:0 0 10px rgba(179,136,255,.3);}
.tierbadge.t4{color:var(--amber);border-color:var(--amber);box-shadow:0 0 12px rgba(242,192,92,.4);}
.tierbadge.t5{color:var(--red);border-color:var(--red);box-shadow:0 0 14px rgba(255,90,82,.5);}
.tierbadge.t6{color:var(--cyan);border-color:var(--cyan);box-shadow:0 0 18px rgba(94,234,212,.6);animation:glow 1.4s ease-in-out infinite;}
@keyframes glow{50%{box-shadow:0 0 26px rgba(94,234,212,.9);}}

.stage-card{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  background:radial-gradient(circle at 50% 38%,rgba(62,232,122,.06),transparent 60%),var(--panel);
  border:1px solid var(--frame);border-radius:18px;padding:20px;text-align:center;min-height:0;position:relative;overflow:hidden;}
.emoji{font-size:96px;line-height:1;filter:drop-shadow(0 0 18px rgba(255,255,255,.12));}
.ename{font-size:34px;font-weight:900;color:var(--amber);word-break:keep-all;line-height:1.2;}
.edesc{font-size:15px;color:var(--muted);max-width:90%;line-height:1.5;}
.stage-card.loading{opacity:.6;}
.stage-card.loading::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(62,232,122,.08),transparent);
  animation:sweep 1s linear infinite;}
@keyframes sweep{from{transform:translateX(-100%);}to{transform:translateX(100%);}}
.stage-card.pop .emoji{animation:popin .4s cubic-bezier(.2,1.4,.4,1);}
.stage-card.morph .emoji{animation:morph .5s ease;}
.stage-card.morph .ename{animation:slideup .4s ease;}
@keyframes popin{from{transform:scale(0) rotate(-30deg);opacity:0;}to{transform:none;opacity:1;}}
@keyframes morph{0%{transform:scale(.4) rotate(-15deg);opacity:.2;filter:blur(6px);}100%{transform:none;opacity:1;filter:none;}}
@keyframes slideup{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

.actions{flex:0 0 auto;display:flex;gap:10px;}
.btn{font-family:var(--ui);font-size:15px;cursor:pointer;background:transparent;color:var(--white);
  border:1px solid var(--frame);border-radius:13px;padding:14px 18px;text-decoration:none;display:inline-block;text-align:center;}
.btn:disabled{opacity:.55;cursor:default;}
.btn.key{border-color:var(--green);color:var(--green);}
.btn.big{font-size:17px;padding:15px 24px;}
.btn.evolve{flex:1;font-weight:800;background:rgba(62,232,122,.08);}
.btn.reroll{flex:0 0 auto;font-size:14px;color:var(--muted);}

.chain{flex:0 0 auto;display:flex;align-items:center;gap:4px;overflow-x:auto;padding:8px 2px;-webkit-overflow-scrolling:touch;min-height:44px;}
.chain::-webkit-scrollbar{height:0;}
.cnode{font-size:22px;flex:0 0 auto;opacity:.6;}
.cnode.now{opacity:1;transform:scale(1.2);}
.carr{color:var(--frame);flex:0 0 auto;font-size:13px;}

.subactions{flex:0 0 auto;display:flex;justify-content:center;gap:20px;}
.linkbtn{background:none;border:none;color:var(--muted);font-size:13px;cursor:pointer;padding:4px;font-family:var(--ui);}
.linkbtn:hover{color:var(--white);}

/* ===== 오버레이 (시작) ===== */
.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(5,7,10,.94);z-index:10;padding:22px;text-align:center;overflow-y:auto;}
.overlay.hidden{display:none;}
.ov-card{max-width:430px;width:100%;display:flex;flex-direction:column;gap:14px;margin:auto;}
.logo{font-size:52px;}
.bigtitle{font-size:34px;font-weight:900;color:var(--amber);}
.tagline{color:var(--white);font-size:16px;line-height:1.6;}
.tagline b{color:var(--green);}
.starters{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:6px;}
.starter{display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--panel);border:1px solid var(--frame);
  border-radius:13px;padding:13px 6px;cursor:pointer;color:var(--white);font-size:30px;transition:transform .08s,border-color .15s;}
.starter span{font-size:13px;color:var(--muted);}
.starter:hover{border-color:var(--green);}.starter:active{transform:scale(.95);}
.reveal{color:var(--muted);font-size:12px;font-family:var(--mono);margin-top:6px;}
.reveal b{color:var(--green);}.reveal.small{margin-top:16px;text-align:center;}

/* ===== 공유 페이지 ===== */
.sharepage{align-items:center;justify-content:flex-start;gap:16px;padding:20px;}
.sharecard{background:var(--panel);border:1px solid var(--frame);border-radius:18px;padding:24px;width:100%;max-width:460px;text-align:center;}
.sc-h{color:var(--green);font-family:var(--mono);font-size:13px;}
.sc-final{margin:16px 0;}
.sc-emoji{font-size:80px;line-height:1;filter:drop-shadow(0 0 16px rgba(255,255,255,.12));}
.sc-name{font-size:30px;font-weight:900;color:var(--amber);margin-top:8px;}
.sc-desc{color:var(--muted);font-size:15px;margin-top:6px;}
.sc-chain{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin-top:18px;padding-top:16px;border-top:1px solid var(--frame);}
.cc{font-size:13px;color:var(--white);background:#0a0f16;border:1px solid var(--frame);border-radius:18px;padding:3px 9px;}
.arr{color:var(--frame);font-size:11px;}
.cta{display:flex;gap:10px;width:100%;max-width:460px;}
.cta .btn{flex:1;}