@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@700&family=Rubik:wght@400;700;900&display=swap');

*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#0a0a0f;color:#fff;font-family:'Rubik',sans-serif}

#blob-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

#hdr{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(0,0,0,.65);
  backdrop-filter:blur(20px);padding:9px 20px;display:flex;justify-content:space-between;
  align-items:center;border-bottom:1px solid rgba(255,255,255,.08)}
#hdr-title{font-family:'Space Mono',monospace;font-size:.9rem;
  background:linear-gradient(45deg,#7fffd4,#9370db);-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;background-clip:text}
.hlink{color:rgba(255,255,255,.65);text-decoration:none;font-size:.75rem;padding:4px 11px;
  background:rgba(255,255,255,.07);border-radius:12px;border:1px solid rgba(255,255,255,.1);transition:all .2s}
.hlink:hover{background:rgba(255,255,255,.14);color:#fff}

#footer-bar{position:fixed;bottom:0;left:0;right:0;z-index:100;background:rgba(0,0,0,.55);
  backdrop-filter:blur(16px);border-top:1px solid rgba(255,255,255,.07);padding:4px 20px;
  display:flex;align-items:center;justify-content:center;font-size:.68rem;color:rgba(255,255,255,.3);gap:8px}
#footer-bar span{color:rgba(127,255,212,.65)}

#main{position:relative;z-index:10;display:flex;align-items:center;justify-content:center;
  height:100vh;padding:52px 16px 44px;gap:24px;flex-wrap:wrap}

#canvas-wrap{position:relative;flex-shrink:0}
#canvas{display:block;border-radius:16px;border:2px solid rgba(127,255,212,.25);
  box-shadow:0 0 40px rgba(127,255,212,.1),0 20px 60px rgba(0,0,0,.5)}

#score-overlay{position:absolute;top:12px;left:0;right:0;display:flex;justify-content:space-between;
  padding:0 16px;pointer-events:none}
.score-pill{background:rgba(0,0,0,.55);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12);
  border-radius:20px;padding:4px 14px;font-family:'Space Mono',monospace;font-size:.75rem;color:#7fffd4}

/* side panel */
#side-panel{display:flex;flex-direction:column;gap:14px;min-width:200px;max-width:260px}
.panel-card{background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.1);
  border-radius:16px;padding:16px 18px;backdrop-filter:blur(10px)}
.panel-card h3{font-size:.7rem;text-transform:uppercase;letter-spacing:2px;color:#7fffd4;
  margin-bottom:10px;font-weight:900}

/* pip camera */
#pip{position:fixed;bottom:44px;right:14px;z-index:200;width:110px;height:82px;
  border-radius:12px;overflow:hidden;border:2px solid rgba(127,255,212,.4);
  box-shadow:0 4px 20px rgba(0,0,0,.6);background:#000}
#pip video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
#pip-label{position:absolute;bottom:3px;left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,.65);color:#7fffd4;font-size:.5rem;font-weight:700;
  padding:1px 6px;border-radius:6px;white-space:nowrap;letter-spacing:.5px;text-transform:uppercase}

/* gesture indicator */
#gesture-indicator{display:flex;align-items:center;gap:8px;font-size:.82rem;color:rgba(255,255,255,.6)}
#gesture-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.2);
  border:2px solid rgba(255,255,255,.3);transition:all .15s;flex-shrink:0}
#gesture-dot.open{background:#7fffd4;border-color:#7fffd4;box-shadow:0 0 8px #7fffd4}
#gesture-dot.closed{background:#9370db;border-color:#9370db;box-shadow:0 0 8px #9370db}

/* loading bar */
#mp-bar-bg{width:100%;height:3px;background:rgba(255,255,255,.07);border-radius:2px;overflow:hidden;margin-top:8px}
#mp-bar{height:100%;width:0%;background:linear-gradient(90deg,#7fffd4,#9370db);transition:width .4s}
#mp-status{font-size:.6rem;color:rgba(255,255,255,.28);font-family:'Space Mono',monospace;text-align:center;margin-top:4px}

/* how to play */
.how-row{display:flex;align-items:center;gap:8px;font-size:.78rem;color:rgba(255,255,255,.6);margin-bottom:6px}
.how-icon{font-size:1.1rem;width:24px;text-align:center;flex-shrink:0}

/* about modal */
#about-modal{position:fixed;inset:0;z-index:9000;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.75);backdrop-filter:blur(16px)}
#about-modal.show{display:flex}
#about-card{background:linear-gradient(135deg,rgba(15,0,35,.98),rgba(50,0,110,.98));border:2px solid rgba(255,0,255,.5);border-radius:32px;padding:44px 52px;max-width:560px;width:92%;text-align:center;position:relative;box-shadow:0 0 60px rgba(180,0,255,.4);overflow-y:auto;max-height:90vh}
#about-close{position:absolute;top:14px;right:18px;background:none;border:none;color:rgba(255,255,255,.6);font-size:1.6rem;cursor:pointer}
#about-close:hover{color:#fff}
#about-avatar{width:90px;height:90px;border-radius:50%;object-fit:cover;border:3px solid rgba(255,0,255,.7);box-shadow:0 0 28px rgba(255,0,255,.5);margin-bottom:12px}
#about-name{font-size:1.6rem;font-weight:900;background:linear-gradient(45deg,#ff00ff,#fff,#cc88ff,#ff00ff);background-size:300% 300%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gText 2s ease infinite;margin-bottom:4px}
@keyframes gText{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
#about-handle{font-size:.82rem;color:rgba(255,150,255,.7);margin-bottom:12px;letter-spacing:1px}
#about-bio{font-size:.88rem;color:rgba(255,255,255,.8);margin-bottom:14px;line-height:1.6}
.about-section{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:12px 16px;margin-bottom:12px;text-align:left}
.about-section-title{font-size:.68rem;font-weight:900;color:rgba(255,100,255,.8);letter-spacing:2px;text-transform:uppercase;margin-bottom:6px}
.about-section p{font-size:.82rem;color:rgba(255,255,255,.75);line-height:1.5}
.about-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.about-tag{background:rgba(255,0,255,.15);border:1px solid rgba(255,0,255,.3);border-radius:20px;padding:2px 9px;font-size:.72rem;color:rgba(255,200,255,.9)}
.about-links{display:flex;gap:10px;justify-content:center;margin-top:6px}
.about-link{display:flex;align-items:center;gap:6px;padding:9px 20px;background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.2);border-radius:50px;color:#fff;text-decoration:none;font-size:.82rem;font-weight:700;transition:all .3s}
.about-link:hover{background:rgba(255,0,255,.25);border-color:rgba(255,0,255,.6);transform:translateY(-3px)}

@media(max-width:700px){
  #main{flex-direction:column;gap:10px;padding:52px 8px 44px}
  #side-panel{flex-direction:row;flex-wrap:wrap;min-width:unset;max-width:100%;width:100%}
  .panel-card{flex:1;min-width:140px;padding:10px 12px}
  #canvas{width:100% !important;height:auto !important}
}