:root{
  --bg1:#1a1030; --bg2:#0d0820; --card:#241640; --accent:#7b5cff; --gold:#ffd700;
  --good:#00d2ff; --bad:#4b4b52; --ok:#57f287; --fail:#ed4245; --text:#ece8ff;
}
*{box-sizing:border-box; margin:0; padding:0; font-family:"Pretendard","Segoe UI",system-ui,sans-serif;}
html,body{height:100%;}
body{
  background:radial-gradient(120% 120% at 50% 0%, var(--bg1), var(--bg2));
  color:var(--text); display:flex; align-items:center; justify-content:center; overflow:hidden;
}
#app{
  width:min(440px,100%); height:100%; max-height:780px; display:flex; flex-direction:column;
  padding:16px; gap:12px;
}
header{display:flex; justify-content:space-between; align-items:center; font-size:14px; opacity:.95;}
#who{display:flex; align-items:center; gap:6px;}
.ava{width:24px; height:24px; border-radius:50%; vertical-align:middle;}
#best{background:rgba(123,92,255,.25); padding:4px 10px; border-radius:999px; font-weight:700;}

main{
  flex:1; background:linear-gradient(180deg, var(--card), #1b1136);
  border:1px solid rgba(123,92,255,.35); border-radius:20px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  padding:24px; box-shadow:0 12px 40px rgba(0,0,0,.45);
}
#weapon{font-size:84px; filter:drop-shadow(0 6px 18px rgba(123,92,255,.5)); transition:transform .15s;}
#level{font-size:44px; font-weight:900; letter-spacing:1px;}
#rateWrap{width:100%; max-width:280px; height:10px; background:#130b28; border-radius:999px; overflow:hidden;}
#rateBar{height:100%; width:100%; background:linear-gradient(90deg,#7b5cff,#00d2ff); transition:width .3s;}
#rateText{font-size:13px; opacity:.85;}
#stage{
  min-height:46px; display:flex; align-items:center; text-align:center; font-size:17px; font-weight:700;
  padding:8px 14px; border-radius:12px; transition:all .2s;
}
#stage.omen-good{color:#001a22; background:var(--good); box-shadow:0 0 22px var(--good);}
#stage.omen-bad{color:#cfcfd6; background:var(--bad);}
#stage.ok{color:#062b13; background:var(--ok);}
#stage.fail{color:#fff; background:var(--fail);}

#go{
  margin-top:4px; padding:14px 34px; font-size:19px; font-weight:900; color:#fff; cursor:pointer;
  background:linear-gradient(90deg,#7b5cff,#a06bff); border:none; border-radius:14px;
  box-shadow:0 6px 18px rgba(123,92,255,.5); transition:transform .1s, opacity .2s;
}
#go:hover{transform:translateY(-2px);}
#go:active{transform:translateY(1px);}
#go:disabled{opacity:.55; cursor:default; transform:none;}

footer{display:flex; flex-direction:column; gap:6px;}
#log{font-size:13px; display:flex; flex-direction:column; gap:3px; min-height:84px;}
#log div{background:rgba(255,255,255,.05); padding:4px 10px; border-radius:8px;}
#players{font-size:12px; opacity:.7; text-align:center;}