*{box-sizing:border-box}
:root{
  --bg:#0b0f1a;
  --panel:#101728;
  --line:rgba(255,255,255,.08);
  --text:#eaf2ff;
  --muted:#9fb2da;
  --accent:#ffd76a;
  --meter:#4e5d86;
  --meter-fill:#7cc6ff;
}
html,body{
  margin:0;height:100%;background:#0b0f1a;color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Noto Sans,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  overscroll-behavior:contain;
}
a{color:#bfe1ff;text-decoration:none}
a:hover{text-decoration:underline}

.site-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,0,0,.04))}
.site-header h1{margin:0;font-size:20px}
.site-header nav a{margin-left:12px;padding:8px 10px;border:1px solid transparent;border-radius:10px}
.site-header nav a.active,.site-header nav a:hover{border-color:var(--line);background:rgba(255,255,255,.04)}

.stage-wrap{max-width:980px;margin:20px auto;padding:0 16px;text-align:center}
.hint{color:var(--muted)}
.stage{position:relative;height:560px;border-radius:24px;border:1px solid var(--line);background: radial-gradient(900px 380px at 50% 80%, rgba(255,231,140,.05), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.04));overflow:hidden;user-select:none}
.lamp{position:absolute;left:50%;top:56%;transform:translate(-50%,-50%);width:min(520px,84vw);filter: drop-shadow(0 18px 22px rgba(0,0,0,.45));touch-action:manipulation}
.glow{position:absolute;left:50%;top:62%;transform:translate(-50%,-50%);width:520px;height:220px;border-radius:50%;background: radial-gradient(closest-side, rgba(255,230,150,.65), rgba(255,230,150,.16) 60%, transparent 70%);filter: blur(18px);opacity:0;pointer-events:none;transition: opacity .6s ease}
.stage.active .glow{opacity:1}
.rub-meter{position:absolute;left:50%;top:14px;transform:translateX(-50%);width:min(560px,84%);height:10px;border-radius:999px;background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.12));border:1px solid var(--line);overflow:hidden}
.rub-meter .bar{width:0%;height:100%;background:linear-gradient(90deg, var(--meter-fill), #b2f0ff);box-shadow:0 0 16px rgba(124,198,255,.6);transition: width .08s linear}
.smoke{position:absolute;left:50%;bottom:28%;width:0;height:0;pointer-events:none}
.smoke .p{position:absolute;left:-12px;bottom:0;width:24px;height:24px;border-radius:50%;background: radial-gradient(circle at 40% 40%, rgba(255,255,255,.85), rgba(255,255,255,.15) 60%, rgba(255,255,255,0) 70%);animation: rise 2.2s ease-out forwards;opacity:.0;filter: blur(0.5px)}
@keyframes rise{0%{transform:translate(0,0) scale(.6);opacity:.0;filter: blur(0.5px)}10%{opacity:.8}100%{transform:translate(var(--dx), -160px) scale(1.8);opacity:0;filter: blur(3px)}}

/* Genie */
.genie{position:absolute;left:50%;bottom:38%;transform:translateX(-50%) scale(.6);font-size:120px;filter: drop-shadow(0 12px 20px rgba(0,0,0,.4));opacity:0;pointer-events:none}
.stage.show-genie .genie{animation: genie-appear .6s ease-out forwards, floaty 3s ease-in-out .6s infinite}
.stage.fade-genie .genie{animation: genie-fade .5s ease-out forwards}
@keyframes floaty{0%,100%{transform:translateX(-50%) translateY(0) scale(1)}50%{transform:translateX(-50%) translateY(-8px) scale(1.02)}}
@keyframes genie-appear{0%{opacity:0; transform:translateX(-50%) translateY(20px) scale(.8)}100%{opacity:1; transform:translateX(-50%) translateY(0) scale(1)}}
@keyframes genie-fade{0%{opacity:1}100%{opacity:0}}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;padding:16px}
.modal[aria-hidden="false"]{display:flex}
.modal-card{width:min(560px,92vw);background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px 18px 14px}
.modal-card h2{margin:0 0 12px}
.modal-card label{display:block;margin:10px 0;color:var(--muted)}
.modal-card input{width:100%;padding:10px;border-radius:10px;border:1px solid var(--line);background:#0e1524;color:var(--text)}
.actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
button{cursor:pointer}
button.primary{background:#1c2748;color:var(--text);border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-weight:700}
button.ghost{background:transparent;color:var(--text);border:1px solid var(--line);border-radius:10px;padding:10px 14px}

/* 요청: votes 버튼에 흰색 텍스트 추가 */
.votes button{border:1px solid var(--line);background:#121a2e;padding:8px 10px;border-radius:10px;color:#fff}

.list-wrap{max-width:820px;margin:22px auto;padding:0 16px}
.empty{color:var(--muted);text-align:center}
.wish-card{border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin:12px 0;background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.02))}
.wish-card .meta{color:var(--muted);font-size:12px;margin-bottom:8px}
.wish-card ul{margin:8px 0 0 18px}
.votes{margin-top:10px;display:flex;gap:8px}
.toolbar{max-width:820px;margin:16px auto;padding:0 16px;display:flex;gap:10px}
.toolbar .btn{border:1px solid var(--line);padding:8px 10px;border-radius:10px;background:#121a2e;color:#fff}
.toolbar .btn.active{background:#1c2748}
