/* Tap To Chill — layout + UI */
:root{
  --ttc-ink:#f4f6ff;
  --ttc-soft:rgba(244,246,255,.62);
}

*{box-sizing:border-box;}
html,body{height:100%;margin:0;padding:0;}
html,body{
  overflow:hidden;
  overscroll-behavior:none;
  background:#11131c;
}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Nunito",system-ui,sans-serif;
  color:var(--ttc-ink);
  width:100%;height:100%;
  position:fixed;inset:0;
  transition:background .9s ease;
  -webkit-tap-highlight-color:transparent;
  user-select:none;-webkit-user-select:none;
}

/* full-bleed canvas */
#ttc-canvas{
  position:fixed;inset:0;
  width:100vw;height:100vh;
  display:block;
  touch-action:none;
  z-index:1;
  cursor:pointer;
}

/* intro overlay (the text that fades) */
#ttc-intro{
  position:fixed;inset:0;
  z-index:2;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;
  padding:24px;
  pointer-events:none;
  transition:opacity 1.4s ease, transform 1.4s ease;
}
#ttc-intro.ttc-hide{opacity:0;transform:scale(1.04);}

#ttc-intro h1{
  font-size:clamp(2.4rem,9vw,5.5rem);
  font-weight:800;
  letter-spacing:-.02em;
  margin:0 0 .35em;
  line-height:1;
  text-shadow:0 4px 40px rgba(0,0,0,.45);
}
#ttc-intro h1 .wave{
  background:linear-gradient(90deg,#ff8a4c,#ffd24c,#5ed66b,#4cc8ff,#a685e2,#ff6bd6);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
#ttc-intro p{
  font-size:clamp(1rem,3.4vw,1.35rem);
  max-width:34ch;
  margin:.2em auto;
  color:var(--ttc-soft);
  line-height:1.5;
}
#ttc-intro .ttc-hint{
  margin-top:1.4em;
  font-size:.95rem;
  color:var(--ttc-soft);
  display:inline-flex;align-items:center;gap:.5em;
  animation:ttc-pulse 2.2s ease-in-out infinite;
}
@keyframes ttc-pulse{0%,100%{opacity:.55;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}

/* top corner UI */
.ttc-top{
  position:fixed;top:0;left:0;right:0;
  z-index:3;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;
  pointer-events:none;
}
.ttc-top > *{pointer-events:auto;}

.ttc-brand{
  font-weight:800;font-size:1.05rem;
  letter-spacing:-.01em;
  opacity:.9;
  text-decoration:none;color:var(--ttc-ink);
}
.ttc-brand small{font-weight:600;opacity:.55;}

.ttc-actions{display:flex;align-items:center;gap:10px;}

.ttc-btn{
  appearance:none;border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  color:var(--ttc-ink);
  border-radius:999px;
  padding:8px 14px;
  font-size:.9rem;font-weight:700;
  cursor:pointer;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background .2s ease,transform .12s ease,border-color .2s ease;
  display:inline-flex;align-items:center;gap:7px;
  text-decoration:none;
}
.ttc-btn:hover{background:rgba(255,255,255,.13);}
.ttc-btn:active{transform:scale(.95);}
.ttc-btn:focus-visible{outline:2px solid #ffd24c;outline-offset:2px;}

#ttc-mute{width:40px;height:40px;padding:0;justify-content:center;}
#ttc-mute.muted{opacity:.55;}

/* bottom vibe label */
#ttc-vibe-wrap{
  position:fixed;left:0;right:0;bottom:0;
  z-index:3;
  display:flex;justify-content:center;
  padding:0 0 18px;
  pointer-events:none;
}
#ttc-vibe-pill{
  pointer-events:auto;
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 16px;border-radius:999px;
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-size:.85rem;font-weight:700;
  color:var(--ttc-soft);
  transition:opacity 1s ease;
}
#ttc-vibe-pill .dot{width:8px;height:8px;border-radius:50%;
  background:linear-gradient(90deg,#ffd24c,#ff6bd6);}
#ttc-vibe{color:var(--ttc-ink);}
body.ttc-started #ttc-vibe-pill{opacity:.45;}

/* WordPress auth modals (kept from original concept) */
.ttc-modal-backdrop{
  position:fixed;inset:0;z-index:40;
  background:rgba(8,10,18,.7);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;padding:20px;
}
.ttc-modal-backdrop.open{display:flex;}
.ttc-modal{
  width:100%;max-width:380px;
  background:#171b27;
  border:1px solid rgba(255,255,255,.1);
  border-radius:18px;
  padding:26px 24px;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.ttc-modal h2{margin:0 0 6px;font-size:1.4rem;}
.ttc-modal p{margin:0 0 16px;color:var(--ttc-soft);font-size:.92rem;}
.ttc-modal label{display:block;font-size:.82rem;margin:12px 0 6px;color:var(--ttc-soft);}
.ttc-modal input{
  width:100%;padding:11px 13px;border-radius:11px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);color:var(--ttc-ink);
  font-size:.95rem;
}
.ttc-modal input:focus{outline:2px solid #ffd24c;outline-offset:1px;}
.ttc-modal .ttc-submit{
  width:100%;margin-top:18px;padding:12px;border:none;border-radius:11px;
  background:linear-gradient(90deg,#ffb24c,#ff6bd6);
  color:#1b1020;font-weight:800;font-size:1rem;cursor:pointer;
}
.ttc-modal .ttc-submit:active{transform:scale(.98);}
.ttc-modal .ttc-alt{margin-top:14px;font-size:.85rem;text-align:center;color:var(--ttc-soft);}
.ttc-modal .ttc-alt a{color:#ffd24c;text-decoration:none;cursor:pointer;}
.ttc-modal .ttc-close{
  position:absolute;top:14px;right:16px;font-size:1.4rem;line-height:1;
  background:none;border:none;color:var(--ttc-soft);cursor:pointer;
}
.ttc-modal-inner{position:relative;}

@media (max-width:480px){
  .ttc-top{padding:12px 12px;}
  .ttc-brand{font-size:.95rem;}
  .ttc-btn{padding:7px 11px;font-size:.82rem;}
}

@media (prefers-reduced-motion:reduce){
  #ttc-intro .ttc-hint{animation:none;}
  body{transition:none;}
}