/* ThirstyBear — Under Construction (pure HTML/CSS, small inline JS only for year) */
:root{
  --bg0: #05070b;
  --bg1: #070a12;
  --card: rgba(255,255,255,0.06);
  --card2: rgba(255,255,255,0.09);
  --stroke: rgba(255,255,255,0.12);
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.70);
  --muted2: rgba(255,255,255,0.55);

  --c1: rgba(65, 245, 255, 0.95);
  --c2: rgba(140, 255, 180, 0.92);
  --c3: rgba(120, 160, 255, 0.90);
  --hot: rgba(255, 120, 210, 0.75);

  --r: 26px;
  --shadow: 0 18px 70px rgba(0,0,0,0.62);
  --shadow2: 0 12px 34px rgba(0,0,0,0.55);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: "Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: radial-gradient(1200px 900px at 20% 10%, rgba(65,245,255,0.10), transparent 60%),
              radial-gradient(900px 700px at 90% 20%, rgba(140,255,180,0.08), transparent 55%),
              radial-gradient(1000px 800px at 70% 90%, rgba(120,160,255,0.09), transparent 60%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
}

.bg{ position:fixed; inset:0; pointer-events:none; z-index:0; }
.aurora{
  position:absolute; inset:-30%;
  background:
    radial-gradient(closest-side at 25% 35%, rgba(65,245,255,0.22), transparent 55%),
    radial-gradient(closest-side at 70% 30%, rgba(140,255,180,0.18), transparent 58%),
    radial-gradient(closest-side at 60% 75%, rgba(120,160,255,0.18), transparent 60%),
    radial-gradient(closest-side at 35% 80%, rgba(255,120,210,0.12), transparent 65%);
  filter: blur(30px) saturate(120%);
  transform: translateZ(0);
  animation: aurora 12s ease-in-out infinite alternate;
  opacity: 0.95;
}
@keyframes aurora{
  0%{ transform: translate3d(-2%, -1%, 0) scale(1.02) rotate(-2deg); }
  100%{ transform: translate3d(2%, 1%, 0) scale(1.06) rotate(2deg); }
}

.grid{
  position:absolute; inset:0;
  background:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 70px 70px;
  opacity:0.14;
  mask-image: radial-gradient(closest-side at 50% 45%, rgba(0,0,0,0.8), transparent 80%);
  transform: perspective(900px) rotateX(60deg) translateY(12%);
  filter: blur(0.2px);
}

.noise{
  position:absolute; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  opacity:0.09;
  mix-blend-mode: overlay;
}

.vignette{
  position:absolute; inset:-2px;
  background: radial-gradient(closest-side at 50% 40%, transparent 52%, rgba(0,0,0,0.70) 100%);
  opacity:0.95;
}

.droplets{
  position:absolute; inset:0;
  overflow:hidden;
  opacity:0.9;
}
.droplets span{
  position:absolute;
  top:-10vh;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.85), rgba(65,245,255,0.35) 45%, rgba(120,160,255,0.10) 70%, transparent 75%);
  filter: blur(0.2px);
  animation: drop 7s linear infinite;
  box-shadow: 0 0 18px rgba(65,245,255,0.25);
}
.droplets span:nth-child(3n){ width: 14px; height: 14px; opacity: 0.85; }
.droplets span:nth-child(4n){ width: 8px; height: 8px; opacity: 0.65; }
.droplets span:nth-child(1){ left:5%;  animation-duration:8.6s; animation-delay:-1.2s; }
.droplets span:nth-child(2){ left:12%; animation-duration:7.2s; animation-delay:-3.4s; }
.droplets span:nth-child(3){ left:18%; animation-duration:9.4s; animation-delay:-6.1s; }
.droplets span:nth-child(4){ left:26%; animation-duration:6.8s; animation-delay:-2.6s; }
.droplets span:nth-child(5){ left:32%; animation-duration:10.2s; animation-delay:-8.0s; }
.droplets span:nth-child(6){ left:40%; animation-duration:7.7s; animation-delay:-4.8s; }
.droplets span:nth-child(7){ left:48%; animation-duration:9.8s; animation-delay:-7.2s; }
.droplets span:nth-child(8){ left:56%; animation-duration:6.9s; animation-delay:-1.9s; }
.droplets span:nth-child(9){ left:63%; animation-duration:8.9s; animation-delay:-5.5s; }
.droplets span:nth-child(10){ left:71%; animation-duration:7.1s; animation-delay:-3.9s; }
.droplets span:nth-child(11){ left:78%; animation-duration:9.1s; animation-delay:-6.6s; }
.droplets span:nth-child(12){ left:84%; animation-duration:6.6s; animation-delay:-2.2s; }
.droplets span:nth-child(13){ left:90%; animation-duration:10.5s; animation-delay:-8.7s; }
.droplets span:nth-child(14){ left:94%; animation-duration:7.8s; animation-delay:-4.2s; }
.droplets span:nth-child(15){ left:52%; animation-duration:11.0s; animation-delay:-9.4s; }

