*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{
  width:100%;height:100%;overflow:hidden;
  background:#000;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  touch-action:none;user-select:none;-webkit-user-select:none;
}
canvas{display:block;touch-action:none;}
#ui-layer{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:50;}
.modal{
  position:fixed;top:0;left:0;width:100%;height:100%;
  background:rgba(0,0,0,.85);
  display:flex;align-items:center;justify-content:center;
  z-index:200;pointer-events:all;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  animation:fadeIn .25s ease;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal.hidden{display:none!important}
.modal-box{
  background:linear-gradient(145deg,rgba(15,5,40,.98),rgba(5,2,20,.98));
  border:2px solid rgba(220,120,255,.55);
  border-radius:26px;padding:32px 28px;
  text-align:center;max-width:400px;width:93%;
  box-shadow:0 0 80px rgba(180,80,255,.35),0 0 160px rgba(255,80,180,.15),
             inset 0 1px 0 rgba(255,255,255,.08);
  animation:slideUp .3s ease;
}
.modal-box.wide{max-width:480px;}
@keyframes slideUp{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}
.modal-emoji{font-size:3.2em;margin-bottom:8px;animation:bounce 1.2s ease-in-out infinite alternate;}
@keyframes bounce{from{transform:translateY(0) scale(1)}to{transform:translateY(-10px) scale(1.08)}}
.modal-box h2{
  color:#FFCC00;font-size:1.9em;font-weight:900;letter-spacing:3px;
  margin-bottom:10px;text-shadow:0 0 24px rgba(255,200,0,.7);
}
.story-intro{
  background:rgba(255,255,255,.05);border-radius:12px;
  padding:12px 14px;margin-bottom:14px;
  border-left:3px solid #FF88FF;
}
.story-intro p{color:#FFDDFF;font-size:.88em;line-height:1.65;font-style:italic;}
.sub{color:#CC88FF;font-size:.88em;margin-bottom:12px;}
.modal-box input{
  width:100%;padding:14px;border-radius:14px;
  border:2px solid rgba(180,80,255,.5);
  background:rgba(80,20,140,.4);color:#fff;
  font-size:1.2em;text-align:center;outline:none;
  margin-bottom:16px;letter-spacing:3px;font-weight:700;
  transition:border-color .2s,box-shadow .2s;
}
.modal-box input:focus{border-color:#FF88FF;box-shadow:0 0 22px rgba(255,136,255,.35);}
.btn-primary{
  display:block;width:100%;
  background:linear-gradient(135deg,#8833FF,#FF33CC);
  color:#fff;border:none;padding:15px;border-radius:14px;
  font-size:1.05em;font-weight:800;cursor:pointer;
  letter-spacing:2px;margin-bottom:10px;
  box-shadow:0 4px 24px rgba(180,50,255,.45);
  transition:transform .15s,box-shadow .15s;
  pointer-events:all;
}
.btn-primary:active{transform:scale(.97);}
.btn-secondary{
  display:block;width:100%;
  background:linear-gradient(135deg,#1a3a6a,#2a5a9a);
  color:#fff;border:none;padding:12px;border-radius:12px;
  font-size:.95em;font-weight:700;cursor:pointer;
  letter-spacing:1px;margin-bottom:8px;
  box-shadow:0 3px 16px rgba(30,80,180,.35);
  transition:transform .15s;pointer-events:all;
}
.btn-secondary:active{transform:scale(.97);}
.btn-danger{
  display:block;width:100%;
  background:linear-gradient(135deg,#6a1a1a,#aa2222);
  color:#fff;border:none;padding:12px;border-radius:12px;
  font-size:.95em;font-weight:700;cursor:pointer;
  letter-spacing:1px;
  box-shadow:0 3px 16px rgba(180,30,30,.35);
  transition:transform .15s;pointer-events:all;
}
.btn-danger:active{transform:scale(.97);}
#storyContent{color:#eee;font-size:.92em;line-height:1.7;margin-bottom:18px;text-align:left;}
#storyContent h3{color:#FFCC00;font-size:1.2em;margin-bottom:10px;text-align:center;}
#storyContent .crystal{color:#88FFFF;font-weight:700;}
#lcContent{margin-bottom:16px;}
#lcContent h3{color:#FFCC00;font-size:1.4em;font-weight:900;margin-bottom:8px;}
#lcContent .stars{font-size:2em;margin:8px 0;}
#lcContent p{color:#CC88FF;font-size:.9em;margin:4px 0;}