:root{
  --bg:#0d0d0f;
  --bg-soft:#151517;
  --ink:#f2f2f0;
  --muted:#8a8a90;
  --lime:#d4ff3d;
  --pink:#ff3d7a;
  --line:#26262a;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 20px;
}
@media (prefers-reduced-motion: no-preference){
  .dot{animation:pulse 1.6s ease-in-out infinite;}
  .card, .row{animation:rise .5s cubic-bezier(.2,.8,.2,1) both;}
  .links > *:nth-child(1){animation-delay:.05s;}
  .links > *:nth-child(2){animation-delay:.12s;}
  .links > *:nth-child(3){animation-delay:.19s;}
}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}
@keyframes rise{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

.avatar{
  width:64px;
  height:64px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid var(--line);
  display:block;
  flex:none;
}

.wrap{width:100%;max-width:420px;}

.header{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:18px;
}

.live-tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:4px;
}
.dot{width:7px;height:7px;border-radius:50%;background:var(--lime);flex:none;}

h1{
  font-family:'Archivo Black','Inter',sans-serif;
  font-size:clamp(32px,10vw,48px);
  line-height:.92;
  margin:0;
  letter-spacing:-.02em;
  color:var(--ink);
}
h1 span{color:var(--lime);}

.tagline{
  color:var(--muted);
  font-size:14px;
  margin:0 0 20px;
}

.links{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:13px 20px;
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:14px;
  text-decoration:none;
  color:var(--ink);
  transition:border-color .15s ease, transform .15s ease, background .15s ease;
}
.card:hover{
  border-color:var(--lime);
  transform:translateY(-2px);
}
.card:active{transform:translateY(0);}
.card:focus-visible{
  outline:2px solid var(--lime);
  outline-offset:2px;
}

.card .left{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.icon{
  width:22px;
  height:22px;
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--ink);
}
.icon svg{
  width:100%;
  height:100%;
  fill:currentColor;
}
.icon.emoji{
  font-size:19px;
  line-height:1;
}
.icon.brand-waze{color:#33CCFF;}
.icon.brand-instagram{color:#FF0069;}
.icon.brand-twitch{color:#9146FF;}
.icon.stroke svg{fill:none;stroke:currentColor;}

.card .label{
  font-weight:600;
  font-size:16px;
}
.card .sub{
  display:block;
  font-weight:400;
  font-size:12.5px;
  color:var(--muted);
  margin-top:2px;
}
.arrow{
  color:var(--muted);
  font-size:18px;
  transition:transform .15s ease, color .15s ease;
}
.card:hover .arrow{
  color:var(--lime);
  transform:translateX(3px);
}

.waze .arrow{color:var(--muted);}
.waze:hover{border-color:var(--pink);}
.waze:hover .arrow{color:var(--pink);}

.shout{
  font-weight:800;
  color:var(--pink) !important;
  letter-spacing:.02em;
}

.circles{
  display:flex;
  gap:20px;
  margin:0 0 16px;
}
.circle{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  text-decoration:none;
  color:var(--ink);
  width:64px;
}
.circle-icon{
  width:60px;
  height:60px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bg-soft);
  border:2px solid var(--line);
  transition:border-color .15s ease, transform .15s ease;
}
.circle-icon svg{
  width:26px;
  height:26px;
  fill:currentColor;
}
.circle-icon.stroke svg{
  fill:none;
  stroke:currentColor;
}
.circle:hover .circle-icon{
  transform:translateY(-2px);
}
.circle-icon.brand-instagram{color:#FF0069;}
.circle:hover .circle-icon.brand-instagram{border-color:#FF0069;}
.circle-icon.brand-twitch{color:#9146FF;}
.circle:hover .circle-icon.brand-twitch{border-color:#9146FF;}
.circle-label{
  font-size:12px;
  font-weight:600;
  color:var(--muted);
}
.circle:hover .circle-label{color:var(--ink);}

.sound-toggle{
  position:fixed;
  bottom:16px;
  right:16px;
  width:42px;
  height:42px;
  border-radius:50%;
  background:var(--bg-soft);
  border:1px solid var(--line);
  color:var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  cursor:pointer;
  z-index:10;
  transition:border-color .15s ease, transform .15s ease;
}
.sound-toggle:hover{
  border-color:var(--lime);
  transform:translateY(-2px);
}

.sound-tooltip{
  position:fixed;
  bottom:66px;
  right:16px;
  max-width:190px;
  background:var(--bg-soft);
  border:1px solid var(--line);
  color:var(--ink);
  font-size:12.5px;
  line-height:1.4;
  padding:9px 12px;
  border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,.45);
  z-index:10;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .25s ease, transform .25s ease;
  pointer-events:none;
}
.sound-tooltip.show{
  opacity:1;
  transform:translateY(0);
}
.sound-tooltip::after{
  content:"";
  position:absolute;
  bottom:-6px;
  right:18px;
  width:11px;
  height:11px;
  background:var(--bg-soft);
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  transform:rotate(45deg);
}

footer{
  margin-top:24px;
  text-align:center;
  font-size:11.5px;
  color:var(--muted);
  letter-spacing:.04em;
}

@media (max-height:700px){
  body{padding:16px 20px;}
  .header{margin-bottom:12px;}
  .tagline{margin-bottom:14px;}
  .links{gap:8px;}
  .card{padding:10px 16px;}
  footer{margin-top:14px;}
}