@keyframes drop{
  0%{ transform: translateY(-12vh) translateX(0) scale(0.9); opacity: 0; }
  10%{ opacity: 0.9; }
  70%{ opacity: 0.9; }
  100%{ transform: translateY(120vh) translateX(18px) scale(1.05); opacity: 0; }
}

.wrap{
  position:relative;
  z-index:1;
  min-height:100%;
  display:grid;
  place-items:center;
  padding: clamp(18px, 4vw, 44px);
}

.card{
  width:min(1120px, 100%);
  border-radius: var(--r);
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.05));
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  overflow:hidden;
  position:relative;
}
.card::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(620px 240px at 10% 10%, rgba(65,245,255,0.18), transparent 60%),
    radial-gradient(520px 220px at 92% 14%, rgba(140,255,180,0.14), transparent 62%),
    radial-gradient(700px 260px at 70% 95%, rgba(120,160,255,0.16), transparent 65%);
  opacity:0.9;
  pointer-events:none;
}
.card::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  transform: translateX(-120%);
  animation: scan 6.5s ease-in-out infinite;
  pointer-events:none;
  opacity:0.75;
}
@keyframes scan{
  0%, 30%{ transform: translateX(-120%); opacity:0; }
  55%{ opacity:0.85; }
  100%{ transform: translateX(120%); opacity:0; }
}

.top{
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 16px;
  padding: 22px 24px 14px;
}
.brand{ display:flex; align-items:center; gap: 12px; }
.logo{
  width:42px; height:42px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  position:relative;
  overflow:hidden;
  box-shadow: var(--shadow2);
}
.logo::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(circle at 30% 30%, rgba(65,245,255,0.55), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(140,255,180,0.35), transparent 60%);
  filter: blur(10px);
  opacity:0.9;
}
.logoDot{
  position:absolute;
  width:8px; height:8px; border-radius:50%;
  background: rgba(255,255,255,0.9);
  top: 12px; left: 12px;
  box-shadow:
    0 0 12px rgba(65,245,255,0.55),
    0 0 22px rgba(65,245,255,0.25);
  animation: dot 2.6s ease-in-out infinite;
}
.logoDot:nth-child(2){
  top: 19px; left: 19px;
  background: rgba(140,255,180,0.95);
  box-shadow:
    0 0 12px rgba(140,255,180,0.55),
    0 0 22px rgba(140,255,180,0.25);
  animation-delay: .12s;
}
.logoDot:nth-child(3){
  top: 10px; left: 24px;
  background: rgba(120,160,255,0.95);
  box-shadow:
    0 0 12px rgba(120,160,255,0.55),
    0 0 22px rgba(120,160,255,0.25);
  animation-delay: .22s;
}
@keyframes dot{
  0%,100%{ transform: translateY(0) scale(1); opacity: 0.95; }
  50%{ transform: translateY(2px) scale(1.08); opacity: 0.8; }
}
.name{
  font-weight: 700;
  letter-spacing: 0.2px;
  font-size: 18px;
}
.tag{
  color: var(--muted2);
  font-weight: 500;
  font-size: 13px;
  margin-top: 2px;
}

