@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:fixed;inset:0;z-index:10;display:flex;align-items:stretch;padding-top:44px;padding-bottom:32px}

/* game canvas fills the space */
#game{display:block;width:100%;height:100%}

/* score */
#score{position:fixed;top:52px;right:20px;z-index:200;
  font-family:'Space Mono',monospace;font-size:1.4rem;font-weight:900;
  color:#7fffd4;text-shadow:0 0 12px rgba(127,255,212,.6)}

/* perfect */
#perfect{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  font-family:'Space Mono',monospace;font-size:1.4rem;font-weight:900;
  color:#ffd23c;text-shadow:0 0 16px #ffd23c;opacity:0;transition:opacity .4s;
  pointer-events:none;z-index:300}

/* game over screen */
#game-over-screen{
  position:fixed;inset:0;z-index:500;
  display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.75);backdrop-filter:blur(18px);
}
#game-over-screen.show{display:flex}
#go-card{
  background:linear-gradient(135deg,rgba(10,0,25,.97),rgba(40,0,80,.97));
  border:2px solid rgba(255,80,80,.5);border-radius:28px;
  padding:36px 44px;max-width:340px;width:88%;text-align:center;
  box-shadow:0 0 60px rgba(255,50,50,.35),0 20px 60px rgba(0,0,0,.6);
  animation:goIn .45s cubic-bezier(.175,.885,.32,1.275) both;
}
@keyframes goIn{from{opacity:0;transform:scale(.6) translateY(40px)}to{opacity:1;transform:scale(1) translateY(0)}}
#go-emoji{font-size:3.2rem;margin-bottom:8px;animation:goShake .5s ease .45s both}
@keyframes goShake{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}
#go-title{
  font-family:'Space Mono',monospace;font-size:1.8rem;font-weight:900;
  background:linear-gradient(45deg,#ff6b6b,#ff3232,#ff9999);
  background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;animation:gText 2s ease infinite;margin-bottom:16px;
}
#go-score-row,#go-best-row{
  font-size:.95rem;color:rgba(255,255,255,.7);margin-bottom:6px;
}
#go-score,#go-best{
  font-family:'Space Mono',monospace;font-size:1.1rem;font-weight:900;color:#7fffd4;
}
#go-btns{display:flex;gap:10px;justify-content:center;margin-top:20px;flex-wrap:wrap}
.go-btn{
  padding:10px 22px;border-radius:50px;font-size:.85rem;font-weight:700;
  font-family:'Rubik',sans-serif;cursor:pointer;text-decoration:none;
  transition:all .2s;border:none;display:inline-flex;align-items:center;gap:6px;
}
.go-btn-primary{
  background:linear-gradient(135deg,#7fffd4,#00c896);color:#000;
  box-shadow:0 4px 18px rgba(127,255,212,.35);
}
.go-btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(127,255,212,.5)}
.go-btn-secondary{
  background:rgba(255,255,255,.1);color:#fff;
  border:1.5px solid rgba(255,255,255,.2);
}
.go-btn-secondary:hover{background:rgba(255,255,255,.18);transform:translateY(-2px)}

/* pip camera */
#pip{position:fixed;bottom:44px;right:14px;z-index:200;width:100px;height:75px;
  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 badge */
#gesture-badge{position:fixed;bottom:44px;left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,.7);border:1.5px solid rgba(127,255,212,.4);border-radius:50px;
  padding:5px 16px;font-size:.75rem;color:#7fffd4;pointer-events:none;
  opacity:0;transition:opacity .3s;white-space:nowrap;z-index:300}
#gesture-badge.show{opacity:1}

/* stretch ring */
#stretch-ring-wrap{position:fixed;bottom:130px;left:50%;transform:translateX(-50%);
  z-index:300;width:64px;height:64px;opacity:0;transition:opacity .2s;pointer-events:none}
#stretch-ring-wrap.show{opacity:1}
#stretch-ring-svg{transform:rotate(-90deg);width:64px;height:64px}
#stretch-ring-bg{fill:none;stroke:rgba(255,255,255,.1);stroke-width:6}
#stretch-ring-fill{fill:none;stroke:#7fffd4;stroke-width:6;stroke-linecap:round;
  stroke-dasharray:283;stroke-dashoffset:283;transition:stroke-dashoffset .05s linear;
  filter:drop-shadow(0 0 6px #7fffd4)}
#stretch-ring-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1.4rem}

/* 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)}