:root{
  --bg1:#081421;
  --bg2:#0f1724;
  --card:#0f1f1a;
  --accent:#9b59ff;
  --accent-2:#34d399;
  --gold:#ffd27a;
  --glass: rgba(255,255,255,0.04);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial}
body{
  background: radial-gradient(800px 400px at 10% 10%, rgba(56,189,248,0.06), transparent 10%),
              linear-gradient(180deg,var(--bg1),var(--bg2));
  color:#e6eef6; display:flex; align-items:center; justify-content:center; padding:28px;
}
.scene{display:grid; grid-template-columns:1fr 260px; gap:20px; width:100%; max-width:980px; align-items:start;}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:18px; padding:22px; box-shadow:0 12px 40px rgba(2,6,23,0.6); border:1px solid rgba(255,255,255,0.03);
  position:relative; overflow:hidden;
}
.glow{position:absolute; inset:0; background:radial-gradient(circle at 20% 20%, rgba(155,89,255,0.08), transparent 10%), radial-gradient(circle at 80% 80%, rgba(52,211,153,0.05), transparent 12%); pointer-events:none; z-index:0}
.card-head{display:flex; gap:14px; align-items:center; z-index:1}
.logo{width:64px;height:64px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border:1px solid rgba(255,255,255,0.03)}
h1{margin:0;font-size:1.6rem;color:var(--gold); letter-spacing:0.4px}
.sub{margin:4px 0 0;color:#cfe8e1;font-weight:500;font-size:0.95rem}
.form{margin-top:14px;display:grid;gap:10px;z-index:1}
label{font-size:0.85rem;color:#bfe7d5;font-weight:600}
input,select{padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,0.04);background:var(--glass);color:inherit;outline:none;font-size:0.95rem}
input:focus,select:focus{box-shadow:0 6px 18px rgba(52,211,153,0.06); border-color: rgba(52,211,153,0.18)}
.actions{display:flex;gap:10px;margin-top:6px}
.btn{padding:12px 14px;border-radius:12px;cursor:pointer;border:0;font-weight:800}
.btn.primary{background:linear-gradient(90deg,var(--accent),#6ee7b7);color:#042018}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.04);color:#d7eaea}
.hint{font-size:0.85rem;color:#9bd8c7;margin-top:6px}

.result{margin-top:14px;z-index:1}
.hidden{display:none}
.progress{height:12px;background:rgba(255,255,255,0.03);border-radius:999px;overflow:hidden;margin-bottom:10px;border:1px solid rgba(255,255,255,0.02)}
.bar{height:100%;width:0%;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .35s ease, box-shadow .35s ease}
.log{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.006)); border-radius:10px;padding:10px;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;font-size:0.9rem;color:#cfe8e1; max-height:160px; overflow:auto; border:1px dashed rgba(255,255,255,0.02)}
.rewards{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.reward{min-width:120px;background:linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01)); border-radius:12px;padding:10px;border:1px solid rgba(255,255,255,0.02); text-align:center; box-shadow:0 6px 18px rgba(2,6,23,0.45)}
.reward .name{font-weight:800;color:var(--gold);margin-bottom:6px}
.reward .type{font-size:0.85rem;color:#bfe7d5}

.bottom{display:flex;align-items:center;gap:12px;margin-top:12px}
.btn.accent{background:linear-gradient(90deg,#ffd27a,#ff9a7b);color:#0b1820;padding:10px 14px;border-radius:12px}
.small{font-size:0.78rem;color:#92c9b3;margin:0}

.sidebar{
  background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.006));
  border-radius:12px;padding:14px;border:1px solid rgba(255,255,255,0.02);
  height:fit-content;
}
.sidebar h3{margin:0 0 8px 0;color:#ffd27a}
.sidebar ul{margin:0;padding-left:18px;color:#cfe8e1;line-height:1.6;font-size:0.95rem}
.sidebar li{margin:4px 0}

@media (max-width:860px){
  .scene{grid-template-columns:1fr; padding-bottom:18px}
  .sidebar{order:2}
}