.status{
  display:flex; align-items:center; gap:10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.22);
  box-shadow: 0 10px 30px rgba(0,0,0,0.32);
}
.pulse{
  width:10px; height:10px; border-radius:50%;
  background: var(--c1);
  box-shadow: 0 0 0 0 rgba(65,245,255,0.55), 0 0 18px rgba(65,245,255,0.55);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{
  0%{ box-shadow: 0 0 0 0 rgba(65,245,255,0.55), 0 0 18px rgba(65,245,255,0.55); transform: scale(0.95); }
  70%{ box-shadow: 0 0 0 14px rgba(65,245,255,0.00), 0 0 24px rgba(65,245,255,0.35); transform: scale(1); }
  100%{ box-shadow: 0 0 0 0 rgba(65,245,255,0.00), 0 0 18px rgba(65,245,255,0.22); transform: scale(0.95); }
}
.statusText{ font-weight: 600; color: rgba(255,255,255,0.86); }

.content{
  position:relative;
  display:grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 24px;
  padding: 12px 24px 24px;
}
.left{ padding: 10px 4px 6px; }
.right{ display:grid; place-items:center; padding: 8px 2px 0; }

h1{
  margin: 6px 0 10px;
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.6px;
}
.shine{
  position:relative;
  display:inline-block;
  background: linear-gradient(90deg, rgba(255,255,255,0.92), rgba(65,245,255,0.90), rgba(140,255,180,0.92), rgba(255,255,255,0.92));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}
.shine::after{
  content:"";
  position:absolute; inset:-8px -10px;
  background: radial-gradient(closest-side at 40% 50%, rgba(65,245,255,0.18), transparent 70%);
  filter: blur(14px);
  z-index:-1;
  opacity:0.8;
}
.lead{
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
}
.lead strong{
  color: rgba(255,255,255,0.92);
  text-shadow: 0 0 18px rgba(65,245,255,0.25);
}

.chips{ display:flex; flex-wrap:wrap; gap: 10px; margin: 12px 0 16px; }
.chip{
  font-size: 13px;
  color: rgba(255,255,255,0.82);
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.22);
  box-shadow: 0 8px 24px rgba(0,0,0,0.28);
  backdrop-filter: blur(10px);
  transform: translateZ(0);
}
.chip:hover{
  border-color: rgba(65,245,255,0.30);
  box-shadow: 0 14px 34px rgba(0,0,0,0.35);
}

.divider{
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent);
  margin: 16px 0 14px;
  opacity:0.9;
}

.note{
  border-radius: calc(var(--r) - 10px);
  border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(180deg, rgba(0,0,0,0.22), rgba(0,0,0,0.12));
  padding: 14px 16px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.30);
}
.noteTitle{
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: -0.2px;
}
.note ul{
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
}
.note li{ margin: 6px 0; }

.hint{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px dashed rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.16);
  color: rgba(255,255,255,0.68);
  font-size: 13px;
  line-height: 1.4;
}
.kbd{
  display:inline-grid;
  place-items:center;
  width: 24px; height: 24px;
  border-radius: 8px;
  margin-right: 8px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.78);
  box-shadow: 0 10px 24px rgba(0,0,0,0.28);
}

/* bear box */
.bearBox{
  width:min(520px, 100%);
  margin:0;
  position:relative;
  display:grid;
  place-items:center;
  padding: 18px 18px 10px;
  border-radius: calc(var(--r) - 6px);
  border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(180deg, rgba(0,0,0,0.22), rgba(0,0,0,0.10));
  box-shadow: 0 14px 46px rgba(0,0,0,0.38);
  overflow:hidden;
}
.glowRing{
  position:absolute;
  width: 420px; height: 420px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(65,245,255,0.18), transparent 55%),
    radial-gradient(circle at 65% 70%, rgba(140,255,180,0.14), transparent 58%),
    radial-gradient(circle at 50% 50%, rgba(120,160,255,0.08), transparent 65%);
  filter: blur(6px);
  opacity:0.95;
  animation: ring 4.4s ease-in-out infinite alternate;
}
@keyframes ring{
  0%{ transform: scale(0.98) rotate(-1deg); opacity: 0.78; }
  100%{ transform: scale(1.03) rotate(1deg); opacity: 0.98; }
}
.bear{
  width: min(470px, 100%);
  height: auto;
  transform: translateZ(0);
}

/* SVG theming */
.shadow{ fill: rgba(0,0,0,0.38); filter: blur(6px); }
.ear, .head, .torso, .arm { fill: rgba(255,255,255,0.10); stroke: rgba(255,255,255,0.14); stroke-width: 2; }
.earInner{ fill: rgba(255,255,255,0.06); stroke: rgba(255,255,255,0.10); stroke-width: 2; }
.muzzle{ fill: rgba(0,0,0,0.18); stroke: rgba(255,255,255,0.12); stroke-width: 2; }
.nose{ fill: rgba(0,0,0,0.62); }
.eyeWhite{ fill: rgba(255,255,255,0.86); }
.pupil{ fill: rgba(0,0,0,0.78); }
.spec{ fill: rgba(255,255,255,0.88); opacity: 0.9; }
.lid{ fill: none; stroke: rgba(0,0,0,0.35); stroke-width: 3; stroke-linecap: round; }
.brow{ fill:none; stroke: rgba(255,255,255,0.26); stroke-width: 3; stroke-linecap: round; }
.mouthLine{ fill:none; stroke: rgba(0,0,0,0.55); stroke-width: 4; stroke-linecap: round; }
.tongue{ fill: rgba(255,120,180,0.85); }
.tongueShade{ fill:none; stroke: rgba(0,0,0,0.18); stroke-width: 3; stroke-linecap: round; opacity: 0.55; }
.drool{ fill:none; stroke: rgba(120,255,255,0.68); stroke-width: 4; stroke-linecap: round; opacity: 0.9; }
.droolDot{ fill: rgba(120,255,255,0.70); opacity: 0.92; }
.belly{ fill: rgba(255,255,255,0.06); stroke: rgba(255,255,255,0.10); stroke-width: 2; }

.blush{ fill: url(#cheek); opacity: 0.75; }

.bottleCap{ fill: rgba(255,255,255,0.12); stroke: rgba(255,255,255,0.16); stroke-width: 2; }
.bottleBody{ fill: url(#bottle); stroke: rgba(65,245,255,0.28); stroke-width: 2.2; }
.waterLine{ fill:none; stroke: rgba(65,245,255,0.35); stroke-width: 3; stroke-linecap: round; opacity: 0.75; }
.bubble{ fill: rgba(255,255,255,0.60); opacity: 0.55; }

.aura .blob{
  fill: rgba(65,245,255,0.08);
  filter: blur(0.5px);
  opacity: 0.9;
}
.aura .blob:nth-child(2){ fill: rgba(140,255,180,0.07); }
.aura .blob:nth-child(3){ fill: rgba(120,160,255,0.08); }

/* motion */
.breathe{ transform-origin: 50% 72%; animation: breathe 3.2s ease-in-out infinite; }
@keyframes breathe{
  0%,100%{ transform: translateY(0) scale(1); }
  50%{ transform: translateY(2.5px) scale(1.01); }
}
.eyes .eyeGroup{ transform-origin: center; }
.eyes{ animation: blink 5.8s infinite; transform-origin: 50% 50%; }
@keyframes blink{
  0%, 92%, 100%{ transform: scaleY(1); }
  94%{ transform: scaleY(0.08); }
  96%{ transform: scaleY(1); }
}
.bottleGroup{ transform-origin: 66% 66%; animation: sip 3.6s ease-in-out infinite; }
@keyframes sip{
  0%,100%{ transform: rotate(-1.2deg) translateY(0); }
  50%{ transform: rotate(1.4deg) translateY(-1.8px); }
}
.droolDot{ animation: droplet 2.8s ease-in-out infinite; transform-origin: center; }
@keyframes droplet{
  0%, 72%, 100%{ transform: translateY(0) scale(1); opacity: 0.90; }
  76%{ transform: translateY(10px) scale(1.06); opacity: 0.30; }
  80%{ transform: translateY(0) scale(1); opacity: 0.90; }
}

.caption{
  width:100%;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 10px 2px;
  color: rgba(255,255,255,0.70);
  font-size: 13px;
  justify-content:center;
}
.captionDot{
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(140,255,180,0.90);
  box-shadow: 0 0 18px rgba(140,255,180,0.55);
}

.foot{
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 12px;
  padding: 14px 24px 18px;
  border-top: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.10);
}
.mini{ color: rgba(255,255,255,0.62); font-size: 13px; }
.sep{ color: rgba(255,255,255,0.28); }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; opacity: 0.85; }

/* responsive */
@media (max-width: 980px){
  .content{ grid-template-columns: 1fr; }
  .right{ padding-top: 6px; }
  .top{ flex-direction: column; align-items: flex-start; }
  .status{ align-self: flex-start; }
}

@media (prefers-reduced-motion: reduce){
  .aurora, .card::after, .droplets span, .breathe, .bottleGroup, .eyes, .droolDot, .glowRing, .logoDot{
    animation: none !important;
  }
}

/* light mode support */
@media (prefers-color-scheme: light){
  body{
    color: rgba(0,0,0,0.88);
    background: radial-gradient(1200px 900px at 20% 10%, rgba(65,245,255,0.20), transparent 60%),
                radial-gradient(900px 700px at 90% 20%, rgba(140,255,180,0.18), transparent 55%),
                radial-gradient(1000px 800px at 70% 90%, rgba(120,160,255,0.20), transparent 60%),
                linear-gradient(180deg, #f7fbff, #eef4ff);
  }
  .card{
    background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.60));
    border-color: rgba(0,0,0,0.08);
  }
  .status, .chip, .note, .bearBox, .hint{
    background: rgba(255,255,255,0.70);
    border-color: rgba(0,0,0,0.08);
  }
  .grid{ opacity:0.10; }
  .vignette{ opacity:0.55; }
  .mini{ color: rgba(0,0,0,0.62); }
  .lead{ color: rgba(0,0,0,0.70); }
  .tag{ color: rgba(0,0,0,0.60); }
}